:root { --navy:#061725; --navy-2:#0a2132; --paper:#f4f1ea; --white:#f7faf9; --muted:#8fa1aa; --ink:#10202c; --teal:#69d7d0; --orange:#f2a51a; --line:rgba(105,215,208,.22); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; line-height:1.75; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.course-header { position:sticky; z-index:20; top:0; min-height:70px; padding:0 max(24px,calc((100vw - 1180px)/2)); display:flex; align-items:center; gap:24px; color:#fff; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(6,23,37,.92); backdrop-filter:blur(16px); }
.course-brand { margin-right:auto; display:grid; line-height:1.2; }
.course-brand strong { font-size:14px; letter-spacing:.05em; }
.course-brand small { margin-top:4px; color:var(--muted); font-size:9px; letter-spacing:.14em; }
.course-back, .course-download { font-size:11px; font-weight:750; }
.course-back { color:#a9bac1; }
.course-download { padding:8px 13px; color:var(--navy); background:var(--orange); }
.course-hero { padding:90px 24px 76px; color:#fff; background:var(--navy); }
.course-hero-inner { width:min(1180px,100%); margin:auto; display:grid; grid-template-columns:1fr 360px; gap:80px; align-items:end; }
.eyebrow { margin:0 0 18px; color:var(--teal); font-size:10px; font-weight:850; letter-spacing:.19em; }
.course-hero h1 { max-width:760px; margin:0; font-size:clamp(43px,6vw,76px); line-height:1.08; letter-spacing:-.06em; }
.course-hero h1 span { color:var(--orange); }
.course-hero p { margin:23px 0 0; color:#acbac0; font-size:15px; }
.course-meta { padding:25px; border:1px solid var(--line); }
.course-meta span, .course-meta strong { display:block; }
.course-meta span { color:var(--muted); font-size:9px; letter-spacing:.12em; }
.course-meta strong { margin:5px 0 15px; font-size:21px; }
.course-meta small { color:var(--teal); font-size:10px; }
.course-body { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:70px 0 100px; }
.course-intro { max-width:780px; margin:0 auto 45px; color:#62717a; text-align:center; font-size:14px; }
.course-intro strong { display:block; margin-bottom:8px; color:var(--ink); font-size:25px; }
.long-course { width:min(100%,980px); height:auto; margin:auto; background:#fff; box-shadow:0 22px 70px rgba(15,30,40,.13); }
.slide-list { display:grid; gap:34px; }
.slide-frame { position:relative; width:min(100%,1080px); margin:auto; padding:13px; border:1px solid #d7d2c8; background:#fff; box-shadow:0 18px 50px rgba(15,30,40,.09); }
.slide-frame figcaption { position:absolute; top:18px; left:-48px; width:35px; color:#8a989f; font:10px/1 monospace; text-align:right; }
.slide-frame img { width:100%; background:#fff; }
.viewer-status { position:fixed; z-index:15; right:17px; bottom:17px; padding:9px 13px; color:#dbe6e8; border:1px solid var(--line); background:rgba(6,23,37,.88); font-size:10px; backdrop-filter:blur(12px); }
.lesson-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid #c9c4ba; border-left:1px solid #c9c4ba; }
.lesson-block { min-height:280px; padding:35px; border-right:1px solid #c9c4ba; border-bottom:1px solid #c9c4ba; background:rgba(255,255,255,.42); }
.lesson-block > span { color:#218b88; font:10px/1 monospace; }
.lesson-block h2 { margin:15px 0 12px; font-size:27px; letter-spacing:-.04em; }
.lesson-block p { margin:0; color:#65747c; font-size:14px; }
.lesson-block ul { margin:17px 0 0; padding-left:20px; color:#65747c; font-size:13px; }
.lesson-cta { margin-top:28px; padding:30px; display:flex; align-items:center; justify-content:space-between; gap:28px; color:#fff; background:var(--navy); }
.lesson-cta strong { font-size:20px; }
.lesson-cta p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.lesson-cta a { padding:11px 16px; color:var(--navy); background:var(--orange); font-size:11px; font-weight:800; white-space:nowrap; }
.course-footer { padding:38px 24px; color:#768a93; background:#020d15; text-align:center; font-size:10px; }
@media(max-width:760px){
  .course-header { min-height:62px; padding:0 16px; }
  .course-download { display:none; }
  .course-hero { padding:68px 18px 50px; }
  .course-hero-inner { grid-template-columns:1fr; gap:35px; }
  .course-hero h1 { font-size:43px; }
  .course-body { width:calc(100% - 24px); padding:42px 0 70px; }
  .slide-list { gap:16px; }
  .slide-frame { padding:4px; }
  .slide-frame figcaption { display:none; }
  .lesson-grid { grid-template-columns:1fr; }
  .lesson-block { min-height:0; padding:27px 23px; }
  .lesson-cta { align-items:flex-start; flex-direction:column; }
  .lesson-cta a { width:100%; text-align:center; }
}
@media(prefers-reduced-motion:reduce){ html { scroll-behavior:auto; } }