/* ŁAŃCUCH — sekcja #lancuch między ścieżką Updates a czarną ofertą (od 10.10.2026; zastąpiła „Z mojego warsztatu” z taflą kanonu, stare pliki:
   _kopie/2026-10-10-przed-lancuchem/). Plik PRZENIESIONY z narzędzia: ~/Desktop/strony/HVMBAK-LANCUCH/narzedzie/wspolne/sekcja.css, kopiuje go
   tamtejsze tools/na-landing.mjs. NIE poprawiać tutaj: zmiana w narzędziu, potem ponowne przeniesienie (inaczej następne przeniesienie ją zgubi).
   Niesie reguły wszystkich wariantów z narzędzia (kafelek lekcji, okno, popyt, łącznik): o tym, który widać, decydują atrybuty data-* i zmienne
   na <section id="lancuch"> (stoją w index.html na stałe, skrypt src/lancuch.js ustawia je jeszcze raz, osobno dla telefonu).
   Na początku baza sekcji (.kn-wyb, .kn-etyk, .kn-h, .kn-p) z dawnego src/dostep.css. Przedrostek lc-: klasy strony się z nim nie zderzają.
   Wersja 2026-10-15a. */

/* ---------- BAZA SEKCJI (reguły przeniesione co do znaku z dawnego src/dostep.css; kolejność wobec reszty arkusza ta sama co wtedy) ---------- */
.kn-wyb{position:relative;z-index:2;background:var(--papier);color:var(--black);
  --f-etyk:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
  padding:calc(var(--vh,1svh)*14) 5vw calc(var(--vh,1svh)*14)}
/* winieta tła: ciemniejsze rogi, subtelnie, nic więcej */
.kn-wyb::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(118% 92% at 50% 48%,rgba(13,13,13,0) 56%,rgba(13,13,13,.06) 100%)}
.kn-wyb .krawedz .blysk{animation-delay:-12s}        /* trzy krawędzie szkła na stronie nie błyskają równo */
.kn-etyk{display:flex;justify-content:center;align-items:center;gap:10px;margin:0 0 22px;font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;line-height:1;color:rgba(13,13,13,.62)}
.kn-etyk i{flex:none;width:9px;height:2.5px;background:var(--bordo)}
.kn-h{margin:0;font-family:var(--display);font-weight:900;font-kerning:normal;text-transform:uppercase;line-height:1.06;letter-spacing:0;font-size:clamp(30px,3.7vw,52px)}
.kn-h span{white-space:nowrap}
.kn-h .it{font-style:italic;color:var(--bordo)}
.kn-p{margin:clamp(20px,2vw,28px) auto 0;max-width:33em;font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:400;font-size:clamp(17px,1.5vw,21px);
  line-height:1.45;color:rgba(13,13,13,.82);text-wrap:pretty}
.kn-p+.kn-p{margin-top:.75em}
@media(max-width:820px){
  .kn-wyb{padding:calc(var(--vh,1svh)*10) 18px calc(var(--vh,1svh)*11)}
  .kn-etyk{margin-bottom:16px;font-size:9.5px;letter-spacing:.06em}
  .kn-h{font-size:calc((100vw - 36px)/11.7)}
  .kn-h span{display:block}
  .kn-p{margin-top:18px;font-size:16.5px;line-height:1.46}
  .kn-p+.kn-p{margin-top:.7em}
}

.lc{z-index:3;overflow-x:clip;display:flow-root;
  --lc-nic:var(--bordo);--lc-w:1040px;--lc-m:47%;--lc-g:96px;--lc-s:1;--lc-ns:1;--lc-nf:1;
  --ok-pas:#0d0d0d;--ok-tyt:#fff;--ok-ram:#0d0d0d;--ok-tlo:#e1e3e6;--ok-tx:#0d0d0d;--ob:2px;--ohd:8;--oj:3;--ox:7px;--oy:7px;--zs:100%;--zr:0deg;--pz:0px;
  --lc-s0:1;--lc-nfz:1;--zmb:1;--zmv:1;--zn:1;--zt:1;--lc-on:22px;--lc-ou:22px;--lc-dz:46;--lc-da:.3;--lc-dm:.45;--lc-dv:9s;
  --stos-d:0px;--stos-g:0px;--pas-h:30px;--zk:var(--bordo);--lc-sd:64px;--lc-odd:clamp(18px,2vw,26px);      /* --lc-odd: oddech między zdaniem a nicią (nad nim i pod nim ten sam) */
  --f-mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace}
/* 11.10.2026 (Kuba: „HVMBAK System… między kropkami wyższą linią”): na tle z punktami góra sekcji staje na wielokrotności kroku siatki (20 px), więc napis nad
   nagłówkiem da się postawić dokładnie w połowie między dwoma rzędami punktów (reguły przy .lc-ne). Bez round() zostaje zwykły odstęp z .kn-wyb. */
.lc[data-st="1"]{padding-top:round(calc(var(--vh,1svh)*14),20px)}
.lc[data-ck="1"]{--lc-nic:var(--black)}
.lc[data-ck="2"]{--lc-nic:rgba(13,13,13,.4)}
.lc[data-ozk="1"]{--zk:var(--black)}
.lc[data-ozk="2"]{--zk:var(--ok-pas)}

