/* ============================================================
   TerenLabs · Lessons CSS
   Единый стилевой слой для уроков Академии. Light + Dark.
   Подключается в каждом уроке вместо inline <style>.

   Boot-script (минимум 5 строк) применяет .dark на <html>
   до парсинга стилей по prefers-color-scheme или localStorage.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;0,6..72,800;1,6..72,400;1,6..72,500;1,6..72,600&family=Playfair+Display:wght@700;800;900&display=swap');

:root {
  /* Light theme — TerenLabs brand */
  --les-bg:#FFFFFF;
  --les-surface:#FFFFFF;
  --les-surface-2:#FAFCFD;
  --les-border:rgba(0,43,69,0.10);
  --les-border-2:rgba(0,43,69,0.06);
  --les-text:#002B45;
  --les-text-2:#3D4F5E;
  --les-text-3:#7A8B99;
  --les-aqua:#00B7C2;
  --les-aqua-deep:#007F87;
  --les-aqua-soft:rgba(0,183,194,0.10);
  --les-aqua-glow:rgba(79,211,221,0.14);
  --les-warm:#D4722B;
  --les-warm-soft:rgba(212,114,43,0.10);
  --les-green:#2BA888;
  --les-green-soft:rgba(43,168,136,0.10);
  --les-red:#E85454;
  --les-red-soft:rgba(232,84,84,0.10);
  --les-warn:#D4A82B;
  --les-warn-soft:rgba(212,168,43,0.10);
  --les-accent:var(--les-aqua-deep);
  --les-hdr-bg:rgba(255,255,255,0.92);
  --les-nav-bg:rgba(255,255,255,0.92);
}

:root.dark {
  /* Dark theme — глубокий navy + aqua */
  --les-bg:#050B12;
  --les-surface:rgba(20,42,68,0.78);
  --les-surface-2:rgba(35,80,115,0.85);
  --les-border:rgba(255,255,255,0.10);
  --les-border-2:rgba(255,255,255,0.06);
  --les-text:#F5F7FA;
  --les-text-2:#C8D2DC;
  --les-text-3:#8B97A4;
  --les-aqua:#4FD3DD;
  --les-aqua-deep:#00B7C2;
  --les-aqua-soft:rgba(0,183,194,0.18);
  --les-aqua-glow:rgba(79,211,221,0.22);
  --les-warm:#E8A05C;
  --les-warm-soft:rgba(232,160,92,0.14);
  --les-green:#5FE0B5;
  --les-green-soft:rgba(95,224,181,0.14);
  --les-red:#FF6B6B;
  --les-red-soft:rgba(255,107,107,0.12);
  --les-warn:#F0C95E;
  --les-warn-soft:rgba(240,201,94,0.12);
  --les-accent:var(--les-aqua);
  --les-hdr-bg:rgba(5,11,18,0.92);
  --les-nav-bg:rgba(5,11,18,0.92);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* Ссылки в контенте: тема-зависимые цвета вместо браузерных синего/фиолетового.
   Классовые селекторы компонентов перекрывают это базовое правило. */
a{color:var(--les-text);text-decoration:underline;text-decoration-color:var(--les-aqua-deep);text-decoration-thickness:1.5px;text-underline-offset:2px}
a:visited{color:var(--les-text)}
a:hover{color:var(--les-aqua-deep)}
:root.dark a,:root.dark a:visited{color:#FFFFFF;text-decoration-color:var(--les-aqua)}
:root.dark a:hover{color:var(--les-aqua)}

html,body{
  background:var(--les-bg);
  color:var(--les-text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
  transition:background 0.3s ease,color 0.3s ease;
}
html::before{
  content:'';position:fixed;inset:0;z-index:-2;
  background:var(--les-bg);
}
html::after{
  content:'';position:fixed;top:-100px;left:-30%;right:-30%;height:520px;z-index:-1;
  background:radial-gradient(ellipse 60% 100% at 30% 20%,var(--les-aqua-glow),transparent 70%),
             radial-gradient(ellipse 50% 80% at 80% 10%,rgba(79,211,221,0.10),transparent 65%);
  pointer-events:none;
}

/* ══════ HEADER ══════ */
.hdr{
  position:sticky;top:0;z-index:50;
  background:var(--les-hdr-bg);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border-bottom:0.5px solid var(--les-border);
  padding:14px 20px 12px;
}
.hdr::after{
  content:'';position:absolute;bottom:-20px;left:0;right:0;height:20px;
  background:linear-gradient(180deg,var(--les-hdr-bg) 0%,transparent 100%);
  pointer-events:none;
}
.hdr-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.hdr-badge{
  background:var(--les-aqua-soft);color:var(--les-aqua-deep);
  font-size:11px;font-weight:700;letter-spacing:1.2px;
  padding:4px 10px;border-radius:6px;
}
.hdr-mod{
  font-size:12px;color:var(--les-text-3);font-weight:600;
  min-width:0;max-width:52%;text-align:right;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;
}
.prog{display:flex;align-items:center;gap:10px}
.prog-n{font-size:12px;color:var(--les-text-3);font-weight:700;font-variant-numeric:tabular-nums}
.prog-track{flex:1;height:5px;background:var(--les-border);border-radius:5px;overflow:hidden}
.prog-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--les-aqua-deep),var(--les-aqua))}
.hdr-back{
  display:flex;align-items:center;gap:4px;background:transparent;
  border:0.5px solid var(--les-border);border-radius:8px;padding:6px 12px;
  font-family:inherit;font-size:12px;font-weight:700;color:var(--les-text-2);
  cursor:pointer;white-space:nowrap;
}
.hdr-back:active{background:var(--les-surface)}
.hdr-back svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.5;fill:none}

