.lesson-page{color:#122936;background:#f5f8f7;min-height:100vh}.lesson-page header{color:#c6d5dc;background:#061725;justify-content:space-between;align-items:center;height:76px;padding:0 max(24px,50vw - 540px);font-size:12px;display:flex}.lesson-brand{color:#fff;text-transform:uppercase;letter-spacing:.08em;align-items:center;gap:9px;display:flex}.lesson-brand img{object-fit:cover;border-radius:50%;width:42px;height:42px}.lesson-brand b{font:800 20px Sora}.lesson-hero{color:#fff;background:linear-gradient(120deg,#08233a,#0a3b50);grid-template-columns:1fr .8fr;align-items:center;gap:70px;padding:70px max(24px,50vw - 540px);display:grid}.lesson-hero>div>span{color:#34d4c3;letter-spacing:.16em;font-size:11px;font-weight:800}.lesson-hero h1{margin:14px 0 18px;font-size:clamp(42px,5vw,66px)}.lesson-hero h1 em{color:#34d4c3}.lesson-hero p{color:#bdd0d8;line-height:1.7}.lesson-meta{color:#adc0c8;gap:18px;margin-top:25px;font-size:11px;display:flex}.lesson-meta b{color:#fff}.lesson-visual{position:relative}.lesson-visual img{border:7px solid #ffffff10;border-radius:14px;width:100%;display:block;box-shadow:0 25px 60px #0007}.lesson-visual>span{color:#0b6f5c;background:#fff;border-radius:30px;padding:13px 18px;font-weight:800;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.lesson-content{grid-template-columns:220px 1fr;gap:65px;max-width:1080px;margin:auto;padding:80px 24px;display:grid}.lesson-index{color:#64787f;border-left:2px solid #1ba884;flex-direction:column;align-self:start;gap:13px;padding-left:18px;font-size:12px;display:flex;position:sticky;top:24px}.lesson-index b{color:#152e39}.lesson-body{max-width:730px}.lesson-body .lead{color:#344e58;font-size:19px;line-height:1.7}.lesson-body h2{margin:48px 0 15px;scroll-margin-top:25px;font-size:28px}.lesson-body>p,.lesson-body li{color:#526b74;font-size:14px;line-height:1.8}.lesson-body ul{padding-left:20px}.lesson-diagram{background:#e8f6f2;border-radius:13px;justify-content:center;align-items:center;gap:25px;margin:28px 0;padding:25px;display:flex}.lesson-diagram div{text-align:center;background:#fff;border:1px solid #d1e5df;border-radius:10px;flex-direction:column;padding:16px 25px;display:flex}.lesson-diagram b{color:#087a63}.lesson-diagram small{color:#73858a}.component-list{grid-template-columns:repeat(2,1fr);gap:10px;display:grid}.component-list span{background:#fff;border:1px solid #dfe8e5;border-radius:8px;padding:13px 15px;font-size:13px}.component-list span:before{content:"✓";color:#149778;margin-right:9px;font-weight:900}.lesson-rule{color:#fff;background:#08293b;border-left:4px solid #f2b84b;border-radius:12px;margin:35px 0;padding:27px 30px}.lesson-rule b{color:#f2b84b}.lesson-rule p{color:#c0d0d6;margin:8px 0 0;line-height:1.7}.lesson-lock{background:#fff;border:1px solid #dce8e4;border-radius:14px;gap:20px;margin-top:48px;padding:28px;display:flex;box-shadow:0 15px 40px #0b33410b}.lesson-lock>span{font-size:28px}.lesson-lock small{color:#148a70;letter-spacing:.12em;font-weight:800}.lesson-lock h3{margin:8px 0;font:800 20px/1.3 Sora}.lesson-lock p{color:#657982;font-size:13px}.lesson-lock a{color:#11886c;font-weight:800}.lesson-cta{color:#fff;background:linear-gradient(120deg,#0b8b6e,#16ad7e);justify-content:space-between;align-items:center;gap:35px;padding:65px max(24px,50vw - 540px);display:flex}.lesson-cta span{letter-spacing:.17em;color:#caffef;font-size:10px;font-weight:800}.lesson-cta h2{margin:8px 0;font-size:35px}.lesson-cta p{color:#d5f5ea;margin:0}.lesson-cta>a{color:#0d795f;white-space:nowrap;background:#fff;border-radius:9px;padding:17px 22px;font-weight:800}.lesson-page>footer{text-align:center;color:#788e98;background:#03131f;padding:25px;font-size:11px}@media (max-width:760px){.lesson-hero{grid-template-columns:1fr;gap:35px}.lesson-content{grid-template-columns:1fr;padding-top:55px}.lesson-index{display:none}.lesson-cta{flex-direction:column;align-items:flex-start}.lesson-cta>a{text-align:center;width:100%}.component-list{grid-template-columns:1fr}.lesson-diagram{gap:10px}.lesson-diagram div{padding:14px 10px}.lesson-page header>a:last-child{display:none}}