/* tło sekcji: papier strony / siatka punktów / biel */
.lc-tlo{position:absolute;inset:0;pointer-events:none;display:none}
.lc[data-st="1"] .lc-tlo{display:block;background:radial-gradient(circle,rgba(13,13,13,.2) 1px,rgba(13,13,13,0) 1.35px) 50% 0/20px 20px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 140px,#000 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 140px,#000 100%)}
.lc[data-st="2"]{background:#fff}
.lc[data-st="2"]::before{display:none}

/* ---------- NAGŁÓWEK ---------- */
.lc-glowa{position:relative;max-width:1180px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
/* napis nad nagłówkiem (data-ne; Kuba 10.10 wieczorem: „HVMBAK System” nad „Łańcuch”). 1 = krojem etykiet, jak „CZĘŚĆ 01” przy płycie (.zestaw .nr landingu),
   2 = krojem zdania „Dlatego kurs uczy technologii…” (.pdz-most landingu + src/sekcja2.css: Archivo 500, wersaliki, na telefonie 13 px): jego typ */
.lc-ne{margin:0 0 20px;font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:10.5px;letter-spacing:.08em;text-indent:.08em;text-transform:uppercase;line-height:1.2;color:rgba(13,13,13,.5)}
/* 11.10.2026 (Kuba): przed napisem ukośnik baby blue ze spacją; napis wyżej, bo zlewał się z kreską nad „Ń”. Na tle z punktami wiersz ma wysokość kroku siatki
   i zaczyna się 10 px pod jej linią: środek wersalików wypada wtedy równo między dwoma rzędami punktów (punkty stoją na 10, 30, 50… px od góry sekcji),
   o jeden rząd wyżej niż przedtem. */
.lc[data-st="1"][data-ne="1"] .lc-ne{margin:10px 0 36px;line-height:20px}
.lc-ne::before{content:'/';margin-right:.5em;font-weight:700;color:var(--baby)}
.lc[data-ne="2"] .lc-ne{margin-bottom:clamp(12px,1.25vw,18px);font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:500;font-size:calc(clamp(14px,1.25vw,18px)*.94);
  letter-spacing:.05em;text-indent:.05em;line-height:1.4;color:rgba(13,13,13,.86)}
.lc .lc-h{max-width:100%;font-size:calc(clamp(30px,3.7vw,52px)*var(--lc-ns))}
.lc .lc-h .lc-sl,.lc-n .lc-sl{white-space:nowrap}
.lc[data-nw="1"] .lc-h{color:var(--bordo)}
.lc[data-nw="2"] .lc-h{color:transparent;-webkit-text-stroke:1.6px var(--black);paint-order:stroke fill}
.lc-pod{margin:clamp(18px,1.9vw,26px) 0 0;max-width:33em;font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:400;font-size:clamp(17px,1.5vw,21px);line-height:1.4;color:rgba(13,13,13,.82);text-wrap:balance}
.lc[data-np="2"] .lc-pod{font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:11.5px;letter-spacing:.14em;text-indent:.14em;text-transform:uppercase;line-height:1.5;color:rgba(13,13,13,.62)}
.lc[data-np="3"] .lc-pod{font-family:var(--display);font-stretch:normal;font-weight:900;text-transform:uppercase;font-size:clamp(12px,1.25vw,17px);line-height:1.2;color:var(--black)}
.lc .lc-wstep{margin-top:clamp(14px,1.5vw,20px)}
/* ---------- ŁAŃCUCH POD NAGŁÓWKIEM (rysunek składa wspolne/ozdoba.js; tu kolor, grubość kreski, odstępy i ruch) ---------- */
.lc-ozm{display:contents}
.lc-ozd{--oz-c:var(--black);--oz-g:2px;max-width:100%;margin:var(--lc-on) 0 0;line-height:0}
.lc-ozd svg{display:block;max-width:100%;height:auto;overflow:visible}
.lc-ozm:not(:empty)+.lc-pod{margin-top:var(--lc-ou)}
.lc[data-nk="2"] .lc-ozd{--oz-c:var(--bordo)}
.lc[data-nk="1"] .lc-oz-a{--oz-c:var(--bordo)}
.lc-oz-k{fill:none;stroke:var(--oz-c);stroke-width:var(--oz-g)}
.lc-oz-p{fill:var(--oz-c);stroke:none}
.lc-oz-nic{stroke-width:1px}
.lc-oz-t{font-family:var(--f-etyk);font-stretch:normal;font-weight:600;letter-spacing:.04em;fill:var(--oz-c);font-variant-numeric:tabular-nums}
.lc-oz-w{fill:none;stroke:rgba(13,13,13,.42);stroke-width:1px}
.lc-oz-wk{fill:rgba(13,13,13,.42)}
.lc-oz-pod{font-family:var(--f-etyk);font-stretch:normal;font-weight:600;letter-spacing:.08em;fill:rgba(13,13,13,.62)}
/* ruch („żyje”): łańcuch jedzie jak taśma o jedno powtórzenie wzoru w kółko, końce giną w masce; blaszka zawieszki kołysze się na kółku */
.lc-ozd[data-jedzie]:not(.lc-dna){-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%)}      /* DNA z chromu ma własne maski na warstwach: maska na całym pudełku ucięłaby mu rozmycie i cień nad i pod helisą */
.lc-ozd[data-jedzie] svg{overflow:hidden}
.lc-oz-tor{animation:lc-jedzie var(--czas,6s) linear infinite}
@keyframes lc-jedzie{to{transform:translateX(calc(var(--okres)*-1))}}
.lc-oz-buja{animation:lc-buja 3.6s ease-in-out infinite alternate}
@keyframes lc-buja{from{transform:rotate(-3.2deg)}to{transform:rotate(3.2deg)}}
.lc-ozm.lc-stoi .lc-oz-tor,.lc-ozm.lc-stoi .lc-oz-buja,.lc-ozm.lc-stoi .lc-dna i{animation-play-state:paused}
/* ŁAŃCUCH DNA Z CHROMU (nc = 9): zdjęcie jednego skoku helisy w chromie kursorów, powtarzane w poziomie. Trzy warstwy tego samego kafla w trzech ostrościach
   leżą jedna na drugiej: najostrzejszą (a) widać w środku, dalej przebija średnia (b), na końcach zostaje najmocniej rozmyta (c), a całość gaśnie do zera.
   --lc-dz długość (% szerokości ekranu: łańcuch może wyjść poza kolumnę aż do krawędzi strony, sekcja przycina to, co wystaje), --lc-da gdzie zaczyna się
   rozmywać, --lc-dm jaka część drogi do końca gaśnie (oba jako ułamek drogi od środka do końca). Wysokość w układzie = sama helisa (--dh); kafel jest wyższy
   (zapas na rozmycie i cień, --dH) i wystaje w odstępy nad i pod. Ruch: kafle jadą o jeden skok w kółko (wygląda jak obrót śruby); warstwy mają overflow:hidden,
   więc ich ruch nie każe przeglądarce przenosić reszty strony na osobne warstwy. */
.lc-dna{position:relative;flex:none;width:calc(var(--lc-dz)*1vw);max-width:none;height:var(--dh);--T0:calc(1 - var(--lc-dm));
  --Ta0:var(--lc-da);--Ta1:calc(var(--lc-da) + (1 - var(--lc-da))*.5);--Tb0:calc(var(--lc-da) + (1 - var(--lc-da))*.38);--Tb1:calc(var(--lc-da) + (1 - var(--lc-da))*.92)}
.lc-dna-w{position:absolute;left:0;right:0;top:var(--dt);height:var(--dH);overflow:hidden;pointer-events:none;
  --gasnie:linear-gradient(90deg,transparent 0,#000 calc(50% - 50%*var(--T0)),#000 calc(50% + 50%*var(--T0)),transparent 100%);
  -webkit-mask-image:var(--gasnie);mask-image:var(--gasnie)}
.lc-dna-a{--okno:linear-gradient(90deg,transparent calc(50% - 50%*var(--Ta1)),#000 calc(50% - 50%*var(--Ta0)),#000 calc(50% + 50%*var(--Ta0)),transparent calc(50% + 50%*var(--Ta1)))}
.lc-dna-b{--okno:linear-gradient(90deg,transparent calc(50% - 50%*var(--Tb1)),#000 calc(50% - 50%*var(--Tb0)),#000 calc(50% + 50%*var(--Tb0)),transparent calc(50% + 50%*var(--Tb1)))}
.lc-dna-a,.lc-dna-b{-webkit-mask-image:var(--okno),var(--gasnie);mask-image:var(--okno),var(--gasnie);-webkit-mask-composite:source-in;mask-composite:intersect}
.lc-dna-w i{position:absolute;left:calc(var(--dp)*-.5);top:0;width:calc(100% + var(--dp)*2);height:100%;background-repeat:repeat-x;background-position:50% 0;background-size:var(--dp) 100%}
.lc-dna[data-jedzie] .lc-dna-w i{animation:lc-dna-jedzie var(--lc-dv) linear infinite}
@keyframes lc-dna-jedzie{to{transform:translateX(calc(var(--dp)*-1))}}
.lc-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin:clamp(20px,2.1vw,28px) 0 0;font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1;color:rgba(13,13,13,.62)}
.lc-leg span{display:inline-flex;align-items:baseline;gap:9px}
.lc-leg em{font-style:normal}

/* ---------- ETYKIETA I ZNAKI ---------- */
.lc-et{display:flex;align-items:baseline;gap:calc(9px*var(--lc-es,1));margin:0;font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:calc(10.5px*var(--lc-es,1));letter-spacing:.08em;text-transform:uppercase;line-height:1;
  color:color-mix(in srgb,currentColor 62%,transparent);white-space:nowrap}
.lc-nr{font-weight:600;color:var(--black);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.lc-okno .lc-nr{color:inherit}
/* znak przy etykiecie (kreska, trójkąt, strzałka) i kropka REC stoją od LINII PISMA: dół znaku leży na linii napisu (znak nie ma własnej linii, więc bierze
   dolną krawędź), a „bottom” podnosi go tak, żeby jego środek wypadł w połowie wysokości wersalików (--kap; Inter: 0,727 kroju). Do 10.10.2026 znak stał
   na środku wiersza, a to, gdzie w wierszu leżą litery, każda przeglądarka liczy inaczej: na iPhonie Kuby kropka REC wisiała 2 piksele ekranu pod literami,
   trójkąt 2 piksele nad nimi, w Chrome na komputerze kropka 1,5 px za nisko. Ujemny margines u góry: znak nie zmienia wysokości wiersza etykiety. */
.lc-zn{flex:none;display:block;position:relative;--e:var(--lc-es,1);--kap:.727em;width:var(--zw);height:var(--zh);margin-top:calc(var(--zh)*-1);bottom:calc((var(--kap) - var(--zh))/2)}
@supports (height:1cap){ .lc-zn{--kap:1cap} }
.lc-zn svg{position:absolute;inset:0;margin:auto;display:block}
.lc-leg .lc-zn{--e:1}
/* 11.10.2026 (Kuba): zamiast kreski ukośnik baby blue, znak kroju etykiety na jej linii pisma (jak przy „HVMBAK System” i etykietach landingu) */
.lc-zn.lc-kr{width:auto;height:auto;margin-top:0;bottom:0;font-style:normal;font-weight:700;color:var(--baby)}
.lc-zn.lc-kr::before{content:'/'}
.lc-zn.lc-pl{--zw:calc(7px*var(--e));--zh:calc(8.4px*var(--e))}
.lc-zn.lc-pl svg{width:100%;height:100%;fill:var(--bordo)}
.lc-zn.lc-pl.lc-wkw{--zw:calc(15px*var(--e));--zh:calc(15px*var(--e));background:var(--black)}
.lc-zn.lc-pl.lc-wkw svg{width:calc(5.4px*var(--e));height:calc(6.5px*var(--e));fill:#fff;left:calc(1px*var(--e))}
.lc-zn.lc-pb{--zw:calc(8px*var(--e));--zh:calc(9.7px*var(--e))}
.lc-zn.lc-pb svg{width:100%;height:100%;fill:var(--zk)}

/* ---------- CIĄG ---------- */
.lc-ciag{position:relative;list-style:none;margin:0 auto;padding:max(var(--lc-g),64px) 0 0;max-width:1180px;display:flex;flex-direction:column;align-items:center}
.lc-og{position:relative;z-index:1;width:min(var(--lc-w),100%);display:flex;flex-direction:column;align-items:center}
.lc-og+.lc-og{margin-top:max(var(--lc-g),24px)}
.lc-og.lc-srodek,.lc-og.lc-srodek+.lc-og{margin-top:calc(max(var(--lc-g),24px) + 14px)}      /* tekst bez kafelka: nić kończy się z oddechem, więc odstęp jest o tyle większy */
.lc-og-p{width:100%}
.lc-og-s{width:min(820px,100%)}
/* mijanka: lekcje z lewej, zasoby z prawej; odstęp może być ujemny tylko między ogniwami z przeciwnych stron */
.lc[data-cu="1"] .lc-og.lc-lewa{width:var(--lc-m);align-self:flex-start}
.lc[data-cu="1"] .lc-og.lc-prawa{width:var(--lc-m);align-self:flex-end}
.lc[data-cu="1"] .lc-og.lc-lewa+.lc-og.lc-prawa,.lc[data-cu="1"] .lc-og.lc-prawa+.lc-og.lc-lewa{margin-top:var(--lc-g)}
.lc[data-cu="1"] .lc-og.lc-srodek,.lc[data-cu="1"] .lc-og.lc-srodek+.lc-og{margin-top:max(var(--lc-g),56px)}
/* nić nad zdaniem (data-sn=1): zdanie stoi pod ogniwem wyżej o długość nici (--lc-sd, suwak) + oddech; samą nić rysuje sekcja.js (wychodzi spod okien popytu) */
.lc[data-sn="1"] .lc-ciag>.lc-og.lc-og-s.lc-srodek{margin-top:calc(var(--lc-sd) + var(--lc-odd))}

.lc-linie{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.lc-linie path{fill:none;stroke:var(--lc-nic);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
.lc-linie .lc-ogn{fill:var(--papier);stroke:var(--lc-nic);stroke-width:1}       /* płytka zewnętrzna łańcucha */
.lc-linie .lc-ogw{fill:none;stroke:var(--lc-nic);stroke-width:1}                /* płytka wewnętrzna */
.lc-linie .lc-sw{fill:var(--lc-nic);stroke:none}                                /* sworzeń */
.lc[data-st="2"] .lc-linie .lc-ogn{fill:#fff}
.lc-lz{position:absolute;z-index:2;translate:-50% -50%;font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-size:12px;font-weight:600;letter-spacing:.14em;text-indent:.14em;
  text-transform:uppercase;line-height:1;color:var(--lc-nic);white-space:nowrap;min-width:1em;text-align:center}
.lc-lz.lc-nad{translate:-50% calc(-100% - 7px)}
.lc-plak{position:absolute;z-index:3;translate:-50% -50%;min-width:27px;height:19px;padding:0 6px;display:grid;place-items:center;background:var(--lc-nic);color:#fff;
  font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:10.5px;line-height:1;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.lc[data-ck="2"] .lc-plak{background:rgb(120,124,130)}

/* ---------- KAFELEK (wspólne dla lekcji i wnętrza okna) ---------- */
.lc-kaf{position:relative;width:100%;text-align:left}
.lc-tr{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.lc-kn{position:relative;display:flex;flex-direction:column;justify-content:center;gap:16px;min-width:0;
  padding:calc(clamp(30px,3.2vw,46px)*var(--mv,1)) calc(clamp(22px,2.6vw,38px)*var(--mb,1)) calc(clamp(32px,3.4vw,48px)*var(--mv,1)) calc(clamp(28px,3.2vw,46px)*var(--mb,1))}
.lc-ko{display:flex;flex-direction:column;justify-content:center;min-width:0;border-left:1px solid color-mix(in srgb,currentColor 16%,transparent);
  padding:calc(clamp(30px,3.2vw,46px)*var(--mv,1)) calc(clamp(28px,3.2vw,46px)*var(--mb,1)) calc(clamp(32px,3.4vw,48px)*var(--mv,1)) calc(clamp(26px,3vw,42px)*var(--mb,1))}
.lc .lc-n{font-size:calc(clamp(26px,3.05vw,44px)*var(--lc-s)*var(--lc-nf));line-height:1.04;color:inherit}
/* okno zasobu (Kanon™, Effects™) ma własne suwaki: marginesy w środku (--mb boki, --mv góra i dół), wielkość nazwy (--zn) i tekstu (--zt).
   Nazwa w oknie liczy się od skali bazowej (--lc-s0), nie od skali tekstu okna, żeby oba suwaki były niezależne; dopasowanie do szerokości ma własne (--lc-nfz). */
.lc-z{--mb:var(--zmb);--mv:var(--zmv);--lc-s:calc(var(--lc-s0)*var(--zt))}
.lc .lc-z .lc-n{font-size:calc(clamp(26px,3.05vw,44px)*var(--lc-s0)*var(--zn)*var(--lc-nfz))}
.lc-tmk{display:inline-block;position:relative;font-style:normal;font-size:.3em;line-height:1;top:-1.54em;margin-left:.06em}     /* HVMBAK Pro nie ma znaku ™: składa się z jego liter T i M */
.lc-t{margin:0;font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:600;font-size:calc(clamp(19px,1.74vw,25px)*var(--lc-s));line-height:1.22;color:inherit;text-wrap:balance}
.lc-o{margin-top:calc(clamp(10px,1.1vw,14px)*var(--lc-s));font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:400;font-size:calc(clamp(16px,1.2vw,17.5px)*var(--lc-s));line-height:1.5;
  color:color-mix(in srgb,currentColor 84%,transparent);text-wrap:pretty}
.lc-o p{margin:0}
.lc-o p+p,.lc-reszta p{margin-top:1.5em;margin-top:1lh}      /* akapit = pusta linia, dokładnie tak, jak wygląda w polu podczas pisania (do 10.10.2026: .62em) */
/* rozwijany opis: pierwszy akapit stoi, reszta pod „Czytaj dalej” */
.lc-zw .lc-reszta{overflow:hidden;max-height:0;visibility:hidden;transition:max-height .32s ease,visibility 0s linear .32s}
.lc-zw.lc-otw .lc-reszta{max-height:60em;visibility:visible;transition-delay:0s}
.lc-wiecej{all:unset;box-sizing:border-box;align-self:flex-start;display:inline-flex;align-items:center;gap:9px;margin-top:14px;cursor:pointer;font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;line-height:1;color:color-mix(in srgb,currentColor 72%,transparent)}
.lc-wiecej i{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:45deg;translate:0 -2px;transition:rotate .2s,translate .2s}
.lc-wiecej[aria-expanded="true"] i{rotate:-135deg;translate:0 1px}
.lc-wiecej:focus-visible{outline:2px solid var(--baby);outline-offset:4px}
/* duży numer konturem w rogu lewej szpalty */
.lc-wielki{position:absolute;right:clamp(16px,2vw,28px);top:clamp(14px,1.6vw,22px);font-family:var(--display);font-weight:900;font-size:clamp(38px,4.4vw,62px);line-height:.8;color:transparent;
  -webkit-text-stroke:1px var(--lc-kontur,rgba(13,13,13,.38));pointer-events:none;user-select:none}
.lc-okno .lc-wielki{--lc-kontur:color-mix(in srgb,var(--ok-tx) 42%,transparent)}
.lc-kaf{color:var(--black)}

/* wnętrze: jedna szpalta / na środku (lekcje: data-lu, zasoby: data-zu=2) */
.lc[data-lu="1"] .lc-l .lc-tr,.lc[data-lu="2"] .lc-l .lc-tr,.lc[data-zu="2"] .lc-z .lc-tr{display:block}
.lc[data-lu="1"] .lc-l .lc-kn,.lc[data-lu="2"] .lc-l .lc-kn,.lc[data-zu="2"] .lc-z .lc-kn{padding-bottom:0;gap:14px}
.lc[data-lu="1"] .lc-l .lc-ko,.lc[data-lu="2"] .lc-l .lc-ko,.lc[data-zu="2"] .lc-z .lc-ko{border-left:0;padding-top:clamp(16px,1.8vw,22px)}
.lc[data-lu="2"] .lc-l{text-align:center}
.lc[data-lu="2"] .lc-l .lc-et{justify-content:center}
.lc[data-lu="2"] .lc-l .lc-ko{align-items:center}
.lc[data-lu="2"] .lc-l .lc-o{max-width:36em}
.lc[data-lu="2"] .lc-l .lc-wiecej{align-self:center}

/* ---------- LEKCJA: warianty ---------- */
/* oś czasu (jak w odtwarzaczu przy płycie): tor, przebyte, gałka; --p = miejsce tej lekcji w ciągu lekcji */
.lc-os{position:relative;display:block;flex:none;height:9px}
.lc-os .lc-os-tor{position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:color-mix(in srgb,currentColor 18%,transparent)}
.lc-os .lc-os-jest{position:absolute;left:0;top:50%;height:1.5px;margin-top:-.75px;width:calc(var(--p,.5)*100%);background:currentColor}
.lc-os .lc-os-galka{position:absolute;top:50%;left:calc(var(--p,.5)*100%);width:7px;height:7px;border-radius:50%;background:currentColor;translate:-50% -50%}
/* 1 ekran: lewa szpalta to czarna plansza lekcji z nazwą, przyciskiem odtwarzania i osią czasu */
.lc-lw1 .lc-kn{padding:clamp(14px,1.5vw,20px);justify-content:stretch;container-type:inline-size}
.lc-ekran{position:relative;flex:1;min-height:56.25cqw;display:flex;flex-direction:column;gap:14px;padding:clamp(16px,1.8vw,24px);background:#0d0d0d;color:#fff;overflow:hidden;isolation:isolate}
.lc-ekran::before{content:'';position:absolute;inset:0;z-index:-3;background:radial-gradient(90% 80% at 22% 10%,rgba(140,199,238,.2),rgba(140,199,238,0) 62%),linear-gradient(160deg,#1c2130 0%,#0d0d0d 60%)}
.lc-ekran::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(../img/ziarno-a.png) 0 0/64px 64px;mix-blend-mode:soft-light;opacity:.45}
.lc-ekran-foto{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.lc-ekran-cien{display:none}
.lc-ekran.lc-zfoto .lc-ekran-cien{display:block;position:absolute;inset:0;z-index:-2;background:linear-gradient(to bottom,rgba(13,13,13,.55),rgba(13,13,13,.12) 42%,rgba(13,13,13,.8))}
.lc-ekran .lc-et{color:rgba(255,255,255,.74)}
.lc-ekran .lc-nr{color:#fff}
.lc-ekran .lc-zn.lc-pl svg{fill:#fff}
.lc-ekran .lc-zn.lc-kr{color:var(--baby)}
.lc-ekran .lc-zn.lc-pl.lc-wkw{background:#fff}
.lc-ekran .lc-zn.lc-pl.lc-wkw svg{fill:#0d0d0d}
.lc .lc-ekran .lc-n{margin-top:auto;color:#fff;text-shadow:none}
.lc-ekran-graj{position:absolute;left:50%;top:50%;translate:-50% -50%;width:54px;height:54px;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.92)}
.lc-ekran-graj svg{width:14px;height:16.8px;fill:#fff;margin-left:3px}
.lc-ekran-graj.lc-rog{left:auto;right:clamp(14px,1.6vw,22px);top:clamp(12px,1.4vw,18px);translate:none;width:32px;height:32px}      /* brak miejsca między etykietą a nazwą: przycisk idzie do rogu */
.lc-ekran-graj.lc-rog svg{width:9px;height:10.8px;margin-left:2px}
/* 2 odtwarzacz: pas sterowania na dole tafli */
.lc-odtw{grid-column:1/-1;display:flex;align-items:center;gap:16px;height:46px;padding:0 clamp(18px,2vw,26px);border-top:1px solid rgba(13,13,13,.16)}
.lc-odtw-graj{flex:none;width:24px;height:24px;display:grid;place-items:center;background:var(--black)}
.lc-odtw-graj svg{width:8px;height:9.6px;fill:#fff;margin-left:1.5px}
.lc-odtw .lc-os{flex:1}
.lc-odtw-ster{flex:none;display:flex;align-items:center;gap:13px}
.lc-odtw-ster svg{display:block;height:9px;width:auto;fill:var(--black)}
/* 3 papier: biała karta z włosową obwódką */
.lc-l.lc-lw3{background:#fff;border:1px solid rgba(13,13,13,.1);box-shadow:0 1px 2px rgba(20,28,36,.06),0 18px 36px -24px rgba(20,28,36,.2),0 50px 80px -48px rgba(20,28,36,.26)}
/* 4 kadr: same narożniki wizjera i kropka nagrywania */
.lc-rogi{position:absolute;inset:0;pointer-events:none}
.lc-rogi i{position:absolute;width:20px;height:20px;border:1.5px solid var(--black)}
.lc-rogi i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.lc-rogi i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.lc-rogi i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.lc-rogi i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.lc-rogi b{position:absolute;right:15px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--bordo)}
/* kadr z „REC” (data-lr=1): górny wiersz kafelka. Etykieta z lewej i znak nagrywania z prawej stoją w jednej linii, w tym samym odstępie od krawędzi;
   pod znakiem format. Kropka ma wysokość wersalików i stoi na linii pisma napisu „REC” (góra i dół równo z literami, w każdej przeglądarce:
   patrz komentarz przy .lc-zn). Miga do zera (Kuba 10.10 wieczorem: „mryga, ale nie znika całkowicie, dziwnie to wygląda”). */
.lc-gora{grid-column:1/-1;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;min-width:0;padding:clamp(26px,2.7vw,36px) clamp(28px,3.2vw,46px) 0}
/* etykieta dłuższa niż miejsce obok znaku (wąski telefon, powiększone etykiety) łamie się, zamiast wypychać znak poza kafelek */
.lc-gora .lc-et{flex:0 1 auto;min-width:0}
.lc-gora .lc-et>span{white-space:normal;line-height:1.3;margin:-.15em 0}
.lc-rec{flex:none;margin:0 0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:calc(7px*var(--lc-es,1));font-family:var(--f-etyk);font-stretch:normal;font-weight:600;
  font-size:calc(10.5px*var(--lc-es,1));letter-spacing:.08em;text-transform:uppercase;line-height:1;white-space:nowrap;color:color-mix(in srgb,currentColor 62%,transparent)}
.lc-rec-1{display:flex;align-items:baseline;gap:calc(7px*var(--lc-es,1))}
.lc-rec-1 b{font-weight:600;color:var(--black);margin-right:-.08em}        /* odstęp po ostatniej literze nie odsuwa napisu od prawej krawędzi */
.lc-rec-2{margin-right:-.08em}
.lc-rec-k{flex:none;display:block;width:.727em;height:.727em;border-radius:50%;background:var(--bordo);animation:lc-mig 1.6s linear infinite}
@supports (height:1cap){ .lc-rec-k{width:1cap;height:1cap} }
@keyframes lc-mig{0%,56%{opacity:1}60%,96%{opacity:0}100%{opacity:1}}
.lc-zrec .lc-kn,.lc-zrec .lc-ko{padding-top:clamp(14px,1.5vw,20px)}

/* ---------- OKNO ---------- */
.lc-okno{position:relative;isolation:isolate;text-align:left;color:var(--ok-tx)}
.lc-okno-rama{position:relative;border:var(--ob) solid var(--ok-ram);background:var(--ok-tlo);transition:opacity .16s linear,scale .3s cubic-bezier(.2,1.5,.4,1)}
.lc-okno-pas{display:flex;align-items:center;gap:10px;height:var(--pas-h);padding:0 4px 0 11px;background:var(--ok-pas);color:var(--ok-tyt);
  font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:12px;line-height:1;letter-spacing:.01em;user-select:none;-webkit-user-select:none}
.lc-okno-tyt{flex:1;min-width:1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:text;-webkit-user-select:text}
.lc[data-of="1"] .lc-okno-pas{text-transform:uppercase;font-size:10.5px;letter-spacing:.08em}
.lc[data-of="2"] .lc-okno-pas{font-family:var(--f-mono);font-weight:500;font-size:12.5px;letter-spacing:0}
.lc-okno-guz{display:flex;gap:4px;flex:none}
.lc-okno-guz button{all:unset;box-sizing:border-box;width:22px;height:22px;display:grid;place-items:center;cursor:pointer;color:var(--ok-tyt)}
.lc-okno-guz button:focus-visible{outline:2px solid var(--baby);outline-offset:1px}
.lc-okno-guz svg{width:12px;height:12px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}
.lc-okno-guz button[data-g="m"],.lc-okno-guz button[data-g="k"]{display:none}
.lc[data-og="1"] .lc-okno-guz button{width:19px;height:19px;border:1.5px solid currentColor}
.lc[data-og="1"] .lc-okno-guz svg{width:9px;height:9px}
.lc[data-og="2"] .lc-okno-guz button{display:grid;width:19px;height:19px;background:var(--ok-tyt);color:var(--ok-pas)}
.lc[data-og="2"] .lc-okno-guz svg{width:10px;height:10px;stroke-width:2.2}
.lc[data-og="3"] .lc-okno-guz{display:none}
.lc[data-ogp="1"] .lc-okno-pas{flex-direction:row-reverse;padding:0 11px 0 4px}
.lc[data-ogp="1"] .lc-okno-tyt{text-align:right}
.lc[data-ogp="1"] .lc-okno-guz{flex-direction:row-reverse}
.lc-okno-cialo{position:relative}
/* rodzaj „kreska”: ramka i pasek kolorem tekstu, pasek bez wypełnienia */
.lc[data-ow="1"] .lc-okno-rama{border-color:var(--ok-tx)}
.lc[data-ow="1"] .lc-okno-pas{background:none;color:color-mix(in srgb,var(--ok-tx) 78%,transparent);border-bottom:1px solid var(--ok-tx)}
.lc[data-ow="1"] .lc-okno-guz button{color:var(--ok-tx)}
.lc[data-ow="1"][data-og="2"] .lc-okno-guz button{background:var(--ok-tx);color:var(--ok-tlo)}
.lc[data-ow="1"] .lc-stos i{border-color:var(--ok-tx);background:var(--ok-tlo)}
/* rodzaj „szkło”: tafla strony z ciemnym paskiem */
.lc[data-ow="2"]{--ok-tx:#0d0d0d}
.lc[data-ow="2"] .lc-okno-rama{background:rgba(255,255,255,.09);border:1px solid rgba(13,13,13,.1);-webkit-backdrop-filter:blur(2.5px) saturate(1.06);backdrop-filter:blur(2.5px) saturate(1.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(13,13,13,.05)}
.lc[data-ow="2"] .lc-okno-rama::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(155deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.09) 38%,rgba(255,255,255,0) 58%,rgba(40,50,60,.045) 100%)}
.lc[data-ow="2"] .lc-okno-rama::after{content:'';position:absolute;inset:0;pointer-events:none;background:url(../img/ziarno-a.png) 0 0/24px 24px;opacity:.1}
.lc[data-ow="2"] .lc-okno-pas{position:relative;z-index:1;background:color-mix(in srgb,var(--ok-pas) 90%,transparent)}
.lc[data-ow="2"] .lc-okno-cialo{z-index:1}
.lc[data-ow="2"] .lc-stos i{background:rgba(255,255,255,.2);border:1px solid rgba(13,13,13,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}

/* stos: do siedmiu okien pod spodem, widać tyle, ile wynosi --oj */
.lc-stos{position:absolute;inset:0;z-index:-1;pointer-events:none}
.lc-stos i{position:absolute;inset:0;translate:calc(var(--ox)*var(--i)) calc(var(--oy)*var(--i));z-index:calc(-1*var(--i));border:var(--ob) solid var(--ok-ram);
  background:linear-gradient(to bottom,var(--ok-pas) 0,var(--ok-pas) calc(var(--pas-h) + var(--ob)),var(--ok-tlo) calc(var(--pas-h) + var(--ob)));
  opacity:clamp(0,calc(var(--oj) - var(--i) + 1),1);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 1px 0 0 rgba(255,255,255,.3);
  /* widać tylko to, co wystaje spod okna z przodu (wycięty prostokąt okna): pod szkłem i pod zamkniętym oknem nic nie prześwituje bokiem */
  clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,
    calc(var(--ox)*var(--i)*-1) calc(var(--oy)*var(--i)*-1),calc(100% - var(--ox)*var(--i)) calc(var(--oy)*var(--i)*-1),
    calc(100% - var(--ox)*var(--i)) calc(100% - var(--oy)*var(--i)),calc(var(--ox)*var(--i)*-1) calc(100% - var(--oy)*var(--i)),
    calc(var(--ox)*var(--i)*-1) calc(var(--oy)*var(--i)*-1))}
.lc-okno.lc-zam .lc-stos i{clip-path:none}
/* cień: twardy / miękki / brak; przy oknie ze stosem stoi za ostatnim oknem stosu */
.lc-okno{--sxx:var(--sx0,0px);--syy:var(--sy0,0px)}
.lc-okno.lc-kaf{--sxx:var(--sx,0px);--syy:var(--sy,0px)}
/* cień jest przesunięty o --sxx/--syy (liczy je sekcja.js) i wycięty w miejscu samego okna, żeby pod szkłem nie robił szarej plamy */
.lc-cien{position:absolute;inset:0;z-index:-9;pointer-events:none;translate:var(--sxx) var(--syy);
  clip-path:polygon(evenodd,-200px -200px,calc(100% + 200px) -200px,calc(100% + 200px) calc(100% + 200px),-200px calc(100% + 200px),-200px -200px,
    calc(var(--sxx)*-1) calc(var(--syy)*-1),calc(100% - var(--sxx)) calc(var(--syy)*-1),calc(100% - var(--sxx)) calc(100% - var(--syy)),calc(var(--sxx)*-1) calc(100% - var(--syy)),calc(var(--sxx)*-1) calc(var(--syy)*-1))}
.lc[data-oh="0"] .lc-cien{background:rgba(13,13,13,.24)}
.lc[data-oh="1"] .lc-cien{box-shadow:0 1px 2px rgba(20,28,36,.14),0 calc(var(--ohd)*1.6px) calc(var(--ohd)*3.4px) calc(var(--ohd)*-.9px) rgba(20,28,36,.42)}
.lc[data-oh="2"] .lc-cien{display:none}
/* krzyżyk okna-kafelka: okno znika, spod spodu wygląda stos, po chwili wraca */
.lc-okno.lc-kaf.lc-zam .lc-okno-rama{opacity:0;scale:.94;transition-duration:.14s,.16s}

/* okno zasobu w ciągu */
.lc-og-z>.lc-okno,.lc-og-p>.lc-okno.lc-pg{width:var(--zs);margin-top:var(--stos-g);margin-bottom:var(--stos-d)}
.lc-og-z>.lc-okno{rotate:var(--zr)}
.lc-og-z.lc-np>.lc-okno{rotate:calc(var(--zr)*-1)}
.lc-z .lc-kn{gap:16px}
.lc-znak{flex:none;display:grid;place-items:center;align-self:flex-start}
.lc-znak.lc-zk-kolo,.lc-znak.lc-zk-kw{width:44px;height:44px;background:var(--zk)}
.lc-znak.lc-zk-kolo{border-radius:50%}
.lc-znak.lc-zk-kolo svg,.lc-znak.lc-zk-kw svg{width:15px;height:auto;fill:#fff}
.lc-znak.lc-zk-sama svg{display:block;width:26px;height:auto;fill:var(--zk)}
.lc-znak.lc-zk-tecz svg{display:block;width:64px;height:auto;filter:drop-shadow(0 6px 8px rgba(20,28,36,.18))}
.lc-tecz .b{fill:#cccccc}
.lc-tecz .f{fill:#f3f4f5}
.lc-tecz .a{fill:#7d1717}
/* wnętrze „komunikat”: duży znak z lewej, obok cała treść (jak okno komunikatu) */
.lc-komunikat{grid-template-columns:auto minmax(0,1fr)}
.lc-kz{display:flex;align-items:flex-start;padding:clamp(30px,3.2vw,46px) 0 clamp(30px,3.2vw,46px) clamp(26px,3vw,42px)}
.lc-komunikat .lc-znak.lc-zk-kolo,.lc-komunikat .lc-znak.lc-zk-kw{width:60px;height:60px}
.lc-komunikat .lc-znak.lc-zk-kolo svg,.lc-komunikat .lc-znak.lc-zk-kw svg{width:20px}
.lc-komunikat .lc-znak.lc-zk-sama svg{width:38px}
.lc-komunikat .lc-znak.lc-zk-tecz svg{width:84px}
.lc-komunikat .lc-ko{border-left:0;justify-content:flex-start;padding-left:clamp(20px,2.2vw,30px)}
.lc-komunikat .lc-ko .lc-n{margin:14px 0 clamp(16px,1.8vw,22px)}
/* dół okna: przycisk albo pasek pobierania */
.lc-przyc{display:inline-flex;align-self:flex-start;align-items:center;gap:14px;margin:calc(18px*var(--lc-s)) 0 0;padding:10px 13px 9px;border:1.5px solid currentColor;
  font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:1}
.lc-przyc i{display:block}
.lc-przyc svg{display:block;width:8px;height:9.7px;fill:currentColor}
.lc-pobieranie{margin-top:calc(20px*var(--lc-s))}
.lc-pob-gora{display:flex;justify-content:space-between;gap:12px;font-family:var(--f-etyk);font-stretch:normal;font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1;
  color:color-mix(in srgb,currentColor 62%,transparent)}
.lc-pob-gora b{font-weight:600;font-variant-numeric:tabular-nums}
.lc-pob-tor{margin-top:8px;height:9px;padding:1.5px;border:1.5px solid currentColor}
.lc-pob-tor i{display:block;height:100%;background:currentColor;transform-origin:0 50%}
.lc-js .lc-og:not(.lc-wid) .lc-pob-tor i{scale:0 1}
.lc-js .lc-og.lc-wid .lc-pob-tor i{transition:scale 1.7s cubic-bezier(.3,.6,.2,1) .4s}

/* ---------- POPYT ---------- */
.lc-p-glowa{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:min(760px,100%);will-change:transform}
.lc-p-glowa .lc-et{margin-bottom:clamp(16px,1.7vw,22px)}
.lc-p-glowa .lc-t{font-weight:400;font-size:calc(clamp(25px,2.9vw,42px)*var(--lc-s));line-height:1.17;letter-spacing:-.004em}
.lc-p-glowa .lc-o{max-width:33em;margin-top:calc(clamp(14px,1.5vw,20px)*var(--lc-s));font-size:calc(clamp(17px,1.5vw,21px)*var(--lc-s));line-height:1.45}
.lc-okno.lc-pg .lc-p-glowa{max-width:none;padding:clamp(28px,3vw,42px) clamp(22px,2.6vw,38px) clamp(30px,3.2vw,44px)}
.lc-licz{display:inline-grid;place-items:center;min-width:17px;height:15px;margin-left:1px;padding:0 4px;background:var(--bordo);color:#fff;font-weight:600;font-size:9.5px;letter-spacing:0;
  font-variant-numeric:tabular-nums;transition:scale .2s cubic-bezier(.2,1.6,.4,1)}
.lc-licz.lc-pik{scale:1.28}
.lc-scena{position:relative;width:100%;max-width:1040px;margin:clamp(34px,4vw,56px) auto 0}
.lc-scena:first-child{margin-top:0}
.lc[data-pg="2"] .lc-og-p{margin-top:calc(max(var(--lc-g),24px) + 14px - var(--pz))}
.lc[data-pg="2"] .lc-og-p{z-index:2}
/* bez skryptu (na landingu znaczniki stoją w HTML na stałe): okna w zwykłym rzędzie; silnik (okna.js) dodaje scenie .lc-zywa i ustawia je sam */
.lc-scena:not(.lc-zywa){display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:14px}      /* każde okno w swojej wysokości (zrzuty mają cztery): rozciągnięte do wysokości wiersza miałoby cień pod pustym miejscem */
.lc-scena:not(.lc-zywa) .lc-okno.lc-w{position:relative;translate:none;rotate:none;max-width:100%}
.lc-okno.lc-w{position:absolute;left:0;top:0;width:var(--pw,400px);translate:var(--x,0) var(--y,0);rotate:var(--r,0deg);z-index:var(--z,1);
  transition:opacity .2s linear,scale .3s cubic-bezier(.2,1.5,.4,1),translate .32s cubic-bezier(.2,.9,.3,1)}
.lc-okno.lc-w.lc-zam{opacity:0;scale:.82;pointer-events:none;transition-duration:.14s,.16s,.16s}
.lc[data-pi="2"] .lc-okno.lc-w.lc-zam{scale:1;translate:var(--x,0) calc(var(--y,0px) + 46px)}
.lc-okno.lc-ciagne,.lc-scena.lc-uklad .lc-okno,.lc-okno.lc-skok{transition:none}
.lc[data-pm="1"] .lc-w .lc-okno-pas{cursor:grab}
.lc-okno.lc-ciagne .lc-okno-pas{cursor:grabbing}
@media(hover:hover){ .lc[data-pm="1"]:not([data-pi="4"]) .lc-scena .lc-okno:hover{z-index:990} }   /* najechane okno wychodzi na wierzch, żeby dało się je przeczytać; nie w ruchu „kursor zamyka”: tam o kolejności w stosie decyduje sam silnik (prawdziwa myszka nad sceną niczego nie zmienia) */
/* zawartość: komunikat (kanciasty znak wiadomości i zdanie) */
.lc-kom{display:flex;align-items:flex-start;gap:13px;padding:15px 18px 18px 14px}
.lc-kom-zn{flex:none;display:block;margin-top:2px}
.lc-kom-zn svg{display:block;width:26px;height:24px;fill:var(--ok-tx)}
.lc-kom-tx{min-width:0;font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:500;font-size:19px;line-height:1.24;color:inherit;text-wrap:pretty}
.lc-kom-tx p{margin:0}
.lc-kom-tx p+p{margin-top:.28em}
/* zawartość: dymek rozmowy */
.lc-msg{display:flex;align-items:flex-end;gap:9px;padding:12px 15px 15px 13px}
.lc-kto{flex:none;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--ok-tx) 16%,transparent)}
.lc-dymki{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;font-family:'Inter',-apple-system,system-ui,sans-serif;font-stretch:normal;font-weight:400;font-size:15px;line-height:1.32}
.lc-dym{margin:0;padding:8px 13px 9px;border-radius:17px 17px 17px 5px;background:#fff;color:#0d0d0d;text-wrap:pretty}
.lc-dym:not(:last-child){border-bottom-left-radius:17px}
.lc-dym+.lc-dym{border-top-left-radius:5px}
/* zawartość: zrzut wiadomości od klienta (po = 3). Plik jest już przycięty do wnętrza okna (tools/zapytania.py): jedna szerokość, cztery wysokości
   (S, M, M+, L), pismo w każdym tej samej wielkości, tło w szarości okien strony albo białe. Okno bierze wysokość ze zrzutu; wymiary stoją w znaczniku,
   więc zna ją, zanim plik dojdzie. Zrzutu nie da się złapać ani zaznaczyć: okno przesuwa się za pasek. */
.lc-zap{display:block;background:var(--ok-tlo)}
.lc[data-pb="1"] .lc-zap{background:#fff}
.lc-zap img{display:block;width:100%;height:auto;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* zawartość: zrzut wgrany w narzędziu */
.lc-foto{display:block;width:100%;height:auto;object-fit:cover;object-position:0 0}
.lc[data-pa="1"] .lc-foto{aspect-ratio:16/10} .lc[data-pa="2"] .lc-foto{aspect-ratio:4/3}
.lc[data-pa="3"] .lc-foto{aspect-ratio:1} .lc[data-pa="4"] .lc-foto{aspect-ratio:3/4}
.lc[data-pq="1"] .lc-foto.lc-zrzut{filter:grayscale(1) contrast(1.04)}
.lc-kursor{position:absolute;left:0;top:0;z-index:999;width:22px;height:30px;translate:var(--kx,0) var(--ky,0);pointer-events:none;opacity:0;
  transition:translate var(--kt,.26s) cubic-bezier(.3,.8,.3,1),opacity .2s,scale .1s;transform-origin:2px 2px;filter:drop-shadow(1px 2px 1.5px rgba(13,13,13,.3))}
/* --kt: czas lotu kursora. W ruchu „kursor zamyka” silnik (okna.js) ustawia go z drogi do krzyżyka (180–320 ms); krzywa ta sama co zawsze */
.lc-kursor.lc-wid{opacity:1}
.lc-kursor.lc-klik{scale:.82}

/* ---------- ZDANIE (bez kafelka) ---------- */
/* Zdanie STOI (Kuba 10.10 wieczorem: „rusza się w momencie, kiedy się zmieniają te okienka nad nim… musi być statyczny”). Dwie rzeczy:
   (1) nie wjeżdża jak kafelki (reguła przy „WEJŚCIE OGNIW”): wjeżdżało 30 px w górę akurat wtedy, gdy nad nim wyskakiwały okna;
   (2) ma własną, stałą warstwę: okna popytu ruszają się przez scale/translate, a silnik Safari na czas każdego takiego ruchu przenosi wszystko, co jest
   malowane po nich, na osobne warstwy i po chwili z powrotem. Przy położeniu z ułamkiem piksela napis przeskakiwał wtedy o piksel ekranu.
   Ze stałą warstwą nic się nie przełącza. */
.lc-og-s{will-change:transform}
.lc-zd{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}
.lc-zd .lc-et{margin-bottom:clamp(16px,1.7vw,22px)}
.lc-zd-t{margin:0;max-width:19em;font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:400;font-size:calc(clamp(25px,2.9vw,42px)*var(--lc-s));line-height:1.17;letter-spacing:-.004em;color:var(--black);text-wrap:balance}
.lc[data-sw="1"] .lc-zd-t{max-width:none;font-family:var(--display);font-stretch:normal;font-weight:900;text-transform:uppercase;font-size:calc(clamp(20px,2.5vw,35px)*var(--lc-s));line-height:1.1;letter-spacing:0}
.lc[data-sw="2"] .lc-zd-t{max-width:33em;font-size:calc(clamp(17px,1.5vw,21px)*var(--lc-s));line-height:1.45;letter-spacing:0;color:rgba(13,13,13,.82)}
.lc-zd .lc-o{max-width:33em;margin-top:calc(clamp(14px,1.5vw,20px)*var(--lc-s))}
.lc-zd .lc-wiecej{align-self:center}

/* ---------- PRZEJŚCIE DO OFERTY ---------- */
.lc[data-bt="1"],.lc[data-bt="2"]{padding-bottom:0}
.lc-most{--L:var(--lc-md,64px);position:relative;display:flex;flex-direction:column;align-items:center;margin-top:clamp(18px,2vw,26px)}
.lc-most::before{content:'';width:1px;height:var(--L);background:var(--lc-nic)}
.lc-most .lc-lz{position:static;translate:none;margin:10px 0}
.lc-most[data-bt="2"]::after{content:'';width:1px;height:var(--L);background:var(--lc-nic)}
.lc-grot{width:13px;height:13px;margin-top:-13px;border-right:1px solid var(--lc-nic);border-bottom:1px solid var(--lc-nic);rotate:45deg;transform-origin:50% 50%;translate:0 -3px}

/* ---------- WEJŚCIE OGNIW (rusza IntersectionObserver, bez niego wszystko stoi) ---------- */
.lc-js[data-ca="1"] .lc-og{opacity:0;transition:opacity .6s ease}
.lc-js[data-ca="2"] .lc-og{opacity:0;translate:0 30px;transition:opacity .5s ease,translate .75s cubic-bezier(.2,.8,.2,1)}
.lc-js[data-ca="3"] .lc-og{opacity:0;translate:-40px 0;transition:opacity .5s ease,translate .75s cubic-bezier(.2,.8,.2,1)}
.lc-js[data-ca="3"] .lc-og.lc-zp{translate:40px 0}
.lc-js[data-ca="3"] .lc-og.lc-srodek{translate:0 30px}
.lc-js[data-ca] .lc-og.lc-wid{opacity:1;translate:0 0}
.lc-js[data-ca] .lc-og.lc-og-s{opacity:1;translate:none;transition:none}      /* zdanie nie wjeżdża: stoi od razu (patrz „ZDANIE”) */
/* Blok popytu też NIE wjeżdża (Kuba 10.10 ok. 21:00: etykieta, tytuł i opis nad oknami „też się trzęsą przez to, że pojawiają się te okienka”).
   Po wjeździe ogniwo zostawało z translate:0 0, czyli z przekształceniem; silnik Safari musi wtedy przenieść całe ogniwo na osobną warstwę za każdym razem,
   gdy któreś okno w środku rusza (scale / translate), i zdjąć ją po chwili: napis w ogniwie był przerysowywany przy każdym oknie. Bez przekształcenia ogniwo
   nie zmienia warstwy; okna mają własne wejście, więc blok nie potrzebuje wjazdu. Głowa ma do tego stałą warstwę, jak zdanie pod oknami. */
.lc-js[data-ca] .lc-og.lc-og-p{opacity:1;translate:none;transition:none}
.lc-js .lc-og.lc-odrazu{transition:none}

/* ---------- TELEFON ---------- */
@media(max-width:820px){
  .lc{--pas-h:27px;--lc-odd:16px}
  .lc[data-st="1"]{padding-top:round(calc(var(--vh,1svh)*10),20px)}
  .lc[data-st="1"][data-ne="1"] .lc-ne{margin:10px 0 28px}
  .lc .lc-h{font-size:calc(min(11.4vw,46px)*var(--lc-ns))}
  .lc-ne{margin-bottom:16px;font-size:9.5px;letter-spacing:.06em;text-indent:.06em}
  .lc[data-ne="2"] .lc-ne{margin-bottom:10px;font-size:13px}
  .lc-pod{margin-top:16px;font-size:16.5px;line-height:1.42}
  .lc[data-np="2"] .lc-pod{font-size:10.5px;letter-spacing:.12em;text-indent:.12em}
  .lc[data-np="3"] .lc-pod{font-size:12.5px}
  .lc-leg{margin-top:18px;font-size:9.5px;letter-spacing:.06em;gap:8px 18px}
  .lc-et{font-size:calc(9.5px*var(--lc-es,1));letter-spacing:.06em;gap:calc(8px*var(--lc-es,1))}
  /* okno zasobu na telefonie: szerokość z suwaka, ale nie więcej, niż zostawia stos (stos i cień muszą się zmieścić w marginesie strony: --zw-tel).
     Stoi na środku; gdy stos nie mieści się z boku, okno odsuwa się od niego o brakujący kawałek (margines po stronie stosu: --zkp z prawej, --zkl z lewej).
     Przy 100 % wychodzi dokładnie układ z 10.10.2026: okno od krawędzi do krawędzi, po stronie przeciwnej do stosu. */
  .lc-og-z>.lc-okno,.lc-og-p>.lc-okno.lc-pg{--zsz:min(var(--zs),calc(100% - var(--zw-tel,0px)));--zbr:max(0px,calc(var(--zw-tel,0px) - (100% - var(--zsz))/2));
    width:var(--zsz);align-self:center;margin-right:calc(var(--zbr)*2*var(--zkp,1));margin-left:calc(var(--zbr)*2*var(--zkl,0))}
  .lc-ciag{padding-top:max(var(--lc-g),52px)}
  .lc-og,.lc-og-s{width:100%}
  .lc[data-cu="1"] .lc-og.lc-srodek,.lc[data-cu="1"] .lc-og.lc-srodek+.lc-og{margin-top:max(var(--lc-g),46px)}
  .lc-lz{font-size:11px;letter-spacing:.12em;text-indent:.12em}
  .lc-kn{gap:12px;padding:calc(20px*var(--mv,1)) calc(18px*var(--mb,1)) 0}
  .lc-ko{display:block;border-left:0;padding:16px calc(18px*var(--mb,1)) calc(22px*var(--mv,1))}
  .lc[data-lu="1"] .lc-l .lc-kn,.lc[data-zu="2"] .lc-z .lc-kn{gap:12px}
  .lc[data-lu="1"] .lc-l .lc-ko,.lc[data-zu="2"] .lc-z .lc-ko{padding-top:16px}
  .lc .lc-n{font-size:calc(min(8.6vw,36px)*var(--lc-s)*var(--lc-nf))}
  .lc .lc-z .lc-n{font-size:calc(min(8.6vw,36px)*var(--lc-s0)*var(--zn)*var(--lc-nfz))}
  .lc-t{font-size:calc(20px*var(--lc-s));line-height:1.24}
  .lc-o{margin-top:calc(10px*var(--lc-s));font-size:calc(15px*var(--lc-s));line-height:1.44}
  .lc-wielki{right:14px;top:14px;font-size:40px}
  .lc-lw1 .lc-kn{padding:12px 12px 0}
  .lc-gora{padding:20px 18px 0;gap:12px}
  .lc-rec{font-size:calc(9.5px*var(--lc-es,1));letter-spacing:.06em;gap:calc(6px*var(--lc-es,1))}
  .lc-rec-1 b,.lc-rec-2{margin-right:-.06em}
  .lc-zrec .lc-kn{padding-top:20px}                    /* nazwa stoi wyraźnie pod wierszem formatu */
  .lc-ekran{padding:16px;gap:12px}
  .lc-ekran-graj{width:46px;height:46px}
  .lc-odtw{height:42px;gap:13px;padding:0 18px}
  .lc-okno-pas{font-size:11.5px;gap:8px;padding-left:9px}
  .lc[data-ogp="1"] .lc-okno-pas{padding-right:9px}
  .lc-okno-guz button{width:20px;height:20px}
  .lc[data-og="1"] .lc-okno-guz button,.lc[data-og="2"] .lc-okno-guz button{width:17px;height:17px}
  .lc-znak.lc-zk-kolo,.lc-znak.lc-zk-kw{width:38px;height:38px}
  .lc-znak.lc-zk-kolo svg,.lc-znak.lc-zk-kw svg{width:13px}
  .lc-znak.lc-zk-tecz svg{width:54px}
  .lc-komunikat{grid-template-columns:auto minmax(0,1fr)}
  .lc-kz{padding:20px 0 20px 16px}
  .lc-komunikat .lc-znak.lc-zk-kolo,.lc-komunikat .lc-znak.lc-zk-kw{width:40px;height:40px}
  .lc-komunikat .lc-znak.lc-zk-kolo svg,.lc-komunikat .lc-znak.lc-zk-kw svg{width:14px}
  .lc-komunikat .lc-znak.lc-zk-sama svg{width:26px}
  .lc-komunikat .lc-znak.lc-zk-tecz svg{width:50px}
  .lc-komunikat .lc-ko{padding:20px 16px 22px 14px}
  .lc-komunikat .lc-ko .lc-n{margin:12px 0 14px}
  .lc-p-glowa .lc-t,.lc-zd-t{font-size:calc(26px*var(--lc-s));line-height:1.18}
  .lc[data-sw="1"] .lc-zd-t{font-size:calc(min(6.2vw,26px)*var(--lc-s))}
  .lc[data-sw="2"] .lc-zd-t{font-size:calc(16.5px*var(--lc-s))}
  .lc-p-glowa .lc-o,.lc-zd .lc-o{font-size:calc(16.5px*var(--lc-s));line-height:1.46;margin-top:calc(14px*var(--lc-s))}
  .lc-okno.lc-pg .lc-p-glowa{padding:22px 18px 24px}
  .lc-scena{margin-top:32px}
  .lc-kom{padding:12px 13px 14px 11px;gap:10px}
  .lc-kom-zn svg{width:21px;height:19.4px}
  .lc-kom-tx{font-size:16.5px}
  .lc-msg{padding:10px 10px 12px 8px;gap:6px}
  .lc-kto{width:18px;height:18px}
  .lc-dymki{font-size:13px}
  .lc-dym{padding:7px 11px 8px}
  .lc-most{margin-top:16px}
}
@media(prefers-reduced-motion:reduce){ .lc-okno,.lc-okno-rama,.lc-kursor,.lc-licz,.lc-og,.lc-pob-tor i,.lc-reszta{transition:none!important} .lc-rec-k,.lc-oz-tor,.lc-oz-buja,.lc-dna-w i{animation:none} }