/* ══════ PAGE ══════ */
.page{max-width:460px;margin:0 auto;padding:20px 18px 120px}

/* ══════ HERO ══════ */
.hero{text-align:center;padding:32px 0 24px}
.hero-ico{font-size:48px;display:block;margin-bottom:12px}
.hero h1{
  font-family:'Newsreader',Georgia,serif;
  font-weight:600;font-size:28px;line-height:1.2;letter-spacing:-0.018em;
  color:var(--les-text);margin-bottom:8px;
  font-variation-settings:"opsz" 28;
}
.hero h1 .o{color:var(--les-aqua-deep);font-style:italic;font-weight:500}
.hero-sub{font-size:14px;color:var(--les-text-3);font-weight:500}

/* ══════ HERO IMAGE (концепт-баннер главы) ══════ */
.les-hero-img{
  display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:14px;margin:4px 0 0;
  border:0.5px solid var(--les-border);
  box-shadow:0 1px 2px rgba(0,43,69,0.05),0 8px 22px rgba(0,43,69,0.07);
  background:var(--les-surface-2);
}
.les-hero-img + .hero{padding-top:18px}

/* ══════ CARD ══════ */
.c{
  background:var(--les-surface);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border:0.5px solid var(--les-border);
  border-radius:14px;
  padding:20px 18px;
  margin-bottom:14px;
  box-shadow:0 1px 2px rgba(0,43,69,0.04),0 6px 18px rgba(0,43,69,0.04);
}
.c p{font-size:15px;color:var(--les-text-2);margin-bottom:10px;line-height:1.75}
.c p:last-child{margin-bottom:0}
.c strong{font-weight:700;color:var(--les-text)}

.c.al{border-left:3.5px solid var(--les-accent);background:var(--les-aqua-soft)}
.c.ag{border-left:3.5px solid var(--les-green);background:var(--les-green-soft)}
.c.ao{border-left:3.5px solid var(--les-warm);background:var(--les-warm-soft)}

/* «Дальше — …» — кликабельная карточка перехода на следующую главу */
.c.next-card{
  cursor:pointer;
  position:relative;
  padding-right:46px;
  transition:transform 120ms ease, box-shadow 120ms ease;
  -webkit-tap-highlight-color:transparent;
}
.c.next-card:hover{box-shadow:0 1px 2px rgba(0,43,69,0.04),0 10px 24px rgba(0,43,69,0.08)}
.c.next-card:active{transform:scale(0.985)}
.c.next-card:focus-visible{outline:2px solid var(--les-warm);outline-offset:2px}
.next-card-arr{
  position:absolute;top:50%;right:16px;transform:translateY(-50%);
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  color:var(--les-warm);
}
.next-card-arr svg{width:22px;height:22px}

/* ══════ LABEL ══════ */
.lb{
  display:inline-block;
  font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  padding:4px 9px;border-radius:6px;margin-bottom:14px;
}
.lb.purple{color:var(--les-aqua-deep);background:var(--les-aqua-soft)}
.lb.red{color:var(--les-red);background:var(--les-red-soft)}
.lb.green{color:var(--les-green);background:var(--les-green-soft)}
.lb.orange{color:var(--les-warm);background:var(--les-warm-soft)}

