/* Course walkthrough video and its chapter dots (course-video.js). */
.course-video{position:relative;display:block;padding:0;aspect-ratio:9/16;overflow:hidden;border-radius:22px;border:1px solid #ffffffb3;background:#f5f3f0;box-shadow:0 12px 36px #302b2014}
.course-video video{display:block;width:100%;height:100%;object-fit:cover;cursor:pointer}
.course-video-loader{position:absolute;left:0;right:0;bottom:0;height:2px;overflow:hidden;opacity:0;transition:opacity .2s;pointer-events:none}
.course-video[data-loading] .course-video-loader{opacity:1}
.course-video-loader:before{content:'';position:absolute;top:0;bottom:0;left:0;width:38%;background:#111;animation:course-video-load 1.2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes course-video-load{from{transform:translateX(-100%)}to{transform:translateX(265%)}}
.course-video-toggle{position:absolute;right:12px;bottom:14px;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:#111111a6;color:#fff;cursor:pointer;transition:transform .2s cubic-bezier(.22,1,.36,1),background .2s}
.course-video-toggle:hover{background:#111}
.course-video-toggle:focus-visible{outline:2px solid #111;outline-offset:3px}
.course-video-toggle svg{width:18px;height:18px}
.course-video-toggle .icon-play,.course-video.is-paused .course-video-toggle .icon-pause{display:none}
.course-video.is-paused .course-video-toggle .icon-play{display:block}
/* Paused or waiting for a tap: a larger play button in the middle of the cover. */
.course-video.is-paused .course-video-toggle{right:calc(50% - 32px);bottom:calc(50% - 32px);width:64px;height:64px}
.course-video.is-paused .course-video-toggle svg{width:24px;height:24px}
@media(prefers-reduced-motion:reduce){.course-video-loader:before{animation:none;width:100%;opacity:.35}.course-video-toggle{transition:none}}
@media(max-width:800px){.course-video{border-radius:18px}}
/* Player column: the video card with its chapter dots underneath. */
.course-video-player{width:100%;max-width:320px;justify-self:center}
.course-video-chapters{display:flex;justify-content:center;align-items:center;margin-top:12px}
.course-video-chapter{display:grid;place-items:center;height:32px;padding:0 5px;border:0;background:none;cursor:pointer}
.course-video-chapter-track{display:block;width:8px;height:8px;border-radius:4px;overflow:hidden;background:#11111138;transition:width .5s cubic-bezier(.22,1,.36,1),background .2s}
.course-video-chapter:hover .course-video-chapter-track{background:#11111166}
.course-video-chapter.is-active .course-video-chapter-track{width:40px;background:#11111126}
.course-video-chapter-fill{display:block;width:100%;height:100%;background:#111;transform:scaleX(0);transform-origin:left}
.course-video-chapter:not(.is-active) .course-video-chapter-fill{visibility:hidden}
.course-video-chapter:focus-visible{outline:none}
.course-video-chapter:focus-visible .course-video-chapter-track{outline:2px solid #111;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.course-video-chapter-track{transition:none}}