.course-topic-page .topic-overview { margin-top: 14px; }
.topic-introduction { padding: 18px 20px; border: 3px solid var(--ink); background: var(--blue); color: white; }
.topic-introduction h2 { margin: 0 0 8px; font-size: 28px; }
.topic-introduction p { margin: 0; font-size: 18px; }
.topic-points { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 16px; }
.topic-point { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; width: 100%; aspect-ratio: 1; padding: 24px; border: 3px solid var(--ink); background: var(--teal); color: var(--ink); font: 900 32px/1.2 "Arial Black",Arial,Helvetica,sans-serif; text-align: center; }
.topic-point:nth-child(2) { background: var(--orange); }
.topic-point:nth-child(3) { background: var(--lime); }
.topic-point.lesson-launch { background: var(--yellow); }
.topic-point:disabled { cursor: default; opacity: 1; }
.lesson-launch:not(:disabled):is(:hover,:focus-visible) { background: var(--blue); color: white; }
.lesson-launch svg { width: 56px; height: 56px; }
.lesson-modal { position: fixed; inset: 16px 16px 16px calc(var(--sidebar-width) + 16px); width: auto; max-width: none; height: auto; max-height: none; margin: 0; padding: 16px; border: 3px solid var(--ink); background: white; color: var(--ink); }
.lesson-modal[open] { display: flex; flex-direction: column; gap: 12px; }
.lesson-modal::backdrop { background: rgb(16 18 35 / .35); }
.lesson-modal-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lesson-modal h2 { margin: 0; font-size: 24px; }
.lesson-modal .modal-close { min-height: 40px; padding: 7px 12px; border: 2px solid var(--ink); background: var(--pink); color: white; font-weight: 700; }
.lesson-player { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 0; overflow: hidden; }
.lesson-modal iframe { display: block; max-width: 100%; max-height: 100%; border: 0; background: white; }
@media(max-width: 600px) { .lesson-modal { inset: 8px 8px 8px calc(var(--sidebar-width) + 8px); padding: 8px; }.lesson-modal-heading { flex-wrap: wrap; }.lesson-modal h2 { font-size: 18px; } }