/* ══════ VS GRID ══════ */
/* Блоки сравнения — последовательно (стек), а не 2 колонки: на узком экране
   Mini App две колонки длинного текста нечитаемы. */
.vs{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:14px}
.vs-i{
  background:var(--les-surface);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border:0.5px solid var(--les-border);
  border-radius:14px;padding:18px 14px;text-align:center;
  box-shadow:0 1px 2px rgba(0,43,69,0.04),0 6px 16px rgba(0,43,69,0.04);
}
.vs-i.gold{border-top:3.5px solid var(--les-green);background:var(--les-green-soft)}
.vs-i.paper{border-top:3.5px solid var(--les-red);background:var(--les-red-soft)}
.vs-ico{font-size:32px;margin-bottom:6px;display:block}
.vs-t{font-weight:700;font-size:15px;color:var(--les-text);margin-bottom:4px}
.vs-d{font-size:12.5px;color:var(--les-text-3);line-height:1.5}

/* ══════ DIVIDER ══════ */
.div{display:flex;align-items:center;gap:12px;margin:22px 0 18px}
.div .ln{flex:1;height:1px;background:var(--les-border)}
.div .dt{width:5px;height:5px;border-radius:50%;background:var(--les-text-3);opacity:0.6}

/* ══════ TIMELINE ══════ */
.tl{
  position:relative;margin-bottom:18px;
  background:var(--les-surface);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border:0.5px solid var(--les-border);
  border-radius:14px;
  padding:22px 20px 22px 38px;
  box-shadow:0 1px 2px rgba(0,43,69,0.04),0 6px 16px rgba(0,43,69,0.04);
}
.tl::before{
  content:'';position:absolute;left:18px;top:28px;bottom:28px;
  width:2px;background:linear-gradient(180deg,var(--les-aqua-deep),var(--les-green));border-radius:2px;
}
.tl-i{position:relative;margin-bottom:20px}
.tl-i:last-child{margin-bottom:0}
.tl-dot{
  position:absolute;left:-26px;top:4px;
  width:12px;height:12px;border-radius:50%;
  background:var(--les-surface-2);border:2.5px solid var(--les-aqua-deep);
  box-shadow:0 0 0 3px var(--les-aqua-soft);
}
.tl-i:last-child .tl-dot{border-color:var(--les-green);box-shadow:0 0 0 3px var(--les-green-soft)}
.tl-date{
  font-size:12px;font-weight:700;color:var(--les-aqua-deep);
  letter-spacing:0.5px;margin-bottom:4px;font-variant-numeric:tabular-nums;
}
.tl-i:last-child .tl-date{color:var(--les-green)}
.tl-txt{font-size:14px;color:var(--les-text-2);line-height:1.6}
.tl-txt strong{font-weight:700;color:var(--les-text)}

/* ══════ INSIGHT ══════ */
.ins{
  background:linear-gradient(135deg,var(--les-aqua-soft) 0%,var(--les-green-soft) 100%);
  border:0.5px solid var(--les-aqua-soft);
  border-radius:14px;padding:22px 18px;margin-bottom:14px;
  position:relative;
}
.ins-ico{
  position:absolute;top:-10px;left:16px;
  background:var(--les-bg);padding:0 4px;font-size:18px;border-radius:4px;
}
.ins p{font-size:14.5px;font-weight:500;color:var(--les-text);line-height:1.65}
.ins strong{color:var(--les-aqua-deep);font-weight:700}

