/* JAE Digital Learn: loaded on /learn/ pages only. Playful at course level, quiet in the lesson reading area. */

/* ---------- shared ---------- */
.ln-label{margin:0;font:800 12px/1.2 var(--ff);letter-spacing:.09em;text-transform:uppercase;color:var(--violet-d)}
.dk .ln-label{color:var(--lilac)}
.ln-small{font-size:14px;line-height:1.55;color:var(--grey);margin:0}
.dk .ln-small{color:var(--mute)}
.ln-note{margin:0;padding:12px 16px;border-radius:var(--r-s);background:var(--yellow-soft);border:2px solid var(--ink);font-size:15px;line-height:1.5}
.ln-bar{height:10px;border-radius:var(--r-sm);background:rgba(17,24,39,.12);overflow:hidden;border:2px solid var(--ink)}
.ln-bar span{display:block;height:100%;width:0;background:var(--violet);transition:width .5s ease}
.dk .ln-bar{background:rgba(255,255,255,.14);border-color:var(--white)}.dk .ln-bar span{background:var(--yellow)}
.ln-bar.big{max-width:420px;height:12px}
.ln-prog-txt{font:700 14px var(--ff);color:var(--violet)}
.dk .ln-prog-txt{color:var(--yellow)}
.ln-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tbtn.sm{min-height:38px;font-size:13px;padding:0 12px}

/* ---------- hub ---------- */
.ln-hub-hero,.ln-ov-hero,.ln-done-hero{overflow-x:clip;padding:clamp(28px,3.4vw,48px) 0 clamp(48px,5vw,72px);background-image:radial-gradient(rgba(255,255,255,.06) 1.5px,transparent 1.5px);background-size:26px 26px}
.ln-hub-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:center}
.ln-hub-h1{font-size:var(--fs-d2);color:var(--white)}
.ln-hub-mas{display:flex;flex-direction:column;align-items:center;gap:0}
.ln-hub-mas .bub{margin:6px 0 0;transform:rotate(3deg)}
.ln-feature{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(24px,3.4vw,44px);background:var(--yellow);border:3px solid var(--ink);border-radius:var(--r-xl);box-shadow:var(--sh-4) var(--ink);text-decoration:none;color:var(--ink);transition:transform .25s ease,box-shadow .25s ease}
.ln-feature:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:var(--sh-5) var(--violet);color:var(--ink)}
.ln-feature b.dh{font-size:var(--fs-l)}
.ln-feature-p{font-size:18px;line-height:1.6;max-width:640px}
.ln-feature-cards{position:relative;height:210px}
.ln-feature-cards>span{position:absolute;left:calc(var(--i) * 70px);top:calc(var(--i) * 6px);rotate:calc(-12deg + var(--i) * 12deg);transition:rotate .3s ease,translate .3s ease}
.ln-feature:hover .ln-feature-cards>span{rotate:calc(-18deg + var(--i) * 18deg);translate:0 -8px}
.ln-path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.ln-path li{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px 22px;border:3px solid var(--ink);border-radius:var(--r-l);background:var(--white)}
.ln-path li.open{background:var(--lilac);box-shadow:var(--sh-3) var(--ink)}
.ln-path li.planned{border-style:dashed;background:var(--cream)}
.ln-path b.d{font-size:22px;line-height:1.15}
.ln-path li>span:not(.ln-stage):not(.ln-step-n){font-size:15px;line-height:1.55}
.ln-stage{align-self:flex-start;font:800 11px/1 var(--ff);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:var(--r-pill);background:var(--ink);color:var(--white)}
.ln-path li.planned .ln-stage{background:transparent;color:var(--ink);border:2px dashed var(--ink)}
.ln-step-n{position:absolute;right:18px;top:12px;font-size:44px;opacity:.18}
.ln-path .tl{margin-top:auto;align-self:flex-start}
.ln-interest{display:flex;align-items:center;justify-content:space-between;gap:18px 28px;flex-wrap:wrap;padding:20px 24px;border:2.5px dashed var(--ink);border-radius:var(--r-m)}
.ln-interest p{margin:0;font-size:16px;line-height:1.55;max-width:760px}
.ln-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
.ln-more a{display:flex;flex-direction:column;gap:8px;padding:22px;border:3px solid var(--ink);border-radius:var(--r-l);background:var(--white);box-shadow:var(--sh-2) var(--ink);color:var(--ink);text-decoration:none;transition:transform .2s ease}
.ln-more a:hover{transform:translateY(-5px) rotate(-1deg);color:var(--ink)}
.ln-more b{font-size:19px}.ln-more a>span{font-size:15px;line-height:1.5}

