.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; } }

/* Inline iPad installation walkthrough; follows the lesson's available width. */
.ipad-install-tutorial { container-type:inline-size; margin-top:30px; padding:22px; border:1px solid #344b62; border-radius:12px; background:linear-gradient(145deg,#172839,#101922 65%); scroll-margin-top:24px; }
.install-eyebrow { color:#7fa6cc; font-size:10px; letter-spacing:1.7px; }
.ipad-install-tutorial h3 { color:#edf5ff; font-size:20px; line-height:1.5; margin:8px 0 10px; letter-spacing:-.3px; }
.install-intro p { color:#a7b9cd; font-size:12px; line-height:1.85; margin:0; }
.install-browser-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin:20px 0 16px; }
.install-browser-tabs { display:flex; gap:9px; flex-wrap:wrap; }
.install-browser-tabs button { display:flex; align-items:center; gap:9px; padding:10px 13px; color:#9bacc0; border:1px solid #344557; border-radius:8px; background:#111c28; font:inherit; font-size:13px; cursor:pointer; }
.install-browser-tabs button[aria-selected="true"] { color:#e7f3ff; border-color:#7eafdb; background:#26415b; }
.install-browser-tabs small { font-size:10px; opacity:.75; }
.install-browser-mark { position:relative; width:21px; height:21px; border-radius:50%; flex-shrink:0; }
.install-mark-safari { background:linear-gradient(#6bceff,#0876ee); border:2px solid #dcefff; }
.install-mark-safari:after { content:""; position:absolute; inset:3px 7px; background:linear-gradient(#f45a6b 50%,#fff 50%); transform:rotate(35deg); }
.install-mark-chrome { background:conic-gradient(#ef5350 0 120deg,#f6c84c 120deg 240deg,#48a86c 240deg 360deg); }
.install-mark-chrome:after { content:""; position:absolute; inset:6px; border:1px solid #fff; border-radius:50%; background:#55a2f8; }
.install-device { position:relative; isolation:isolate; width:100%; aspect-ratio:16/10; overflow:hidden; border:6px solid #050b12; border-radius:20px; background:#101a28; box-shadow:0 12px 30px #0004,inset 0 0 0 1px #53647a; }
.install-system-bar { position:absolute; z-index:6; inset:0 0 auto; height:25px; padding:4px 14px; display:flex; justify-content:space-between; background:#101722; color:#e5eaf1; font-size:10px; line-height:17px; }
.install-browser-chrome { position:absolute; z-index:2; top:25px; left:0; right:0; height:63px; background:#1b2637; transition:transform .55s,opacity .55s; }
.install-browser-tab { display:flex; justify-content:space-between; margin:0 15px; padding:3px 12px; width:38%; font-size:10px; color:#adbdd0; background:#28364c; border-radius:7px 7px 0 0; }
.install-address-row { display:flex; align-items:center; gap:12px; padding:7px 15px; font-size:12px; color:#98bce4; }
.install-address { flex:1; min-width:0; border:1px solid #42516a; border-radius:7px; padding:4px 8px; font-size:10px; text-align:center; color:#c2cedc; background:#101925; overflow:hidden; white-space:nowrap; }
.install-share-icon { display:flex; position:relative; width:23px; height:23px; }
.install-share-icon svg { width:21px; height:21px; }
.install-canvas { position:absolute; inset:88px 0 0; background:#eef0f3; transition:top .55s,filter .35s,opacity .35s; }
.install-canvas > img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.install-canvas-brand { position:absolute; top:0; left:0; right:0; display:flex; align-items:center; gap:6px; padding:7px 11px; background:#fffffff0; color:#273448; font-size:11px; }
.install-canvas-brand img { width:18px; height:18px; border-radius:4px; }
.install-app-badge { margin-left:auto; color:#447c61; font-size:9px; opacity:0; transition:opacity .5s; }
.install-share-sheet,.install-confirm { position:absolute; z-index:4; width:62%; max-width:340px; right:15px; top:27%; padding:14px; border:1px solid #667489; border-radius:13px; background:#f1f3f8f5; box-shadow:0 12px 40px #0007; color:#1b293a; opacity:0; transform:translateY(16px) scale(.96); transition:opacity .4s,transform .4s; font-size:12px; }
.install-sheet-handle { width:30px; height:3px; margin:-4px auto 12px; background:#a9b2bf; border-radius:9px; }
.install-sheet-site { display:flex; gap:10px; align-items:center; margin:0 0 12px; }
.install-sheet-site > img { width:34px; height:34px; border-radius:8px; }
.install-sheet-site small { display:block; margin-top:3px; color:#768398; font-size:9px; overflow-wrap:anywhere; }
.install-share-destinations { display:flex; gap:15px; padding:0 0 12px; }
.install-share-destinations i { display:grid; place-items:center; background:#4a9ee9; color:#fff; border-radius:8px; font-size:17px; font-style:normal; width:30px; height:30px; }
.install-share-destinations i:nth-child(2) { background:#44b58b; }
.install-share-destinations i:nth-child(3) { background:#98a6bb; }
.install-sheet-option { display:flex; justify-content:space-between; gap:10px; border-top:1px solid #dce2ea; padding:8px; font-size:11px; line-height:1.6; }
.install-highlight { border:2px solid #398dd1; border-radius:7px; background:#e2f0ff; color:#175c91; font-weight:600; }
.install-confirm { left:50%; right:auto; top:30%; width:80%; transform:translate(-50%,16px) scale(.96); }
.install-confirm-heading { display:flex; align-items:center; justify-content:space-between; gap:9px; margin-bottom:17px; font-size:10px; color:#2175bb; }
.install-confirm-heading strong { color:#253246; font-size:11px; text-align:center; }
.install-add-label { border-radius:5px; background:#d3eaff; padding:4px 6px; }
.install-web-app-switch { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:11px 0; border-top:1px solid #d6dfe9; font-size:11px; }
.install-web-app-switch i { display:block; position:relative; width:34px; height:21px; background:#31b66e; border-radius:20px; flex-shrink:0; }
.install-web-app-switch i:after { content:""; position:absolute; width:17px; height:17px; top:2px; right:2px; border-radius:50%; background:#fff; }
.install-confirm p { color:#748299; font-size:10px; line-height:1.7; margin:6px 0 0; }
.install-home { position:absolute; z-index:3; inset:25px 0 0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(at 10% 0%,#62a9d6,transparent 65%),linear-gradient(135deg,#253f7d,#6f5694 60%,#a6728c); opacity:0; transform:scale(.95); transition:opacity .4s,transform .4s; }
.install-home-icons { display:flex; gap:25px; position:absolute; top:10%; }
.install-home-icons i,.install-home-dock i { width:30px; height:30px; border-radius:8px; background:#d4e4ff55; }
.install-home-app { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; color:#fff; font-size:12px; }
.install-home-app img { width:62px; height:62px; border-radius:14px; box-shadow:0 5px 20px #0003; }
.install-home-dock { display:flex; gap:20px; position:absolute; bottom:7%; padding:10px 28px; border-radius:17px; background:#ffffff26; }
.install-outcome { position:absolute; z-index:5; left:50%; bottom:14px; transform:translate(-50%,10px); max-width:90%; border:1px solid #9ad7be; border-radius:7px; padding:8px 13px; background:#163f34ed; color:#def9ed; font-size:11px; text-align:center; opacity:0; transition:opacity .4s,transform .4s; }
.install-device[data-install-scene="1"] .install-share-icon:after { content:""; position:absolute; inset:-6px; border:2px solid #8ac8ff; border-radius:50%; animation:install-tap 1.6s infinite; }
.install-device:is([data-install-scene="2"],[data-install-scene="3"]) .install-canvas { filter:brightness(.6); }
.install-device[data-install-scene="2"] .install-share-sheet { opacity:1; transform:translateY(0) scale(1); }
.install-device[data-install-scene="3"] .install-confirm { opacity:1; transform:translate(-50%,0) scale(1); }
.install-device[data-install-scene="4"] .install-home { opacity:1; transform:scale(1); }
.install-device[data-install-scene="5"] .install-browser-chrome { opacity:0; transform:translateY(-65px); }
.install-device[data-install-scene="5"] .install-canvas { top:25px; }
.install-device[data-install-scene="5"] .install-app-badge { opacity:1; }
.install-device[data-install-scene="5"] .install-outcome { opacity:1; transform:translate(-50%,0); }
.install-demo-caption { color:#7189a2; font-size:10px; line-height:1.7; margin:10px 0 16px; }
.install-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none; }
.install-steps button { position:relative; display:flex; align-items:flex-start; gap:8px; width:100%; height:100%; padding:12px 10px; border:1px solid #2c4054; border-radius:7px; background:#111e2a; color:#95a9bf; text-align:left; font:inherit; cursor:pointer; overflow:hidden; }
.install-step-number { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#263d52; color:#b6d2eb; font-size:10px; flex-shrink:0; }
.install-steps strong { display:block; font-size:11px; line-height:1.6; font-weight:600; }
.install-steps button > span > span { display:block; color:#8297ad; font-size:10px; line-height:1.7; margin-top:5px; }
.install-steps button[aria-current] { background:#223d54; border-color:#77a7ce; color:#eff8ff; }
.install-steps button[aria-current] .install-step-number { color:#18354e; background:#b1dbfa; }
.install-step-progress { position:absolute; bottom:0; left:0; height:2px; width:0; background:#9bc8ea; }
.ipad-install-tutorial[data-install-running="true"] [aria-current] .install-step-progress { animation:install-progress 4s linear both; }
.install-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding-top:16px; }
.install-controls button { border:1px solid #385069; border-radius:6px; background:#182b3c; color:#bfdaef; font:inherit; font-size:11px; padding:8px 11px; cursor:pointer; }
.install-controls button:disabled { opacity:.35; cursor:default; }
.install-controls [data-install-play] { margin-left:auto; }
.install-step-status { font-size:10px; color:#7893ae; font-variant-numeric:tabular-nums; }
.install-notes { color:#8b9fb4; font-size:11px; line-height:1.85; border-top:1px solid #2c4256; margin-top:18px; padding-top:13px; }
.install-notes p { margin:0 0 6px; }
.install-notes a { color:#a8d0f0; text-underline-offset:3px; }
.ipad-install-tutorial[data-install-running="false"] .install-share-icon:after { animation-play-state:paused; }
@keyframes install-tap { 0%,100% { opacity:.4; transform:scale(.95); } 50% { opacity:1; transform:scale(1.15); } }
@keyframes install-progress { to { width:100%; } }
@container(max-width:520px) { .install-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }.install-device { aspect-ratio:4/3; min-height:290px; border-width:4px; border-radius:14px; }.install-system-bar { padding-right:9px; padding-left:9px; }.install-confirm { width:88%; padding:10px; }.install-share-sheet { width:72%; right:8px; padding:10px; }.install-controls [data-install-play] { margin-left:0; }.install-browser-tabs button { padding:9px 10px; font-size:12px; } }
@container(max-width:340px) { .install-steps { grid-template-columns:1fr; }.install-share-destinations { padding-bottom:6px; }.install-sheet-option { padding:5px; }.install-share-sheet { top:25%; }.install-sheet-site { margin-bottom:8px; }.install-confirm-heading { margin-bottom:10px; }.install-intro h3 { font-size:18px; }.install-browser-tabs { gap:6px; } }
@media(max-width:450px) { .ipad-install-tutorial { padding:14px; } }
@media(prefers-reduced-motion:reduce) { .ipad-install-tutorial * { animation:none!important; transition:none!important; } }

.install-copy-link { display:inline-flex; align-items:center; gap:7px; padding:10px 13px; border:1px solid #344557; border-radius:8px; color:#b6d7f3; background:#111c28; font:inherit; font-size:12px; cursor:pointer; }
.install-copy-link svg { width:18px; height:18px; flex-shrink:0; }
.install-copy-link:hover { border-color:#7eafdb; color:#e7f3ff; }
.install-copy-link:focus-visible { outline:2px solid #94baff; outline-offset:3px; }
.install-copy-fallback { margin-bottom:16px; color:#b6c8dc; font-size:12px; }
.install-copy-fallback[hidden],.install-copy-link [hidden] { display:none; }
.install-copy-fallback input { box-sizing:border-box; width:100%; min-width:0; padding:10px; border:1px solid #344557; border-radius:6px; background:#101922; color:#e7f3ff; font:inherit; }