/* ══════ REAL CASE CTA (перекрёстная связка урок→кейс) ══════ */
.case-cta{
  display:block;position:relative;overflow:hidden;
  margin-bottom:16px;padding:18px 18px 16px;
  border-radius:16px;text-decoration:none;color:inherit;
  background:
    radial-gradient(130% 90% at 100% 0%, rgba(232,84,84,0.18), transparent 58%),
    var(--les-surface);
  border:0.5px solid var(--les-border);
  border-left:3px solid var(--les-red);
  box-shadow:0 6px 22px rgba(232,84,84,0.12);
  transition:transform .14s ease, box-shadow .14s ease;
}
.case-cta:active{transform:scale(0.985);box-shadow:0 3px 12px rgba(232,84,84,0.14)}
.case-cta-flag{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--les-red);margin-bottom:10px;
}
.case-cta-pulse{
  width:7px;height:7px;border-radius:50%;background:var(--les-red);
  box-shadow:0 0 0 0 rgba(232,84,84,0.55);animation:casePulse 1.9s infinite;
}
@keyframes casePulse{
  0%{box-shadow:0 0 0 0 rgba(232,84,84,0.55)}
  70%{box-shadow:0 0 0 8px rgba(232,84,84,0)}
  100%{box-shadow:0 0 0 0 rgba(232,84,84,0)}
}
.case-cta-title{
  display:block;font-size:17px;font-weight:800;line-height:1.28;
  color:var(--les-text);margin-bottom:14px;letter-spacing:-0.01em;
}
.case-cta-go{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:700;color:#fff;
  background:var(--les-red);border-radius:11px;padding:9px 15px;
}
.case-cta-arr{font-size:15px;transition:transform .16s ease}
.case-cta:active .case-cta-arr{transform:translateX(3px)}

/* ══════ FACT SCROLL ══════ */
.fs{
  display:flex;gap:10px;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding:2px 0 12px;margin-bottom:14px;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent 100%);
          mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent 100%);
  transition:-webkit-mask-image 0.25s ease,mask-image 0.25s ease;
}
.fs.at-end{-webkit-mask-image:none;mask-image:none}
.fs::-webkit-scrollbar{display:none}
.fc{
  flex:0 0 auto;scroll-snap-align:start;width:180px;
  background:var(--les-surface);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border:0.5px solid var(--les-border);border-radius:10px;padding:14px;
}
/* ══════ FS DOTS (точечная пагинация под .fs) ══════ */
.fs-dots{
  display:flex;justify-content:center;gap:6px;
  margin:-6px 0 14px;
}
.fs-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--les-border);
  transition:background 0.25s ease,width 0.25s ease,border-radius 0.25s ease;
}
.fs-dot.on{
  background:var(--les-accent);width:18px;border-radius:3px;
}
.fc-ico{font-size:20px;margin-bottom:6px;display:block}
.fc-txt{font-size:12.5px;color:var(--les-text-2);line-height:1.5}
.fc-txt strong{color:var(--les-warm);font-weight:700}

/* ══════ LIST CARD ══════ */
.lc-hdr{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.lc-num{
  width:28px;height:28px;border-radius:7px;
  background:var(--les-aqua-soft);display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--les-aqua-deep);
  font-variant-numeric:tabular-nums;
}
.lc-t{font-weight:700;font-size:16px;color:var(--les-text)}
.c ul{list-style:none;padding:0}
.c li{position:relative;padding-left:18px;margin-bottom:8px;font-size:14px;line-height:1.55;color:var(--les-text-2)}
.c li::before{
  content:'';position:absolute;left:0;top:8px;
  width:6px;height:6px;border-radius:2px;background:var(--les-accent);opacity:0.55;
}
.c li strong{font-weight:700;color:var(--les-text)}

/* ══════ EXPANDABLE ══════ */
.ex{
  background:var(--les-surface);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border:0.5px solid var(--les-border);
  border-radius:14px;margin-bottom:10px;overflow:hidden;
}
.ex-h{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;cursor:pointer;user-select:none;-webkit-user-select:none;
}
.ex-h:active{background:var(--les-surface-2)}
.ex-q{font-size:14px;font-weight:600;color:var(--les-text);flex:1;padding-right:8px}
.ex-arr{
  width:24px;height:24px;border-radius:6px;
  background:var(--les-aqua-soft);display:flex;align-items:center;justify-content:center;
  transition:transform 0.3s;flex-shrink:0;
}
.ex-arr svg{width:12px;height:12px;stroke:var(--les-aqua-deep);stroke-width:2.5;fill:none}
.ex.open .ex-arr{transform:rotate(180deg)}
.ex-b{max-height:0;overflow:hidden;transition:max-height 0.35s ease;padding:0 16px}
.ex.open .ex-b{max-height:1600px;padding:0 16px 16px}
.ex-b p{font-size:13.5px;color:var(--les-text-2);line-height:1.7;margin-bottom:6px}
.ex-b p:last-child{margin-bottom:0}
.ex-b strong{color:var(--les-text)}

