.tutorials-page { color: #203a64; background: #f7f6fa; }
.tutorials-hero { padding: 56px 0; background: #21163d; color: #fff; }
.tutorials-hero h1 { color: #fff; font-size: clamp(36px, 5vw, 60px); }
.tutorials-hero p, .tutorials-hero a { color: #eee7fa; }
.tutorials-label { margin-top: 32px; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; }
.tutorials-body { padding-top: 48px; padding-bottom: 64px; }
.tutorials-heading { margin-bottom: 28px; }
.tutorials-chapter, .tutorials-player { background: #fff; border: 1px solid #e3ddec; border-radius: 16px; padding: 28px; margin-bottom: 24px; }
.tutorials-player { scroll-margin-top: 120px; }
.tutorials-player h2 { margin: 24px 0; }
.tutorials-player > a { color: #34205c; text-decoration: underline; }
.tutorials-lessons { list-style: none; padding: 0; margin: 0; }
.tutorials-lessons li + li { border-top: 1px solid #e3ddec; }
.tutorials-unavailable { display: block; padding: 18px 12px; }
.tutorials-lessons a { display: flex; justify-content: space-between; gap: 24px; padding: 18px 12px; color: #203a64; }
.tutorials-lessons a:hover, .tutorials-lessons a[aria-current] { background: #f0ebf8; }
.tutorials-lessons small { flex-shrink: 0; color: #594477; }
.tutorials-page a:focus-visible { outline: 3px solid #ffb800; outline-offset: 4px; }
.tutorials-video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.tutorials-content { margin-top: 24px; overflow-wrap: anywhere; }
.tutorials-content img, .tutorials-content video, .tutorials-content iframe { max-width: 100%; }
.tutorials-source { display: inline-block; margin-top: 16px; color: #34205c; text-decoration: underline; }
.tutorials-button { display: inline-block; background: #ffb800; color: #21163d; padding: 14px 20px; border-radius: 8px; }
@media (max-width: 575px) {
    .tutorials-chapter, .tutorials-player { padding: 20px 16px; }
    .tutorials-lessons a { flex-direction: column; gap: 6px; }
    .tutorials-hero { padding: 36px 0; }
}