.moodboard-course { background:radial-gradient(ellipse at 25% 0%,#17233265,transparent 48%),#0b0c10; }
.moodboard-course [hidden] { display:none!important; }
.course-main { max-width:1200px; padding:42px 30px 80px; margin:auto; }
.course-intro { max-width:850px; }
.course-eyebrow { margin:34px 0 16px; color:#91b5dc; font-size:11px; letter-spacing:1.8px; }
.course-intro h1 { margin-bottom:22px; font-size:clamp(38px,4.7vw,60px); line-height:1.24; letter-spacing:-1.8px; font-weight:650; }
.course-intro h1 span { color:#b8d4ed; }
.course-lead { max-width:760px; font-size:16px; line-height:1.95; color:#aab8c9; }
.course-facts { display:flex; gap:28px; align-items:center; flex-wrap:wrap; margin:24px 0 14px; font-size:12px; color:#8294a9; }
.course-facts strong { font-size:14px; font-weight:550; }
.course-intro .guide-byline { font-size:11px; }
.course-roadmap { display:flex; flex-wrap:wrap; gap:8px; margin:30px 0 35px; }
.course-roadmap a { display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid #293444; border-radius:7px; color:#bfccdc; text-decoration:none; font-size:11px; background:#111820; }
.course-roadmap a:hover { border-color:#749dc1; color:#fff; }
.course-roadmap a > span:first-child { color:#6f8ea9; font-size:10px; }
.course-roadmap a > span:last-child { color:#6f8ea9; margin-left:2px; }
.course-workspace { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:28px; align-items:start; }
.course-content { min-width:0; }
.course-stage { border:1px solid #2a3544; background:#111720; border-radius:14px; padding:25px; scroll-margin-top:22px; overflow:hidden; }
.course-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:27px; }
.course-toolbar > p { margin:0; font-size:11px; color:#8298af; }
.course-speed { display:flex; align-items:center; gap:9px; color:#91a0b1; font-size:11px; }
.course-speed select { font:inherit; color:#d0ddec; background:#1b2735; border:1px solid #34445a; border-radius:5px; padding:5px 7px; }
.course-chapter { font-size:10px; line-height:1.6; letter-spacing:.7px; color:#82a9cc; margin-bottom:9px; }
.course-chapter span { padding:0 7px; color:#536b80; }
.course-lesson { min-width:0; scroll-margin-top:24px; }
.course-lesson h2 { margin-bottom:10px; font-size:23px; line-height:1.5; letter-spacing:-.35px; }
.course-lesson h2:focus { outline:none; }
.course-summary { color:#9dadbe; font-size:13px; line-height:1.8; margin-bottom:20px; }
.course-media { margin:0 0 26px; }
.course-video-wrap { position:relative; aspect-ratio:var(--video-ratio); background:#05070a; border:1px solid #34404c; border-radius:9px; overflow:hidden; }
.course-video-wrap video { display:block; width:100%; height:100%; object-fit:contain; }
.course-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:8px; width:104px; height:86px; border:1px solid #ffffff4d; border-radius:13px; color:#fff; background:#0b1729db; backdrop-filter:blur(6px); cursor:pointer; font:inherit; font-size:11px; box-shadow:0 8px 30px #0005; }
.course-play > span:first-child { font-size:25px; margin-top:12px; }
.course-play:hover { background:#203b58ee; }
.course-media figcaption { display:flex; gap:12px; justify-content:space-between; margin:10px 0 0; color:#7f92a8; font-size:10px; line-height:1.7; }
.course-media figcaption span { text-align:right; color:#73869b; }
.course-instructions h3 { color:#e1e9f3; font-size:14px; margin-bottom:14px; }
.course-instructions ol { list-style:none; display:grid; gap:13px; padding:0; margin:0; }
.course-instructions li { display:grid; grid-template-columns:22px minmax(0,1fr); gap:11px; color:#adbccf; font-size:13px; line-height:1.85; }
.course-step-number { display:grid; place-items:center; width:21px; height:21px; margin-top:2px; border:1px solid #394a5f; border-radius:50%; color:#a9c9e7; font-size:10px; }
.course-practice { margin-top:24px; display:flex; gap:15px; padding:16px; border-radius:8px; background:#1b2b3a; border:1px solid #2c4358; }
.course-practice > span { color:#b2d3ed; font-size:11px; white-space:nowrap; line-height:1.9; }
.course-practice p { margin:0; color:#c2cfdd; font-size:12px; line-height:1.9; }
.course-note { font-size:11px; line-height:1.9; color:#7f92a8; margin:15px 0 0; }
.course-pagination { display:flex; gap:15px; align-items:center; justify-content:space-between; border-top:1px solid #293847; padding-top:20px; margin-top:25px; }
.course-pagination button { padding:9px 14px; border:1px solid #3a4d61; border-radius:7px; color:#d1e0f1; background:#1a2b3a; font:inherit; font-size:12px; cursor:pointer; }
.course-pagination button:hover:not(:disabled) { border-color:#8bb7de; background:#233c50; }
.course-pagination button:disabled { color:#536578; border-color:#293644; cursor:default; background:transparent; }
.course-pagination > span { color:#71879c; font-size:11px; font-variant-numeric:tabular-nums; }
.course-playback-status { color:#c7d2df; font-size:12px; margin:20px 0 0; }
.course-playback-status a { margin-left:8px; }
.course-sidebar { min-width:0; position:sticky; top:22px; }
.course-index { border:1px solid #253242; border-radius:12px; padding:18px 12px 10px; background:#0e141d; max-height:calc(100dvh - 44px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:#334b63 transparent; }
.course-index-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 7px 16px; border-bottom:1px solid #253242; }
.course-index-heading h2 { font-size:14px; font-weight:550; margin:0; }
.course-index-heading > span { color:#72859a; font-size:10px; }
.course-index-group { padding-top:18px; }
.course-index-group + .course-index-group { margin-top:12px; border-top:1px solid #293b4e; }
.course-index-group h3 { display:flex; align-items:center; gap:9px; min-height:36px; color:#e3edf8; font-size:13px; line-height:1.6; font-weight:650; padding:6px 8px; margin:0 0 8px; border:1px solid #2a3d51; border-radius:7px; background:#172331; }
.course-index-group h3 > span { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; min-width:25px; height:22px; padding:0 4px; color:#c0dcf5; background:#2b425a; border-radius:4px; font-size:10px; font-weight:700; font-variant-numeric:tabular-nums; }
.course-index-group a { display:grid; grid-template-columns:18px minmax(0,1fr) auto; gap:6px; align-items:start; text-decoration:none; padding:9px 8px; border-radius:6px; font-size:11px; line-height:1.7; color:#96a6b8; border:1px solid transparent; }
.course-index-group a:hover { color:#e2edfa; background:#172433; }
.course-index-group a[aria-current] { color:#e5f0fb; background:#20374b; border-color:#355570; }
.course-index-number { color:#5f7a92; font-variant-numeric:tabular-nums; font-size:10px; }
.course-index-group a[aria-current] .course-index-number { color:#b1d4f4; }
.course-index-group time { color:#667e95; font-size:10px; font-variant-numeric:tabular-nums; }
.course-index-finish { display:flex; justify-content:space-between; text-decoration:none; font-size:11px; padding:17px 8px 8px; color:#97b5ce; margin-top:15px; border-top:1px solid #253242; }
.course-finish { margin-top:58px; }
.course-finish h2,.course-faq h2 { font-size:24px; }
.course-finish ol { padding-left:20px; font-size:13px; display:grid; gap:15px; }
.course-finish p { font-size:13px; }
.course-faq { margin-top:40px; }
.course-faq summary { font-size:14px; }
.course-faq details p { font-size:13px; }
.course-lesson + .course-lesson { margin-top:45px; border-top:1px solid #314052; padding-top:30px; }
.course-enhanced .course-lesson + .course-lesson { margin-top:0; border-top:0; padding-top:0; }
.moodboard-course button:focus-visible,.moodboard-course select:focus-visible { outline:2px solid #a3c8ea; outline-offset:4px; }
@media(min-width:1500px) { .course-main,.moodboard-course .guide-header { max-width:1340px; }.course-workspace { grid-template-columns:minmax(0,1fr) 300px; gap:36px; } }
@media(max-width:1000px) { .course-workspace { grid-template-columns:minmax(0,1fr) 245px; gap:18px; }.course-stage { padding:20px; }.course-lesson h2 { font-size:21px; } }
@media(max-width:800px) { .course-main { padding:30px 22px 60px; }.course-intro h1 { font-size:42px; }.course-eyebrow { margin-top:26px; }.course-workspace { grid-template-columns:1fr; }.course-sidebar { position:static; grid-row:1; }.course-index { max-height:285px; }.course-index-group { padding-top:12px; }.course-index-group a { padding-top:7px; padding-bottom:7px; }.course-index-heading { position:sticky; top:-18px; background:#0e141d; z-index:1; padding-top:8px; }.course-roadmap { display:none; }.course-workspace { margin-top:30px; gap:22px; }.course-stage { scroll-margin-top:12px; }.course-media figcaption { font-size:10px; }.course-finish { margin-top:40px; } }
@media(max-width:450px) { .course-main { padding-left:16px; padding-right:16px; }.course-intro h1 { font-size:38px; letter-spacing:-1px; }.course-lead { font-size:14px; }.course-facts { gap:17px; font-size:11px; }.course-facts strong { font-size:13px; }.course-stage { padding:16px; border-radius:11px; }.course-lesson h2 { font-size:20px; }.course-toolbar { margin-bottom:22px; }.course-summary { font-size:12px; }.course-media figcaption { flex-wrap:wrap; gap:2px; }.course-media figcaption span { text-align:left; }.course-instructions li { font-size:12px; }.course-practice { padding:13px; gap:10px; }.course-practice p { font-size:11px; }.course-pagination { gap:10px; }.course-pagination button { padding:9px 11px; }.course-play { width:90px; height:76px; gap:5px; }.course-play > span:first-child { margin-top:9px; font-size:22px; } }
.course-header-actions { display:flex; align-items:center; gap:16px; }
.course-language-toggle { flex-shrink:0; border:1px solid #34445a; border-radius:7px; padding:9px 12px; background:#111c29; color:#b9c9dc; font:inherit; font-size:12px; cursor:pointer; }
.course-language-toggle[aria-pressed="true"] [lang="en"],.course-language-toggle[aria-pressed="false"] [lang="zh-CN"] { color:#fff; font-weight:700; }
@media(max-width:450px) { .course-header-actions { gap:8px; }.course-language-toggle { padding:9px; }.course-header-actions .guide-button { padding:10px; } html[lang="en"] .course-practice { flex-direction:column; gap:6px; } html[lang="en"] .course-toolbar { flex-wrap:wrap; } }