/* ---------- course overview ---------- */
.ln-ov-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;align-items:center}
.ln-ov-h1{font-size:var(--fs-d4);color:var(--white)}
.ln-meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ln-meta li{padding:8px 14px;border:2px solid rgba(255,255,255,.4);border-radius:var(--r-pill);font-size:15px;color:var(--white)}
.ln-meta b{color:var(--yellow)}
.ln-ov-cards{position:relative;height:340px}
.ln-ov-cards>span{position:absolute;left:calc(40px + var(--i) * 42px);top:calc(30px + var(--i) * 14px);rotate:calc(-20deg + var(--i) * 8deg);animation:lnDeal .6s cubic-bezier(.2,.85,.3,1.2) calc(.1s + var(--i) * .09s) both}
@keyframes lnDeal{from{opacity:0;translate:120px -60px;rotate:40deg}}
.ln-outs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.ln-outs li{display:flex;flex-direction:column;gap:8px;padding:22px 20px;background:var(--white);border:3px solid var(--ink);border-radius:var(--r-l);box-shadow:var(--sh-2) var(--ink)}
.ln-outs li:nth-child(2){background:var(--yellow)}.ln-outs li:nth-child(4){background:var(--lilac)}
.ln-outs .dh{font-size:40px;color:var(--red)}
.ln-outs b{font-size:19px;line-height:1.2}.ln-outs li>span:last-child{font-size:15px;line-height:1.5}
.ln-ov-lessons{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,70px);align-items:start}
.ln-need{display:flex;flex-direction:column;gap:10px;padding:22px;border:2.5px dashed var(--ink);border-radius:var(--r-m);background:var(--cream)}
.ln-need ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ln-need li{display:flex;gap:10px;font-size:15px;line-height:1.5}.ln-need li svg{flex:none;margin-top:3px;color:var(--violet)}
.ln-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ln-list a{display:grid;grid-template-columns:56px minmax(0,1fr) 30px;gap:16px;align-items:center;padding:16px 18px;border:3px solid var(--ink);border-radius:var(--r-m);background:var(--white);color:var(--ink);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.ln-list a:hover{transform:translateX(6px);box-shadow:var(--sh-2) var(--violet);color:var(--ink)}
.ln-list .ln-n{width:56px;height:56px;border-radius:var(--r-s);border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:30px;background:var(--yellow)}
.ln-list b{font-size:19px;line-height:1.2}.ln-list a span span{font-size:15px;line-height:1.45}
.ln-tick{width:30px;height:30px;border-radius:50%;border:2.5px solid var(--ink);display:flex;align-items:center;justify-content:center;color:transparent}
.done .ln-tick{background:var(--violet);border-color:var(--violet);color:var(--white)}
.ln-done-sr{display:none}.done .ln-done-sr{display:inline}
.ln-list .done .ln-n{background:var(--lilac)}
.ln-ov-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,70px);align-items:start}

