<svg xmlns="http://www.w3.org/2000/svg" width="390" height="844" viewBox="0 0 390 844">
  <defs>
    <linearGradient id="gVideo" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#0A2A4A"/><stop offset="100%" stop-color="#000810"/></linearGradient>
    <linearGradient id="gProg" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#00C8FF"/><stop offset="100%" stop-color="#7C3AED"/></linearGradient>
    <filter id="fs"><feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#000" flood-opacity="0.45"/></filter>
  </defs>
  <rect width="390" height="844" fill="#00060A"/>
  <!-- Status bar -->
  <text x="22" y="29" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="15" font-weight="600" dominant-baseline="middle">9:41</text>
  <rect x="308" y="22" width="3" height="7" rx="1.2" fill="white"/><rect x="313" y="20" width="3" height="9" rx="1.2" fill="white"/><rect x="318" y="18" width="3" height="11" rx="1.2" fill="white"/><rect x="323" y="16" width="3" height="13" rx="1.2" fill="white"/>
  <rect x="350" y="19" width="22" height="11" rx="3" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="1.2"/><rect x="373" y="22" width="2" height="5" rx="1" fill="rgba(255,255,255,0.4)"/><rect x="352" y="21" width="16" height="7" rx="1.5" fill="#00C8FF"/>
  <!-- Back + title -->
  <text x="22" y="60" fill="#00C8FF" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="20">&#x2039;</text>
  <text x="42" y="62" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="16" font-weight="700">UX Design Fundamentals</text>
  <text x="22" y="79" fill="#3A6A7A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="12">Chapter 5: Prototyping</text>
  <!-- Video player -->
  <rect x="0" y="92" width="390" height="220" fill="url(#gVideo)"/>
  <!-- Widescreen bars -->
  <rect x="0" y="92" width="390" height="16" fill="#000"/>
  <rect x="0" y="296" width="390" height="16" fill="#000"/>
  <!-- Play button -->
  <circle cx="195" cy="204" r="36" fill="rgba(0,200,255,0.15)"/>
  <circle cx="195" cy="204" r="24" fill="rgba(0,200,255,0.9)"/>
  <path d="M190 196 L190 212 L204 204 Z" fill="#00060A"/>
  <!-- Timeline -->
  <rect x="16" y="316" width="358" height="3" rx="1.5" fill="rgba(255,255,255,0.1)"/>
  <rect x="16" y="316" width="145" height="3" rx="1.5" fill="url(#gProg)"/>
  <circle cx="161" cy="317" r="6" fill="#00C8FF"/>
  <text x="16" y="334" fill="#3A6A7A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11">6:14</text>
  <text x="374" y="334" fill="#3A6A7A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11" text-anchor="end">18:30</text>
  <!-- Lesson title + notes -->
  <text x="22" y="362" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="18" font-weight="800">Lo-Fi Wireframing with Figma</text>
  <rect x="22" y="374" width="90" height="20" rx="10" fill="rgba(0,200,255,0.18)"/>
  <text x="67" y="388" fill="#00C8FF" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11" font-weight="700" text-anchor="middle" dominant-baseline="middle">Video · 18 min</text>
  <!-- Chapter list -->
  <text x="22" y="418" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="15" font-weight="700">Chapters</text>
  <!-- Chapter rows -->
  <rect x="16" y="430" width="358" height="52" rx="14" fill="#061220"/>
  <circle cx="38" cy="456" r="10" fill="#00D181"/>
  <text x="38" y="460" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="9" font-weight="700" text-anchor="middle" dominant-baseline="middle">&#x2713;</text>
  <text x="58" y="450" fill="rgba(255,255,255,0.5)" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="13">Intro to Prototyping</text>
  <text x="58" y="466" fill="#3A6A7A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11">12 min · Completed</text>
  <rect x="16" y="490" width="358" height="52" rx="14" fill="#061220"/>
  <circle cx="38" cy="516" r="10" fill="#00D181"/>
  <text x="38" y="520" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="9" font-weight="700" text-anchor="middle" dominant-baseline="middle">&#x2713;</text>
  <text x="58" y="510" fill="rgba(255,255,255,0.5)" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="13">User Flows &amp; Sitemaps</text>
  <text x="58" y="526" fill="#3A6A7A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11">15 min · Completed</text>
  <rect x="16" y="550" width="358" height="52" rx="14" fill="#0A2A4A" filter="url(#fs)"/>
  <circle cx="38" cy="576" r="10" fill="rgba(0,200,255,0.3)"/>
  <circle cx="38" cy="576" r="4" fill="#00C8FF"/>
  <text x="58" y="570" fill="white" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="13" font-weight="600">Lo-Fi Wireframing with Figma</text>
  <text x="58" y="586" fill="#00C8FF" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11">18 min · Playing now</text>
  <rect x="16" y="610" width="358" height="52" rx="14" fill="#061220"/>
  <circle cx="38" cy="636" r="10" fill="none" stroke="#2A4A5A" stroke-width="2"/>
  <text x="58" y="630" fill="#2A4A5A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="13">Hi-Fi Prototyping &amp; Interactions</text>
  <text x="58" y="646" fill="#2A4A5A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11">22 min · Locked</text>
  <rect x="16" y="670" width="358" height="52" rx="14" fill="#061220"/>
  <circle cx="38" cy="696" r="10" fill="none" stroke="#2A4A5A" stroke-width="2"/>
  <text x="58" y="690" fill="#2A4A5A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="13">Usability Testing</text>
  <text x="58" y="706" fill="#2A4A5A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="11">20 min · Locked</text>
  <!-- Tab bar: Learn active -->
  <rect x="0" y="762" width="390" height="82" fill="#000408"/>
  <line x1="0" y1="762" x2="390" y2="762" stroke="#0A1A2A" stroke-width="0.5"/>
  <path d="M42 800 L51 790 L60 800 L60 810 L42 810 Z" fill="none" stroke="#2A4A5A" stroke-width="2" stroke-linejoin="round"/>
  <rect x="46" y="802" width="10" height="8" rx="1" fill="#2A4A5A"/>
  <text x="51" y="822" fill="#2A4A5A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Home</text>
  <rect x="119" y="785" width="14" height="18" rx="2" fill="none" stroke="#00C8FF" stroke-width="2"/>
  <path d="M119 792 L133 792" stroke="#00C8FF" stroke-width="1.5" stroke-linecap="round"/>
  <path d="M119 798 L133 798" stroke="#00C8FF" stroke-width="1.5" stroke-linecap="round"/>
  <text x="126" y="822" fill="#00C8FF" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" font-weight="600" text-anchor="middle">Learn</text>
  <circle cx="195" cy="793" r="10" fill="none" stroke="#2A4A5A" stroke-width="2"/>
  <path d="M190 793 L194 797 L201 788" fill="none" stroke="#2A4A5A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  <text x="195" y="822" fill="#2A4A5A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Practice</text>
  <rect x="254" y="800" width="5" height="8" rx="1.5" fill="#2A4A5A"/>
  <rect x="261" y="794" width="5" height="14" rx="1.5" fill="#2A4A5A"/>
  <rect x="268" y="789" width="5" height="19" rx="1.5" fill="#2A4A5A"/>
  <text x="263" y="822" fill="#2A4A5A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Progress</text>
  <circle cx="341" cy="791" r="8" fill="none" stroke="#2A4A5A" stroke-width="2"/><circle cx="341" cy="788" r="3" fill="#2A4A5A"/>
  <path d="M333 799 Q341 795 349 799" fill="none" stroke="#2A4A5A" stroke-width="2" stroke-linecap="round"/>
  <text x="341" y="822" fill="#2A4A5A" font-family="-apple-system,BlinkMacSystemFont,sans-serif" font-size="10" text-anchor="middle">Profile</text>
  <rect x="148" y="836" width="94" height="4" rx="2" fill="rgba(255,255,255,0.22)"/>
</svg>
