*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:#f7f5ef;color:#193e35;font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;line-height:1.75}a{color:inherit}header{max-width:1280px;margin:auto;padding:22px 40px;display:flex;justify-content:space-between;border-bottom:1px solid #ccd3c9;align-items:center}header a{text-decoration:none;font-size:13px}.brand{font-size:24px;font-weight:900;letter-spacing:2px}.brand span{font-size:11px;font-weight:500;letter-spacing:1px;margin-left:20px}main{max-width:1200px;margin:auto;padding:0 32px}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;padding:85px 0 75px;align-items:center}.eyebrow{font-size:11px;letter-spacing:2.5px;font-weight:700;color:#6a7d72}h1{font-size:clamp(42px,5.5vw,76px);line-height:1.2;letter-spacing:-3px;margin:24px 0}em{font-style:normal;color:#df6f3e}h2{font-size:30px;line-height:1.45;letter-spacing:-.7px;margin:15px 0}p{color:#627369}.intro{font-size:18px;line-height:1.9}.primary{display:inline-flex;gap:35px;align-items:center;background:#193e35;color:#fff;padding:13px 23px;border-radius:5px;text-decoration:none;margin-top:16px}.micro{font-size:12px}.journey{position:relative;padding:38px 30px;background:#e9ede2;border-radius:9px;min-height:365px}.path-label{font-size:12px;color:#6a7d72;margin-bottom:25px}.folder{background:#fffdf7;border:1px solid #d4dbcb;padding:22px;display:grid;grid-template-columns:42px 1fr;border-radius:7px;box-shadow:0 10px 25px #193e3509}.folder>span{grid-row:span 2;font-size:32px;color:#df6f3e}.folder small{color:#7a847a}.connector{text-align:center;color:#8a9786;padding:15px;font-size:12px}.address{background:#193e35;color:white;padding:16px 18px;border-radius:7px;display:flex;align-items:center;gap:12px;font-family:monospace;font-size:15px}.address i{width:7px;height:7px;background:#b9d99b;border-radius:50%}.address span{margin-left:auto}.journey p{font-size:12px}.stamp{border-top:1px solid #cbd4c4;margin-top:28px;padding-top:16px;font-size:11px;color:#74826b}.stamp strong{font-size:18px;color:#193e35}.prep{border-top:1px solid #cbd3c6;display:grid;grid-template-columns:1fr 1.1fr;gap:80px;padding:55px 0 65px}.prep p{max-width:390px}.textlink{text-underline-offset:5px;font-weight:600}.filetree{background:#fffdf7;border:1px solid #dfe2d8;padding:28px 30px;border-radius:8px;font-family:monospace;font-size:15px;align-self:center}.filetitle{border-bottom:1px solid #e0e5d9;margin-bottom:16px;padding-bottom:12px}.filetree>div:not(.filetitle){padding:4px 0}.filetree span{font-size:12px;color:#899185;float:right}.filetree p{font-family:system-ui;font-size:12px;margin-bottom:0;max-width:none}.stepnav{position:sticky;top:0;background:#f7f5eff5;backdrop-filter:blur(10px);z-index:5;border-block:1px solid #cdd6c8;display:flex;justify-content:space-between;gap:14px;padding:17px 6px;overflow:auto}.stepnav a{text-decoration:none;white-space:nowrap;font-size:12px}.lesson{padding:65px 0;border-bottom:1px solid #d4dbcf;display:grid;grid-template-columns:.8fr 1.3fr;gap:60px;align-items:start}.num{font-size:44px;font-weight:300;letter-spacing:-2px;color:#c0cbb8}.lesson-copy p{font-size:15px;line-height:1.95}.lesson-copy b{color:#294c3e}code{font-size:.9em;background:#e8ede3;padding:2px 5px;overflow-wrap:anywhere}aside{border-left:2px solid #d77a4f;padding:8px 0 8px 16px;margin-top:28px;font-size:12px}aside p{font-size:12px!important;margin:7px 0 0}figure{margin:12px 0 0;min-width:0}.zoom{padding:12px;background:#fff;border:1px solid #d9dfd3;border-radius:7px;cursor:zoom-in;width:100%;color:#71806c;text-align:right}.zoom img{display:block;width:100%;height:auto}.zoom span{display:block;font-size:10px;margin-top:12px}figcaption{font-size:12px;color:#7c8977;margin-top:14px}.finish{margin:65px 0;padding:40px;background:#e7ecdf;border-radius:8px}.checks{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:25px 0}.checks label{display:flex;align-items:center;gap:10px;font-size:15px;cursor:pointer}input{width:18px;height:18px;accent-color:#193e35}.finish p{font-size:14px}.faq{max-width:850px;margin:auto}details{border-bottom:1px solid #d6ddcf;padding:20px 0}summary{cursor:pointer;font-size:16px}details p{font-size:14px}footer{border-top:1px solid #d0d9c8;margin-top:80px;padding:30px 0 50px;font-size:12px}footer p{font-size:11px}dialog{border:0;padding:50px 15px 15px;border-radius:8px;width:min(1250px,95vw);max-height:95vh;background:#fff}dialog::backdrop{background:#10291dcc}dialog img{width:100%;display:block}dialog button{position:absolute;right:15px;top:12px;border:0;background:#e9eee4;padding:5px 15px;cursor:pointer;color:#193e35}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #dd7e4c;outline-offset:4px}@media(max-width:750px){header{padding:18px 22px}.brand span{display:none}main{padding:0 22px}.hero{grid-template-columns:1fr;padding:40px 0;gap:30px}h1{letter-spacing:-1px}.journey{min-height:auto;padding:25px}.prep{grid-template-columns:1fr;gap:25px;padding:40px 0}.filetree{padding:20px;font-size:13px}.filetree span{font-size:10px}.lesson{grid-template-columns:1fr;gap:15px;padding:35px 0}.num{font-size:32px}h2{font-size:26px}.checks{grid-template-columns:1fr}.finish{padding:25px;margin:35px 0}.stepnav{gap:25px}.lesson-copy p{font-size:16px}footer{margin-top:50px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Screenshot-first teaching layout */
.compact.hero{display:block;padding:36px 0 28px}.compact h1{font-size:clamp(32px,4.2vw,54px);letter-spacing:-1.5px;margin:10px 0;line-height:1.3}.compact p{margin:10px 0}.compact .primary{margin:8px 24px 0 0}.compact .textlink{font-size:14px}.readyline{padding:20px 0;border-bottom:1px solid #d4dbcf;font-size:14px}.readyline a{margin-left:12px}.lesson{display:block;padding:38px 0}.lesson-copy{max-width:950px}.lesson .num{font-size:24px;letter-spacing:0;float:left;margin:4px 16px 0 0;color:#dc7544}.lesson h2{margin:0 0 12px;font-size:30px}.lesson-copy p{font-size:17px;line-height:1.8}.lesson aside{margin:14px 0;padding:6px 0 6px 16px}.lesson figure{width:100%;margin:22px 0 8px}.zoom{padding:10px}.zoom span.shot{position:relative;display:block;margin:0;text-align:left;line-height:0}.zoom img{width:100%;height:auto}.arrow-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.point-label{position:absolute;display:block;background:#ee552e;color:white;border:2px solid white;border-radius:5px;padding:5px 9px;font-size:clamp(8px,1.1vw,15px);line-height:1.2;transform:translate(-50%,-100%);white-space:nowrap;box-shadow:0 2px 5px #0002}.shot{position:relative;display:block}.domain{margin-top:24px}.domain h3{margin:30px 0 8px;font-size:20px}.domain>p{font-size:16px;max-width:1000px}.domain details{padding:20px;background:#e9ede2;border:0;border-radius:6px;margin-top:24px}.viewer-content .shot{display:block;position:relative}.viewer-content img{width:100%}.viewer-content .point-label{font-size:15px}figcaption{font-size:14px}.finish{margin-top:40px}.stepnav a{font-size:13px}@media(max-width:750px){.compact.hero{padding:24px 0}.compact h1{font-size:32px;letter-spacing:-.5px}.compact .primary{margin-right:15px}.lesson{padding:28px 0}.lesson h2{font-size:24px}.lesson-copy p{font-size:16px}.point-label{font-size:8px;padding:3px 4px;border-width:1px}.viewer-content .point-label{font-size:9px}.readyline a{display:block;margin:8px 0 0}.stepnav{position:static}.zoom{padding:4px}figcaption{font-size:12px}.domain h3{font-size:18px}}