/* ---------- lesson ---------- */
.ln-hero{background:var(--ink);color:var(--white);padding:clamp(24px,3vw,40px) 0 clamp(34px,4vw,54px);border-bottom:3px solid var(--ink)}
.ln-hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:18px}
.ln-of{margin:0;font:700 15px var(--ff);color:var(--lilac)}
.ln-h1{font-size:var(--fs-d4);color:var(--white)}
.ln-outcome{margin:0;font-size:var(--fs-lead);line-height:1.5;color:var(--mute);max-width:760px}
.ln-card{flex:none;rotate:8deg;filter:drop-shadow(6px 6px 0 var(--yellow))}
.ln-body{background:var(--cream);padding:clamp(30px,4vw,56px) 0 clamp(50px,6vw,90px)}
.ln-grid{display:grid;grid-template-columns:280px minmax(0,760px);gap:clamp(28px,4vw,64px);align-items:start;justify-content:center}
.ln-side{position:sticky;top:calc(var(--head-h,96px) + 20px)}
.ln-nav{background:var(--white);border:3px solid var(--ink);border-radius:var(--r-l);padding:16px 16px 18px;box-shadow:var(--sh-2) var(--ink)}
.ln-nav summary{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;list-style:none;font-size:16px;min-height:32px}
.ln-nav summary::-webkit-details-marker{display:none}
.ln-nav summary::after{content:"";width:10px;height:10px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);rotate:45deg;translate:0 -3px;flex:none;transition:rotate .2s ease}
.ln-nav[open] summary::after{rotate:225deg;translate:0 3px}
.ln-nav .ln-prog-txt{margin-left:auto;font-size:13px}
.ln-nav .ln-bar{margin:10px 0 4px;height:8px}
.ln-nav ol{list-style:none;margin:12px 0 10px;padding:0;display:flex;flex-direction:column;gap:4px}
.ln-nav li a{display:grid;grid-template-columns:28px minmax(0,1fr) 24px;gap:10px;align-items:center;padding:9px 8px;border-radius:var(--r-s);color:var(--ink);text-decoration:none;font-size:15px;line-height:1.3}
.ln-nav li a:hover{background:var(--cream)}
.ln-nav li.now a{background:var(--yellow);font-weight:700}
.ln-nav .ln-n{width:28px;height:28px;border-radius:var(--r-sm);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font:800 14px var(--ff)}
.ln-nav .ln-tick{width:24px;height:24px;border-width:2px}
.ln-back{font:700 14px var(--ff);color:var(--violet)}
.ln-main{display:flex;flex-direction:column;gap:30px;min-width:0}
.ln-intro{margin:0;font-size:var(--fs-lead);line-height:1.6;font-weight:500}
.ln-sec{display:flex;flex-direction:column;gap:12px}
.ln-sec h2{margin:0;font-size:var(--fs-2xs);line-height:1.15}
.ln-sec p,.ln-sec li{margin:0;font-size:17px;line-height:1.7}
.ln-sec p+p{margin-top:4px}
.ln-steps{margin:0;padding-left:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:10px}
.ln-steps li{counter-increment:s;position:relative;padding-left:44px;font-size:17px;line-height:1.6}
.ln-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--white);display:flex;align-items:center;justify-content:center;font:800 14px var(--ff)}
.ln-example{display:flex;flex-direction:column;gap:8px;padding:22px 24px;background:var(--white);border:3px solid var(--ink);border-left-width:10px;border-left-color:var(--violet);border-radius:var(--r-m)}
.ln-example b{font-size:19px}
.ln-pre{margin:0;font-size:16px;line-height:1.65;color:var(--ink-2)}
.ln-compare{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:14px}
.ln-cmp{padding:18px 20px;border:3px solid var(--ink);border-radius:var(--r-m);background:var(--white)}
.ln-cmp p:last-child{margin:8px 0 0;font-size:16px;line-height:1.6}
.ln-cmp.bad{background:var(--red-soft)}.ln-cmp.bad .ln-label{color:var(--red-d)}
.ln-cmp.good{background:var(--ok-soft)}.ln-cmp.good .ln-label{color:var(--ok)}
.ln-start{padding:22px 24px;border:2.5px dashed var(--ink);border-radius:var(--r-m);background:var(--white)}