/* ══════ TAKEAWAY ══════ */
.tk{
  background:var(--les-surface-2);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1.5px solid var(--les-aqua-deep);
  border-radius:14px;padding:22px 18px;margin-bottom:14px;
  position:relative;overflow:hidden;
  box-shadow:0 4px 20px var(--les-aqua-soft),0 1px 2px rgba(0,43,69,0.06);
}
.tk::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--les-aqua-deep),var(--les-green),var(--les-aqua-deep));
  background-size:200% 100%;
  animation:tk-sh 4s ease-in-out infinite;
}
@keyframes tk-sh{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.tk-badge{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--les-aqua-deep);background:var(--les-aqua-soft);
  padding:5px 11px;border-radius:6px;margin-bottom:14px;
}
.tk h3{
  font-family:'Newsreader',Georgia,serif;
  font-weight:600;font-size:22px;line-height:1.25;color:var(--les-text);margin-bottom:16px;
  letter-spacing:-0.018em;font-variation-settings:"opsz" 22;
}
.tk h3 .hl{color:var(--les-aqua-deep);font-style:italic;font-weight:500}
.tk-pt{display:flex;gap:10px;margin-bottom:10px;align-items:flex-start}
.tk-pt:last-child{margin-bottom:0}
.tk-n{
  min-width:22px;height:22px;border-radius:6px;
  background:var(--les-aqua-soft);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--les-aqua-deep);
  margin-top:2px;font-variant-numeric:tabular-nums;
}
.tk-t{font-size:14px;color:var(--les-text-2);line-height:1.6}

/* ══════ QUOTE ══════ */
.qt{
  border-left:3.5px solid var(--les-warm);
  background:var(--les-warm-soft);
  border-radius:0 12px 12px 0;
  padding:18px 18px;margin-bottom:14px;
}
.qt p{font-size:14.5px;font-weight:500;font-style:italic;color:var(--les-text-2);line-height:1.6}

/* ══════ PULL-QUOTE (декоративная цитата с большими кавычками) ══════ */
.pq{
  position:relative;text-align:center;
  padding:36px 22px 24px;margin:22px 4px 18px;
}
.pq::before{
  content:'\201C';position:absolute;top:-8px;left:8px;
  font-family:'Newsreader',Georgia,serif;font-weight:700;
  font-size:120px;line-height:1;color:var(--les-accent);opacity:0.18;
}
.pq p{
  font-family:'Newsreader',Georgia,serif;font-style:italic;
  font-weight:500;font-size:22px;line-height:1.35;
  color:var(--les-text);letter-spacing:-0.012em;
  font-variation-settings:"opsz" 22;
}
.pq .pq-by{
  display:block;margin-top:14px;font-family:'Inter',sans-serif;font-style:normal;
  font-size:12px;font-weight:600;letter-spacing:0.6px;text-transform:uppercase;
  color:var(--les-text-3);
}

/* ══════ NUMBER-BOMB (гигантская цифра-ударник) ══════ */
.nb{
  text-align:center;padding:26px 18px 22px;margin-bottom:14px;
  background:linear-gradient(180deg,var(--les-aqua-soft) 0%,transparent 100%);
  border-radius:14px;border:0.5px solid var(--les-border-2);
}
.nb-n{
  font-family:'Newsreader',Georgia,serif;font-weight:700;
  font-size:64px;line-height:1;letter-spacing:-0.04em;
  color:var(--les-accent);display:block;margin-bottom:6px;
  font-variant-numeric:tabular-nums;
  font-variation-settings:"opsz" 64;
}
.nb-cap{font-size:13px;color:var(--les-text-2);font-weight:500;line-height:1.5;max-width:280px;margin:0 auto}
.nb-cap strong{color:var(--les-text);font-weight:700}
/* трёхблочная стат-сетка */
.nb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.nb-grid .nb{padding:16px 8px 14px;margin-bottom:0}
.nb-grid .nb-n{font-size:32px;letter-spacing:-0.03em;font-variation-settings:"opsz" 32}
.nb-grid .nb-cap{font-size:11.5px;line-height:1.35}

