/* Arkusz z index.html landingu: blok krojów + główny <style>, 1:1. NIE EDYTOWAĆ RĘCZNIE: odświeża tools/baza.sh. Style warsztatu są w sekcja.css. */

  @font-face{font-family:'HVMBAK Pro';font-style:normal;font-weight:900;font-display:block;src:url(fonts/HVMBAK-Pro.woff2) format('woff2')}
  @font-face{font-family:'HVMBAK Pro';font-style:italic;font-weight:900;font-display:swap;src:url(fonts/HVMBAK-Pro-Italic.woff2) format('woff2')}
  @font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-0103, U+0108-0117, U+011A-0140, U+0145-0159, U+015C-0178, U+017D-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
  @font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:block;src:url(fonts/archivo-pl.woff2) format('woff2');unicode-range:U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C}
  @font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:block;src:url(fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
  @font-face{font-family:'Archivo';font-style:italic;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-0103, U+0108-0117, U+011A-0140, U+0145-0159, U+015C-0178, U+017D-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
  @font-face{font-family:'Archivo';font-style:italic;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-italic-pl.woff2) format('woff2');unicode-range:U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C}
  @font-face{font-family:'Archivo';font-style:italic;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
  @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:block;src:url(fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
  @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:block;src:url(fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


  /* Landing kursu, budowany od nowa (31.08.2026). Pierwszy ekran (od 07.09):
     ŻYWY PRZEKRÓJ z HVMBAK-PREPARAT (vendor/preparat/, grafit z pulsującym halo,
     kreski atlasu z podpisami) przy prawej krawędzi; tekst po lewej. Mózg z pyłu
     USUNIĘTY. Drugi ekran (od 07.09 ~16:45): para helis DNA z narzędzia HVMBAK-DNA
     (vendor/dna/, ten sam materiał co przekrój — raymarching SDF, mleczne nici i
     grafitowe szczeble); helisy z silnika pyłu (vendor/pyl/) USUNIĘTE razem z całym
     vendor/pyl. Listy ROŚNIE/MALEJE po bokach, niżej cytat. Typografia jak na
     hvmbak.pl (Archivo). Tło strony i paska: stonowana, nienasycona szarość (03.09,
     ze zrzutu Kuby; wcześniej czysta biel), pasek pre-ordera oddzielony tylko cienką
     kreską; płótna są przezroczyste, więc krawędzi płótna nie widać. */
  :root{
    --black:#0d0d0d; --orange:#C2410C; --baby:#8CC7EE; --bordo:#7A1F2B; --papier:#eceef0;   /* 07.09: środek gradientu z hvmbak.pl */
    --display:'HVMBAK Pro','Archivo',sans-serif; --text-wdth:75%;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{background:var(--papier);color:var(--black);font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);overflow-x:clip}
  /* TŁO (07.09): dokładnie to, co na hvmbak.pl (hub KASETA) — promienisty gradient
     przypięty do OKNA (fixed), jeden na całą stronę; sekcje i płótna są przezroczyste,
     więc między hero a DNA nie ma żadnej granicy (wcześniej hero miał fakturę papieru
     z presetu, DNA płaską szarość — Kuba widział szew). Silnik: P.przezr = 1 + alpha. */
  .tlo{position:fixed;inset:0;z-index:-2;pointer-events:none;
    background:radial-gradient(120% 90% at 50% 40%, #f7f8f9 0%, #eceef0 60%, #e2e5e8 100%)}

  /* UKŁAD (06.09): koniec wjazdu kamery w mózg. Hero (.ekran) to zwykły ekran
     100svh, pod nim sekcja DNA (.dna, 118svh, para helis z narzędzia HVMBAK-DNA,
     src/dna.js) i cytat. Wszystko na tej samej szarości — czerni już nie ma. */
  .ekran{position:relative;height:calc(var(--vh,1svh)*100);overflow:hidden}

  /* SEKCJA DNA: płótno na całą sekcję, tekst nad nim jako siatka wierszy
     (słowo lewe | para helis | słowo prawe, .rzedy) — słowa ROŚNIE po lewej
     helisy, MALEJE po prawej, naprzeciw siebie; ↑ w kolorze „ERA", ↓ przygaszone.
     Nagłówek w lewym górnym rogu, jak nagłówek hero. */
  /* Płótno DNA jest PRZEZROCZYSTE i pokrywa dokładnie sekcję (top 0, 100%): helisy zaczynają
     się POD ścianką szkła (.krawedz, 8 px) i schodzą do 98,5% wysokości sekcji, więc łańcuch
     wychodzi ze szklanego przecięcia i kończy się w kadrze. Warstwy: #c hero (0) < .dna (2)
     < .ui hero (4); .ekran NIE ma z-index, żeby .ui było nad DNA. */
  /* 07.09 ~10:30 (Kuba): dużo odstępu od CTA i długie łańcuchy — sekcja 118svh; skala helis
     wychodzi z wysokości sekcji przy stałej długości 8,74 j. (src/dna.js: USTAWIENIA).
     07.09 ~18:00: HELIS DOMYŚLNIE NIE MA (raymarching kosztuje 17 ms GPU na klatkę — więcej
     niż budżet 60 Hz; pomiary w README „Koszt GPU"). src/dna.js nadaje sekcji klasę .bezdna
     i chowa płótno; ?dna=klatka i ?dna=ruch przywracają helisy do oglądania. */
  .dna{position:relative;height:calc(var(--vh,1svh)*118);overflow:visible;background:transparent;z-index:2}
  #c2{position:absolute;left:0;right:0;top:0;width:100%;height:100%;display:block;pointer-events:none}
  .dna .tekst{position:absolute;inset:0;z-index:2;pointer-events:none;color:var(--black)}
  /* 07.09 (Kuba): cała treść NIŻEJ — helisy sięgają teraz górnej krawędzi (krawędzi szkła)
     i one łączą CTA hero z treścią, a nagłówki i wiersze mają oddech od przycisków.
     Wiersze wyśrodkowane na środku pary (środek ~46% sekcji, blok 183 px → top 36%). */
  .dna h2{position:absolute;top:26%;margin:0;font-family:var(--display);font-weight:900;font-kerning:normal;
    text-transform:uppercase;font-size:clamp(24px,2.8vw,46px);line-height:.9;letter-spacing:0}   /* 07.09: większe (Kuba), odsunięte od ścian */
  .dna h2>span{display:block;white-space:nowrap}
  /* 07.09 (Kuba): bez kropki i przecinka; w każdym bloku GÓRNE słowo pochyłe baby blue
     (WIĘCEJ, MNIEJ), DOLNE proste czarne (MOŻNA, TRZEBA). Oba bloki wyrównane do prawej
     w swoim polu: po prawej TRZEBA przy krawędzi, a krótsze MNIEJ wcięte; po lewej WIĘCEJ
     przy krawędzi (blok ma jego szerokość), a krótsze MOŻNA wysunięte do prawej —
     „lubię takie nietrzymanie", lustrzana różnica położeń zamiast równych krawędzi */
  .dna h2.l{left:7vw;text-align:left}
  .dna h2.l span+span{padding-left:.7em}   /* MOŻNA wysunięte w prawo o ~jedną literę (lustro wcięcia MNIEJ po prawej) */
  .dna h2.p{right:7vw;text-align:right}
  .dna h2 .it{font-style:italic}
  /* pochylenie W LEWO (07.09): glify .lt fontu pod kodami 𝘈 U+1D608+n, w prostej odmianie */
  .dna h2 .lt{font-style:normal;text-transform:none}
  .dna h2 .acc{color:var(--baby)}

  /* siatka: [słowo lewe][para helis][słowo prawe]; --para i --srodekY z src/dna.js.
     Desktop: wiersze z kropkowaną linią (Kuba: „na desktopie mogą być, fajnie
     zajmą przestrzeń"), strzałka na końcu od strony zewnętrznej. */
  .dna .rzedy{position:absolute;left:5vw;right:5vw;top:39%;transform:none;   /* 07.09: niżej, blok wierszy na środku pary (~47%) */
    display:grid;grid-template-columns:minmax(0,1fr) var(--para,30%) minmax(0,1fr);align-items:start;
    row-gap:0;font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:400;
    font-size:clamp(15px,1.25vw,19px);line-height:1.6;color:rgba(13,13,13,.84)}
  /* desktop (Kuba 06.09 ~23:15): słowa odsunięte OD helis ku krawędziom ekranu — kolumny
     kotwiczone do zewnętrznych krawędzi, nie do helis; helisy dalej od siebie (src/dna.js) */
  .dna .rzedy>*{width:100%;max-width:340px;box-sizing:border-box}
  .dna .rzedy .l{grid-column:1;justify-self:start}
  .dna .rzedy .p{grid-column:3;justify-self:end}
  .dna .rzedy h3{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-stretch:normal;font-weight:500;font-size:11px;
    letter-spacing:.16em;text-transform:uppercase;color:rgba(13,13,13,.5);margin:0 0 12px 0;line-height:1.2;
    padding-bottom:8px;border-bottom:1px solid rgba(13,13,13,.18)}
  /* wiersz = [strzałka][słowo]: strzałki w jednej kolumnie po LEWEJ słowa, po obu
     stronach tak samo, lewe krawędzie słów w jednej linii (Kuba: symetria) */
  .dna .rzedy div{display:grid;grid-template-columns:1.1em 1fr;column-gap:8px;align-items:baseline;
    border-bottom:1px dotted rgba(13,13,13,.18)}
  .dna .rzedy i{font-style:normal;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-stretch:normal;font-size:.85em;
    color:var(--baby)}
  .dna .rzedy .p i{color:rgba(13,13,13,.38)}
  .dna .rzedy .lam{font-weight:inherit}   /* na telefonie łamie długie hasło w dwie linie (niżej) */

  /* SEKCJA BEZ HELIS (07.09 ~18:00): klasę .bezdna nadaje src/dna.js, kiedy w adresie nie ma
     ?dna=… — helis nie ma, więc sekcja nie musi być wysoka na dwa łańcuchy, a dwie listy stają
     obok siebie na środku zamiast rozjeżdżać się do krawędzi ekranu. Nagłówki zostają w rogach
     (to ten sam rozstrzał WIĘCEJ ↔ MNIEJ), tylko schodzą do zawartości. */
  .dna.bezdna{height:auto;min-height:calc(var(--vh,1svh)*62);padding-bottom:calc(var(--vh,1svh)*8)}
  .dna.bezdna h2{top:15%}
  .dna.bezdna .rzedy{left:50%;right:auto;transform:translateX(-50%);width:min(92vw,860px);
    grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr);top:40%}
  .dna.bezdna .rzedy>*{max-width:none}


  /* KRAWĘDŹ SZKŁA (07.09, pomysł Kuby): sekcja DNA jako szklana płyta na podwyższeniu,
     a granica z hero to nie kreska koloru, tylko KRAWĘDŹ SZKŁA ze światłem — dosłownie
     kilka pikseli. Warstwy od góry: (1) miękki cień płyty na powierzchni hero tuż nad
     krawędzią, (2) refleks: jasna linia 1 px na górnym kancie, (3) ścianka szkła 7 px:
     tło pod nią rozmyte i rozjaśnione (załamanie), gradient bieli od góry do lekkiego
     przyciemnienia przy styku z powierzchnią, (4) linia styku ścianki z blatem (ciemna,
     cienka), (5) blask na powierzchni płyty pod krawędzią (blat łapie światło),
     (6) błysk — jasny odcinek refleksu wędrujący powoli po krawędzi (światło żyje).
     Rogi ostre, zero zaokrągleń. */
  .krawedz{position:absolute;left:0;right:0;top:0;height:8px;z-index:3;pointer-events:none}
  /* cień płyty na powierzchni hero + ciemna włoskowata linia tuż nad refleksem (kontur szkła) */
  .krawedz::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:16px;
    background:linear-gradient(to top, rgba(18,22,28,.16), rgba(18,22,28,.05) 40%, rgba(18,22,28,0));
    border-bottom:1px solid rgba(18,22,28,.10)}
  /* ścianka: pod jasnym kantem CIEMNIEJSZA (światło z góry ślizga się po pionie, Fresnel),
     przy dole drugi, słabszy refleks (światło wychodzące ze szkła), tło za nią rozmyte */
  .krawedz .scianka{position:absolute;inset:0;
    -webkit-backdrop-filter:blur(2px) saturate(1.2);backdrop-filter:blur(2px) saturate(1.2);
    background:linear-gradient(to bottom,
      rgba(255,255,255,.95) 0, rgba(255,255,255,.75) 18%,
      rgba(150,165,180,.22) 40%, rgba(120,135,150,.26) 62%,
      rgba(255,255,255,.55) 84%, rgba(255,255,255,.35) 100%);
    border-bottom:1px solid rgba(18,22,28,.20)}
  .krawedz .refleks{position:absolute;left:0;right:0;top:0;height:1.5px;
    background:linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,1) 40%, rgba(255,255,255,1) 60%, rgba(255,255,255,.5))}
  /* TOR BŁYSKU (14.09 wieczór, iPhone: „strona sama się kurczy"): błysk jeździ od −22% do 100% szerokości, więc przy prawym
     brzegu wystawał do 122% ekranu (zmierzone w WebKicie: dokument 390 → 471 px). iOS przy takim nadmiarze ODDALA całą stronę —
     co 16 s, na stojącej stronie. Tor ma szerokość ekranu i ucina błysk; ::before/::after krawędzi (cień, blat) są poza torem. */
  .krawedz .tor{position:absolute;left:0;right:0;top:0;height:2.5px;overflow:hidden}
  .krawedz .blysk{position:absolute;top:0;height:2.5px;width:22%;left:-22%;
    background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1) 50%, rgba(255,255,255,0));
    animation:blysk 16s cubic-bezier(.45,.05,.55,.95) infinite}
  @keyframes blysk{0%{left:-22%;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{left:100%;opacity:0}}
  /* blat płyty łapie światło tuż pod krawędzią */
  .krawedz::after{content:'';position:absolute;left:0;right:0;top:100%;height:80px;
    background:linear-gradient(to bottom, rgba(255,255,255,.40), rgba(255,255,255,.14) 35%, rgba(255,255,255,0))}
  @media(prefers-reduced-motion:reduce){ .krawedz .blysk{animation:none;opacity:0} }

  /* PODZIAŁ, wersja 3 (20.09.2026 wieczór, Kuba po obejrzeniu na telefonie: „za dużo mieści się na jednym ekranie, wszystko ma być większe,
     w ryj; wdrażamy plakietki liquid glass o ostrych rogach, wariant GŁĘBIA; ALE ogromne, pomarańczowe, w połowie pod szkłem; połączenia
     wyglądają jak najtańsze wektory z Figmy — kółka z kropką precz, góra i dół mają mówić jednym językiem, ma być clean”).
     Sekcja 2 czytana z góry na dół: TEN SAM ZESTAW KOMPETENCJI → KLAMRA (pień, belka, dwie szyny — włosowa kreska pod kątem prostym, jak
     klamra przy rycinie w atlasie; ostre naroża = ostre rogi szkła) → dwie TAFLE SZKŁA: Własna marka | Praca z klientami (nagłówek + hasła
     z myślnikami, prawa lustrzanie) → ta sama klamra odwrócona zbiera szyny w jeden pień → tafla „Dzięki AI możesz robić więcej / szybko
     i samodzielnie” → ogromne ALE, którego górną połowę przykrywa ta tafla → cytat markerem (bez szkła). Szyny BIEGNĄ POD SZKŁEM: każda
     przechodzi pod swoją taflą przy jej zewnętrznej krawędzi (treść ma tam szerszy margines), więc widać je ostre między taflami i rozmyte
     przez szkło. Pod szkłem leży też DUŻA STRZAŁKA (bordo, jak karteczka) od „Cała wiedza z lewej” / na telefonie „Wszystko to, co jest wyżej” do tafli Własna marka. Kreski rysuje scroll (src/podzial.js).
     SZKŁO = przepis z HVMBAK-SZKLO, wariant 03 GŁĘBIA, 1:1: baza .bm-card (biel .16, obrys .10, biała linia .60, rozmycie 2,5 px) + światło
     w masie z lewej-góry, jasny górny kant 1 px, miękki cień pod płytą, poświata i wąski refleks pod kursorem (--mx/--my/--kat). Rogi ostre.
     Poprzednia wersja (komórka, która się dzieli) w _kopie/index-przed-szklo-2026-09-20.html i _kopie/podzial-komorki-2026-09-20.js. */
  /* 22.09 (Kuba, iPhone: stronę dało się przesuwać na boki): dłoń z karteczką czeka za prawą krawędzią (translate 130cqw), ALE i dłoń
     wystają poza ekran — w WebKicie body{overflow-x:clip} tego nie łapie (scrollWidth 945 przy 390). Pierwsza próba `.szyba{overflow-x:clip}`
     + html: strona przestała jeździć, ale przyklejona plansza zaczęła DRŻEĆ przy scrollu na iPhonie (Kuba ~11:10) — w WebKicie sticky
     z przodkiem o overflow innym niż visible schodzi z wątku kompozytora. Dlatego NIC na przodkach planszy; cięcie siedzi na DZIECKU
     sticky (.ukl, clip-path w media query telefonu) — sprawdzone w Playwright WebKit: scrollWidth 390, scrollTo(300) → scrollX 0. */
  .szyba{position:relative;z-index:2;padding-block:calc(var(--vh,1svh)*16) calc(var(--vh,1svh)*16);padding-inline:5vw}
  .podzial{position:relative;max-width:1180px;margin:0 auto;text-align:center;isolation:isolate;
    --szyna:28px;                                   /* odległość szyny od zewnętrznej krawędzi tafli (pod szkłem) */
    --pad:48px}
  #pdzSvg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
  #pdzSvg path{fill:none;stroke:var(--bordo);stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}   /* 22.09 (Kuba): cały szkielet bordo, jak strzałka */
  #pdzSvg path.strzala{stroke:var(--bordo);stroke-width:2;stroke-linecap:square}   /* 20.09: strzałka i nagłówek w kolorze karteczki */
  #pdzSvg path.grot{stroke:var(--bordo);stroke-width:2;stroke-linecap:square;opacity:0;transition:opacity .25s}
  #pdzSvg path.grot.wid{opacity:1}
  .pdz-h{margin:0;font-family:var(--display);font-weight:900;font-kerning:normal;text-transform:uppercase;line-height:1.08;letter-spacing:0;color:var(--black)}
  .pdz-h .it{font-style:italic}
  .pdz-glowny{font-size:clamp(30px,4.4vw,62px)}              /* 22.09 (Kuba): tylko ZESTAW bordo i pochyłe, reszta czarna i prosta */
  .pdz-glowny .akc{color:var(--bordo)}
  .pdz-h br.tel{display:none}
  .pdz-rozejscie{height:clamp(120px,12vw,170px)}
  .tylko-t{display:none}                            /* tafle obok siebie → „z lewej”; na telefonie jedna pod drugą → „wyżej” (20.09) */
  .pdz-zejscie{height:clamp(200px,19vw,280px)}     /* 20.09: dłuższy pień przed planszą — oddech po taflach (było 130–190) */

  .szklo{position:relative;z-index:1;isolation:isolate;border-radius:0;--mx:70%;--my:18%;
    background:rgba(255,255,255,.16);border:1px solid rgba(13,13,13,.10);
    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),
      0 1px 2px rgba(20,28,36,.08),0 18px 36px -24px rgba(20,28,36,.22),0 50px 80px -48px rgba(20,28,36,.30)}
  .szklo>i{position:absolute;inset:0;pointer-events:none;border-radius:0;display:block}
  .szklo .optyka{z-index:-3;-webkit-backdrop-filter:blur(2.5px) saturate(1.06);backdrop-filter:blur(2.5px) saturate(1.06)}
  .szklo .masa{z-index:-2;background:
    linear-gradient(155deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.18) 38%,rgba(255,255,255,0) 58%,rgba(40,50,60,.09) 100%),
    radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.40),rgba(255,255,255,0) 60%)}
  .szklo .swiatlo{z-index:-1;background:
    radial-gradient(ellipse 54% 44% at var(--mx) var(--my),rgba(255,255,255,.30),rgba(255,255,255,0) 72%),
    linear-gradient(calc(100deg + var(--kat,0deg)),rgba(255,255,255,0) 40%,rgba(255,255,255,.16) 49%,rgba(255,255,255,0) 58%)}
  .szklo .tresc{position:relative;z-index:1}
  .szklo .pdz-h{text-shadow:0 0 14px rgba(255,255,255,.75),0 0 3px rgba(255,255,255,.6)}

  /* SZRON (05.10.2026 wieczór, remont sekcji 2; Kuba: „zbyt nudna”): pierwsza część sekcji leży pod zaśniedziałym, ziarnistym szkłem, pod którym
     wiszą dwa kursory 3D (czarny i biały), a kafelki są czystymi oknami w tym szkle. Wygląd Kuba stroił w warsztacie HVMBAK-ZAKRES
     (hvmbak-zakres.pages.dev) i odesłał linkiem; stan zamrożony w src/zakres.js, silnik w vendor/zakres/ (tools/eksport-zakres.sh).
     Płótno #szron leży w dokumencie pod treścią sekcji, wysokość ustawia silnik (od góry sekcji do nagłówka tezy; galeria zostaje czysta).
     Dopóki silnik nie wstał (rusza przy pierwszym ruchu użytkownika) i zawsze bez WebGL2, kafelki są szkłem CSS jak dotąd; potem płótno
     wchodzi przenikaniem, a <html> dostaje data-kafel="okno": szkło CSS kafelka gaśnie (okno rysuje płótno), a szyny klamry nie biegną
     już przez środek kafelka, tylko dochodzą do jego krawędzi i wychodzą pod nim (wycięcie #pdzPoza z src/podzial.js). */
  #szron{position:absolute;left:0;top:0;z-index:0;display:block;pointer-events:none;opacity:0;transition:opacity .5s ease}
  #szron.jest{opacity:1}
  .podzial{z-index:1}
  .pdz-kol.szklo{transition:background-color .5s ease,border-color .5s ease,box-shadow .5s ease}
  .pdz-kol.szklo>i{transition:opacity .5s ease,visibility 0s linear .5s}
  html[data-kafel="okno"] .pdz-kol.szklo{background-color:transparent;border-color:transparent;box-shadow:none}
  html[data-kafel="okno"] .pdz-kol.szklo>i{opacity:0;visibility:hidden}
  html[data-kafel="okno"] .pdz-kol .pdz-h,html[data-kafel="okno"] .pdz-kol ul,html[data-kafel="okno"] .pdz-dop p{text-shadow:none}   /* poświata pod tekstem była pod szkło CSS; na czystym oknie robi jaśniejsze plamy */
  html[data-kafel="okno"] #pdzSvg path.szyna{clip-path:url(#pdzPoza)}
  /* DOPISEK „co to zmienia” (05.10; Kuba: landing za mało mówi, kim ludzie się staną i co zyskają): jedno zdanie pod listą, pod włosową kreską;
     w prawym kafelku też od lewej, żeby czytało się normalnie. Zdania ułożone z jego słów, do jego poprawienia. */
  .pdz-dop{margin-top:clamp(24px,2.4vw,34px);padding-top:clamp(18px,1.8vw,24px);border-top:1px solid rgba(13,13,13,.18);text-align:left}
  .pdz-dop p{margin:0;font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:500;font-size:clamp(15.5px,1.3vw,19px);line-height:1.42;
    color:rgba(13,13,13,.84);text-wrap:pretty;text-shadow:0 0 10px rgba(255,255,255,.7)}
  @media(max-width:820px){ .pdz-dop{margin-top:22px;padding-top:16px} .pdz-dop p{font-size:14.5px;line-height:1.4} }
  @media(prefers-reduced-motion:reduce){ #szron,.pdz-kol.szklo,.pdz-kol.szklo>i{transition-duration:.01s!important;transition-delay:0s!important} }

  /* dwie tafle obok siebie, lustrzane: lewa — wszystko do lewej, prawa — wszystko do prawej; szerszy margines po ZEWNĘTRZNEJ stronie,
     bo tam pod szkłem biegnie szyna */
  .pdz-galezie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(56px,7vw,100px)}
  .pdz-kol .tresc{padding:var(--pad) var(--pad) calc(var(--pad) + 4px)}
  .pdz-kol.l{text-align:left} .pdz-kol.l .tresc{padding-left:calc(var(--szyna) + 36px)}
  .pdz-kol.p{text-align:right} .pdz-kol.p .tresc{padding-right:calc(var(--szyna) + 36px)}
  .pdz-kol h3{font-size:clamp(24px,2.7vw,38px)}
  .pdz-kol ul{list-style:none;margin:clamp(26px,2.6vw,38px) 0 0;padding:0;
    font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:500;font-size:clamp(15px,1.25vw,18px);
    letter-spacing:.03em;text-transform:uppercase;line-height:1.3;color:rgba(13,13,13,.86);text-shadow:0 0 10px rgba(255,255,255,.7)}
  /* MYŚLNIKI (Kuba: „editorial + atlas, kropki nie pasują”): lewa lista myślnik z lewej, prawa lustrzanie — tekst do prawej, myślnik z prawej */
  .pdz-kol li{display:flex;align-items:center;gap:12px;white-space:nowrap}
  .pdz-kol li+li{margin-top:clamp(16px,1.7vw,24px)}
  .pdz-kol li::before{content:'';flex:none;width:11px;height:2px;background:var(--black)}
  .pdz-kol.p li{flex-direction:row-reverse}

  /* 01.10.2026 (Kuba, zrzut z 16:01): SCENA „ALE” ZDJĘTA (przyklejona plansza, obrócone ALE, dłoń z karteczką; kopia sprzed:
     _kopie/index-przed-galeria-2026-10-01.html i _kopie/podzial-przed-galeria-2026-10-01.js, opis rund w HISTORIA.md). Teraz pod taflami:
     pień dochodzi do ZWYKŁEGO nagłówka „AI zmieniło to, ile jedna osoba może zrobić SAMA” (jak „Ten sam ZAKRES kompetencji”: czarny,
     akcent bordo pochyły) → GALERIA zdjęć 4:5 (co uczy kurs; src/galeria.js, zdjęcia tymczasowe z prac Kuby cięte przez tools/galeria-foto.py)
     → KARTKA PAPIERU z cytatem Jobsa (faktura img/papier.png z tools/papier.py, cytat czarnym tuszem, lekko przekrzywiona, bez dłoni)
     → podpis i STRZAŁKA w dół do sekcji płyty (rysuje src/podzial.js, ten sam język co klamra). */
  .pdz-teza{font-size:clamp(24px,3.1vw,44px)}
  .pdz-teza .akc{color:var(--bordo)}
  .pdz-h br.dsk{display:inline}

  /* GALERIA: tor szeroki na cały ekran (sąsiedzi wystają poza kolumnę i gasną przy krawędzi okna), element 4:5 o szerokości --gw,
     sąsiad przesunięty o --krok (0,92 szerokości: 7 px prześwitu), mniejszy o 18 % na każdy stopień oddalenia i o 42 % bledszy;
     trzeci stopień ma już krycie 0 (CSS tnie do 0). Zmienne --k/--a nadaje src/galeria.js. */
  .gal{--gw:clamp(230px,24vw,380px);--gh:calc(var(--gw)*1.25);--krok:calc(var(--gw)*.92);
    position:relative;left:50%;width:100vw;translate:-50% 0;margin-top:clamp(44px,5vw,72px);
    height:calc(var(--gh) + 92px);overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:pan-y;outline:none}
  .gal-tor{position:absolute;left:50%;top:0;width:var(--gw);height:var(--gh);margin-left:calc(var(--gw)/-2);cursor:grab}
  .gal.ciag .gal-tor{cursor:grabbing}
  .gal-el{position:absolute;inset:0;margin:0;
    translate:calc(var(--k,0)*var(--krok) + var(--dx,0px)) 0;scale:calc(1 - var(--a,0)*.18);opacity:calc(1 - var(--a,0)*.42);z-index:calc(10 - var(--a,0));
    transition:translate .75s cubic-bezier(.2,.8,.2,1),scale .75s cubic-bezier(.2,.8,.2,1),opacity .6s ease}
  .gal.ciag .gal-el{transition:scale .75s cubic-bezier(.2,.8,.2,1),opacity .6s ease}   /* w trakcie przeciągania tor idzie za ręką natychmiast */
  .gal-el img,.gal-el video{display:block;width:100%;height:100%;object-fit:cover;background:rgba(13,13,13,.06);
    box-shadow:0 1px 2px rgba(20,28,36,.10),0 24px 48px -28px rgba(20,28,36,.38)}
  .gal-el figcaption{position:absolute;left:-30%;right:-30%;top:calc(100% + 20px);text-align:center;
    font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:500;font-size:clamp(13px,1.1vw,16px);letter-spacing:.06em;
    text-transform:uppercase;line-height:1.3;color:rgba(13,13,13,.86);white-space:nowrap}
  /* strzałki: w prześwicie między pierwszym a drugim sąsiadem (1,42 szerokości od osi), kwadrat szkła o ostrych rogach, grot włosowy jak przy klamrze */
  .gal-strz{position:absolute;top:calc(var(--gh)/2);z-index:20;width:44px;height:44px;margin-top:-22px;padding:0;border:1px solid rgba(13,13,13,.10);
    background:rgba(255,255,255,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 1px 2px rgba(20,28,36,.08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    cursor:pointer;color:var(--bordo);display:grid;place-items:center;transition:background .25s}
  .gal-strz:hover{background:rgba(255,255,255,.7)}
  .gal-strz:focus-visible{outline:1px solid var(--bordo);outline-offset:2px}
  .gal-strz.l{left:calc(50% - var(--gw)*1.42 - 22px)} .gal-strz.p{right:calc(50% - var(--gw)*1.42 - 22px)}
  .gal-strz svg{width:16px;height:16px;overflow:visible;transition:translate .25s cubic-bezier(.2,.8,.2,1)}
  .gal-strz path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
  .gal-strz.l:hover svg{translate:-2px 0} .gal-strz.p:hover svg{translate:2px 0}
  /* pasek: kreski jak w liczniku przy płycie; aktywna wypełnia się przez 4 s, zatrzymana klasą .stoi (galeria poza ekranem, kursor, przeciąganie) */
  .gal-kreski{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:5px}
  .gal-kreski i{position:relative;width:18px;height:2px;background:rgba(13,13,13,.16);overflow:hidden}
  .gal-kreski i::after{content:'';position:absolute;inset:0;background:var(--black);transform:scaleX(0);transform-origin:left}
  .gal-kreski i.akt::after{animation:galPasek 4s linear forwards}
  .gal.stoi .gal-kreski i.akt::after{animation-play-state:paused}
  .gal-kreski i.film.akt::after{animation:none;transform:scaleX(var(--p,0))}   /* slajd z filmem: kreska = postęp filmu (src/galeria.js) */
  @keyframes galPasek{to{transform:scaleX(1)}}
  .gal-stan{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

  html.dalej{--papier-img:url(img/papier.png)}   /* faktura kartki (229 KB) dopiero po hero: klasę daje skrypt „najpierw hero” na dole strony */
  /* KARTKA PAPIERU: ciepła biel na chłodnym tle strony, faktura włókien (multiply), światło z lewej-góry jak na taflach, ciemniejszy prawy dół
     (lekkie wybrzuszenie), cień stykowy + miękki; przekrzywiona o 1,2°, jak położona ręką. Tusz cytatu wsiąka w papier (multiply). */
  .pdz-papier{position:relative;width:min(560px,100%);margin:clamp(64px,7vw,110px) auto 0;padding:clamp(30px,4.2vw,50px) clamp(24px,4vw,44px) clamp(26px,3.6vw,42px);
    background:#faf8f3 var(--papier-img,none) repeat;background-size:300px 300px;background-blend-mode:multiply;rotate:-1.2deg;
    box-shadow:0 1px 1px rgba(20,28,36,.12),0 3px 8px -2px rgba(20,28,36,.10),0 26px 44px -26px rgba(20,28,36,.36)}
  .pdz-papier::before{content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(118deg,rgba(255,255,255,.42),rgba(255,255,255,0) 42%,rgba(20,28,36,0) 62%,rgba(20,28,36,.05) 100%),
      radial-gradient(90% 50% at 50% 112%,rgba(20,28,36,.045),rgba(20,28,36,0) 60%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 -1px 0 rgba(20,28,36,.05)}
  .pdz-papier .cyt{display:block;width:74%;margin:0 auto;mix-blend-mode:multiply;opacity:.94}
  .pdz-papier .cyt img{display:block;width:100%;height:auto}
  .pdz-papier cite{display:flex;justify-content:center;align-items:center;gap:.8em;margin-top:clamp(18px,2.2vw,26px);font-style:normal;
    font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:600;font-size:clamp(11px,.95vw,13px);letter-spacing:.08em;
    text-transform:uppercase;color:rgba(13,13,13,.74);mix-blend-mode:multiply}
  .pdz-papier cite i{width:.8em;height:2px;background:currentColor}

  /* MOST do płyty: podpis (jak hasła przy kreskach) i pod nim pionowa kreska z grotem w dół, rysowana scrollem aż do krawędzi szkła sekcji płyty */
  .pdz-most{margin:clamp(60px,6.5vw,100px) auto 0;max-width:34ch;font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:500;
    font-size:clamp(14px,1.25vw,18px);letter-spacing:.05em;text-transform:uppercase;line-height:1.4;color:rgba(13,13,13,.86)}
  .pdz-most-droga{height:clamp(48px,5vw,72px)}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  /* wejścia: tylko gdy działa src/podzial.js (klasa na <html>); tafla wchodzi w całości */
  .pdz-js .podzial [data-r]{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
  .pdz-js .podzial [data-r].wid{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){ .pdz-js .podzial [data-r],.gal-el,.gal-strz svg{transition-duration:.01s!important;transition-delay:0s!important} .gal-kreski i.akt::after{animation:none;transform:scaleX(1)} }

  /* ZAWARTOŚĆ (20.09.2026, Kuba): płyta z HVMBAK-CD (vendor/plyta/, jeden shader WebGL2, przezroczyste płótno) i obok niej
     teczki = to, co jest na płycie. Teczka ma kształt z HVMBAK-TECZKI (130×100, zakładka, biały brzeg kartki jak w ikonie
     folderu macOS), ale jest mniejsza. Zestaw = część kursu, cztery teczki = moduły; dane w src/zawartosc.js.
     DESKTOP: ekran na pół. Lewa połowa jest przyklejona (sticky) — płyta kręci się i stoi w miejscu; prawa połowa to zwykła
     kolumna zestawów po 100 % ekranu, więc przewija się TYLKO prawa strona, zwykłym scrollem przeglądarki (bez przechwytywania).
     .zaw-box ma display:contents, czyli na desktopie go nie ma, a obie połowy są komórkami siatki sekcji.
     TELEFON (media query niżej), od 05.10.2026: pas z płytą przyklejony u góry, pod nim zestawy jeden pod drugim w zwykłym biegu strony;
     scroll niczego nie podmienia (do 05.10 cały ekran był przyklejony, a droga scrolla podmieniała zestawy w miejscu).
     Granica z cytatem = ta sama krawędź szkła co pod hero. Wysokości z --vh (px), żadnych svh — w sekcji jest płótno WebGL. */
  .zaw{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;
    --tw:clamp(62px,5.4vw,84px)}                        /* szerokość teczki; wysokość = szerokość / 1,3 (20.09 wieczór: mniejsze) */
  .zaw .krawedz .blysk{animation-delay:-7s}             /* błysk nie idzie równo z krawędzią pod hero */
  .zaw-box{display:contents}
  .zaw-lewa{position:sticky;top:0;align-self:start;height:calc(var(--vh,1svh)*100);display:grid;place-items:center}
  #plyta{display:block;width:min(38vw,calc(var(--vh,1svh)*74));height:min(38vw,calc(var(--vh,1svh)*74));opacity:0;transition:opacity .7s}
  #plyta.gotowe{opacity:1}
  .zaw-etyk,.zaw-licznik{position:absolute;left:5vw;display:flex;align-items:center;gap:10px;
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;font-stretch:normal;
    font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(13,13,13,.62)}
  .zaw-etyk{top:calc(var(--vh,1svh)*7)}
  .zaw-etyk i{width:9px;height:2.5px;background:var(--baby)}
  .zaw-licznik{bottom:calc(var(--vh,1svh)*7)}
  .zaw-licznik b{font-weight:600;color:var(--black)}
  .zaw-licznik .kreski{display:flex;gap:4px}
  .zaw-licznik .kreski i{width:18px;height:2.5px;background:rgba(13,13,13,.16);transition:background .35s}
  .zaw-licznik .kreski i.akt{background:var(--black)}

  /* zestaw ma 70 % ekranu, a kolumna 15 % zapasu u góry i u dołu: pierwszy zestaw stoi na środku okna w chwili przyklejenia płyty,
     ostatni w chwili odklejenia, a między zestawami nie ma pustego ekranu (przy 100 % była dziura na pół okna) */
  .zaw-prawa{position:relative;border-left:1px solid rgba(13,13,13,.10);padding-block:calc(var(--vh,1svh)*15)}
  /* 20.09 wieczór (Kuba: „przeszliśmy w layout symetryczny, trzymajmy się środka”): numer części, nagłówek, teczki i ich nazwy W OSI kolumny;
     teczka podpisana samą nazwą, jak folder w systemie (bez „Moduł 0X” — to zawartość kursu, nie moduły) */
  .zestaw{min-height:calc(var(--vh,1svh)*70);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
    padding:0 5vw}
  .zestaw .nr{margin:0 0 12px;font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;font-stretch:normal;
    font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(13,13,13,.5)}
  .zestaw h3{margin:0 0 calc(var(--vh,1svh)*6);font-family:var(--display);font-weight:900;font-kerning:normal;text-transform:uppercase;
    font-size:clamp(22px,2.3vw,36px);line-height:1;letter-spacing:0}
  .teczki{display:grid;grid-template-columns:repeat(2,clamp(130px,13vw,190px));column-gap:clamp(24px,3vw,48px);row-gap:calc(var(--vh,1svh)*5.5);justify-content:center}
  .zestaw.jeden .teczki{grid-template-columns:clamp(180px,20vw,300px)}
  .zestaw.jeden .teczka{width:calc(var(--tw)*2.1)}                      /* UPDATES: jedna duża teczka */
  /* teczka: wjazd falą (--d z numeru teczki), kartka wysuwa się o milimetr, kiedy zestaw jest aktywny */
  .folder{display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateY(14px);
    transition:opacity .6s ease var(--d,0s),transform .8s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
  .zestaw.akt .folder{opacity:1;transform:none}
  /* 05.10.2026 późny wieczór (Kuba o komputerze: „nie podoba mi się to, że one się tak pojawiają… kiedy się nie pojawiały, to było to wygodniejsze”):
     na komputerze teczki wszystkich części STOJĄ od razu, nie wjeżdżają i nie gasną przy zmianie aktywnej części. Zostaje tylko milimetr kartki
     w aktywnej części i uniesienie pod kursorem. Telefon ma własne wejście teczek (raz, kiedy część wchodzi w kadr), tam bez zmian. */
  @media(min-width:821px){ .zaw .folder{opacity:1;transform:none} }
  .teczka{position:relative;width:var(--tw);aspect-ratio:130/100;transition:transform .55s cubic-bezier(.2,.9,.25,1.05)}
  .teczka>*{position:absolute}
  .teczka svg{inset:0;width:100%;height:100%;display:block;fill:var(--black)}
  .teczka .tyl{z-index:1} .teczka .przod{z-index:5}
  .teczka .kartka{left:5%;top:20%;width:90%;height:70%;background:#f6f6f3;z-index:2;border-radius:1.5px 1.5px 0 0;will-change:transform;
    transition:transform .42s cubic-bezier(.4,0,.6,1)}
  /* 22.09 (Kuba): wysuwała się za szybko i za mało → 0,7 → 1,6 s, start 0,4 s po wjeździe; wysokość 5 → 7 % (12 % odrzucone: kartka
     wystawała nad czarną krawędź tyłu teczki, która w viewBoxie leży na y=12 — góra kartki 20 − 7 = 13 zostaje pod nią) */
  .zestaw.akt .kartka{transform:translateY(calc(-7 / 70 * 100%));transition:transform 1.6s cubic-bezier(.16,1,.3,1) calc(var(--d,0s) + .4s)}
  @media(hover:hover) and (pointer:fine){
    .folder:hover .teczka{transform:translateY(-5px)}
    .zestaw.akt .folder:hover .kartka{transform:translateY(calc(-7.5 / 70 * 100%));transition-delay:0s;transition-duration:.4s}
  }
  .folder .podpis{margin:10px 0 0;font-family:'Archivo',sans-serif;font-stretch:88%;font-weight:600;
    font-size:clamp(12.5px,1vw,15px);line-height:1.22;color:var(--black);text-wrap:balance}
  @media(prefers-reduced-motion:reduce){ .folder,.teczka,.teczka .kartka,.zestaw{transition-duration:.01s !important;transition-delay:0s !important} }

  /* płótno naszyjnika (19.09, WebGL2, przezroczyste; silnik vendor/naszyjnik/). Cały pierwszy ekran i NAD tekstem (22.09,
     Kuba: mocno bujnięty wisior znikał pod lewą krawędzią płótna — „może pracować na całym hero, przykryje wtedy napisy");
     do 22.09 desktop liczył tylko prawe 60 %. Płótno nie łapie zdarzeń (przyciski pod nim działają), mysz zbiera sekcja .ekran
     (src/hero.js → silnik `pole`), łapka tylko nad sylwetką (klasy .nad/.chwyt z hero.js).
     Wysokość z .ekran (--vh w px) — żadnych svh na płótnie WebGL. */
  #c{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:5;opacity:0;transition:opacity .7s}
  #c.gotowe{opacity:1}
  .ekran{touch-action:pan-y}
  .ekran.nad{cursor:grab}
  .ekran.chwyt,.ekran.chwyt *{cursor:grabbing}

  /* 22.09: kafelek NAD płótnem naszyjnika (z 7 > #c 5 > .ui 4), nieprzezroczysty — tło to TEN SAM gradient co .tlo, rozpięty na
     wymiar okna (100vw × 100svh) od górnego lewego rogu, a pasek stoi w górnym lewym rogu strony, więc przy scroll 0 kolory się
     zgadzają co do piksela (sprawdzone). Łańcuch przechodzi pod kafelkiem, na telefonie pasmo „wisi" na jego dolnej kresce.
     pointer-events:none, żeby chwyt myszą przechodził do sekcji. */
  .bar{position:absolute;top:0;left:0;right:0;height:30px;border-bottom:1px solid rgba(13,13,13,.12);
    display:flex;align-items:center;justify-content:center;gap:10px;pointer-events:none;
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;font-stretch:normal;
    font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;z-index:7}
  /* 22.09 ~11:10 (Kuba): LEWE pasmo pod paskiem, PRAWE nad nim („kiedyś tak było i fajnie wyglądało”). Kafelek to ::before o szerokości
     --kafelek = oś wisiora w px (src/hero.js, kadr()), czyli kończy się MIĘDZY pasmami; jego krawędzi nie widać, bo tło = gradient strony.
     Napis i myślniki leżą nad łańcuchem na całej szerokości (na telefonie prawe pasmo i tak mija prawy myślnik). */
  .bar::before{content:'';position:absolute;top:0;left:0;bottom:0;width:var(--kafelek,50%);z-index:-1;
    background:radial-gradient(120% 90% at 50% 40%, #f7f8f9 0%, #eceef0 60%, #e2e5e8 100%) 0 0 / 100vw 100vh no-repeat;background-size:100vw 100svh}
  /* myślniki po obu stronach napisu, ostre rogi, kolor jak „ERA" (03.09; wcześniej pomarańczowa kropka;
     9×2.5 px — Kuba: krótsze i odrobinę grubsze niż pierwsze 14×2) */
  .bar i{width:9px;height:2.5px;background:var(--baby)}
  /* 07.09 ~23:50 (Kuba): logo mniejsze o 10% (23 → 20,7 px) i jego LEWA KRAWĘDŹ równo z lewą
     krawędzią nagłówka i przycisków — czyli boczny padding paska = ten sam 5vw co .hero{left}.
     Na telefonie zostaje 18 px (media query niżej), bo tam .hero{left:18px} i już było równo. */
  .nav{position:absolute;top:30px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
    padding:22px 5vw;z-index:5;pointer-events:none}
  .nav img{height:20.7px;display:block;pointer-events:auto}

  .ui{position:absolute;inset:0;pointer-events:none;z-index:4}
  /* 07.09 ~23:30 (Kuba: „sporo niżej, mniej więcej na środku wysokości ekranu"): środek bloku
     hero z 40% na 48% wysokości — nagłówek, podpis i przyciski schodzą razem o ~8% ekranu
     (1440×900: środek bloku 366 → 438 px przy środku ekranu 450). Kształt preparatu zajmuje
     całą wysokość niezależnie od tekstu, więc kadr się nie zmienia (luz 94 → 103 px). */
  .hero{position:absolute;left:5vw;top:calc(48% + 8px);transform:translateY(-50%);max-width:min(66vw,1000px);pointer-events:auto}
  /* Nagłówek na własnym kroju (HVMBAK Wide, 03.09): trzy linie, ANATOMIA
     pochyłe, NOWOCZESNEGO i „AI DESIGNERA" (07.09) prosto, AI i ERA w baby blue.
     Krój jest szeroki i niski (wersalik 0,66 em), więc stopień liczy się z SZEROKOŚCI
     najdłuższej linii — NOWOCZESNEGO ma 10,1 em, AI DESIGNERA ~9,6 em — żeby tekst
     nie dojechał do mózgu (sprawdzone zrzutem 07.09: linia kończy się ~750 px, mózg od ~1020). */
  h1{font-family:var(--display);font-weight:900;font-kerning:normal;
    font-size:clamp(20.6px,3.675vw,61.7px);line-height:.88;letter-spacing:0;text-transform:uppercase;margin:0 0 14px 0}
  /* 14.09 wieczór: krój Pro jest 1,36× szerszy od Wide (NOWOCZESNEGO: 814 → 1107 px przy 72 px, zmierzone), więc stopień ×0,735 —
     linie mają DOKŁADNIE tę samą długość co na Wide, a preparat tę samą wielkość (przy 72 px strażnik zmniejszał go 836 → 450 px) */   /* 07.09 ~16:30: oba odstępy w hero mniejsze o tyle samo (Kuba: za rozstrzelone, ale delikatnie) */
  h1>span{display:block;white-space:nowrap}
  h1 .it{font-style:italic}
  h1 .acc{color:var(--baby)}
  /* Podpis pod nagłówkiem — GŁÓWNY krój tekstu zwykłego na landingu, przeniesiony
     z hvmbak-topograficzny (.hero-sub): Archivo, oś szerokości 75% (body),
     waga 400, stopień clamp(16.5px,1.65vw,22px), interlinia 1.65, czerń 80%. */
  .lead{margin:0 0 22px 0;   /* 07.09 ~16:30: ten sam skok co nad podpisem, żeby odstępy zostały równe */
    font-family:'Archivo',sans-serif;font-stretch:var(--text-wdth);font-weight:400;
    font-size:clamp(16.5px,1.65vw,22px);line-height:1.65;color:rgba(13,13,13,.80);max-width:44ch}
  .cta{display:flex;gap:12px;flex-wrap:wrap}
  .btn{font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;font-stretch:normal;font-weight:600;
    font-size:14px;letter-spacing:.10em;text-transform:uppercase;text-decoration:none;color:#fff;background:var(--black);
    padding:16px 24px;display:inline-flex;align-items:center;gap:10px;transition:background .18s,transform .18s}
  .btn:hover{background:var(--orange);transform:translateY(-1px)}
  .btn.ghost{background:transparent;color:var(--black);border:1px solid rgba(13,13,13,.22)}
  .btn.ghost:hover{background:rgba(13,13,13,.05)}
  /* 05.10 późny wieczór (Kuba): pod przyciskiem zakupu mały dopisek o cenie PO pre-orderze („mały napis… lekko ciemniejsze… idealnie
     symetryczne z szerokością przycisku… idealnie pod 999… każde odstępy symetryczne”; wersja ze zrzutu, zwykłym zdaniem w innym kroju,
     „gryzła się” z podpisem nad przyciskiem). Dlatego dopisek mówi krojem PRZYCISKU (Inter 600, wersaliki), nie krojem podpisu, i ma
     DOKŁADNIE szerokość napisu w przycisku: „PO” stoi pod „KUP”, „1199 ZŁ” kończy się pod „999 ZŁ” (stopień 86 % napisu przycisku daje
     tę samą długość linii przy zwykłym odstępie między słowami; końce i tak trzyma space-between). Etykieta szara, cena pełnym tuszem.
     Boki = padding przycisku (--kup-bok), z prawej dochodzi światło po ostatniej literze przycisku (--kup-ls).
     Odstęp od przycisku = odstęp podpisu nad przyciskiem (margines podpisu + to, co pod jego linią pisma, czyli ok. 0,4 stopnia), liczony
     do górnej krawędzi wersalików (.137em to odległość od góry wiersza do wersalików w Interze przy interlinii 1).
     Dopisek WISI pod przyciskiem (absolute): blok hero ma tę samą wysokość co przedtem, więc nagłówek, przyciski i mózg stoją, gdzie stały.
     Cena 1199 zł to zapowiedź, bez przekreślenia (jak w sekcji oferty). */
  .kup{position:relative;display:flex;--kup-bok:24px;--kup-ls:1.4px;--kup-nad:calc(22px + .4*clamp(16.5px,1.65vw,22px))}
  .potem{position:absolute;left:0;right:0;top:100%;margin-top:calc(var(--kup-nad) - .137em);padding:0 calc(var(--kup-bok) + var(--kup-ls)) 0 var(--kup-bok);
    display:flex;justify-content:space-between;align-items:baseline;white-space:nowrap;pointer-events:none;
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;font-stretch:normal;font-weight:600;
    font-size:12.1px;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:rgba(13,13,13,.6)}
  .potem b{font-weight:600;color:var(--black);margin-right:-.1em}   /* bez światła po ostatniej literze: „Ł” kończy się równo z „Ł” przycisku */

  /* KRESKI (07.09 ~12:30, z narzędzia HVMBAK-PREPARAT, styl ATLAS + podpis na kresce): SVG nad
     płótnem preparatu, ten sam prostokąt co #c (kreski liczą px względem płótna). Pięć punktów
     zawartości kursu wychodzi po kolei z krawędzi halo: ciągła włosowa kreska po normalnej, potem
     poziomo w lewo, MAŁA CZARNA kropka na krawędzi, podpis LEŻY NA poziomym odcinku krojem
     przycisku CTA (SF Pro Text 600, wersaliki) w małym stopniu — Kuba: siatka z pierścieniami
     i przerywaną linią wyglądała „jak losowo wklejone". Bez numerów 01… (opcja numery:false).
     Style bazowe 1:1 z index.html narzędzia (svg.naKresce). Zastąpiły pyłki z src/punkty.js. */
  #kreski{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:6}   /* 22.09: nad płótnem (z 5), żeby kropki nie ginęły pod wisiorem */
  .kreska path{fill:none;stroke:var(--black);stroke-width:1;stroke-linejoin:round;stroke-linecap:round}
  .kreska circle{fill:var(--black);r:2px;opacity:0;transition:opacity .25s}
  .kreska text{fill:var(--black);opacity:0;transform:translateY(3px);transition:opacity .4s,transform .4s}
  .kreska.widoczna circle{opacity:1}
  .kreska.podpis text{opacity:1;transform:none}
  /* 07.09 ~23:50 (Kuba, desktop): podpisy „delikatnie, delikatnie" większe — 8,5 → 9,2 px
     (nie z powrotem do odrzuconych 9,5). Telefon ma własny stopień w media query, tam bez zmian. */
  svg.naKresce .kreska text{font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;font-stretch:normal;
    font-weight:500;font-size:9.2px;letter-spacing:.07em;text-transform:uppercase}   /* 07.09 ~16:30: minimalistycznie — waga 500 (było 600/9.5, wcześniej 10 i 10.5) */
  svg.naKresce[data-styl=atlas] .kreska circle{r:1.35px}

  #err{display:none;position:fixed;inset:0;place-items:center;background:var(--papier);color:var(--black);z-index:50;
    font:600 13px/1.6 system-ui;letter-spacing:.06em;text-transform:uppercase}

  @media(max-width:820px){
    .nav{padding:18px}
    .nav img{height:17px}
    .bar{font-size:9.5px;letter-spacing:.06em;height:28px}
    /* lewa krawędź nagłówka = lewa krawędź logo (padding paska nawigacji 18 px) (03.09);
       preparat nad tekstem: górna krawędź 66 px (dół logo), wysokość ograniczona
       górą bloku tekstu (src/hero.js uklad) */
    /* 07.09 ~16:30: podpis i przyciski bliżej nagłówka (każdy odstęp o 6 px); blok wisi dołem,
       więc dół idzie w górę o 12 px, żeby nagłówek został tam, gdzie był */
    /* 07.09 ~23:30 (Kuba: „lekko, delikatnie do dołu" — za dużo wolnej przestrzeni pod przyciskami):
       dół bloku 7svh → 5svh, czyli cały hero niżej o ~17 px (390×844: dolny margines 71 → 54 px).
       Preparat wisi dolną krawędzią na linii ANATOMIA (src/hero.js dolTel), więc przekrój sam
       urósł o te kilka pikseli (hv 535,7 → 545,3). */
    .hero{left:18px;right:18px;top:auto;bottom:calc(calc(var(--vh,1svh)*5) + 12px);transform:none;max-width:none}
    /* Pro ×0,735 (14.09): NOWOCZESNEGO 344 px jak na Wide; bez tego 468 px, za ekran.
       14.09 wieczór (Kuba: „mało czytelne, delikatnie większe i mikroskopijnie grubsze; większy odstęp między linijkami"):
       stopień +2,2% (NOWOCZESNEGO ~352 px z 354 px kolumny), obrys 0,35 px w kolorze liter, interlinia .88 → .98. */
    h1{font-size:clamp(16.6px,5.86vw,34.5px);line-height:.98;margin-bottom:8px;-webkit-text-stroke:.35px currentColor}
    .lead{font-size:15.5px;margin-bottom:14px;max-width:none}
    .cta{flex-wrap:nowrap}
    .btn{padding:13px 14px;font-size:11.5px;letter-spacing:.05em;white-space:nowrap}
    .kup{--kup-bok:14px;--kup-ls:.575px;--kup-nad:calc(14px + .4*15.5px)}
    .potem{font-size:9.9px;letter-spacing:.05em}
    .potem b{margin-right:-.05em}
    svg.naKresce .kreska text{font-size:7.5px;letter-spacing:.05em}
    /* DNA na telefonie (06.09 wieczór, po uwagach Kuby): słowa PO BOKACH helis,
       naprzeciw siebie, bez kropek i nagłówków — strzałka w kolumnie po lewej słowa,
       słowa wyrównane do lewej, po obu stronach tak samo. Wiersze RÓWNEJ wysokości
       (grid-auto-rows:1fr), bo hasło w dwóch liniach robiło „strasznie duży rozstrzał"
       między Kontrola a Skala i tempo. Miejsca jest na styk („ledwo się zmieści"), więc
       tekst 12.5 px od 8 px krawędzi, odstęp helisa–słowo 3 px. Sekcja krótsza
       — Kuba: „strasznie dużo wolnej przestrzeni". */
    /* telefon: helisy od GÓRNEJ krawędzi sekcji (src/dna.js kotwiczy szczyt bryły
       6 px nad krawędzią), nagłówek w dwóch blokach w górnych rogach nad kolumnami
       słów (te same 8 px od krawędzi co strzałki), wiersze pod nagłówkami */
    /* 07.09 ~10:30 (Kuba): sekcja wyższa, helisy przez całą (długość liczona z wysokości
       w src/dna.js, szerokość stała .215·W), nagłówki 21% od krawędzi (więcej oddechu od CTA) */
    .dna{height:clamp(400px,calc(var(--vh,1svh)*56),520px)}
    /* 07.09 ~10:00 (Kuba, mobile): helisy sięgają krawędzi szkła także na telefonie, a CAŁA
       treść schodzi niżej — 64 px od krawędzi zamiast 30 („oddech", łącznikiem sekcji są
       łańcuchy). Nagłówek stoi obok helisy, więc src/dna.js zmniejsza go (--h2, bazowo 5.7vw),
       kiedy nie mieści się w kolumnie między ścianą a helisą (Kuba: „możesz lekko zmniejszyć,
       żeby się nie stykały"). Wiersze pod nagłówkiem (--rzedyTop z src/dna.js). */
    .dna h2{top:21%;font-size:var(--h2,5.7vw);line-height:.92}
    .dna h2.l{left:18px}
    .dna h2.p{right:18px}
    .dna .rzedy{left:8px;right:8px;top:var(--rzedyTop,calc(21% + 5.7vw*1.84 + 20px));transform:none;
      font-size:12.5px;line-height:1.25;row-gap:4px;grid-auto-rows:1fr;align-items:center}
    .dna .rzedy>*{max-width:none}
    .dna .rzedy h3{display:none}
    .dna .rzedy div{border-bottom:0;grid-template-columns:.9em 1fr;column-gap:5px;align-self:center}
    /* długie hasła po prawej łamią się W DWIE LINIE ręcznie (.lam), nie automatycznie —
       zawinięty tekst rozciągał się na całą kolumnę */
    .dna .rzedy div span{white-space:nowrap}
    .dna .rzedy .lam{display:block;height:0}
    .dna.bezdna{height:auto;min-height:0;padding:0 0 calc(var(--vh,1svh)*8)}
    .dna.bezdna h2{position:static;margin:0;padding-top:calc(var(--vh,1svh)*9)}
    .dna.bezdna h2.l{padding-left:18px} .dna.bezdna h2.p{padding-right:18px}
    .dna.bezdna .tekst{position:static;display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
    .dna.bezdna .rzedy{position:static;transform:none;width:auto;grid-column:1/3;margin-top:calc(var(--vh,1svh)*5);padding:0 18px;
      grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr)}
    .dna.bezdna .rzedy div{align-self:start}
    /* PODZIAŁ na telefonie: tafle jedna pod drugą, PRZESUNIĘTE na mijankę (lewa do lewej ściany, prawa do prawej, --mij węższe od kolumny).
       Dzięki temu każda szyna mija cudzą taflę wolnym pasem i wchodzi tylko pod SWOJE szkło; układ jest symetryczny środkowo.
       Duża strzałka idzie spod „Wszystko to, co jest wyżej” w lewo i skręca pod kątem prostym w górę, do tafli Własna marka. */
    .szyba{padding-block:calc(var(--vh,1svh)*12) calc(var(--vh,1svh)*12);padding-inline:18px}
    .podzial{--szyna:18px;--pad:22px;--mij:36px}
    .pdz-glowny{font-size:calc(7.9vw - 3.4px)}     /* KOMPETENCJI (12,4 em) na całą kolumnę: 390 → 27,4 px */
    .pdz-h br.tel{display:inline}
    .pdz-rozejscie{height:104px}
    .pdz-zejscie{height:200px}                      /* 01.10: pień do nagłówka tezy (plansza ALE zdjęta; było 329) */
    .pdz-teza{font-size:calc(5.9vw - 1px)}   /* cztery linie, SAMA osobno (390 → 22 px; „ILE JEDNA OSOBA” na całą kolumnę) */
    .pdz-h br.dsk{display:none}
    .gal{--gw:68vw;--krok:calc(var(--gw)*.9);margin-top:36px;height:calc(var(--gh) + 84px)}
    .gal-el figcaption{top:calc(100% + 16px);font-size:12.5px;letter-spacing:.05em}
    .gal-strz{width:38px;height:38px;margin-top:-19px}
    .gal-strz.l{left:10px} .gal-strz.p{right:10px}  /* na telefonie w pasie sąsiada (15 vw), nad przygaszonym zdjęciem */
    .pdz-papier{width:min(100%,420px);margin-top:56px;padding:26px 20px 22px}
    .pdz-papier .cyt{width:80%}
    .pdz-most{margin-top:52px;font-size:13px;max-width:26ch}
    .pdz-most-droga{height:40px}
    .tylko-d{display:none}.tylko-t{display:inline}
    .pdz-galezie{display:block}
    .pdz-kol{width:calc(100% - var(--mij))}
    .pdz-kol.p{margin:40px 0 0 auto}
    .pdz-kol .tresc{padding:30px var(--pad) 32px}
    .pdz-kol.l .tresc{padding-left:calc(var(--szyna) + 24px)}
    .pdz-kol.p .tresc{padding-right:calc(var(--szyna) + 24px)}
    .pdz-kol h3{font-size:calc(6.4vw - 3px)}        /* 390 → 22 px */
    .pdz-kol ul{margin-top:24px;font-size:13.5px;letter-spacing:.02em}
    .pdz-kol li{gap:8px}
    .pdz-kol li::before{width:9px}
    .pdz-kol li+li{margin-top:15px}
    /* ZAWARTOŚĆ na telefonie, od 05.10.2026 „PŁYTA STOI” (wybór Kuby z warsztatu ~/Desktop/strony/HVMBAK-ZAWARTOSC, wariant 7).
       Było (20.09): cały ekran przyklejony, droga scrolla (100 % + 70 % ekranu na zestaw) podmieniała zestawy w miejscu. Tester przeleciał to
       jednym ruchem palca i nie zauważył czterech części; Kuba: „nie chcę, żeby to się zmieniało scrollem w dół”.
       Teraz sekcja jest zwykłym kawałkiem strony o wysokości treści. Pas z płytą (etykieta, licznik, płyta) jest przyklejony u góry, a części
       stoją jedna pod drugą i przewijają się pod nim zwykłym scrollem: treść jedzie za palcem, nic się nie podmienia. Pod pasem leży to samo tło
       co na stronie (gradient .tlo), wygaszone u dołu, więc części znikają pod płytą miękko. Płyta ma to samo miejsce i tę samą wielkość co
       w dawnym przyklejonym ekranie (tam: środek pasa 47 % pod odstępem 9,5 %). Wielkość teczki dalej liczy się też z WYSOKOŚCI ekranu.
       Pas puszcza, ZANIM pod jego tło wjedzie część UPDATES (od niej zaczyna się kolor wody): margines dolny pasa = wysokość UPDATES bez 20 px
       (--upd z src/zawartosc.js), a kolumna części wraca o tyle samo w górę, więc układ się nie zmienia, zmienia się tylko chwila odklejenia.
       W tej chwili wszystkie wcześniejsze części są już w całości pod nieprzezroczystą częścią tła pasa. Od odklejenia (.puszczona z src/zawartosc.js)
       tło pasa znika, a te części są ukryte: płyta odjeżdża wtedy wprost na wodzie, jak dawniej. Bez tego jasne tło pasa odcinało się od wody,
       która w tym czasie nabiera koloru. Przy powrocie w górę wszystko wraca w chwili ponownego przyklejenia (zmiana w obie strony jest niewidoczna).
       Zanim src/zawartosc.js dobuduje części (rusza po zjechaniu pierwszego ekranu), kolumna trzyma zbliżoną wysokość, żeby strona pod spodem
       nie skakała. Części może być dowolnie wiele, teczek w części też (siatka po dwie). */
    .zaw{display:block;--tw:clamp(50px,min(18vw,calc(var(--vh,1svh)*9.5)),76px)}
    .zaw-box{display:block;position:relative}
    .zaw-lewa{position:sticky;top:0;z-index:2;height:auto;padding-top:max(calc(var(--vh,1svh)*8.25),calc(var(--vh,1svh)*28.25 - 36vw));padding-bottom:18px;
      margin-bottom:var(--upd,0px)}
    .zaw-lewa::before{content:'';position:absolute;inset:0 0 -34px;z-index:-1;pointer-events:none;
      background:radial-gradient(120% 90% at 50% 40%,#f7f8f9 0%,#eceef0 60%,#e2e5e8 100%) 0 0/100vw 100vh no-repeat;background-size:100vw 100dvh;
      -webkit-mask-image:linear-gradient(#000 calc(100% - 52px),transparent);mask-image:linear-gradient(#000 calc(100% - 52px),transparent)}
    #plyta{width:min(72vw,calc(var(--vh,1svh)*40));height:min(72vw,calc(var(--vh,1svh)*40))}
    .zaw-etyk{left:18px;top:calc(var(--vh,1svh)*3.5);font-size:9.5px;letter-spacing:.06em}
    .zaw-licznik{left:auto;right:18px;bottom:auto;top:calc(var(--vh,1svh)*3.5);font-size:9.5px;letter-spacing:.06em}
    .zaw-licznik .kreski i{width:12px}
    .zaw-prawa{border-left:0;padding-block:0;margin-top:calc(var(--upd,0px)*-1);z-index:1}   /* własna warstwa: bez niej przody teczek (z-index 5) wychodziły nad płytę */
    .zaw:not(.gotowa) .zaw-prawa{min-height:calc(var(--vh,1svh)*195)}
    .zaw.puszczona .zaw-lewa::before{opacity:0}
    .zaw.puszczona .zestaw:not(.jeden){visibility:hidden}
    /* odstępy (05.10, Kuba: „CZĘŚĆ 01 za blisko płyty”, teczki za blisko tytułu): płyta → CZĘŚĆ 0X 44 px, CZĘŚĆ → tytuł 10, tytuł → teczki 31 px
       (ekran 659 px; liczone z wysokości ekranu, na niskich telefonach schodzą do 26 / 18 px); między częściami 11 % ekranu */
    .zestaw{position:relative;min-height:0;justify-content:flex-start;align-items:stretch;padding:clamp(26px,calc(var(--vh,1svh)*10 - 22px),46px) 18px 0}
    .zestaw+.zestaw{padding-top:calc(var(--vh,1svh)*11)}
    .zestaw.jeden{padding-bottom:calc(var(--vh,1svh)*13)}                     /* pas pod teczką Aktualizacje: tędy idzie nitka do następnej sekcji */
    /* 22.09 (Kuba): teczki „wypadają z płyty” — czekają wyżej i wjeżdżają W DÓŁ, nabierając krycia po drodze. Od 05.10 każda część robi to raz,
       kiedy wejdzie w kadr (.akt z src/zawartosc.js), i zostaje; numer i tytuł części stoją od razu. */
    .zestaw .folder{transform:translateY(-26px);transition:opacity .7s ease var(--d,0s),transform 1.1s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
    .zestaw.akt .folder{transform:none}
    .zestaw .nr{margin-bottom:10px;font-size:9.5px;letter-spacing:.06em}
    .zestaw h3{font-size:22px;margin-bottom:clamp(18px,calc(var(--vh,1svh)*7 - 15px),32px)}
    .teczki{grid-template-columns:1fr 1fr;column-gap:12px;row-gap:calc(var(--vh,1svh)*3)}
    .zestaw.jeden .teczki{grid-template-columns:1fr}
    .folder .podpis{margin-top:8px;font-size:13px}
  }