/* activity panel */
.ln-activity{display:flex;flex-direction:column;gap:18px;padding:clamp(22px,3vw,34px);background:var(--white);border:3px solid var(--ink);border-radius:var(--r-xl);box-shadow:var(--sh-3) var(--yellow)}
.ln-activity>h2{margin:0;font-size:var(--fs-xs);line-height:1.1}
.ln-activity>p{margin:0;font-size:17px;line-height:1.6}
.ln-field{display:flex;flex-direction:column;gap:8px;border:0;padding:0;margin:0;min-width:0}
.ln-field label,.ln-field legend{font:700 16px/1.35 var(--ff);padding:0}
.ln-field input[type="text"],.ln-field textarea,.ln-field select{width:100%;box-sizing:border-box;min-height:52px;border:2.5px solid var(--ink);border-radius:var(--r-s);padding:12px 14px;font:inherit;font-size:16px;line-height:1.5;background:var(--white);color:var(--ink)}
.ln-field textarea{resize:vertical}
.ln-field input:focus-visible,.ln-field textarea:focus-visible,.ln-field select:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.ln-field .tbtn{align-self:flex-start}
.ln-sub{font-weight:600!important;font-size:14px!important;margin-top:4px}
.ln-hint{margin:0;font-size:14px;line-height:1.5;color:var(--grey)}
.ln-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ln-fields .ln-field:first-child{grid-column:1/-1}
.ln-two{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:10px}
.ln-choose{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.ln-choose legend{font:700 16px var(--ff);margin-bottom:10px;grid-column:1/-1}
.ln-choice{position:relative;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:2.5px solid var(--ink);border-radius:var(--r-s);cursor:pointer;background:var(--white);transition:background-color .15s ease,box-shadow .15s ease}
.ln-choice input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--violet)}
.ln-choice span{display:flex;flex-direction:column;gap:2px;font-size:15px;line-height:1.35}
.ln-choice small{font-size:13px;color:var(--grey)}
.ln-choice:has(input:checked){background:var(--lilac);box-shadow:var(--sh-1) var(--ink)}
.ln-choice:has(input:focus-visible){outline:3px solid var(--violet);outline-offset:2px}
.ln-checks{display:flex;flex-direction:column;gap:6px}
.ln-check{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.4;cursor:pointer;padding:4px 0}
.ln-check input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--violet)}
.ln-out{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:var(--r-m);background:var(--cream);border:2.5px solid var(--ink)}
.ln-out[hidden]{display:none}
.ln-out-txt{margin:0;font-size:18px;font-weight:700;line-height:1.4}
.ln-code{margin:0;white-space:pre-wrap;word-break:break-word;font:15px/1.65 var(--ff);background:var(--white);border:2px solid rgba(17,24,39,.18);border-radius:var(--r-s);padding:14px 16px;max-height:420px;overflow:auto}
.ln-code.empty{color:var(--grey);font-style:italic}
.dk .ln-code{color:var(--ink)}
.cawr{display:flex;flex-direction:column;gap:14px}
.cawr-part{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:start;padding:14px 0;border-top:2px dashed rgba(17,24,39,.2)}
.cawr-part:first-child{border-top:0;padding-top:0}
.cawr-l{width:52px;height:64px;border:3px solid var(--ink);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:36px;box-shadow:3px 3px 0 var(--ink)}
.cawr-part:nth-child(1) .cawr-l{background:var(--white)}.cawr-part:nth-child(2) .cawr-l{background:var(--yellow)}.cawr-part:nth-child(3) .cawr-l{background:var(--lilac)}.cawr-part:nth-child(4) .cawr-l{background:var(--red);color:var(--white)}
.ln-ask{padding:10px 14px;border-radius:var(--r-s);background:var(--cream)}
.ln-phrases{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ln-phrases li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px 10px 16px;border:2px solid var(--ink);border-radius:var(--r-s);font-size:16px;line-height:1.45}
.ln-phrases .tbtn{flex:none;margin:0}

/* spot the problems */
.ln-draft{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:var(--r-m);background:var(--paper);border:2px solid rgba(17,24,39,.15)}
.ln-sent{display:block;width:100%;text-align:left;font:16px/1.55 var(--ff);color:var(--ink);background:var(--white);border:2px solid transparent;border-radius:var(--r-sm);padding:10px 12px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.ln-sent:hover{border-color:rgba(17,24,39,.35)}
.ln-sent[aria-pressed="true"]{background:var(--yellow-soft);border-color:var(--ink);text-decoration:underline wavy var(--red) 1.5px;text-underline-offset:4px}
.ln-sent:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.checked .ln-sent{cursor:default}
.ln-sent.hit{background:var(--ok-soft);border-color:var(--ok);text-decoration:line-through var(--red) 2px}
.ln-sent.miss{background:var(--red-soft);border-color:var(--red-d)}
.ln-sent.wrong{background:var(--yellow-soft);border-color:var(--ink);text-decoration:none}
.ln-sent.fine{opacity:.75}
.ln-spot{display:flex;flex-direction:column;gap:14px}
.ln-spot-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.55}
.ln-spot-list li.hit b{color:var(--ok)}.ln-spot-list li.miss b{color:var(--red-d)}.ln-spot-list li.wrong b{color:var(--violet)}
.ln-spot-list q{font-style:italic}
.ln-checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ln-checklist li{display:flex;gap:10px;font-size:16px;line-height:1.5}.ln-checklist li svg{flex:none;margin-top:3px;color:var(--violet)}
.ln-review{padding:18px;border:2.5px solid var(--ink);border-radius:var(--r-m);background:var(--cream)}
.ln-review legend{float:left;width:100%;margin-bottom:8px}