/* ══════ FORMULA BOX ══════ */
.fla{
  background:var(--les-surface-2);
  border:0.5px solid var(--les-border);
  border-radius:14px;padding:20px 18px;margin-bottom:14px;
  text-align:center;
}
.fla-lbl{
  font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--les-text-3);margin-bottom:10px;
}
.fla-eq{
  font-family:'Newsreader',Georgia,serif;font-style:italic;
  font-size:24px;line-height:1.3;color:var(--les-text);font-weight:500;
  letter-spacing:-0.01em;margin-bottom:10px;
  font-variation-settings:"opsz" 24;
  overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
}
.fla-eq .v{color:var(--les-accent);font-weight:600}
.fla-eq .op{color:var(--les-text-3);margin:0 4px;font-style:normal}
.fla-note{font-size:13px;color:var(--les-text-2);line-height:1.55;margin-top:6px}

/* ══════ STEP-FLOW (горизонтальные шаги со стрелкой) ══════ */
.flow{
  display:flex;align-items:stretch;gap:8px;margin-bottom:14px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:2px 0 8px;
  /* fade-mask на правом крае: последняя карточка слегка растворяется → сигнал что есть прокрутка */
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent 100%);
          mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent 100%);
  transition:-webkit-mask-image 0.25s ease,mask-image 0.25s ease;
}
/* JS снимает маску когда доскроллено до конца */
.flow.at-end{
  -webkit-mask-image:none;mask-image:none;
}
.flow::-webkit-scrollbar{display:none}
.flow-s{
  flex:0 0 130px;background:var(--les-surface);
  border:0.5px solid var(--les-border);border-radius:12px;padding:12px 10px;
  text-align:center;position:relative;
  box-shadow:0 1px 2px rgba(0,43,69,0.04);
}
.flow-s::after{
  content:'';position:absolute;right:-13px;top:50%;transform:translateY(-50%);
  width:10px;height:10px;
  border-right:2px solid var(--les-accent);border-top:2px solid var(--les-accent);
  transform:translateY(-50%) rotate(45deg);opacity:0.55;z-index:2;
}
.flow-s:last-child::after{display:none}
.flow-n{
  width:24px;height:24px;border-radius:6px;
  background:var(--les-aqua-soft);color:var(--les-accent);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;margin:0 auto 8px;
  font-variant-numeric:tabular-nums;
}
.flow-t{font-size:12.5px;font-weight:700;color:var(--les-text);line-height:1.3;margin-bottom:4px}
.flow-d{font-size:11px;color:var(--les-text-3);line-height:1.4}

/* ══════ DROP-CAP (большая первая буква) ══════ */
.dropcap::first-letter{
  font-family:'Newsreader',Georgia,serif;font-weight:700;
  float:left;font-size:54px;line-height:0.9;
  padding:6px 10px 0 0;
  color:var(--les-accent);font-style:italic;
  font-variation-settings:"opsz" 54;
}

/* ══════ COMPARE (2 колонки «было / стало» либо «анти / правильно») ══════ */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.cmp-i{
  background:var(--les-surface);border:0.5px solid var(--les-border);
  border-radius:12px;padding:14px 12px;
}
.cmp-i.bad{background:var(--les-red-soft);border-color:rgba(232,84,84,0.22)}
.cmp-i.good{background:var(--les-green-soft);border-color:rgba(43,168,136,0.22)}
.cmp-h{
  font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  margin-bottom:8px;
}
.cmp-i.bad .cmp-h{color:var(--les-red)}
.cmp-i.good .cmp-h{color:var(--les-green)}
.cmp-i p{font-size:13px;line-height:1.55;color:var(--les-text-2);margin:0}
.cmp-i p strong{color:var(--les-text);font-weight:700}

