.lesson-hero{
  padding:clamp(130px,14vh,170px) 0 clamp(48px,6vw,82px);
  border-bottom:var(--rule);
}
.lesson-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(36px,5vw,88px);
  align-items:center;
  margin-top:clamp(30px,4vw,54px);
}
.lesson-intro h1{
  max-width:10ch;
  margin:clamp(20px,2.5vw,32px) 0 0;
  font-size:clamp(48px,6vw,86px);
  line-height:1.02;
}
.lesson-intro h1 em{ color:var(--sindoor); font-weight:400; }
.lesson-deck{
  max-width:39ch;
  margin:clamp(22px,3vw,38px) 0 0;
  color:var(--ink-soft);
  font-family:var(--f-display);
  font-size:clamp(20px,2vw,28px);
  line-height:1.45;
}
.lesson-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; margin-top:clamp(24px,3vw,40px); }
.lesson-text-link{ min-height:44px; display:inline-flex; align-items:center; color:var(--sindoor); border-bottom:1px solid currentColor; font-size:15px; }
.lesson-file-note{ margin:12px 0 0; color:var(--ink-faint); font-family:var(--f-mono); font-size:12px; line-height:1.6; }
.lesson-video{ margin:0; min-width:0; }
.lesson-video video{
  display:block; width:100%; aspect-ratio:16/9;
  background:#0c1221; border:1px solid var(--hair);
  box-shadow:0 20px 55px -35px var(--lift);
}
.lesson-video figcaption{ margin-top:14px; color:var(--ink-faint); font-size:13px; line-height:1.55; }

.lesson-overview{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,46px); padding-block:clamp(36px,5vw,70px);
  border-bottom:var(--rule);
}
.lesson-overview > div{ min-width:0; border-top:2px solid color-mix(in srgb,var(--sindoor) 40%,transparent); padding-top:18px; }
.lesson-overview span{ display:block; color:var(--sindoor); font:12px/1.5 var(--f-mono); letter-spacing:.07em; text-transform:uppercase; }
.lesson-overview b{ display:block; margin-top:10px; font:400 clamp(19px,2vw,26px)/1.3 var(--f-display); }
.lesson-overview p{ margin:9px 0 0; color:var(--ink-soft); font-size:14px; line-height:1.55; }
.lesson-overview code{ font-family:var(--f-mono); font-size:.8em; }

.lesson-layout{
  display:grid; grid-template-columns:minmax(180px,235px) minmax(0,780px);
  gap:clamp(40px,6vw,100px);
  align-items:start; padding-block:clamp(56px,7vw,100px) clamp(90px,10vw,150px);
}
.lesson-rail{ position:sticky; top:110px; }
.lesson-rail ol{ list-style:none; margin:25px 0 0; padding:0; counter-reset:lesson; }
.lesson-rail li{ counter-increment:lesson; border-bottom:var(--rule); }
.lesson-rail li a{ display:block; padding:11px 0; min-height:44px; color:var(--ink-soft); font-size:14px; line-height:1.5; }
.lesson-rail li a:hover{ color:var(--sindoor); }
.lesson-rail li a::before{
  content:counter(lesson,decimal-leading-zero) " ";
  color:var(--sindoor); font:11px var(--f-mono); margin-right:9px;
}
.lesson-rail-download{ display:inline-block; margin-top:25px; color:var(--sindoor); font:12px/1.6 var(--f-mono); border-bottom:1px solid currentColor; }

.lesson-body{ min-width:0; }
.lesson-body section{ scroll-margin-top:115px; padding:clamp(42px,5vw,70px) 0; border-top:var(--rule); }
.lesson-body section:first-child{ padding-top:0; border-top:0; }
.lesson-kicker{ display:block; color:var(--sindoor); font:12px/1.5 var(--f-mono); letter-spacing:.09em; text-transform:uppercase; }
.lesson-body h2{ margin:14px 0 0; font-size:clamp(31px,3.5vw,47px); line-height:1.14; }
.lesson-body h2 code{ font:inherit; }
.lesson-body p{ margin:18px 0 0; color:var(--ink-soft); font-size:17px; line-height:1.77; }
.lesson-body p b{ color:var(--ink); font-weight:500; }
.lesson-body p code{
  font-family:var(--f-mono); font-size:.82em; color:var(--sindoor);
  overflow-wrap:anywhere;
}
.lesson-body pre{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:23px 0 0; padding:22px 25px;
  border:1px solid #41506b; border-radius:4px;
  background:#101a2d; color:#edf3ff;
  font:14px/1.65 var(--f-mono); tab-size:4;
}
.lesson-body pre code{ font:inherit; }
.lesson-code-pair{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:25px; }
.lesson-code-pair > div{ min-width:0; }
.lesson-code-pair pre{ margin-top:8px; height:190px; }
.lesson-code-pair small{ display:block; margin-top:9px; color:var(--ink-faint); font-size:13px; }
.lesson-code-label{ color:var(--sindoor); font:12px/1.5 var(--f-mono); }
.lesson-point{
  display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1fr);
  gap:20px; margin-top:27px; padding:24px;
  background:var(--paper-lit); border-left:3px solid var(--sindoor);
}
.lesson-point b{ font:400 22px/1.3 var(--f-display); }
.lesson-point span{ color:var(--ink-soft); font-size:15px; line-height:1.65; }
.lesson-results{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:25px; }
.lesson-results span{ border:var(--rule); padding:18px; font-family:var(--f-display); font-size:19px; }
.lesson-results b{ display:block; margin-top:14px; font:12px/1.5 var(--f-mono); text-transform:uppercase; letter-spacing:.05em; }
.lesson-results b.ok{ color:#438563; }
.lesson-results b.failed{ color:var(--sindoor); }
:root[data-theme="dark"] .lesson-results b.ok{ color:#80d7a5; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .lesson-results b.ok{ color:#80d7a5; } }
.lesson-end{ margin-top:20px; padding:clamp(28px,4vw,46px); background:var(--paper-lit); border:var(--rule); }
.lesson-end h2{ margin:0; }
.lesson-end .btn{ margin-top:25px; }

@media (max-width:980px){
  .lesson-hero-grid{ grid-template-columns:1fr; }
  .lesson-intro h1{ max-width:16ch; }
  .lesson-video{ max-width:760px; }
  .lesson-layout{ grid-template-columns:1fr; }
  .lesson-rail{ position:static; }
  .lesson-rail ol{ display:flex; flex-wrap:wrap; gap:0 18px; }
  .lesson-rail li{ border-bottom:0; }
  .lesson-rail li a{ padding:8px 0; }
}
@media (max-width:680px){
  .lesson-overview{ grid-template-columns:1fr; gap:22px; }
  .lesson-code-pair{ grid-template-columns:1fr; }
  .lesson-code-pair pre{ height:auto; }
  .lesson-point{ grid-template-columns:1fr; }
  .lesson-results{ grid-template-columns:1fr; }
  .lesson-body pre{ padding:17px; font-size:13px; }
}