/* quiz */
.ln-quiz{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2.6vw,28px);border:3px dashed var(--ink);border-radius:var(--r-l);background:var(--white)}
.ln-quiz h2{margin:0;font-size:var(--fs-2xs)}
.ln-q{border:0;margin:0;padding:14px 0 0;border-top:2px solid rgba(17,24,39,.12);display:flex;flex-direction:column;gap:8px;min-width:0}
.ln-q legend{float:left;width:100%;display:flex;gap:10px;align-items:flex-start;font:700 17px/1.4 var(--ff);margin-bottom:6px;padding:0}
.ln-qn{flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:14px}
.ln-opt{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:2.5px solid var(--ink);border-radius:var(--r-s);cursor:pointer;font-size:16px;line-height:1.45;background:var(--white)}
.ln-opt input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--violet)}
.ln-opt:has(input:focus-visible){outline:3px solid var(--violet);outline-offset:2px}
.is-ok .ln-opt.picked{background:var(--ok-soft);border-color:var(--ok)}
.is-no .ln-opt.picked{background:var(--red-soft);border-color:var(--red-d)}
.ln-fb{margin:0;font-size:15px;line-height:1.55;font-weight:600;min-height:0}
.is-ok .ln-fb{color:var(--ok)}.is-no .ln-fb{color:var(--red-d)}
.ln-ans{font-size:15px;line-height:1.5}