/* ══════ MODULE SIGNATURE COLORS ══════ */
/* по умолчанию aqua (m1). Переопределяется в [data-mod] */
html[data-mod="2"]{
  --les-accent:#D4722B;
  --les-aqua-soft:rgba(212,114,43,0.10);
  --les-aqua-glow:rgba(212,114,43,0.14);
}
html[data-mod="3"]{
  --les-accent:#2BA888;
  --les-aqua-soft:rgba(43,168,136,0.10);
  --les-aqua-glow:rgba(43,168,136,0.14);
}
html[data-mod="4"]{
  --les-accent:#B847B8;
  --les-aqua-soft:rgba(184,71,184,0.10);
  --les-aqua-glow:rgba(184,71,184,0.14);
}
html[data-mod="5"]{
  --les-accent:#E85454;
  --les-aqua-soft:rgba(232,84,84,0.08);
  --les-aqua-glow:rgba(232,84,84,0.14);
}
html[data-mod="6"]{
  --les-accent:#2B5BD4;
  --les-aqua-soft:rgba(43,91,212,0.10);
  --les-aqua-glow:rgba(43,91,212,0.14);
}
html[data-mod="7"]{
  --les-accent:#D4A82B;
  --les-aqua-soft:rgba(212,168,43,0.10);
  --les-aqua-glow:rgba(212,168,43,0.14);
}
html.dark[data-mod="2"]{--les-accent:#E8A05C;--les-aqua-soft:rgba(232,160,92,0.14)}
html.dark[data-mod="3"]{--les-accent:#5FE0B5;--les-aqua-soft:rgba(95,224,181,0.14)}
html.dark[data-mod="4"]{--les-accent:#D67BD6;--les-aqua-soft:rgba(214,123,214,0.14)}
html.dark[data-mod="5"]{--les-accent:#FF6B6B;--les-aqua-soft:rgba(255,107,107,0.12)}
html.dark[data-mod="6"]{--les-accent:#6A8FE5;--les-aqua-soft:rgba(106,143,229,0.14)}
html.dark[data-mod="7"]{--les-accent:#F0C95E;--les-aqua-soft:rgba(240,201,94,0.14)}

/* для модулей с не-aqua акцентом — hero .o italic слово, .tk бордер и shimmer, prog-fill, .lb.purple фон следуют за акцентом */
html[data-mod] .hero h1 .o{color:var(--les-accent)}
html[data-mod] .prog-fill{background:linear-gradient(90deg,var(--les-accent),var(--les-accent))}
html[data-mod] .tk{border-color:var(--les-accent);box-shadow:0 4px 20px var(--les-aqua-soft),0 1px 2px rgba(0,43,69,0.06)}
html[data-mod] .tk::before{background:linear-gradient(90deg,var(--les-accent),var(--les-aqua-deep),var(--les-accent));background-size:200% 100%}
html[data-mod] .tk-badge,html[data-mod] .tk-n,html[data-mod] .lc-num,html[data-mod] .hdr-badge{color:var(--les-accent);background:var(--les-aqua-soft)}
html[data-mod] .tk h3 .hl{color:var(--les-accent)}
html[data-mod] .c.al{border-left-color:var(--les-accent);background:var(--les-aqua-soft)}
html[data-mod] .lb.purple{color:var(--les-accent);background:var(--les-aqua-soft)}

/* ══════ NAV ══════ (скрыта — прежняя нижняя панель prev/next; href из неё читает lessons.js) */
.nav{display:none}

/* ══════ AIBAR ══════ (chat pill снизу, как в Mini App) */
.les-aibar{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  height:64px;padding:8px 18px;
  padding-bottom:max(8px,env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:flex-start;gap:10px;
  background:transparent;pointer-events:none;
  max-width:460px;margin:0 auto;
}
/* Scrim: текст под баром гаснет в фон, а не просвечивает сквозь pill */
.les-aibar::before{
  content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:100vw;height:130px;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,var(--les-bg) 0%,var(--les-bg) 28%,transparent 100%);
}
.les-aibar > *{pointer-events:auto}
.les-aibar-icon{
  flex-shrink:0;width:42px;height:42px;border-radius:50%;
  background:rgba(0,43,69,0.06);
  backdrop-filter:saturate(160%) blur(20px);
  -webkit-backdrop-filter:saturate(160%) blur(20px);
  border:0.5px solid rgba(0,43,69,0.18);
  display:flex;align-items:center;justify-content:center;
  color:var(--les-text);cursor:pointer;padding:0;
  box-shadow:0 4px 14px rgba(0,43,69,0.10),0 1px 3px rgba(0,43,69,0.06);
  transition:background 0.15s,transform 0.12s;
}
.les-aibar-icon:active{background:rgba(0,43,69,0.12);transform:scale(0.94)}
.les-aibar-icon svg{width:18px;height:18px}
.les-aibar-pill{
  flex:1;display:flex;align-items:center;height:42px;padding:0 18px;
  background:rgba(0,43,69,0.06);
  backdrop-filter:saturate(160%) blur(20px);
  -webkit-backdrop-filter:saturate(160%) blur(20px);
  border:0.5px solid rgba(0,43,69,0.18);border-radius:100px;
  color:var(--les-text);font-size:14px;font-weight:500;
  cursor:pointer;text-align:left;
  box-shadow:0 4px 14px rgba(0,43,69,0.10),0 1px 3px rgba(0,43,69,0.06);
}
.les-aibar-pill:active{background:rgba(0,43,69,0.12)}
.les-aibar-text{
  font-family:'Newsreader',Georgia,serif;font-style:italic;
  font-weight:400;letter-spacing:-0.005em;color:var(--les-text-2);font-size:14.5px;
}

.dark .les-aibar-icon,.dark .les-aibar-pill{
  background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.22);color:var(--les-text);
  box-shadow:0 4px 14px rgba(0,0,0,0.30),0 1px 3px rgba(0,0,0,0.20);
}
.dark .les-aibar-icon:active,.dark .les-aibar-pill:active{background:rgba(255,255,255,0.18)}

.page{padding-bottom:96px !important}

/* ══════ SWIPE HINT ARROWS ══════ */
.les-swipe-arr{
  position:fixed;top:50%;transform:translateY(-50%);
  width:38px;height:64px;border-radius:14px;
  background:rgba(0,183,194,0.18);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border:0.5px solid rgba(0,183,194,0.28);
  display:flex;align-items:center;justify-content:center;
  color:var(--les-aqua-deep);cursor:pointer;padding:0;
  z-index:45;opacity:0;animation:les-arr-pulse 1.6s ease-in-out 0.4s 3;
  transition:opacity 0.6s ease,transform 0.18s;
  box-shadow:0 4px 14px rgba(0,43,69,0.10);
}
.les-swipe-arr.left{left:6px}
.les-swipe-arr.right{right:6px}
.les-swipe-arr svg{width:20px;height:20px}
.les-swipe-arr.finish{background:var(--les-aqua-deep);color:#fff;border-color:transparent}
.dark .les-swipe-arr.finish{background:var(--les-aqua);color:#002B45}
.les-swipe-arr:active{transform:translateY(-50%) scale(0.92)}
.les-swipe-arr.idle{opacity:0;animation:none;pointer-events:none}

@keyframes les-arr-pulse{
  0%{opacity:0;transform:translate(-6px,-50%)}
  20%,80%{opacity:0.85;transform:translate(0,-50%)}
  100%{opacity:0.22;transform:translate(0,-50%)}
}
.les-swipe-arr.right{animation-name:les-arr-pulse-r}
@keyframes les-arr-pulse-r{
  0%{opacity:0;transform:translate(6px,-50%)}
  20%,80%{opacity:0.85;transform:translate(0,-50%)}
  100%{opacity:0.22;transform:translate(0,-50%)}
}

/* ══════ PLAYFAIR ACCENT (серифные заголовки) ══════ */
.hero h1,.tk h3,.lc-t,.vs-t{font-family:'Playfair Display',Georgia,serif}
.hero h1{font-weight:800;letter-spacing:-0.015em}
.tk h3{font-weight:800}

/* ══════ ANIM / REVEAL ══════ */
@keyframes les-su{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.c,.vs,.tl,.ins,.fs,.ex,.tk,.qt{animation:les-su 0.5s ease-out both}
.c:nth-of-type(2){animation-delay:0.06s}
.c:nth-of-type(3){animation-delay:0.12s}
/* JS scroll-reveal: lessons.js вешает html.js-reveal + .rv на блоки. Тогда les-su гасим,
   блоки всплывают по скроллу. Без JS класса .js-reveal нет → работает обычная les-su (fallback). */
html.js-reveal .c,html.js-reveal .vs,html.js-reveal .tl,html.js-reveal .ins,html.js-reveal .fs,html.js-reveal .ex,html.js-reveal .tk,html.js-reveal .qt,html.js-reveal .fla{animation:none}
.rv{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ══════ HOVER-подсветка (только устройства с курсором) ══════ */
@media (hover:hover) and (pointer:fine){
  .c,.vs-i,.fc,.ex,.fla,.tl,.ins,.qt{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
  .c:hover,.vs-i:hover,.fc:hover,.ex:hover,.fla:hover,.tl:hover,.ins:hover,.qt:hover{border-color:var(--les-aqua-deep);box-shadow:0 0 0 1px var(--les-aqua-deep),0 10px 28px rgba(0,0,0,.22)}
}

@media (prefers-reduced-motion:reduce){
  *,.tk::before{animation:none !important;transition:none !important}
  .rv{opacity:1 !important;transform:none !important}  /* защита: контент всегда виден */
}