/* takeaway, finish, prev/next, save */
.ln-takeaway{display:flex;gap:16px;align-items:flex-start;padding:22px 24px;background:var(--lilac);border:3px solid var(--ink);border-radius:var(--r-l)}
.ln-takeaway svg{flex:none;margin-top:4px}
.ln-takeaway p.d{margin:6px 0 0;font-size:var(--fs-2xs);line-height:1.3}
.ln-finish{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.ln-finish .btn .t-d{display:none}
.ln-finish .btn.is-done{background:var(--ok);border-color:var(--ink)}
.ln-finish .btn.is-done .t-o{display:none}.ln-finish .btn.is-done .t-d{display:inline-flex;align-items:center;gap:8px}
.ln-pn{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ln-pn-a{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:3px solid var(--ink);border-radius:var(--r-m);background:var(--white);color:var(--ink);text-decoration:none;transition:transform .2s ease}
.ln-pn-a:hover{transform:translateY(-3px);color:var(--ink)}
.ln-pn-a.next{text-align:right;background:var(--yellow)}
.ln-pn-a b{font-size:17px;line-height:1.3}
.ln-save{display:flex;flex-direction:column;gap:10px;padding:20px 22px;border:2px solid rgba(17,24,39,.25);border-radius:var(--r-m);background:rgba(255,255,255,.6)}
.ln-save h2{margin:0;font-size:19px}

/* recap */
.ln-recap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ln-recap>.ln-missing,.ln-recap>.ln-dl{grid-column:1/-1}
.ln-rc{display:flex;flex-direction:column;gap:10px;padding:22px;background:var(--white);border:3px solid var(--ink);border-radius:var(--r-l);box-shadow:var(--sh-2) var(--ink);min-width:0}
.ln-rc h2{margin:0;font-size:22px}
.ln-rc .ln-code.is-blank{color:var(--grey)}
.ln-dl{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding:22px 24px;background:var(--yellow);border:3px solid var(--ink);border-radius:var(--r-l)}
.ln-dl b{font-size:22px}

/* ---------- responsive ---------- */
@media (max-width:1180px){.ln-outs{grid-template-columns:repeat(3,minmax(0,1fr))}.ln-path,.ln-more{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1080px){
  .ln-hub-grid,.ln-ov-grid,.ln-ov-lessons,.ln-ov-2{grid-template-columns:1fr}
  .ln-hub-mas{display:none}
  .ln-ov-cards{height:220px;max-width:420px}
  .ln-ov-cards>span svg{width:84px;height:auto}
  .ln-ov-cards>span{left:calc(10px + var(--i) * 40px);top:calc(10px + var(--i) * 10px)}
}
@media (max-width:900px){
  .ln-grid{grid-template-columns:1fr}
  .ln-side{position:static}
  .ln-nav{box-shadow:none}
  .ln-feature{grid-template-columns:1fr}
  .ln-feature-cards{height:150px}.ln-feature-cards svg{width:74px;height:auto}.ln-feature-cards>span{left:calc(var(--i) * 52px)}
  .ln-recap{grid-template-columns:1fr}
}
@media (max-width:640px){
  .ln-outs,.ln-path,.ln-more,.ln-fields,.ln-compare,.ln-two,.ln-pn{grid-template-columns:1fr}
  .ln-card{width:60px;height:auto}
  .ln-hero-row{align-items:flex-start}
  .ln-list a{grid-template-columns:44px minmax(0,1fr) 26px;gap:12px;padding:14px}
  .ln-list .ln-n{width:44px;height:44px;font-size:24px}
  .cawr-part{grid-template-columns:40px minmax(0,1fr);gap:10px}
  .cawr-l{width:40px;height:50px;font-size:28px}
  .ln-phrases li{flex-direction:column;align-items:flex-start}
  .ln-pn-a.next{text-align:left}
}
@media (prefers-reduced-motion:reduce){.ln-ov-cards>span{animation:none}.ln-feature,.ln-list a,.ln-more a,.ln-feature-cards>span{transition:none}}
@media print{.ln-side,.ln-save,.ln-pn,.ln-finish,.site-head,.site-foot{display:none!important}.ln-grid{grid-template-columns:1fr}}
.ln-ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.ln-takeaway .ln-label,.ln-path li.open .tl,.bg-lilac .ln-label{color:var(--ink)}
.ln-grill{display:flex;flex-direction:column;gap:12px;padding:20px;border:3px solid var(--ink);border-radius:var(--r-m);background:var(--lilac)}
.ln-grill-head{display:flex;flex-direction:column;gap:4px}
.ln-grill-head .hw{font-size:24px;color:var(--violet);line-height:1}
.ln-grill-head b{font-size:22px}
.ln-grill-head p{margin:0;font-size:16px;line-height:1.55}
.ln-grill .ln-code{max-height:260px}
/* glossary */
.ln-gl{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:start}
.ln-gl-tools{position:sticky;top:calc(var(--head-h,96px) + 20px);display:flex;flex-direction:column;gap:10px;padding:20px;background:var(--white);border:3px solid var(--ink);border-radius:var(--r-l);box-shadow:var(--sh-2) var(--ink)}
.ln-gl-tools label{font-size:17px}
.ln-gl-tools input{min-height:50px;border:2.5px solid var(--ink);border-radius:var(--r-s);padding:0 14px;font:inherit;font-size:16px}
.ln-gl-jump{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.ln-gl-jump a{font:700 15px var(--ff);color:var(--violet)}
.ln-gl-list{display:flex;flex-direction:column;gap:40px;min-width:0}
.ln-gl-group{scroll-margin-top:calc(var(--head-h,96px) + 20px)}
.ln-gl-group h2{font-size:var(--fs-m);margin:0 0 16px}
.ln-gl-group dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ln-gl-term{padding:18px 20px;background:var(--white);border:2.5px solid var(--ink);border-radius:var(--r-m);scroll-margin-top:calc(var(--head-h,96px) + 20px)}
.ln-gl-term:target{background:var(--yellow);box-shadow:var(--sh-2) var(--ink)}
.ln-gl-term[hidden],.ln-gl-group[hidden]{display:none}
.ln-gl-term dt{font-size:19px;margin-bottom:6px}
.ln-gl-term dd{margin:0}.ln-gl-term dd p{margin:0;font-size:15.5px;line-height:1.6}
.ln-gl-why{margin-top:8px!important;padding-top:8px;border-top:2px dashed rgba(17,24,39,.18);color:var(--grey)}
.ln-gl-why b{color:var(--violet)}
@media (max-width:900px){.ln-gl{grid-template-columns:1fr}.ln-gl-tools{position:static}.ln-gl-jump{flex-direction:row;flex-wrap:wrap;gap:6px 14px}.ln-gl-group dl{grid-template-columns:1fr}}
.ln-gl-link{display:block;margin-top:8px}
/* lesson intro reel */
.ln-hero-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.ln-intro-reel{width:min(460px,38vw)}
.reel.wide{aspect-ratio:16/9;width:100%;rotate:-1.5deg;box-shadow:var(--sh-4) var(--yellow)}
.reel.wide .rl-sc{padding:7cqw 6cqw 5cqw;gap:2cqw}
.reel.wide .rl-big{font-size:13cqw}
.reel.wide .rl-mid{font-size:7.4cqw;line-height:.92}
.reel.wide .rl-sm{font-size:3.1cqw}
.reel.wide .rl-scr{font-size:5cqw}
.reel.wide .rl-words{height:16cqw}
.reel.wide .rl-pc{width:17cqw;height:auto;display:block}
.reel.wide .rl-mas{width:17cqw}
.reel.wide .rl-bars{left:12px;right:12px;top:10px}
.ln-intro-reel .reel-cap .hw{font-size:21px}
/* optional lesson video */
.ln-video{margin:0;display:flex;flex-direction:column;gap:10px}
.ln-video video{width:100%;aspect-ratio:16/9;background:var(--ink);border:3px solid var(--ink);border-radius:var(--r-m)}
.ln-video figcaption{font-size:15px;line-height:1.5}
@media (max-width:900px){.ln-hero-row{grid-template-columns:1fr;gap:26px}.ln-intro-reel{width:min(100%,480px);justify-self:start}}
/* certificate (just for fun) */
.ln-cert-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(28px,4vw,56px);align-items:center}
.ln-cert-side p{margin:0;font-size:17px;line-height:1.6}
.cert{position:relative;aspect-ratio:1.414/1;background:var(--cream);border:4px solid var(--ink);border-radius:var(--r-m);box-shadow:var(--sh-5) var(--ink);container-type:inline-size;overflow:hidden;color:var(--ink)}
.cert-lock{display:none}
.cert.locked .cert-lock{display:flex;position:absolute;left:50%;top:50%;translate:-50% -50%;rotate:-8deg;z-index:3;padding:1.4cqw 3cqw;background:var(--ink);color:var(--yellow);border:.5cqw solid var(--yellow);border-radius:1.4cqw;font:800 3.4cqw/1 var(--ff);box-shadow:.8cqw .8cqw 0 var(--violet);white-space:nowrap}
.cert-in{position:absolute;inset:3.2cqw;border:.5cqw dashed var(--violet);border-radius:1.4cqw;display:flex;flex-direction:column;align-items:center;text-align:center;padding:2.6cqw 5cqw 2cqw;gap:.6cqw}
.cert-top{align-self:stretch;display:flex;justify-content:space-between;align-items:center}
.cert-logo{width:18cqw;height:auto}
.cert-fun{font-size:3.4cqw;color:var(--red-d);rotate:6deg}
.cert-k{margin:.8cqw 0 0;font:800 2.4cqw/1 var(--ff);letter-spacing:.3em;text-transform:uppercase;color:var(--violet)}
.cert-small{margin:0;font-size:1.8cqw;line-height:1.3}
.cert-name{margin:.3cqw 0;font-size:6.4cqw;line-height:1;max-width:100%;overflow-wrap:anywhere}
.cert-by{margin:-.3cqw 0 .2cqw;font:700 2.8cqw/1 var(--ff-h);color:var(--violet)}
.cert-course{margin:.2cqw 0 0;font-size:5cqw;line-height:1;background:var(--yellow);padding:.4cqw 1.4cqw;border:.35cqw solid var(--ink);border-radius:1cqw;rotate:-1.5deg}
.cert-sub{margin:.8cqw 0 0;font-size:1.6cqw;line-height:1.3;color:var(--grey)}
.cert-foot{margin-top:auto;align-self:stretch;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:3cqw;padding:0 8cqw}
.cert-sign{display:flex;flex-direction:column;align-items:center;gap:.4cqw}
.cert-sign .hw{font-size:3.6cqw;line-height:1;color:var(--ink)}
.cert-date{font:700 2cqw/1 var(--ff)}
.cert-line{align-self:stretch;height:.25cqw;background:var(--ink)}
.cert-stamp{width:10cqw;height:10cqw;border-radius:50%;border:.5cqw solid var(--red-d);color:var(--red-d);display:flex;flex-direction:column;align-items:center;justify-content:center;rotate:-12deg;box-shadow:inset 0 0 0 .5cqw var(--cream),inset 0 0 0 .8cqw var(--red-d)}
.cert-stamp .dh{font-size:2.6cqw;line-height:1}.cert-stamp span:last-child{font:800 1.2cqw var(--ff);text-transform:uppercase;letter-spacing:.1em}
.cert-tiny{margin:.6cqw 0 0;font-size:1.2cqw;color:var(--grey)}
.cert-cards{position:absolute;left:1.4cqw;bottom:1.4cqw;display:flex}
.cert-cards svg{width:6.6cqw;height:auto}.cert-cards svg:nth-child(1){rotate:-18deg}.cert-cards svg:nth-child(2){rotate:-4deg;margin-left:-2.6cqw}.cert-cards svg:nth-child(3){rotate:10deg;margin-left:-2.6cqw}
.cert-mas{position:absolute;right:2cqw;bottom:1.8cqw}.cert-mas svg{width:9cqw;height:auto}
@media (max-width:1080px){.ln-cert-wrap{grid-template-columns:1fr}}
@media print{
  body.print-cert *{visibility:hidden}
  body.print-cert .cert,body.print-cert .cert *{visibility:visible}
  body.print-cert .cert{position:fixed;left:0;top:0;width:100%;box-shadow:none;border-radius:0}
  @page{size:A4 landscape;margin:0}
}
.ln-hero{overflow-x:clip}
@media (max-width:900px){.ln-intro-reel{width:calc(100% - 14px);max-width:480px}.reel.wide{rotate:-1deg;box-shadow:var(--sh-3) var(--yellow)}}
/* lesson intro video */
.ln-intro-video{width:min(500px,40vw);display:flex;flex-direction:column;gap:12px}
.ln-iv{display:block;width:100%;aspect-ratio:16/9;background:var(--ink);border:4px solid var(--white);border-radius:var(--r-l);box-shadow:var(--sh-4) var(--yellow);rotate:-1.5deg}
.ln-iv-txt{color:var(--mute);font-size:15px;line-height:1.5}
.ln-iv-txt summary{cursor:pointer;font:700 15px var(--ff);color:var(--lilac)}
.ln-iv-txt ol{margin:10px 0 6px;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.ln-iv-txt p{margin:0;color:var(--mute)}
@media (max-width:900px){.ln-intro-video{width:calc(100% - 12px);max-width:560px}.ln-iv{rotate:-1deg;box-shadow:var(--sh-3) var(--yellow)}}
@media (prefers-reduced-motion:reduce){.ln-iv{rotate:0deg}}

/* Lesson cards */
.deck.is-deck .dcard-quiz .ln-quiz{border:0;padding:0;background:none}
.deck.is-deck .ln-activity.dcard{box-shadow:none}
.deck.is-deck .ln-sec.dcard h2{font-size:clamp(26px,2.8vw,36px)}
.deck.is-deck .ln-sec.dcard p,.deck.is-deck .ln-sec.dcard li{font-size:18px}
.deck.is-deck .dcard-intro .ln-intro{font-size:clamp(19px,1.8vw,23px)}
.ln-q.need{border-color:var(--err)}
.dc-pdf{margin-top:6px}