:root{
  --tlo:#fbfaf7;
  --tlo-2:#efece4;
  --kreda:#14130f;
  --kreda-2:#6d675c;
  --ramka:#d6d1c4;
  --pomoc:#2f6fd0;

  /* kolory rysunku - jedno miejsce dla jasnego i ciemnego motywu */
  --tusz:#0a0a08;
  --wnetrze:#efebe1;
  --cien:#cfc8b6;
  --cien-mocny:#c3baa4;
  --cien-slaby:#dcd5c3;
  --swiatlo:#fdfcf8;
  --blik:#ffffff;
  --pod-gora:#f4f1e9;
  --pod-bok:#e3dccb;
  --pod-przod:#cfc8b6;

  --dynamika:#14130f;
  --termo:#14130f;
  --ped:#14130f;
  --ladunek:#2f6fd0;
  --energia:#2e9c4a;
  --minimalizacja:#d93a24;
  --f-pismo:"Caveat",ui-rounded,cursive;
  --w-pismo:700;                       /* grubość pisma ręcznego w scenach kulek */
  --f-ui:"Archivo",system-ui,sans-serif;
  /* Brak tej zmiennej unieważniał cały skrót `font` w podpisach - deklaracja
     ze zmienną, której nie ma, jest odrzucana w całości. */
  --f-tech:"ISOCPEUR","Isocpeur","Archivo",system-ui,sans-serif;
  /* zadanie w kulce pierścienia: ekran projektora, kartka w kratkę, rysunek */
  --zk-ekran:#d9f1fb; --zk-ekran-kreska:#3fb7e0; --zk-ekran-kratka:#8fd6f3;
  --zk-karta:#ffffff; --zk-kratka:#cfe3f1; --zk-margines:#ef9a9a; --zk-tusz:#14202b;
  --zk-dlugopis:#1f4fa8; --zk-akcent:#1d6fa5; --zk-film:#13222e; --zk-film-tekst:#e9eef2;
  --zk-siatka:#bcd8ea; --zk-pole:rgba(31,111,165,.14); --zk-nowy:#e0560f;
  --zk-punkty:#c62828;   /* punkty za krok (Z.oc) - czerwony długopis egzaminatora */
  /* kolory zmiennych łączonych z rysunkiem (Z.lacz) */
  --zk-l1:#e07a1f; --zk-l2:#1f9d55; --zk-l3:#d33a3a; --zk-l4:#7c4dcc; --zk-l5:#0f8f9b; --zk-l6:#c026d3;
  /* wygaszanie niezrobionych zadań: wypełnienie „ducha” (A, F, H) i „fundamentu” (D) */
  --wg-duch:rgba(255,250,238,.34); --wg-fund:rgba(255,250,238,.14);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  /* przeciąganie mapy nie ma zaznaczać podpisów */
  -webkit-user-select:none;
  user-select:none;
  background:var(--tlo);
  color:var(--kreda);
  font-family:var(--f-ui);
  overflow:hidden;
}
/* Tło wg obrazu: malarskie plamy czerwieni, pomarańczu, żółci, błękitu,
   fioletu i zieleni, z fakturą pociągnięć pędzla. Stoi w miejscu - kamera
   porusza tylko scenę. */
.scena{
  position:fixed;inset:0;
  --plamy:
    radial-gradient(38% 34% at 10% 12%, #e5302a 0, rgba(229,48,42,0) 72%),
    radial-gradient(30% 30% at 34% 6%, #f2c230 0, rgba(242,194,48,0) 72%),
    radial-gradient(34% 30% at 66% 8%, #f07a1e 0, rgba(240,122,30,0) 72%),
    radial-gradient(30% 34% at 92% 18%, #d9306e 0, rgba(217,48,110,0) 72%),
    radial-gradient(42% 40% at 50% 40%, #f6b93a 0, rgba(246,185,58,0) 75%),
    radial-gradient(36% 42% at 4% 62%, #2b5fd6 0, rgba(43,95,214,0) 72%),
    radial-gradient(30% 34% at 24% 88%, #7a2fbf 0, rgba(122,47,191,0) 72%),
    radial-gradient(34% 38% at 94% 60%, #8a2fb8 0, rgba(138,47,184,0) 72%),
    radial-gradient(36% 34% at 82% 92%, #1f8a4b 0, rgba(31,138,75,0) 72%),
    radial-gradient(30% 30% at 56% 96%, #e5302a 0, rgba(229,48,42,0) 72%);
  background:var(--plamy),#f19a35;
}
.scena::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:.38;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045 .11' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -.45'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)'/%3E%3C/svg%3E");
}
.przelacznik-tla{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:40;display:flex;gap:6px;align-items:center;
  padding:6px 8px;border-radius:999px;background:rgba(255,246,214,.92);border:1px solid var(--ramka);box-shadow:0 2px 8px rgba(0,0,0,.18);
  font:600 .78rem Georgia,"Times New Roman",serif;color:var(--kreda)}
.przelacznik-tla button{font:inherit;border:1px solid var(--ramka);background:#fff8e2;color:var(--kreda);border-radius:999px;padding:5px 12px;cursor:pointer;display:flex;align-items:center;gap:6px}
.przelacznik-tla button[aria-pressed="true"]{background:var(--kreda);color:#fff8e2;border-color:var(--kreda)}
.przelacznik-tla .probka{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.3)}
/* Tło stoi na własnych warstwach (Jan 20.10, MacBook Retina: „mocno zacina”): każda zmiana mapy (wir, kamera)
   malowała od nowa całe tło pod nią - trzy pełnoekranowe gradienty stożkowe z setkami pasków, maski nakładek,
   faktura z mieszaniem soft-light. Na osobnych warstwach maluje się raz, a mapa jedzie nad nim. Obręcze walca
   to 26 okręgów w SVG (obreczeWalcaTla) zamiast 26 pełnoekranowych gradientów kołowych - ten sam rysunek. */
.scena::before{will-change:transform}
/* tło narysowane raz na płótnie (tloObraz) - warstwy CSS schowane */
.scena > canvas.tlo-obraz{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;will-change:transform}
:root.tlo-z-obrazu .scena{background:none}
:root.tlo-z-obrazu .scena::before,:root.tlo-z-obrazu .promienie-pol,:root.tlo-z-obrazu .promienie-23,:root.tlo-z-obrazu .walec-tla{display:none}
/* paski kończące się w połowie i w 2/3 drogi do brzegu strony */
.promienie-pol{-webkit-mask-image:radial-gradient(circle farthest-corner at 50% 80%,#000 0,#000 47%,transparent 50%);mask-image:radial-gradient(circle farthest-corner at 50% 80%,#000 0,#000 47%,transparent 50%)}
.promienie-23{-webkit-mask-image:radial-gradient(circle farthest-corner at 50% 80%,#000 0,#000 63%,transparent 67%);mask-image:radial-gradient(circle farthest-corner at 50% 80%,#000 0,#000 63%,transparent 67%)}
.scena svg{position:relative;z-index:1}
/* Matematyk (Jan 17.10, „laguje”): faktura mieszana wewnątrz samego tła
   (background-blend-mode), a nie przez mix-blend-mode na całym ::before - tamto zmuszało
   przeglądarkę, by w każdej klatce lotu kamery składała całą scenę razem z mapą w osobnym
   buforze. Wygląd ten sam (porównane piksel w piksel); przezroczystość .38 siedzi w samym
   szumie (ostatni wiersz macierzy razy .38). Tło stoi na własnej warstwie. */
.tryb-mat .scena{background:#f19a35}
/* Matematyk (Jan 17.10, T2 D z warsztatu): pismo ręczne na całej mapie to Shantell Sans 600 -
   między pismem a drukiem, czytelne także z daleka. Napisy techniczne zostają ISOCPEUR. */
:root.tryb-mat{--f-pismo:"Shantell Sans",ui-rounded,cursive;--w-pismo:600}
.tryb-mat .scena::before{opacity:1;mix-blend-mode:normal;will-change:transform;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045 .11' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .608 -.171'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)'/%3E%3C/svg%3E"),var(--plamy),#f19a35;
  background-blend-mode:soft-light,normal,normal,normal,normal,normal,normal,normal,normal,normal,normal}
/* DEMO (Jan 2.11): jedyne tło - „szare” skopiowane 1:1 z panel.html (wariant Tło: szare). W lekkim trybie
   (telefon, iPad) bez warstwy faktury ::before - dla płynności. */
:root.tryb-mat.tlo-szare .scena{background:#c9cbcf}
:root.tryb-mat.tlo-szare .scena::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045 .11' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .608 -.171'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23f)'/%3E%3C/svg%3E"),radial-gradient(60% 55% at 50% 42%,#d9dbde 0,rgba(217,219,222,0) 75%),#c9cbcf;background-blend-mode:soft-light,normal,normal}
:root.tryb-mat.tlo-szare.lekki .scena::before{display:none}
/* Matematyk, Model Maturalny - kolejne warianty tła (Jan 22.10: „stwórz kilka-kilkanaście wariantów tła”), przycisk
   „Tło: 3 · Pergamin ▸” idzie po kolei (TLO_MAT_WAR). Kolorowe i szare - jak wyżej, z CSS; pozostałe rysują się RAZ na płótnie
   (tloMatRysuj: przy wejściu, zmianie wariantu i zmianie okna - nigdy przy ruchu kamery), płótno na własnej warstwie pod mapą,
   warstwa ::before schowana. Pod płótnem kolor bazowy wariantu (--tlo-mat-baza), zanim się narysuje. Bez rozmyć, bez mieszania
   z mapą, bez animacji. */
.scena > canvas.tlo-mat{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;will-change:transform}
:root.tryb-mat.tlo-plotno .scena{background:var(--tlo-mat-baza,#f19a35)}
:root.tryb-mat.tlo-plotno .scena::before{display:none}

:root.tryb-mat.tlo-ciemne #mapa{
  --tlo:#121217;--tlo-2:#1c1c23;--kreda:#ece7db;--kreda-2:#8d877b;
  --tusz:#ece7db;--wnetrze:#26262e;--cien:#191920;--cien-mocny:#131319;--cien-slaby:#1f1f27;--swiatlo:#3b3b47;--blik:#5a5a6c;
  --pod-gora:#2b2b34;--pod-bok:#23232b;--pod-przod:#1a1a21;--dynamika:#ece7db;--termo:#ece7db;--ped:#ece7db;
  --wg-duch:rgba(236,231,219,.08);--wg-fund:rgba(236,231,219,.04)}
:root.tryb-mat.tlo-ciemne .pierscien-granice > text[data-wgdz="ALGEBRA"]{fill:#8fd46f !important}
:root.tryb-mat.tlo-ciemne .pierscien-granice > text[data-wgdz="ANALIZA"]{fill:#7cc4f2 !important}
:root.tryb-mat.tlo-ciemne .pierscien-granice > text[data-wgdz="GEOMETRIA"]{fill:#f8998b !important}
:root.tryb-mat.tlo-ciemne .pierscien-granice > path[data-wgdz="ALGEBRA"][style*="rgb(30, 107, 48)"]{stroke:#8fd46f !important}
:root.tryb-mat.tlo-ciemne .pierscien-granice > path[data-wgdz="ANALIZA"][style*="rgb(28, 63, 143)"]{stroke:#7cc4f2 !important}
:root.tryb-mat.tlo-ciemne .pierscien-granice > path[data-wgdz="GEOMETRIA"][style*="rgb(138, 26, 16)"]{stroke:#f8998b !important}
:root.tryb-mat.tlo-ciemne .pierscien-granice > text[data-wgdz]{stroke:var(--tlo);stroke-width:.14em;stroke-linejoin:round;paint-order:stroke}
/* Fizyk przy Matematyku (Jan 24.10): klamry, nazwy, procenty i łuki działów pierścienia Fizyka na ciemnych tłach - jaśniejsze, jak u Matematyka */
:root.tryb-mat.tlo-ciemne .pierscien-granice > text[data-wgfiz="KL"]{fill:#8fd46f !important}
:root.tryb-mat.tlo-ciemne .pierscien-granice > text[data-wgfiz="KW"]{fill:#c9a3f2 !important}
:root.tryb-mat.tlo-ciemne .pierscien-granice > text[data-wgfiz="REL"]{fill:#f8998b !important}
:root.tryb-mat.tlo-ciemne .pierscien-granice > path[data-wgfiz="KL"][style*="rgb(27, 94, 32)"]{stroke:#8fd46f !important}
:root.tryb-mat.tlo-ciemne .pierscien-granice > path[data-wgfiz="KW"][style*="rgb(61, 26, 107)"]{stroke:#c9a3f2 !important}
:root.tryb-mat.tlo-ciemne .pierscien-granice > path[data-wgfiz="REL"][style*="rgb(127, 0, 0)"]{stroke:#f8998b !important}
:root.tryb-mat.tlo-ciemne .pierscien-granice > text[data-wgfiz]{stroke:var(--tlo);stroke-width:.14em;stroke-linejoin:round;paint-order:stroke}
svg{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
/* kamera w ruchu przesuwa i skaluje całe #mapa przekształceniem CSS (KAM_ATR w skrypcie) - przy oddalaniu pudło <svg> maleje,
   a rysunek poza nim ma być nadal widać (tylko w ruchu - na stałe zmieniało wygładzanie napisów w spoczynku) */
#mapa.kam-ruch{overflow:visible}
/* Dotyk (iPad, telefon - 25.10): mapę przesuwa jeden palec, a szczypanie dwoma przybliża ją (svg: touch-action:none) - Safari
   nie powiększa całej strony (szczypanie poza mapą i dwukrotne stuknięcie też nie: pan-x pan-y, gesturestart w skrypcie),
   strona nie przewija się i nie odbija; bez szarego błysku przy stuknięciu i bez dymka „kopiuj” przy przytrzymaniu palca.
   Panele z przewijaniem (Planer, notatnik) dalej przewijają się palcem. Na komputerze bez zmian. */
html{touch-action:manipulation;touch-action:pan-x pan-y}
html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
/* kursor „łapka” w trakcie przeciągania mapy - na zasłonie nad stroną (30.10): klasa na <svg> zmieniała dziedziczony kursor
   i każdy element mapy przeliczał styl (ok. 2800 elementów, pierwsza klatka przeciągania 113 ms przy CPU 4x) */
.kursor-ciagnie{position:fixed;inset:0;z-index:2147483000;cursor:grabbing}

.hud{
  position:fixed;
  top:16px;left:16px;
  pointer-events:none;
  max-width:min(300px,calc(100vw - 32px));
}
.hud h1{
  font:600 1.5rem/1.1 var(--f-pismo);
  margin:0;
  letter-spacing:.01em;
}
.hud .hud-czesci{list-style:none;margin:8px 0 0;padding:8px 0 0;border-top:1px solid rgba(0,0,0,.12);display:grid;gap:4px}
.hud .hud-czesci[hidden]{display:none}
.hud .hud-czesci li{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600}
.hud .hud-czesci svg{width:20px;height:34px;flex:none}
.hud p{
  margin:4px 0 0;
  font-size:.78rem;
  color:var(--kreda-2);
  line-height:1.5;
}
/* lista części dołączonych plusami (Alan, Amelia, Julia) */
.hud .dodane{list-style:none;margin:8px 0 0;padding:6px 0 0;border-top:1px solid var(--kreda-2);
  display:flex;flex-direction:column;gap:4px;max-height:calc(100vh - 260px);overflow:auto}
.hud .dodane[hidden]{display:none}
.hud .dodane li{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600}
.hud .dodane svg{width:20px;height:32px;flex:none}
.narzedzia{
  position:fixed;
  bottom:16px;left:16px;
  display:flex;gap:8px;flex-wrap:wrap;
}
.narzedzia button{
  font:500 .76rem/1 var(--f-ui);
  color:var(--kreda-2);
  background:var(--tlo-2);
  border:1px solid var(--ramka);
  padding:8px 12px;
  cursor:pointer;
}
.narzedzia button:hover{color:var(--kreda);border-color:var(--kreda-2)}
#btn-oddal,#btn-przybliz{min-width:36px;font-size:1rem}
.narzedzia button[aria-pressed="true"]{color:var(--tlo);background:var(--kreda);border-color:var(--kreda)}
.narzedzia button:focus-visible{outline:2px solid var(--pomoc);outline-offset:2px}
/* nauczyciel - samouczek strony Matematyka (Jan 18.10; chmurka jak u ukrytego Fizyka, żywa postać) */
.samouczek{position:fixed;inset:0;z-index:70;pointer-events:none}
.sam-reflektor{position:fixed;left:50%;top:45%;width:0;height:0;border-radius:16px;box-shadow:0 0 0 200vmax rgba(10,14,28,.5);transition:left .45s cubic-bezier(.3,.8,.3,1),top .45s cubic-bezier(.3,.8,.3,1),width .45s cubic-bezier(.3,.8,.3,1),height .45s cubic-bezier(.3,.8,.3,1),box-shadow .3s}
.sam-reflektor::after{content:"";position:absolute;inset:-5px;border:3px solid #ffd84d;border-radius:inherit;animation:sam-puls 1.6s ease-out infinite}
.sam-reflektor.bez{box-shadow:0 0 0 200vmax rgba(10,14,28,.3)}
.sam-reflektor.bez::after{display:none}
@keyframes sam-puls{0%{transform:scale(1);opacity:.95}100%{transform:scale(1.07);opacity:0}}
.sam-strzalka{position:fixed;inset:0;width:100%;height:100%;overflow:visible}
.sam-luk{fill:none;stroke:#ffd84d;stroke-width:4;stroke-linecap:round}
.sam-luk-cien{fill:none;stroke:#14202b;stroke-width:8;stroke-linecap:round;opacity:.5}
.sam-kolka circle{fill:#fffdf6;stroke:#14202b;stroke-width:2}
.sam-kolka,.sam-kolka-cien{transition:opacity .16s}
.samouczek.cicho .sam-dymek{opacity:0;pointer-events:none}
.samouczek.cicho .sam-kolka,.samouczek.cicho .sam-kolka-cien{opacity:0}
.sam-kolka-cien circle{fill:#14202b;opacity:.25}
.sam-nauczyciel{position:fixed;left:0;top:0;width:104px;transition:transform var(--sam-czas,0ms) linear}
.sam-postac svg{display:block;width:100%;height:auto;overflow:visible;transform-origin:50% 100%;animation:sam-oddech 2.6s ease-in-out infinite}
@keyframes sam-oddech{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
/* przełącznik błękitu Managera Nauki na dolnym pasku (Jan 27.10) - kółko z próbką koloru */
.mn-probka{display:inline-block;width:.85em;height:.85em;margin-right:.4em;border-radius:50%;border:1.5px solid #14141a;vertical-align:-.1em}
.sam-dymek{position:fixed;left:0;top:0;width:min(390px,calc(100vw - 168px));box-sizing:border-box;padding:34px 44px 28px;isolation:isolate;pointer-events:auto;color:#1f4fa8;font:600 17px/1.38 var(--f-pismo);transition:opacity .16s}
.sam-chmura{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1}
.sam-chmura-tlo{fill:#fffdf6;stroke:#14202b;stroke-width:3;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.sam-chmura-cien{fill:#14202b;opacity:.25;transform:translate(5px,5px)}
.sam-tekst{margin:0 0 10px;cursor:default}
.sam-reszta{color:transparent}
/* przycisk w tekście chmurki - mały kwadracik jak przycisk paska (kolory kopiowane z przycisku w samIkona) */
.sam-guz{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:1.7em;height:1.7em;padding:0 .42em;margin:-.3em .12em;vertical-align:middle;
  font:800 .78em/1 var(--f-ui);color:var(--kreda-2);background:var(--tlo-2);border:1px solid var(--ramka);white-space:nowrap;letter-spacing:0}
.sam-guz svg{width:1.25em;height:1.25em;flex:none}
.sam-guz-karta{height:1.7em;border-radius:999px;padding:0 .7em;font:700 .7em/1 var(--f-tech);letter-spacing:.06em;color:var(--zk-karta);background:var(--zk-akcent);border-color:var(--zk-akcent)}
.sam-reszta .sam-guz{visibility:hidden}
.sam-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sam-dol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-family:var(--f-ui)}
/* przełącznik postaci (porównanie brodacz / robot) - mały, jak Pomiń, w osobnej linijce pod przyciskami */
.sam-dol .sam-kto-wiersz{flex-basis:100%;order:5;display:flex;flex-wrap:wrap;column-gap:14px;margin-top:-2px}
.sam-dol .sam-kto,.sam-dol .sam-rece{padding:2px 0;border:0;border-radius:0;background:none;color:#6a7488;font:600 11px var(--f-ui);text-align:left}
.sam-dol .sam-kto:hover,.sam-dol .sam-rece:hover{background:none;color:#14202b;text-decoration:underline}
.sam-nr{margin-right:auto;font:600 12px var(--f-ui);color:#6a7488}
.sam-dol button{font:700 13px var(--f-ui);padding:5px 12px;border-radius:999px;border:2px solid #14202b;background:#fffdf6;color:#14202b;cursor:pointer}
.sam-dol button:hover{background:#f1ede2}
.sam-dol .sam-dalej{background:#ffd84d}
.sam-dol .sam-dalej:hover{background:#ffcd1f}
.sam-dol .sam-pomin{border-color:transparent;background:none;color:#6a7488;padding:5px 4px}
.sam-dol .sam-pomin.sam-skipp{border-color:#14202b;background:#fffdf6;color:#14202b;padding:5px 12px}
.sam-dol .sam-dalej:disabled{opacity:.45;cursor:default;background:#efe6c0}
.sam-dol button:disabled{opacity:.35;cursor:default}
.sam-dol button:focus-visible{outline:2px solid #2f6fd0;outline-offset:2px}
/* klik obok tego, co każe nauczyciel (strona zablokowana): Dalej woła mocniej */
.sam-dol .sam-dalej.sam-wolam{animation:sam-wolam .42s ease-in-out 3}
@keyframes sam-wolam{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,216,77,0)}50%{transform:scale(1.2);box-shadow:0 0 0 7px rgba(255,216,77,.75)}}
.sam-reka{position:fixed;left:0;top:0;z-index:3;font-size:34px;line-height:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45));display:none}
.sam-reka.widac{display:block}
.sam-reka span{display:block;animation:sam-tik 1.1s ease-in-out infinite}
.sam-reka.mocno span{animation-duration:.55s;font-size:44px}
@keyframes sam-tik{0%,100%{transform:translate(0,0) scale(1)}45%{transform:translate(-5px,-7px) scale(.88)}}
.sam-gwiazdka{position:fixed;font-size:22px;line-height:1;color:#ffd84d;text-shadow:1px 1px 0 #14202b,-1px -1px 0 #14202b,1px -1px 0 #14202b,-1px 1px 0 #14202b;pointer-events:none}
@media (max-width:600px){.sam-nauczyciel{width:64px}.sam-dymek{width:calc(100vw - 78px);padding:28px 30px 22px;font-size:15px}}
@media (prefers-reduced-motion:reduce){.sam-reflektor{transition:none}.sam-reflektor::after,.sam-postac svg,.sam-reka span,.sam-dol .sam-dalej.sam-wolam{animation:none}.sam-dol .sam-dalej.sam-wolam{outline:3px solid #ffb400}}
/* wybór wyglądu zadań (Matematyk, warianty do oceny 17.10) */
.wybor-wygladu{display:inline-flex;align-items:center;gap:3px;margin-left:6px;font:600 .72rem var(--f-ui);color:var(--kreda-2)}
.wybor-wygladu > span{margin-right:2px;color:var(--kreda);background:var(--tlo-2);border:1px solid var(--ramka);border-radius:4px;padding:3px 6px}
:root[data-wyglad-zad="B"] .zadanie-z.otwarta > *{opacity:0}
/* kafelek 16:9 otwarty: zadanie na cały ekran - ramka postaci i mini-mapa schowane */
.hud,.minimapa,.postep-mat{transition:opacity .3s}
:root.zadanie-pelne .pasek,:root.zadanie-pelne .hud,:root.zadanie-pelne .minimapa,:root.zadanie-pelne .postep-mat,:root.zadanie-pelne .narzedzia,
:root.zadanie-pelne .powrot-zadania{opacity:0;pointer-events:none}
:root.zadanie-pelne .rama-zadania{display:none}
.pasek,.narzedzia{transition:opacity .3s}
/* 6-9: kafelek zostaje widoczny pod wyjeżdżającym zadaniem */

/* WRÓĆ DO ZADANIA - po POKAŻ NA MAPIE, na dole ekranu */
.powrot-zadania{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:40;
  font:600 .82rem/1 var(--f-ui);letter-spacing:.06em;color:var(--tlo);background:var(--kreda);
  border:0;border-radius:999px;padding:11px 18px;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.powrot-zadania:hover{filter:brightness(1.1)}
.powrot-zadania:focus-visible{outline:2px solid var(--pomoc);outline-offset:3px}

/* okienko w prawym dolnym rogu - wyłączone */
.panel{display:none !important}
.panel{
  position:fixed;
  bottom:16px;right:16px;
  width:min(280px,calc(100vw - 32px));
  background:var(--tlo-2);
  border:1px solid var(--ramka);
  border-left:3px solid var(--akcent,var(--kreda));
  padding:14px 16px;
  width:min(320px,calc(100vw - 32px));
}
.panel__nr{
  font:500 .72rem/1.6 ui-monospace,Consolas,monospace;
  color:var(--kreda-2);
  letter-spacing:.1em;
}
.panel__nazwa{font:600 1.3rem/1.15 var(--f-pismo);margin:2px 0 0}
.panel__gdzie{margin:8px 0 0;font-size:.78rem;color:var(--kreda-2);line-height:1.5}
.panel__x{
  position:absolute;top:6px;right:8px;
  background:none;border:0;cursor:pointer;
  font:400 1.1rem/1 var(--f-ui);color:var(--kreda-2);padding:4px 6px;
}
.panel__x:hover{color:var(--kreda)}

/* --- odtwarzacz poglądowy ---------------------------------------------- */
.odtwarzacz{margin-top:12px}
.odtwarzacz__ekran{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  width:100%;aspect-ratio:16/9;
  background:var(--wnetrze);
  border:2px solid var(--tusz);
  color:var(--kreda);
  font:500 .74rem/1.3 var(--f-ui);
  letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;
}
.odtwarzacz__ekran:disabled{cursor:not-allowed}
/* Trójkąt odtwarzania rysujemy obwódkami - zero plików, skaluje się z panelem */
.odtwarzacz__ikona{
  width:0;height:0;
  border-left:22px solid var(--akcent,var(--kreda));
  border-top:14px solid transparent;
  border-bottom:14px solid transparent;
  margin-left:6px;
}
.odtwarzacz.gra .odtwarzacz__ikona{
  width:16px;height:26px;margin-left:0;border:0;
  background:
    linear-gradient(var(--akcent,var(--kreda)) 0 0) left/5px 100% no-repeat,
    linear-gradient(var(--akcent,var(--kreda)) 0 0) right/5px 100% no-repeat;
}
.odtwarzacz__pasek{height:4px;background:var(--ramka);margin-top:8px}
.odtwarzacz__pasek span{display:block;height:100%;width:0;background:var(--akcent,var(--kreda))}
.odtwarzacz__nota{margin:8px 0 0;font-size:.72rem;color:var(--kreda-2)}
.odtwarzacz__zaloguj{
  display:none;margin-top:8px;font-size:.78rem;
  color:var(--pomoc);text-decoration:none;border-bottom:1px solid currentColor;
}

/* --- wersja zablokowana ------------------------------------------------- */
.panel.zamkniety .odtwarzacz__ekran{color:var(--kreda-2);background:var(--tlo-2)}
.panel.zamkniety .odtwarzacz__ikona{
  /* kłódka: pałąk na obwódce, korpus wypełnieniem */
  width:20px;height:16px;margin:0;
  border:2px solid var(--kreda-2);border-radius:3px;
  background:var(--kreda-2);
  position:relative;
}
.panel.zamkniety .odtwarzacz__ikona::before{
  content:"";position:absolute;left:50%;top:-12px;transform:translateX(-50%);
  width:12px;height:12px;
  border:2px solid var(--kreda-2);border-bottom:0;
  border-radius:7px 7px 0 0;
}
.panel.zamkniety .odtwarzacz__pasek{opacity:.4}
.panel.zamkniety .odtwarzacz__zaloguj{display:inline-block}

/* --- rysunek ------------------------------------------------------------ */
/* tunel: jasne wnętrze, ciemniejsza ściana od strony cienia, jasny pas
   od strony światła, grube krawędzie i cienkie linie wzdłuż */
.galezie .tunel-tlo{fill:var(--wnetrze);stroke:none}
.galezie .tunel-cien{fill:var(--pod-przod);stroke:none}
.galezie .tunel-blik{fill:var(--swiatlo);stroke:none}
.galezie .tunel-brzeg{fill:none;stroke:var(--tusz);stroke-width:11;stroke-linecap:round}
.galezie .tunel-nitka{fill:none;stroke:var(--tusz);stroke-width:2.6;stroke-linecap:round;opacity:.45}
.galezie .tlo-kola{fill:var(--gkolor);opacity:.16;stroke:none}
/* Czarny rant jak przy symbolach, kolor zostaje w szkle i w sierpach */
.galezie .obwod{fill:none;stroke:var(--tusz);stroke-width:13}
.galezie .galaz-blik{fill:none;stroke-linecap:round}
.galezie .skrot{
  text-anchor:middle;
  fill:var(--kreda);
  font-family:"ISOCPEUR","Isocpeur",var(--f-ui),sans-serif;
  letter-spacing:.03em;
  pointer-events:none;
}
.kulka__pole{fill:transparent;stroke:none;cursor:pointer}
.galezie .kulka .ruch{transition:transform .2s cubic-bezier(.34,1.3,.64,1)}
.galezie .kulka:hover .ruch{transform:scale(1.16)}
.napisy .kulka-nazwa{
  text-anchor:middle;
  fill:var(--kreda);
  font:400 34px "ISOCPEUR","Isocpeur",var(--f-ui),sans-serif;
  letter-spacing:.02em;
  stroke:var(--tlo);
  stroke-width:8;
  stroke-linejoin:round;
  paint-order:stroke;
  opacity:0;
  transition:opacity .15s;
  pointer-events:none;
}
.napisy .kulka-nazwa.widoczna{opacity:1}

/* .geometria path ustawia fill:none i cienka kreske - podstawka musi byc
   bardziej szczegolowym selektorem, inaczej przegrywa w kaskadzie */

.galezie .etykieta{
  font:600 30px var(--f-pismo);
  fill:var(--kreda);
  text-anchor:middle;
}
.galezie .nitka-rant{fill:none;stroke:var(--tusz);stroke-width:11;stroke-linecap:round}
.galezie .nitka-trzon{fill:none;stroke:var(--gkolor);stroke-width:6;stroke-linecap:round}
.galezie .nitka-blik{fill:none;stroke:var(--blik);stroke-width:1.8;stroke-linecap:round;opacity:.75}
.galezie .kula-m-tlo{opacity:.20;stroke:none}
.galezie .kula-m-blik{fill:none;stroke-linecap:round}
.galezie .kula-m-rant{fill:none;stroke:var(--tusz)}
.galezie .tunel--maly .tunel-brzeg{stroke-width:3}
/* Mapa Fizyki wg szkiców Fizyka-Mapa-2..5 */
.napisy .podpis-dzialu{fill:var(--tusz);font-family:var(--f-tech,inherit);font-weight:500;text-anchor:middle;
  paint-order:stroke;stroke:var(--tlo);stroke-linejoin:round;pointer-events:none}
.napisy .podpis-dzialu .gruby{font-weight:800;letter-spacing:.04em}
.galezie .zadanie-z{cursor:pointer}
.fizyk-na-kuli:focus:not(:focus-visible),.guzik-fizyka:focus:not(:focus-visible){outline:none}
.fizyk-na-kuli,.guzik-fizyka{cursor:pointer}
/* filtr poziomu części (łatwe ... bardzo trudne): zadania spoza niego przygaszone */
.zadanie-z{transition:opacity .25s}
.zadanie-z.wygaszona{opacity:.14}
/* Wygaszanie niezrobionych zadań (Jan 20.10: mapa bez zadań ma być „biedna, pusta”, a robienie zadań ją zapełnia).
   Wariant na <html>: wygas + wygas-A / D / F / G / H / I (bez klas - wygląd jak dawniej), przycisk „Wygaszanie: A ▸”.
   Kafelek pierścienia Matematyka: wg, okrąg wg-p0..wg-p3 i stan wg-zrob (UMIEM), wg-powt (do powtórki), wg-nie (nic,
   także zaślepki czwartego okręgu); wg-wid - widoczny w D (zrobione, najbliższe następne, punkty startu); wg-sam - cel
   samouczka (widać go w każdym wariancie). Kolory działu: --wk (kafelek), --wkd (ciemniejszy), --wgg (mgiełka G);
   grubość --wg1 (w jednostkach mapy) na grupie pierścienia; wg-z0 / wg-z1 / wg-z2 na grupie - jak blisko kamera (G).
   !important - kafelek ma kolory w stylu wpisanym w element. */
:root.wygas .zadanie-z.wg > .kaf{transition:fill .45s ease,stroke .45s ease,fill-opacity .45s ease}   /* bez opacity: próg przybliżenia w G przełącza się od razu (przejście 240 kafelków kosztowało klatki zoomu) */
:root.wygas .zadanie-z.wg > text{transition:fill .45s ease,opacity .45s ease}
.wg-dod{pointer-events:none}
.wg-odznaka{display:none}
/* we wszystkich wariantach: zrobione - pełny kolor z numerem i małym znaczkiem UMIEM w rogu (zamiast białego ptaszka);
   do powtórki - półprzezroczysty kafelek z pomarańczową obwódką (obwódka z wygladKulki) */
:root.wygas .zadanie-z.wg-zrob > text{opacity:1 !important}
:root.wygas .zadanie-z.wg-zrob > .wg-ptak{display:none !important}
:root.wygas .zadanie-z.wg-zrob > .wg-odznaka{display:inline}
:root.wygas .zadanie-z.wg-powt > .kaf{fill-opacity:.55}
/* A Duchy (i F, H): niezrobione - blady kontur z bladym numerem */
:root.wygas-A .zadanie-z.wg-nie > .kaf,:root.wygas-F .zadanie-z.wg-nie > .kaf,:root.wygas-H .zadanie-z.wg-nie > .kaf,:root.wygas-J .zadanie-z.wg-nie > .kaf{
  fill:var(--wg-duch) !important;stroke:var(--wkd) !important;stroke-width:calc(var(--wg1) * 1px) !important;stroke-opacity:.75}
:root.wygas-A .zadanie-z.wg-nie > text,:root.wygas-F .zadanie-z.wg-nie > text,:root.wygas-H .zadanie-z.wg-nie > text,:root.wygas-J .zadanie-z.wg-nie > text{fill:var(--wkd) !important;opacity:.62 !important}
/* J Pierścienie po kolei: otwarte okręgi jak A; zamknięte - ledwo widoczny obrys bez numeru (też zrobione), kłódki z napisem */
:root.wygas-J .zadanie-z.wg-zamk > .kaf{fill:transparent !important;stroke:var(--wkd) !important;stroke-width:calc(var(--wg1) * .8px) !important;stroke-opacity:.24 !important;fill-opacity:1 !important}
:root.wygas-J .zadanie-z.wg-zamk > text,:root.wygas-J .zadanie-z.wg-zamk > .wg-odznaka,:root.wygas-J .zadanie-z.wg-zamk > .wg-ptak{display:none !important}
:root.wygas-J .zadanie-z.wg-zamk{cursor:not-allowed}
:root.wygas-J .pierscien-granice > circle{opacity:.3 !important}
.wg-klodki,.wg-klodka{pointer-events:none}
/* D Odkrywanie po kolei: widać zrobione, najbliższe następne i punkty startu; łatwy okrąg zostaje bladymi „fundamentami” */
:root.wygas-D .zadanie-z.wg:not(.wg-wid):not(.wg-sam):not(.wg-p0){display:none}
:root.wygas-D .pierscien-granice > circle{opacity:.2 !important}
:root.wygas-D .zadanie-z.wg-p0.wg-nie:not(.wg-wid):not(.wg-sam) > .kaf{fill:var(--wg-fund) !important;stroke:var(--wkd) !important;
  stroke-width:calc(var(--wg1) * .9px) !important;stroke-opacity:.42}
:root.wygas-D .zadanie-z.wg-p0.wg-nie:not(.wg-wid):not(.wg-sam) > text{display:none}
:root.wygas-D .zadanie-z.wg-wid.wg-nie > .kaf{fill:rgba(255,255,255,.88) !important;stroke:var(--wkd) !important;stroke-width:calc(var(--wg1) * 1.4px) !important}
:root.wygas-D .zadanie-z.wg-wid.wg-nie > text{fill:var(--wkd) !important}
/* F Cała mapa się buduje: jak A, a kule części, działy, tunele i napisy działów bez żadnego postępu - przygaszone */
:root.wygas-F .wg-mapa{transition:opacity .7s ease}
:root.wygas-F .wg-mapa.wg-ciemna{opacity:.26 !important}
/* G Pusta mapa: niezrobione - ledwo widoczna rozmyta plamka w kolorze kafelka (gradient, bez rozmyć), bez numeru;
   im dalej kamera, tym bledsza */
:root.wygas-G .pierscien-granice > circle{opacity:.16 !important}
:root.wygas-G .zadanie-z.wg-nie > .kaf{fill:var(--wgg) !important;stroke:none !important;opacity:.42}
:root.wygas-G .wg-z0 .zadanie-z.wg-nie > .kaf{opacity:.2}
:root.wygas-G .wg-z2 .zadanie-z.wg-nie > .kaf{opacity:.66}
:root.wygas-G .pierscien-zadan:not(.wg-z2) .zadanie-z.wg-nie:not(.wg-sam) > text{display:none}
:root.wygas-G .wg-z2 .zadanie-z.wg-nie > text{fill:var(--wkd) !important;opacity:.32 !important}
/* I Ziarenka: niezrobione - mała blada kropka (rozmiar w kafelekGeom), zrobione wyrastają w pełny kafelek */
:root.wygas-I .pierscien-granice > circle{opacity:.3 !important}
:root.wygas-I .zadanie-z.wg-nie > .kaf{fill:var(--wkd) !important;stroke:none !important;opacity:.5}
:root.wygas-I .zadanie-z.wg-nie:not(.wg-sam) > text{display:none}
/* cel samouczka: zawsze widoczny, jak „następne zadanie” */
:root.wygas .zadanie-z.wg-sam.wg-nie > .kaf{fill:rgba(255,255,255,.9) !important;stroke:var(--wkd) !important;
  stroke-width:calc(var(--wg1) * 1.4px) !important;stroke-opacity:1;opacity:1 !important}
:root.wygas .zadanie-z.wg-sam.wg-nie > text{fill:var(--wkd) !important;opacity:1 !important}
/* podział PODSTAWA | ROZSZERZENIE (Jan 22.10, PODZIAL_MAT „złota ramka” i „obręcz i ramka”): kafelki okręgów 3 i 4 (rozszerzenie)
   mają podwójną obwódkę - kontur tuszem jak zrobione (także niezrobione w mgiełce G i zamknięte J; do powtórki zostaje pomarańczowa)
   i tuż pod nim złotą (.kaf-ramka, sam złoty kontur ginął na pomarańczowym tle); złota blednie razem z kafelkiem (G, J), w I znika */
:root.podzial-ramka .pierscien-zadan > .zadanie-z.wg.wg-p2:not(.wg-powt) > .kaf,
:root.podzial-ramka .pierscien-zadan > .zadanie-z.wg.wg-p3:not(.wg-powt) > .kaf{stroke:var(--tusz) !important;stroke-width:calc(var(--wg1, 6.5) * 2.2px) !important}
:root.wygas-G .zadanie-z.wg-nie > .kaf-ramka{opacity:.42}
:root.wygas-G .wg-z0 .zadanie-z.wg-nie > .kaf-ramka{opacity:.2}
:root.wygas-G .wg-z2 .zadanie-z.wg-nie > .kaf-ramka{opacity:.66}
:root.wygas-J .zadanie-z.wg-zamk > .kaf-ramka{opacity:.24}
:root.wygas-I .zadanie-z.wg-nie:not(.wg-sam) > .kaf-ramka{display:none}
/* stan zadań i mini-mapa Matematyka (Jan 17.10, do zatwierdzenia) */
@keyframes kulka-tu{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.kulka-tu{transform-box:fill-box;transform-origin:center;animation:kulka-tu 1.4s ease-out infinite}
@keyframes umiem-oddech{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.guzik-umiem{transform-box:fill-box;transform-origin:center;animation:umiem-oddech 1.6s ease-in-out infinite}
.guzik-umiem.wybrany{animation:none}
.minimapa{position:fixed;right:16px;top:38px;z-index:30;width:124px;height:124px;border:2px solid #c9b88f;border-radius:12px;
  background:#f4ecd8;box-shadow:0 6px 18px rgba(0,0,0,.22);overflow:hidden;cursor:pointer;transition:width .2s ease,height .2s ease}
.minimapa.otwarta{width:320px;height:320px}
.minimapa svg{display:block;width:100%;height:100%}
@media (max-width:640px){.minimapa{top:auto;bottom:64px;right:10px;width:96px;height:96px}.minimapa.otwarta{width:260px;height:260px}}
/* pasek postępu całego Matematyka pod mini-mapą (Jan 20.10) - ta sama ramka (kremowa w obu motywach, jak mini-mapa) */
.postep-mat{position:fixed;right:16px;top:168px;z-index:30;width:124px;box-sizing:border-box;padding:5px 8px 7px;border:2px solid #c9b88f;
  border-radius:12px;background:#f4ecd8;box-shadow:0 6px 18px rgba(0,0,0,.22);color:#3b2f1d;pointer-events:none;
  transition:opacity .3s,top .2s ease,width .2s ease}
.postep-mat[hidden]{display:none}
.minimapa.otwarta + .postep-mat{top:364px;width:320px}
.ppm-gora{display:flex;align-items:baseline;justify-content:space-between;gap:4px;line-height:1}
.ppm-tytul{font-family:var(--f-tech);font-weight:600;font-size:10px;letter-spacing:.05em}
.ppm-proc{font-family:var(--f-ui);font-weight:800;font-size:17px}
.ppm-tor{display:flex;height:11px;margin-top:5px;border:1.5px solid #3b2f1d;border-radius:7px;background:#fffaf0;overflow:hidden}
.ppm-tor i{display:block;height:100%;box-sizing:border-box;border-right:1.5px solid}
.ppm-tor i:last-child{border-right:none}
.postep-mat.pelny .ppm-tor i{background:#f2c230 !important;border-color:#a87400 !important}
.ppm-demo{display:none;margin-top:3px;font-family:var(--f-tech);font-size:9px;letter-spacing:.03em;color:#7a6a48}
.postep-mat.demo .ppm-demo{display:block}
.nb-ile{position:absolute;right:-7px;top:-7px;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:9px;
  background:#e0412f;color:#fff;font:700 11px/18px var(--f-ui);text-align:center}
.nb-ile[hidden]{display:none}
.nt-gora{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.nt-tytul{flex:1;font-family:var(--f-tech);font-weight:600;font-size:12px;letter-spacing:.06em}
.nt-gora button{border:1.5px solid #c9b88f;border-radius:8px;background:#fffaf0;color:#3b2f1d;font:600 12px/1.2 var(--f-ui);padding:4px 9px;cursor:pointer}
.nt-gora button:hover{background:#fff;border-color:#3b2f1d}
.nt-stan{min-height:13px;margin-top:5px;font-family:var(--f-tech);font-size:10px;color:#7a6a48}
/* u Matematyka pasek guzików zawija się przed notatnikiem (z przyciskami wariantów sięgał prawego rogu już przy 1500 px
   i „?” chował się pod notatnikiem) */
:root.tryb-mat .narzedzia{right:76px}
@media (max-width:640px){.postep-mat{top:auto;bottom:166px;right:10px;width:96px;padding:4px 6px 5px}.minimapa.otwarta + .postep-mat{bottom:330px;width:260px}
  .ppm-tytul{font-size:9px}.ppm-proc{font-size:14px}}
/* PLANER przy Matematyku (Jan 24.10; Jan 26.10 - sama linia czasu do matury; Jan 27.10 - mapa obok Planera; Jan 27.10 (2) -
   projekcja w przestrzeni jak mapa Matematyka i Fizyka): bez płyty, ramki i nagłówka - rysunek leży wprost na płótnie w kamerze
   (tusz --tusz jak na mapach, idzie za motywem Noc), czarny obrys, kolory części. Linia czasu WRZ - WRZ: duże okręgi miesięcy
   z liczbą zadań (klik - fragment mapy Matematyka na ten miesiąc), pas CHALLENGE, MATURA, NAGRODA, WYNIKI MATUR, CEL. */
:root{--planer:#f08a5d;--planer-c:#c4572b;--planer-j:#f9c4a4;--pl-czerw:#d93a2b;--pl-blady:#f2ebde}
.mapa-planer{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .55s ease,visibility 0s linear .55s}
.mapa-planer.widoczny{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .55s ease,visibility 0s}
.pl-linia text:where(:not(.pl-mn-klon text)){font-family:var(--f-tech);fill:var(--tusz)}
.pl-linia .pl-tytul{font-size:150px;font-weight:800;letter-spacing:.06em;text-anchor:middle}
.pl-nad{font-size:40px;font-weight:800;letter-spacing:.12em;text-anchor:middle}
.pl-liczba{font-size:88px;letter-spacing:.02em}
.pl-jedn{font-size:42px;letter-spacing:.04em}
.pl-dzien{font-size:34px;font-weight:800;text-anchor:middle}
.pl-umiesz{font-size:28px;font-weight:600;text-anchor:middle;opacity:.7}
.pl-os{stroke:var(--tusz);stroke-width:10;stroke-linecap:round}
.pl-os-minione{stroke:var(--tusz);stroke-width:10;stroke-linecap:round;opacity:.3}
.pl-grot{fill:var(--tusz)}
.pl-challenge{fill:var(--pl-czerw);fill-opacity:.2;stroke:var(--tusz);stroke-width:4;stroke-dasharray:16 10}
.pl-linia .pl-challenge-t{font-size:38px;font-weight:900;letter-spacing:.16em;fill:var(--pl-czerw)}
.pl-m .pl-kolo{stroke:var(--tusz);stroke-width:5}
.pl-m .pl-kolo-cien{fill:var(--planer-c)}
.pl-m.pl-teraz .pl-kolo{fill:var(--planer);stroke-width:7}
.pl-m.pl-potem .pl-kolo{fill:var(--planer-j)}
.pl-m.pl-minal .pl-kolo,.pl-m.pl-po .pl-kolo{fill:var(--pl-blady);stroke-opacity:.35}
.pl-m.pl-minal .pl-kolo-cien,.pl-m.pl-po .pl-kolo-cien{display:none}
.pl-linia .pl-ile{font-size:54px;font-weight:800;text-anchor:middle;fill:#1a1209;pointer-events:none}
.pl-linia .pl-m.pl-minal .pl-ile,.pl-linia .pl-m.pl-po .pl-ile{fill:var(--tusz);opacity:.4}
.pl-mies{font-size:36px;font-weight:800;letter-spacing:.08em;text-anchor:middle}
.pl-m.pl-minal .pl-mies,.pl-m.pl-po .pl-mies{opacity:.45}
.pl-rok{font-size:26px;font-weight:700;letter-spacing:.02em;opacity:.75}
.pl-m.pl-klik{cursor:pointer}
.pl-m.pl-klik:hover .pl-kolo{stroke-width:9}
.pl-m:focus{outline:none}
.pl-m:focus-visible .pl-kolo{stroke:var(--planer-c);stroke-width:9}
.pl-kolo-wyb{fill:none;stroke:var(--tusz);stroke-width:7;stroke-dasharray:20 11;display:none}
.pl-m.pl-wyb .pl-kolo-wyb{display:inline}
.pl-m.pl-wyb .pl-kolo{fill:var(--planer);stroke-width:9}
.pl-kon{font-size:32px;font-weight:800;letter-spacing:.1em;text-anchor:middle}
.pl-kon.pl-lewo{text-anchor:start}
.pl-kon.pl-prawo,.pl-kon-data.pl-prawo{text-anchor:end}
.pl-kon-data{font-size:27px;font-weight:600;letter-spacing:.02em;opacity:.8;text-anchor:middle}
.pl-kon-data.pl-lewo{text-anchor:start}
.pl-ty{font-size:36px;font-weight:900;letter-spacing:.08em;text-anchor:middle}
.pl-drzewce{stroke:var(--tusz);stroke-width:6;stroke-linecap:round}
.pl-szach-b{fill:#ffffff}
.pl-szach-c{fill:#14141a}
.pl-obr{fill:none;stroke:var(--tusz);stroke-width:4.5;stroke-linejoin:round;stroke-linecap:round}
.pl-kropka{stroke:var(--tusz);stroke-width:5}
.pl-zloto{fill:#f4bf3a}
.pl-zloto-c{fill:#d08a17}
.pl-blik{fill:none;stroke:#fff6cf;stroke-width:6;stroke-linecap:round}
.pl-gwiazda{fill:#fff6cf;stroke:var(--tusz);stroke-width:2.5;stroke-linejoin:round}
.pl-kartka{fill:#ffffff}
.pl-kartka-l{stroke:#8a8f99;stroke-width:4;stroke-linecap:round}
.pl-ptaszek{fill:none;stroke:var(--pl-czerw);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.pl-cel-tlo{fill:#ffffff;fill-opacity:.85}
.pl-cel-k{fill:none;stroke:var(--tusz);stroke-width:5;stroke-linecap:round}
.pl-cel-c{fill:var(--pl-czerw);stroke:var(--tusz);stroke-width:3}
.pl-cel{cursor:pointer}
.pl-cel:focus{outline:none}
.pl-cel-pole{fill:var(--wnetrze);fill-opacity:.88;stroke:var(--tusz);stroke-width:4}
.pl-cel:hover .pl-cel-pole,.pl-cel:focus-visible .pl-cel-pole{stroke:var(--planer-c);stroke-width:7}
.pl-linia .pl-cel-txt{font-size:32px;font-weight:800;text-anchor:middle;pointer-events:none}
.pl-linia .pl-cel-txt.pusty{font-weight:600;font-style:italic;opacity:.55}
.pl-cel-wpis{position:fixed;z-index:60;box-sizing:border-box;margin:0;border:3px solid var(--planer-c);border-radius:10px;background:#fffdf7;color:#14130f;
  font-family:var(--f-tech);font-weight:800;text-align:center;padding:0 10px;outline:none;box-shadow:0 4px 0 rgba(10,10,8,.35)}
/* TASK BW: HISTORYK - podpisy wydarzeń na linii czasu z bliska (mikroPodpisy), pole tematu PROJEKCJI z podpowiedziami */
.znaczniki-stulecia .podpis-historyka{display:none}
.znaczniki-stulecia.blisko .podpis-historyka{display:inline}
.daty-historyka .data-historyka{transition:opacity .3s}
/* TASK CA: style zielonych kul CM (warstwy przełączane klasą body) i przyciski stylu; platformy w bocznych kulach +30% po najechaniu */
.cm-w{display:none}
.cm-hover{transition:transform .28s ease;transform-box:fill-box;transform-origin:50% 55%}
/* CB / BW: pola obrotu (studnia OTW, linie stuleci) - bez ramki fokusu po kliknięciu myszą, z klawiatury - obwódka */
.otw-obrot:focus,.stulecie-historyka circle:focus{outline:none}
.otw-obrot:focus-visible,.stulecie-historyka circle:focus-visible{stroke:#ffe14a;stroke-width:3px;vector-effect:non-scaling-stroke}
.cm-hover:hover{transform:scale(1.3)}
@media (prefers-reduced-motion:reduce){.cm-hover{transition:none}}
.daty-historyka.blisko .data-historyka{opacity:.16}
.wydarzenie-historyka:focus-visible{outline:none}
.wydarzenie-historyka:focus-visible .podpis-historyka{display:inline}
/* PROJEKTOR Planera (Jan 27.10 (3): „linia czasu planera zrób na projektorze bliżej niego”): z głowy Planera jasne promienie
   do rogów linii czasu, jak duże projektory tematów Managerów (drzEkran) i promień projekcji (promien-proj) - soczewka w kolorze
   ekranów projektorów, stożek światła, blade światło na płótnie pod linią */
.pl-projektor{pointer-events:none}
.pl-projektor .pl-pj-stozek{fill:#7fdcff;fill-opacity:.12;stroke:none}
.pl-projektor .pl-pj-ekran{fill:#c4eeff;fill-opacity:.1;stroke:none}
.pl-projektor .pl-pj-promien{fill:none;stroke:#3fb7e0;stroke-linecap:round;opacity:.75}
.pl-projektor .pl-pj-promien.pl-pj-sektor{stroke-width:2;stroke-dasharray:6 8;opacity:.85;vector-effect:non-scaling-stroke}
.pl-projektor .pl-pj-punkt{fill:#3fb7e0;stroke:#ffffff}
.pl-projektor .pl-pj-obud{fill:var(--planer);stroke:#14141a;stroke-linejoin:round}
.pl-projektor .pl-pj-szpula{fill:#3a3a44;stroke:#14141a}
.pl-projektor .pl-pj-nozka{fill:none;stroke:#14141a;stroke-linecap:round;stroke-linejoin:round}
.pl-projektor .pl-pj-socz{fill:#bff0ff;stroke:#14141a}
.pl-projektor .pl-pj-klin{fill:#cdf3ff;fill-opacity:.17;stroke:none}
.pl-projektor .pl-pj-tablet{fill:#2b2f3a;stroke:#14141a;stroke-linejoin:round}
.pl-projektor .pl-pj-tablet-ekr{fill:#7fdcff}
.pl-projektor .pl-pj-tablet-pkt{fill:#ffffff}
/* MAŁY PROJEKTOR miesiąca (Jan 27.10 (3): „po kliknięciu w okrąg nie przekierowuje na mapę, tylko pokazuje mały projektor z małą
   okrojoną mapą, gdzie podświetlone są tematy do zrobienia”): nad okręgiem ekran w stylu projektorów (pm-poswiata, pm-ekran),
   na nim wycinek pierścienia Matematyka z zadaniami miesiąca; reszta linii przygasa */
.pl-mini{pointer-events:none}
.pl-mini .pl-mn-poswiata{fill:none;stroke:#7fdcff;stroke-width:26;stroke-linejoin:round;opacity:.22}
.pl-mini .pl-mn-ekran{fill:#ffffff;fill-opacity:1;stroke:#3fb7e0;stroke-width:8;stroke-linejoin:round}
.pl-mini .pl-mn-stozek{fill:#7fdcff;fill-opacity:.22}
.pl-mini .pl-mn-promien{fill:none;stroke:#3fb7e0;stroke-width:4;stroke-linecap:round;opacity:.8}
.pl-mini .pl-mn-obud{fill:var(--planer);stroke:var(--tusz);stroke-width:4;stroke-linejoin:round}
.pl-mini .pl-mn-socz{fill:#3fb7e0;stroke:var(--tusz);stroke-width:4}
.pl-mini .pl-mn-promien.pl-mn-sektor{stroke-width:2;stroke-dasharray:6 8;opacity:.85;vector-effect:non-scaling-stroke}
.pl-mini .pl-mn-klin{fill:#cdf3ff;fill-opacity:.3}
.pl-linia .pl-mini .pl-mn-tyt{font-size:34px;font-weight:800;letter-spacing:.08em;text-anchor:middle}
.pl-linia .pl-mini .pl-mn-tyt-dz{font-weight:900}
.pl-linia .pl-mini .pl-mn-tyt-ile{font-weight:700;letter-spacing:.04em;opacity:.62}
/* Jan 29.10: na ekranie cała mapa Matematyka (klon) - wygaszona, świecą działy miesiąca; klon bez animacji i zdarzeń */
.pl-mini .pl-mn-klon,.pl-mini .pl-mn-klon *{animation:none !important;transition:none !important;pointer-events:none !important}
.pl-mini .pl-mn-pod{pointer-events:none}
.pl-mini .pl-mn-posw{transition:scale .18s ease}
.pl-mini .pl-mn-posw.pl-mn-hov{scale:1.2}
.pl-mini .pl-mn-traf{fill:transparent;stroke:none;pointer-events:all}
.pl-linia .pl-mini .pl-mn-et{font-family:var(--f-tech);font-weight:900;letter-spacing:.06em;stroke:#ffffff;stroke-linejoin:round;paint-order:stroke;pointer-events:all;transition:scale .18s ease}
.pl-linia .pl-mini .pl-mn-cel.pl-mn-hov .pl-mn-et{scale:1.14}
.pl-linia .pl-mini .pl-mn-dymek{pointer-events:none}
.pl-linia .pl-mini .pl-mn-dymek text{font-family:var(--f-tech);font-weight:800;letter-spacing:.04em;fill:#0a0a08}
.pl-linia > *{transition:opacity .3s ease}
.pl-mini-on .pl-linia > :not(.pl-m):not(.pl-mini):not(.pl-os):not(.pl-os-minione):not(.pl-grot):not(.pl-pl){opacity:.12}
/* BIAŁA PŁASZCZYZNA projekcji Planera (Jan 27.10 (5): „projekcja ma mieć białe tło - ekran, na który pada obraz”, pod kątem jak
   rzutowane mapy działów): biały czworokąt w perspektywie z błękitnym obrysem i poświatą, delikatna kratka; na nim cała linia -
   zawsze ciemnym tuszem (także w Nocy), bo tło jest białe */
#planer-mat{--tusz:#0a0a08;--wnetrze:#efebe1;--pl-blady:#f2ebde}
.pl-pl{pointer-events:none}
.pl-plaszcz{fill:#ffffff;stroke:#3fb7e0;stroke-width:9;stroke-linejoin:round}
.pl-plaszcz-posw{fill:none;stroke:#7fdcff;stroke-width:34;stroke-linejoin:round;opacity:.28}
.pl-plaszcz-kratka{fill:none;stroke:#7fd3f5;stroke-width:2;opacity:.42}
.galezie .zadanie-z:hover circle{fill:#ffe9a8}
.galezie .zadanie-z text{text-anchor:middle;fill:var(--tusz);font-family:var(--f-tech,inherit);font-weight:700;pointer-events:none}
.galezie .tunel--maly .tunel-nitka{stroke-width:1}

.rdzen use{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .rdzen use{animation:pojaw-rdzen .7s ease forwards}
  .rdzen use + use{animation-delay:.14s}
  @keyframes pojaw-rdzen{from{opacity:0}to{opacity:1}}
}
@media (prefers-reduced-motion:reduce){ .rdzen use{opacity:1;animation:none} }
/* .geometria path ustawia cienka kreske - belka i kula musza byc bardziej
   szczegolowymi selektorami, inaczej przegrywaja w kaskadzie */
.geometria path.belka{fill:none;stroke:var(--tusz);stroke-width:12;stroke-linecap:round;opacity:1}
.geometria circle.kula-tlo{fill:var(--wnetrze);stroke:none;opacity:1}
.geometria circle.kula-obrys{fill:none;stroke:var(--tusz);stroke-width:11;opacity:1}
.geometria path.kula-blik{fill:none;stroke-linecap:round;opacity:1}
.geometria path{
  fill:none;
  stroke:var(--kreda);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.72;
}
.schowek{position:absolute;width:0;height:0;overflow:hidden}
.rysunek-symbolu{
  transform-box:fill-box;
  transform-origin:center;
  transition:transform .18s var(--ease,ease);
}
.slot:hover .rysunek-symbolu,.slot.wybrany .rysunek-symbolu{transform:scale(1.09)}
@media (prefers-reduced-motion:no-preference){
  /* backwards, nie both - inaczej klatka koncowa przykulaby transform z :hover */
  .rysunek-symbolu{animation:pojaw .45s ease backwards;animation-delay:var(--op,0s)}
  @keyframes pojaw{from{opacity:0;transform:scale(.86)}}
}
.slot{cursor:pointer}
.slot path{
  fill:none;
  stroke:var(--kolor);
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.slot__pole{fill:transparent;stroke:none}
.slot text{text-anchor:middle;pointer-events:none}
.slot .nr{
  font:500 17px var(--f-ui);
  fill:var(--kreda-2);
}
.slot .nazwa{
  /* ISOCPEUR to krój rysunku technicznego - bywa w systemie razem z CAD-em,
     więc podajemy pełny zapas na wypadek, gdyby go nie było */
  font:400 30px "ISOCPEUR","ISOCPEUR Italic","Isocpeur",var(--f-ui),sans-serif;
  letter-spacing:.02em;
  fill:var(--kreda);
  opacity:0;
  transition:opacity .15s;
  /* otoczka w kolorze tla - inaczej podpis zlewa sie z belka pietra */
  stroke:var(--tlo);
  stroke-width:7;
  stroke-linejoin:round;
  paint-order:stroke;
}
.slot:hover path,.slot.wybrany path{stroke-width:4.4}
.slot:hover .nr,.slot.wybrany .nr{fill:var(--kolor)}
.slot:hover .nazwa{opacity:1}
/* Kliknięcie myszą nie ma rysować ramki - obrys zostawiamy tylko dla
   nawigacji klawiaturą, gdzie bez niego nie wiadomo, gdzie się jest. */
.slot:focus{outline:none}
.slot:focus-visible .slot__pole{stroke:var(--pomoc);stroke-width:2;fill:none}
.poswiata{
  fill:var(--kolor);
  opacity:0;
  transition:opacity .18s;
}
.slot:hover .poswiata,.slot.wybrany .poswiata{opacity:.1}

.siatka{display:none}
.siatka circle{fill:none;stroke:var(--pomoc);stroke-width:1;stroke-dasharray:3 4;opacity:.5}
body.pokaz-siatke .siatka{display:block}

@media (prefers-reduced-motion:no-preference){
  .rysuj{
    stroke-dasharray:var(--dl);
    stroke-dashoffset:var(--dl);
    animation:kresli .9s ease forwards;
    animation-delay:var(--op,0s);
  }
  @keyframes kresli{to{stroke-dashoffset:0}}
}

/* --- podest (okrągła platforma ze szkicu) ------------------------------ */
.podest .kula-pl{fill:url(#kula-czern);stroke:none}
/* kolory bryły z zanikiem w dół (znikajacaFarba w rysujPodest) - jak gradient kula-czern, ciemniej ku dołowi */
.podest{--kz-k1:#0e0e14;--kz-k2:#0a0a0f;--kz-k3:#050507;--kz-b:#2a2a36;--kz-s:#fdfcf8;--kz-o:#050507}
.platforma-zlota .podest{--kz-k1:#f2c230;--kz-k2:#f2c230;--kz-k3:#f2c230;--kz-b:#f2c230;--kz-s:#a8740f;--kz-o:#7a5410}
.podest .blat-pl{fill:#14141b;stroke:#fdfcf8;stroke-width:5;stroke-opacity:.8}
.podest .obrys-bryly{fill:none;stroke:#050507;stroke-width:13;stroke-linejoin:round;stroke-linecap:round}
.siatka-blatu path,.siatka-kuli path{fill:none;stroke:#fdfcf8;stroke-linecap:round}
.siatka-blatu path{stroke-width:4;opacity:.75}
.siatka-kuli path{stroke-width:4;opacity:.6}

/* --- projektor Matematyka (niebieski ekran z siatką) */
.projektor-mat{pointer-events:none}
.projektor-mat.klikalna{pointer-events:auto;cursor:pointer}
.projektor-mat.klikalna:hover .pm-poswiata{opacity:.45}
.promien-proj{pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  /* obłoczki obracają się wokół pionowej osi kuli: cos(t) w poziomie,
     z przodu większe i jasne, z tyłu mniejsze i bledsze */
  .kreatywnosc .oblok{transform-box:fill-box;transform-origin:center;animation:obrot 1.8s infinite}
  @keyframes obrot{
    0%{transform:translateX(var(--a)) scale(.85);opacity:.8;animation-timing-function:ease-in}
    25%{transform:translateX(0) scale(1.15);opacity:1;animation-timing-function:ease-out}
    50%{transform:translateX(calc(var(--a) * -1)) scale(.85);opacity:.8;animation-timing-function:ease-in}
    75%{transform:translateX(0) scale(.6);opacity:.45;animation-timing-function:ease-out}
    100%{transform:translateX(var(--a)) scale(.85);opacity:.8}
  }
}
.promien-proj path{fill:none;stroke:#3fb7e0;stroke-width:4;opacity:.85}
.promien-proj circle{fill:none;stroke:#3fb7e0;stroke-width:6}
.promien-proj circle.pelna{fill:#3fb7e0}
.projektor-mat .pm-poswiata{fill:none;stroke:#7fdcff;stroke-width:34;stroke-linejoin:round;opacity:.22}
.projektor-mat .pm-ekran{fill:rgba(196,238,255,.34);stroke:#3fb7e0;stroke-width:12;stroke-linejoin:round}
.projektor-mat .pm-kratka{fill:none;stroke:#7fd3f5;stroke-width:3;opacity:.85}
.projektor-mat .pm-karta{fill:rgba(255,255,255,.8)}
.projektor-mat text{fill:#0d2a6b;font-family:"Archivo",system-ui,sans-serif;text-anchor:middle}
/* scena w kulce w stylu szkicu Krzysztofa - kolory pisaków, w nocy jaśniejsze */
.kk{--kk-ziel:#1d6e45;--kk-ziel-j:#86d17a;--kk-turk:#21956f;--kk-morski:#1d7ea6;--kk-nieb:#1e3fb0;
  --kk-fiolet:#3c3aa4;--kk-czerw:#c4262e;--kk-olowek:#7c7d70;
  --kk-pole-a:#cdeec3;--kk-pole-b:#c9def8;--kk-pole-ab:#f6e7a8;--kk-pole-c:#f8d2a6;--kk-pole-minus:#ef8f8f;
  --kk-tablica:#ffffff;--kk-siatka:#dde7f2;--kk-tunel:#e1f4d6;--kk-tunel-cien:#b5dca0;--kk-braz:#a8703e}
/* Sektory to przerywane linie długie na 60 000 jednostek, z kreską liczoną
   w pikselach ekranu (non-scaling-stroke) - liczba kreseczek rośnie razem
   z przybliżeniem, także tych poza ekranem. Przy wejściu w kulkę (kamera 3-9x)
   było to kilkadziesiąt tysięcy kreseczek na linię i lot kamery tracił co
   czwartą klatkę. Na widoku ogólnym (poniżej 1x) zostają, bliżej znikają. */
.gleboko .sektory:not(.sektory-self){display:none}
/* Jan 23.10: podpis mikro-ludzika MATURALNY (Fizyk / Matematyk na platformie głównej) - tylko z bliska (mikroPodpisy) */
.mikro-maturalny .podpis-mikro{display:none}
.mikro-maturalny.blisko .podpis-mikro{display:inline}
/* Jan 23.10: graf pytań NLPera - podpisy kul z bliska albo po kliknięciu kuli */
.graf-nlpera .podpis-nlpera{display:none}
.graf-nlpera.blisko .podpis-nlpera,.graf-nlpera .podpis-nlpera.pokaz{display:inline}
/* Jan 24.10: wiedza na projekcjach jako graf - maleńki tekst w kulkach z bliska, ramki z pełnym tekstem po kliknięciu */
.wiedza-graf .wiedza-mikro{display:none}
.wiedza-graf.blisko .wiedza-mikro{display:inline}
.wiedza-graf .wiedza-ramka{display:none}
.wiedza-graf .wiedza-ramka.pokaz{display:inline}
/* Jan 23.10: zielona kropka „Do kogo chcesz iść?” - fokus z klawiatury widoczny */
.kropka-dokogo:focus{outline:none}
.kropka-dokogo:focus-visible,.kropka-dokogo:hover{stroke:#0d2a6b !important}
/* Napisy SVG bez dociągania do pikseli. Domyślnie Chrome przy każdej zmianie
   skali kamery składa każdy napis od nowa pod nowy rozmiar ekranowy - 250
   napisów mapy to ok. 20 ms układu na klatkę i lot kamery tracił co czwartą
   klatkę. Z geometricPrecision układ spada do ok. 4 ms, lot jest płynny. */
#mapa text{text-rendering:geometricPrecision}
/* Wir wokół ludzika: animacja CSS (20 kroków na sekundę) zamiast SMIL. SMIL liczył styl każdej z sześciu kresek
   każdego ludzika osobno, co klatkę: 13 ludzików na ekranie = 97% głównego wątku w spoczynku i zacinanie po
   otwarciu kilku platform (pomiar 20.10, notatki/wydajnosc.md). Stoi, gdy kamera się rusza (.wir-stoi na #mapa)
   i gdy wiru nie widać (.wir-spi - poza ekranem albo maleńki). */
@keyframes wir-krok{to{stroke-dashoffset:var(--wir-o)}}
#mapa.wir-stoi .wir-k,#mapa .wir-ludzika.wir-spi .wir-k,:root.lekki-2 .wir-k{animation-play-state:paused!important}
/* (30.10) klasa kreski .wir-k, nie „path”: przy regule kończącej się na „path” przełączenie .wir-stoi na #mapa przeliczało styl
   każdej ścieżki mapy (ok. 800 na pierwszej klatce kółka) */
/* LEKKI (iPad, telefon - 25.10): pulsujące kółka (kulka-tu: otwarte zadanie, włączony poziom, kropka mini-mapy) Safari maluje
   przy każdej klatce ekranu (do 120 na sekundę) - tu 20 kroków na sekundę jak wir, a w ruchu kamery stoją */
:root.lekki .kulka-tu{animation-timing-function:steps(28)}
:root.lekki #mapa.wir-stoi .kulka-tu{animation-play-state:paused}
/* gałęzie sceny rozwijane kliknięciem - pojawiają się płynnie. Schowane mają display:none (po wygaszeniu),
   nie tylko przezroczystość: inaczej każda klatka zoomu w kulce przeliczała układ ok. 1500 niewidocznych
   elementów komórek i zamkniętych grup (Jan 19.10: „przybliżanie w Arytmetyku się zacina”). Bez
   allow-discrete / @starting-style (starsze przeglądarki) komórka pojawia się i znika bez przejścia. */
.kk-rozw{opacity:0;display:none;transition:opacity .45s ease,display .45s;transition-behavior:allow-discrete}
.kk-rozw.widoczne{opacity:1;display:inline;transition:opacity .45s ease,display 0s}
@starting-style{.kk-rozw.widoczne{opacity:0}}
/* Chrome przy każdej zmianie skali kamery składa od nowa każdy napis SVG - także te w schowanych grupach
   (pomiar 19.10, zoom w kulce Arytmetyka: układ 407 ms -> 200 ms, klatek ponad 16 ms 28 -> 3, gdy napisy
   zamkniętych komórek mają display:none same, nie przez grupę). Znikają po wygaszeniu komórki (0,45 s). */
.kk-rozw text{transition:display .45s;transition-behavior:allow-discrete}
.kk-rozw.widoczne text{transition:display 0s}
.kk-rozw:not(.widoczne) text{display:none}
.pierscien-zadan.poza-ekranem>.zadanie-z>text{display:none}
.pierscien-zadan.male .fm-opis,.pierscien-zadan.poza-ekranem .fm-opis{display:none}   /* Fizyk przy Matematyku: opisy działów z daleka */   /* numery kafelków, gdy pierścienia nie widać (pilnujPierscieni) */
/* Matematyka: numery drobnych kafelków (z daleka) i kafelków w wycinkach pierścienia poza ekranem (pilnujPierscieni) */
.pierscien-zadan.drobne>.zadanie-z>text,
.pierscien-zadan.wu0>.ws0>text,.pierscien-zadan.wu1>.ws1>text,.pierscien-zadan.wu2>.ws2>text,.pierscien-zadan.wu3>.ws3>text,
.pierscien-zadan.wu4>.ws4>text,.pierscien-zadan.wu5>.ws5>text,.pierscien-zadan.wu6>.ws6>text,.pierscien-zadan.wu7>.ws7>text,
.pierscien-zadan.wu8>.ws8>text,.pierscien-zadan.wu9>.ws9>text,.pierscien-zadan.wu10>.ws10>text,.pierscien-zadan.wu11>.ws11>text,
.pierscien-zadan.wu12>.ws12>text,.pierscien-zadan.wu13>.ws13>text,.pierscien-zadan.wu14>.ws14>text,.pierscien-zadan.wu15>.ws15>text{display:none}
/* Jan 19.10 (Arytmetyk): najpierw rysunek z suwakami, wzory po nim */
.kk-rozw.widoczne .kk-wyk-pierwszy{animation:kk-wyk-wjazd .55s cubic-bezier(.2,.8,.3,1) both}
.kk-rozw.widoczne .kk-lista-potem{animation:kk-lista-wjazd .5s ease-out .6s both}
@keyframes kk-wyk-wjazd{from{opacity:0;translate:0 -18px}to{opacity:1;translate:0 0}}   /* bez skali i środka obrotu: grupa ma transform (macierz ekranu) - transform-origin by ją przesunął */
@keyframes kk-lista-wjazd{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
.wnetrze-klik .cel-suwak{cursor:ew-resize;touch-action:none}
@media (prefers-reduced-motion:reduce){.kk-rozw.widoczne .kk-wyk-pierwszy,.kk-rozw.widoczne .kk-lista-potem{animation:none}}
/* cele kliknięć leżą NAD polem kulki (inaczej łapałoby je pole) i działają
   tylko wtedy, gdy wnętrze jest widoczne */
.wnetrze-klik .cel{fill:transparent;pointer-events:none}
.wnetrze-kuli.widoczne ~ .wnetrze-klik .cel{pointer-events:auto;cursor:pointer}
/* kliknięcie myszą nie zostawia czarnej ramki fokusu; z klawiatury (Tab) - przerywany obrys */
.wnetrze-klik .cel:focus{outline:none}
.wnetrze-klik .cel:focus-visible{outline:none;stroke:var(--kk-nieb);stroke-width:3;stroke-dasharray:6 6}
.projektor-mat .pm-nad{font-size:22px;font-weight:700;letter-spacing:6px;fill:#d9661a}
.projektor-mat .pm-tytul{font-size:40px;font-weight:700}
.projektor-mat .pm-zad{font-size:34px;font-weight:600}
.projektor-mat .pm-opis{font-size:20px;fill:#5a6888}
.projektor-mat .pm-tresc{font-size:22px;fill:#22325a;text-anchor:start}
.projektor-mat .pm-lit{font-weight:700;fill:#d9661a}
.projektor-mat .pm-kreska{fill:none;stroke:#3fb7e0;stroke-width:3;opacity:.7}

/* --- strony postaci (amelia/julia/alan.html): projekcja z historią */
.proj-historii{opacity:0;pointer-events:none;transition:opacity .6s ease}
.proj-historii.widoczne{opacity:1;pointer-events:auto;cursor:pointer}
.proj-historii .poswiata{fill:none;stroke:#7fdcff;stroke-width:46;stroke-linejoin:round;opacity:.22}
.proj-historii .ekran{fill:rgba(196,238,255,.34);stroke:#5fd0fa;stroke-width:12;stroke-linejoin:round}
.proj-historii .kratka{fill:none;stroke:#a6e8ff;stroke-width:3;opacity:.75}
.proj-historii .karta{fill:rgba(255,255,255,.76);stroke:rgba(255,255,255,.95);stroke-width:4}
.proj-historii text{fill:#0d2a6b;font-family:"Archivo",system-ui,sans-serif}
.proj-historii .h-nad{font-size:46px;font-weight:700;letter-spacing:9px;fill:#d9661a}
.proj-historii .h-imie{font-size:150px;font-weight:700}
.proj-historii .h-cytat{font-size:54px;font-style:italic;fill:#24345c}
.proj-historii .h-liczba{font-size:90px;font-weight:700}
.proj-historii .h-opis{font-size:34px;letter-spacing:2px;fill:#5a6888}
.proj-historii .h-punkt{font-size:50px}
.proj-historii .h-kropka{fill:#f08a24}
.proj-historii .h-kreska{fill:none;stroke:#f08a24;stroke-width:12;stroke-linecap:round}
/* NADZIEJA: żółta platforma ludzika */
.platforma-zlota .podest .kula-pl{fill:#f2c230}
.platforma-zlota .podest .blat-pl{fill:#ffd84d;stroke:#fff6c4}
.platforma-zlota .podest .obrys-bryly{stroke:#7a5410}
.platforma-zlota .siatka-blatu path,.platforma-zlota .siatka-kuli path{stroke:#a8740f}
.postac-obraz{cursor:pointer}
.postac-obraz:hover .lejek-postac{transform:translateY(-14px)}
.lejek-postac{transition:transform .25s ease;transform-box:fill-box}
.kopula-poludnik{fill:none;stroke:#5a1a3a;stroke-width:5;opacity:.45;pointer-events:none}
/* projekcje: jasnoniebieskie ekrany z siatką, wg szkicu */
.proj-oferty{opacity:0;pointer-events:none;transition:opacity .6s ease}
.proj-oferty.widoczne{opacity:1;pointer-events:auto}
.proj-oferty .poswiata{fill:none;stroke:#7fdcff;stroke-width:46;stroke-linejoin:round;opacity:.22}
.proj-oferty .ekran{fill:rgba(196,238,255,.34);stroke:#5fd0fa;stroke-width:12;stroke-linejoin:round;cursor:pointer}
.proj-oferty .kratka{fill:none;stroke:#a6e8ff;stroke-width:3;opacity:.75;pointer-events:none}
.proj-oferty .kratka-gruba{fill:none;stroke:#7fdcff;stroke-width:6;opacity:.8;pointer-events:none}
.pakiet{cursor:pointer}
/* treść projekcji - karta oferty na ekranie */
.pt{opacity:0;pointer-events:none;transition:opacity .4s ease}
.pt.widoczna{opacity:1;pointer-events:auto}
.pt text{fill:#0d2a6b;font-family:"Archivo",system-ui,sans-serif;text-anchor:middle}
.pt .pt-karta{fill:rgba(255,255,255,.74);stroke:rgba(255,255,255,.95);stroke-width:4}
.pt .pt-nad{font-size:30px;font-weight:700;letter-spacing:9px;fill:#d9661a}
.pt .pt-tytul{font-size:66px;font-weight:700;letter-spacing:1px}
.pt .pt-pod{font-size:34px;fill:#3d4d72}
.pt .pt-kreska{fill:none;stroke:#f08a24;stroke-width:8;stroke-linecap:round}
.pt .pt-etykieta{font-size:28px;font-weight:700;letter-spacing:6px;fill:#3d4d72}
.pt .pt-ramka{fill:#fff;stroke:#e0263a;stroke-width:6}
.pt .pt-nazwa{font-size:36px;font-weight:700}
.pt .pt-stara{font-size:36px;text-decoration:line-through;fill:#7a84a0}
.pt .pt-nowa{font-size:84px;font-weight:700;letter-spacing:-1px}
.pt .pt-jedn{font-size:34px;font-weight:600;fill:#3d4d72}
.pt .pt-odznaka rect{fill:#e0263a}
.pt .pt-odznaka text{fill:#fff;font-size:24px;font-weight:700;letter-spacing:4px}
.pt .pt-tekst{font-size:38px}
.pt .pt-maly{font-size:32px;font-weight:600}
.pt .pt-link-t{fill:#0b4fc2}
.pt .pt-gruby{font-weight:700}
.pt .pt-plus circle{fill:#fff;stroke:#0d2a6b;stroke-width:6;cursor:pointer}
.pt .pt-plus path{fill:none;stroke:#0d2a6b;stroke-width:8;stroke-linecap:round;pointer-events:none}
.pt .pt-plus.wybrany circle{fill:#f08a24;stroke:#b4500c}
.pt .pt-plus.wybrany path{stroke:#fff}
.pt .pt-pole{fill:#f2f8ff;stroke:#9db4d6;stroke-width:4}
.pt .pt-czesc{cursor:pointer}
.pt .pt-czesc .pt-zazn{fill:#f08a24;opacity:0}
.pt .pt-czesc.wybrany .pt-zazn{opacity:.4}
.pt .pt-guzik rect{fill:#f08a24;stroke:#b4500c;stroke-width:4;cursor:pointer}
.pt .pt-guzik:hover rect{fill:#ff9a3a}
.pt .pt-guzik text{fill:#fff;font-weight:700;font-size:38px;letter-spacing:1px;pointer-events:none}
/* treść leży na planszy w wąskich pionowych paskach (perspektywa),
   a kliknięcia łapią przezroczyste pola nad przyciskami */
.pt .pt-pasy{pointer-events:none}
.pt .pt-hit{fill:transparent;cursor:pointer}

/* --- kopuła ------------------------------------------------------------- */
/* kopuła w barwach obrazu: ciepłe szkło, różowo-fioletowe odblaski,
   żółto-zielona podłoga */
.kopula-podloga{fill:#c9d63a;opacity:.45;stroke:none}
.kopula-szklo{fill:#f08a24;opacity:.22;stroke:none;pointer-events:none}
.kopula-blik{fill:none;stroke:#d9307e;stroke-linecap:round;opacity:.8;pointer-events:none}
.kopula-kreska{fill:none;stroke:var(--tusz);stroke-width:7;stroke-linecap:round;pointer-events:none}
.kopula-kreska.gruba{stroke-width:13}

/* --- ludzik -------------------------------------------------------------- */
.ludzik-obrys{fill:none;stroke:var(--tusz);stroke-width:26;stroke-linejoin:round;stroke-linecap:round}
.ludzik-glob{fill:none;stroke:var(--tusz);stroke-width:9;stroke-linecap:round}
.postac{cursor:pointer}
.postac .ruch{transition:transform .18s ease}
.postac:hover .ruch{transform:scale(1.06)}
.postac:focus{outline:none}
.postac:focus-visible .pole{stroke:var(--pomoc);stroke-width:4;fill:none}
.pole{fill:transparent;stroke:none}
.podpis{
  text-anchor:middle;fill:var(--kreda);
  font:500 62px var(--f-tech);
  letter-spacing:.03em;
  stroke:var(--tlo);stroke-width:12;stroke-linejoin:round;paint-order:stroke;
  pointer-events:none;
}

/* --- plus: biały guzik z krzyżykiem, jak na szkicu ------------------------ */
.plus{cursor:pointer}
.plus .ruch{transition:transform .18s ease}
.plus:hover .ruch{transform:scale(1.18)}
.plus:focus{outline:none}
.plus:focus-visible .pole{stroke:var(--pomoc);stroke-width:4;fill:none}
.plus .tarcza{fill:var(--tlo);stroke:var(--tusz);stroke-width:12}
.plus .znak{stroke:var(--tusz);stroke-width:12;stroke-linecap:round;fill:none}

/* --- wybór --------------------------------------------------------------- */
.wybor{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.28)}
.wybor[data-otwarty="tak"]{display:grid}
.wybor__panel{background:var(--tlo-2);border:1px solid var(--ramka);padding:22px;width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto}
.wybor__panel h2{margin:0 0 4px;font:600 1.3rem/1.2 var(--f-pismo)}
.wybor__panel p{margin:0 0 18px;font-size:.85rem;color:var(--kreda-2)}
/* sześć części - zawsze trzy kolumny, także na telefonie */
.lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.karta{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--tlo);border:1px solid var(--ramka);padding:12px 6px;
  font:500 .82rem/1.2 var(--f-ui);text-align:center;color:var(--kreda);cursor:pointer;
}
.karta:hover:not(:disabled){border-color:var(--kreda-2)}
.karta[hidden]{display:none}
.karta:disabled{opacity:.42;cursor:not-allowed}
.karta svg{width:52px;height:78px}
.karta small{color:var(--kreda-2);font-weight:400;font-size:.74rem}
.wybor__zamknij{margin-top:16px;font:500 .78rem var(--f-ui);color:var(--kreda-2);background:none;border:0;cursor:pointer;padding:6px 0}

/* Ukrywamy kryciem, nie display - zmiana display gubi przejście i wymusza
   czekanie na klatkę, a to potrafi nie wypalić. */
/* Świat schowany w kuli: niewidoczny, dopóki się w nią nie wejdzie. */
.wnetrze-kuli{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .6s ease,visibility 0s linear .6s}
.wnetrze-kuli.widoczne{opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .6s ease,visibility 0s}
#mapa-swiat,#mapa-mat,.mapa-self,.mapa-og{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .55s ease,visibility 0s linear .55s}
#mapa-swiat.widoczny,#mapa-mat.widoczny,.mapa-self.widoczny,.mapa-og.widoczny{opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .55s ease,visibility 0s}
.sektory path{fill:none;stroke:#3fb7e0;stroke-width:1.5;stroke-dasharray:6 8;opacity:.55;vector-effect:non-scaling-stroke}
/* BH (Jan 26.10): osiem sektorów wokół Self - kliny na przemian jasne i ciemne, bez kresek, gasnące na zewnątrz */
.sektory.sektory-self path{stroke:none;opacity:1;pointer-events:none}
.sektory.sektory-self path.sektor-j{fill:#ffffff}
.sektory.sektory-self path.sektor-c{fill:#1d2a44}
/* Linia czasu ludzika - nie łapie kliknięć, żeby dało się kliknąć ludzika */
.linia-czasu{pointer-events:none}
.linia-czasu.ukryta{visibility:hidden;opacity:0}
.linia-czasu path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.linia-czasu .wzrok{opacity:.75}
@media (prefers-reduced-motion:no-preference){
  .linia-czasu.nowa{animation:wylot-czasu .5s ease-out}
  @keyframes wylot-czasu{from{opacity:0;transform:translateY(12px)}}
}
/* Self: struktury części - wybrana jest wyróżniona, pozostałe przygaszone */
.tryb-8c .struktura-glowne,.tryb-8c .struktura-kontener,.tryb-8c #mapy-self,
.tryb-glowne .struktura-8c,.tryb-glowne .struktura-kontener,
.tryb-kontener .struktura-8c,.tryb-kontener .struktura-glowne,.tryb-kontener #mapy-self{
  opacity:.18 !important;pointer-events:none !important;filter:grayscale(1);transition:opacity .3s}
.guzik-mat.guzik-self rect{stroke-width:13}
.guzik-mat.guzik-self.aktywny rect{fill:#f5d63d;stroke-width:20}
.kulka-wypelnij{cursor:pointer}
.kulka-wypelnij circle{fill:#f08a24;stroke:var(--tusz);stroke-width:7;transition:transform .15s}
.kulka-wypelnij:hover circle,.kulka-wypelnij:focus-visible circle{fill:#ffb347}
.kulka-wypelnij:focus{outline:none}
.linie-self path{fill:none;stroke:#f08a24;stroke-width:2.5px;vector-effect:non-scaling-stroke;stroke-linecap:round;pointer-events:none}
/* kopuła Self: niebieskie szkło, żółte odblaski i żółta podłoga */
.kopula-self .kopula-szklo{fill:#2f6fd0;opacity:.16}
.kopula-self .kopula-blik{stroke:#f2c230;opacity:.95}
.kopula-self .kopula-podloga{fill:#f2d13a;opacity:.6}
.guzik-mat.aktywny rect{fill:#f5d63d}
.rezerwa{fill:none;stroke:none;visibility:hidden;pointer-events:none}
.guzik-mat.guzik-self text{font-size:101px}
.napis-8c{fill:var(--tusz);font:600 46px var(--f-tech);letter-spacing:.04em;
  stroke:var(--tlo);stroke-width:10;stroke-linejoin:round;paint-order:stroke;pointer-events:none}
/* Połączenia głów dołączonych części z ludzikiem w środku platformy */
.polaczenia path{fill:none;stroke:#e0263a;stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linecap:round;opacity:.95;pointer-events:none}
/* Napis nad kopułą centralnego ludzika (MATURZYSTA / Self) */
.napis-centralny{font-size:80px;letter-spacing:.06em}
.napis-centralny.ukryty{visibility:hidden}
@media (prefers-reduced-motion:no-preference){
  .napis-centralny:not(.ukryty){animation:pojaw-napis .35s ease-out}
}
/* Guziki Matematyka i projekcja zadań */
.guzik-mat{cursor:pointer}
/* zadanie otwarte w kulce pierścienia: numer kulki chowa się pod treścią */
.zadanie-z.otwarta > text{display:none}
.zadanie-otwarte .guzik-zadania{cursor:pointer}
.zadanie-otwarte .guzik-zadania:focus:not(:focus-visible){outline:none}
.motywacja-dlonie [role=button]:focus:not(:focus-visible),.guzik-motywacji:focus:not(:focus-visible){outline:none}
.zadanie-otwarte .kropka-kroku{cursor:pointer}
/* rysunek: elementy bieżącego kroku */
.rysunek-zadania .rys-nowy{stroke:var(--zk-nowy)!important}
.rysunek-zadania text.rys-nowy{fill:var(--zk-nowy)!important;stroke:var(--zk-karta)!important}
.rysunek-zadania circle.rys-nowy:not(.pusty):not(.okrag){fill:var(--zk-nowy)!important}
/* krok z liniami do rysunku: linie biegną pod tekstem, litery mają jasną obwódkę */
.krok-zadania.z-laczami > text{paint-order:stroke;stroke:var(--zk-karta);stroke-width:.26em;stroke-linejoin:round}
/* dana z odwołaniem (Z.odw): najechanie pokazuje, skąd się wzięła */
.zadanie-otwarte tspan[data-odw],.zadanie-otwarte path[data-odw]{cursor:help}
/* przesuwanie kul mapy Matematyka włączone - kule chwyta się jak przedmioty */
:root.ciagnij-mat #mapa-mat .geometria, :root.ciagnij-mat #mapa-mat .kulka__pole, :root.ciagnij-mat #mapa-swiat .kulka__pole{cursor:move}
.zadanie-otwarte .kropka-kroku:focus:not(:focus-visible){outline:none}
/* POKAŻ MAPĘ w kulce - działa tylko, gdy wnętrze kulki jest widoczne */
.wnetrze-klik .guzik-kulki{pointer-events:none}
.wnetrze-kuli.widoczne ~ .wnetrze-klik .guzik-kulki{pointer-events:auto}
.guzik-mat rect{fill:var(--tlo);stroke:var(--tusz);stroke-width:6;transition:fill .15s}
.guzik-mat:hover rect,.guzik-mat:focus-visible rect{fill:#f5d63d}
.guzik-mat:focus{outline:none}
.guzik-mat text{text-anchor:middle;font:600 30px var(--f-ui);letter-spacing:.04em;fill:var(--tusz);pointer-events:none}
/* Fizyk Maturalny: ikonka klatki filmowej z lewej (na niebieskiej linii) i duży ekran filmu na środku */
.ikona-filmu{cursor:pointer}
.ikona-filmu .ramka-filmu{transition:fill .15s,stroke .15s}
.ikona-filmu:hover .ramka-filmu,.ikona-filmu:focus-visible .ramka-filmu{stroke:#f5d63d}
.ikona-filmu:focus{outline:none}
#ekran-filmu{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;background:rgba(8,8,12,.72)}
.ekran-filmu-okno{width:min(92vw,150vh);display:flex;flex-direction:column;background:var(--tlo);border:4px solid var(--tusz);border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.ekran-filmu-pasek{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;font:600 15px var(--f-ui);letter-spacing:.06em;color:var(--tusz)}
.ekran-filmu-zamknij{font:600 14px var(--f-ui);letter-spacing:.05em;padding:8px 16px;border:3px solid var(--tusz);border-radius:999px;background:var(--tlo);color:var(--tusz);cursor:pointer}
.ekran-filmu-zamknij:hover,.ekran-filmu-zamknij:focus-visible{background:#f5d63d;color:#0a0a08;outline:none}
#ekran-filmu video{display:block;width:100%;max-height:calc(100vh - 120px);background:#000}
.ekran-filmu-blad{margin:0;padding:18px;font:500 15px var(--f-ui);color:var(--tusz)}
@media (prefers-reduced-motion:no-preference){
  .ikona-filmu .linia-filmu{animation:rysuj-linie-filmu .4s ease-out backwards;animation-delay:var(--op,0s)}
  @keyframes rysuj-linie-filmu{from{stroke-dashoffset:1}}
  .ikona-filmu .klatka-filmu{animation:wysun-film .35s ease-out backwards;animation-delay:calc(.3s + var(--op,0s));transform-box:fill-box;transform-origin:100% 50%}
  @keyframes wysun-film{from{opacity:0;transform:translateX(60px) scale(.8)}}
  .ekran-filmu-okno{animation:wysun-projekcje .35s ease-out}
  .guzik-mat{animation:wysun-guzik .35s ease-out backwards;animation-delay:var(--op,0s)}
  @keyframes wysun-guzik{from{opacity:0;transform:translateY(18px)}}
  .projekcja{animation:wysun-projekcje .6s ease-out}
  @keyframes wysun-projekcje{from{opacity:0;transform:translateY(40px) scale(.96)}}
}
.projekcja{pointer-events:none;transform-box:fill-box;transform-origin:50% 100%}
.projekcja-kratka{stroke:#14130f;stroke-width:4;stroke-linejoin:round;opacity:.92}
.projekcja.projekcja-tlo{animation:none}
.projekcja-rama{fill:none;stroke:#14130f;stroke-width:9;stroke-linejoin:round}
.projekcja-strzalka{fill:none;stroke:#14130f;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
/* Rozwinięcie gałęzi matematyki - schowane do pierwszego kliknięcia */
.rozwiniecie{opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.rozwiniecie.widoczne{opacity:1;visibility:visible;transition:opacity .45s ease,visibility 0s}
.logo-dzialu,.podpis-dzialu{pointer-events:none}
.odnoga-trzon{fill:none;stroke:var(--tusz);stroke-linecap:round}
/* połączenie kula działu → kula części (tunelOdnogi): wypełnienie i cień w stylu elementu, kontur tuszem (na ciemnych tłach jasny) */
.tunel-odn-tlo,.tunel-odn-cien{stroke:var(--tusz);stroke-linecap:round;stroke-linejoin:round}
.odnoga-kulka{fill:var(--wnetrze);stroke:var(--tusz)}
.odnoga-napis{fill:var(--tusz);font-family:var(--f-tech);font-weight:600;letter-spacing:.04em;
  stroke:var(--tlo);stroke-linejoin:round;paint-order:stroke;pointer-events:none}
.odnoga-napis.ukryty{visibility:hidden}
/* kule części na mapie Matematyka (Jan 20.10, „Słoje”): szkło, słoje postępu, gwiazdki progów, duży procent i nazwa;
   napisy schowanych kul znikają same (display:none) - nie kosztują przy przybliżaniu */
.kc{pointer-events:none}
.kc-obw{fill:none;opacity:.9}
.kc-szklo{fill:var(--wnetrze);fill-opacity:.62;stroke:none}
.kc-kontur{fill:none;stroke:var(--tusz)}
.kc-cien{fill:none;stroke:#000;stroke-opacity:.14;stroke-linecap:round}
.kc-blik{fill:none;stroke:#fff;stroke-opacity:.9;stroke-linecap:round}
.kc-blik-p{fill:#fff;fill-opacity:.9}
.kc-proc{font-family:var(--f-tech);font-weight:700;text-anchor:middle;fill:var(--tusz);stroke:var(--tlo);stroke-linejoin:round;paint-order:stroke}
.kc-napis{fill:var(--tusz);font-family:var(--f-tech);font-weight:700;letter-spacing:.04em;stroke:var(--tlo);stroke-linejoin:round;paint-order:stroke;pointer-events:none}
.rozwiniecie:not(.widoczne) .kc text,.rozwiniecie:not(.widoczne) .kc-napis{display:none}
.kc-w-srodku > :not(.kc-kontur):not(.kc-obw):not(.kc-szklo){display:none}
.kulka-trzecia{text-anchor:middle;fill:var(--tusz);font-family:var(--f-tech);font-weight:600;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .odnoga-napis:not(.ukryty){animation:pojaw-napis .35s ease-out}
  @keyframes pojaw-napis{from{opacity:0}}
}
.logo-litera{text-anchor:middle;font-family:var(--f-ui);font-weight:500}
.podpis-dzialu{text-anchor:middle;fill:var(--tusz);font-family:var(--f-tech);font-weight:500;letter-spacing:.06em}
/* Linie globusa na kuli matematyki - równik i południk ze szkicu */
.geometria path.poludnik{fill:none;stroke:var(--tusz);stroke-width:12;stroke-linecap:round;opacity:1}
/* w całym projekcie: białe okna po lewej (.hud) i okna wyboru części ("Kogo dodajesz?")
   tą samą czcionką co napis Master of Managers u góry strony */
.hud,.hud *,.wybor__panel,.wybor__panel *{font-family:Georgia,"Times New Roman",serif !important}
/* Jan 24.10: okno zasady z Mapy Fizyki - prostokąt nad mapą; klik gdziekolwiek poza nim albo Escape zamyka */
.oz-tlo{position:fixed;inset:0;z-index:2000;background:rgba(12,14,24,.38);display:flex;align-items:center;justify-content:center;padding:2vh 2vw;box-sizing:border-box}
.oz{position:relative;box-sizing:border-box;width:min(900px,96vw);max-height:92vh;overflow:auto;background:#fffdf6;color:#14202b;border:2px solid #14202b;
  border-top:8px solid var(--oz-akcent,#7a35d0);border-radius:6px;box-shadow:0 18px 50px rgba(0,0,0,.35);padding:22px 28px 24px;
  font:400 15.5px/1.5 "Archivo",system-ui,sans-serif;text-align:left;cursor:auto}
.oz h2{margin:2px 44px 10px 0;font:700 25px/1.2 Georgia,"Times New Roman",serif;color:#14202b}
.oz h3{margin:18px 0 8px;font:700 13px/1.2 "Archivo",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#4a5260}
.oz p{margin:0 0 8px}
.oz-nr{font:600 12px/1 "Archivo",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6b7280}
.oz-x{position:absolute;top:10px;right:12px;width:36px;height:36px;border:2px solid #14202b;border-radius:50%;background:#fff;color:#14202b;font:700 20px/1 system-ui,sans-serif;cursor:pointer}
.oz-x:hover{background:#f3eee2}
.oz-wzory{display:flex;flex-wrap:wrap;gap:8px 12px}
.oz-wzor{padding:6px 14px;border:1.5px solid #d9d2c3;border-radius:6px;background:#fff;font:400 19px/1.9 "Cambria Math",Cambria,"Times New Roman",serif;white-space:nowrap}
.oz-wzor small{font:400 12.5px/1.3 "Archivo",system-ui,sans-serif;color:#5b6270;margin-left:10px;white-space:normal}
.oz-leg{margin:10px 0 0;padding:0;list-style:none;columns:2 300px;column-gap:28px;font-size:14px}
.oz-leg li{break-inside:avoid;margin:0 0 3px}
.oz-sym{font:400 16.5px/1.6 "Cambria Math",Cambria,"Times New Roman",serif}
.oz-rys{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.oz-rys figure{margin:0;border:1.5px solid #e2dccd;border-radius:6px;background:#fff;padding:8px 10px 10px}
.oz-rys svg{display:block;width:100%;height:auto}
.oz-rys figcaption{font-size:13px;line-height:1.45;color:#3f4652;margin-top:4px}
.oz-prz{border-left:4px solid var(--oz-akcent,#7a35d0);background:#f7f3ea;padding:8px 12px;margin:0 0 8px;border-radius:0 6px 6px 0}
.oz-prz p{margin:0}
.oz-prz .oz-roz{margin-top:4px;color:#22325a}
/* TASK BU (Jan 27.10): okno zasady - nagłówek z dużym logo zasady i logo MoM, wzory jeden pod drugim (większe), karty CASE
   (schemat MODELU ZADANIA) obok siebie, podokna; okno jest zawsze jasne - zmienne tuszu i kart zadań nadpisane na jasne */
.oz{width:min(1180px,96vw);--tusz:#14202b;--zk-tusz:#14202b;--zk-akcent:#1d6fa5;--zk-karta:#ffffff;--zk-pole:rgba(31,111,165,.14);--zk-nowy:#e0560f;--zk-kratka:#cfe3f1}
.oz-glowa{position:relative;display:flex;flex-direction:column;align-items:center;padding:2px 0 4px;min-height:150px}
.oz>.oz-x,.oz-pod>.oz-x{z-index:6}          /* × nad nagłówkiem (nagłówek z position:relative przykrywał przycisk) */
.oz-logo-z{display:block;height:128px;width:auto;max-width:44%}
.oz-mom{position:absolute;top:0;right:50px;height:158px;width:auto}
.oz .oz-glowa h2{margin:10px 0 6px;text-align:center;font-size:28px}
.oz-skrot{display:inline-block;margin-left:8px;padding:2px 10px 3px;border:2px solid var(--oz-akcent,#14202b);border-radius:999px;font:800 15px/1.3 "Archivo",system-ui,sans-serif;letter-spacing:.08em;vertical-align:middle;color:#14202b}
@media (max-width:760px){.oz-logo-z{height:84px}.oz-mom{position:static;order:-1;align-self:flex-end;height:96px;margin:0 44px -60px 0}.oz-glowa{min-height:0}}
.oz-wzory{flex-direction:column;align-items:flex-start}
.oz .oz-wzor{font-size:25px;white-space:normal}
.oz .oz-wzor.oz-duzy{font-size:36px}
.oz .oz-wzor.oz-x3{font-size:clamp(30px,5.4vw,75px);line-height:1.5}
.oz-wzory-obok{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:stretch}
.oz-wzory-obok .oz-wzor small,.oz-wzory-srodek .oz-wzor small,.oz-zderzenia .oz-wzor small{display:block;margin:2px 0 0}
.oz-wzory-srodek{align-items:center}
.oz-wzor-rys{margin-top:8px;font-size:20px !important;text-align:center}
.oz-rys-jeden{margin:6px auto 4px;max-width:520px;border:1.5px solid #e2dccd;border-radius:6px;background:#fff;padding:8px 10px 10px}
.oz-rys-jeden svg{display:block;width:100%;height:auto}
.oz-rys-jeden figcaption{font-size:13px;color:#3f4652;margin-top:4px}
.oz-zderzenia{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
.oz-zderzenia section{border:1.5px solid #e2dccd;border-radius:8px;padding:10px 12px;background:#fbf9f3}
.oz-zderzenia h4{margin:0 0 8px;font:800 14px/1.2 "Archivo",system-ui,sans-serif;letter-spacing:.12em;color:#14202b;text-align:center}
.oz-zderzenia figure{margin:0 0 10px;border:1.5px solid #e2dccd;border-radius:6px;background:#fff;padding:6px 8px 8px}
.oz-zderzenia svg{display:block;width:100%;height:auto}
.oz-zderzenia figcaption{font-size:13px;line-height:1.45;color:#3f4652;margin-top:4px}
.oz-casy{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:16px;align-items:start}
.oz-case{border:2px solid #14202b;border-radius:8px;background:#fff;box-shadow:4px 4px 0 rgba(20,32,43,.16);overflow:hidden}
.oz-case-n{background:var(--oz-akcent,#14202b);color:#fff;font:800 14px/1 "Archivo",system-ui,sans-serif;letter-spacing:.16em;padding:9px 12px}
.oz-case-sek{margin:10px 12px 0}
.oz-case h4{margin:0 0 4px;font:800 11.5px/1.2 "Archivo",system-ui,sans-serif;letter-spacing:.14em;color:#1d6fa5}
.oz-case-sek p{margin:0;font-size:15px}
.oz-case-rys{border:1.5px solid #d9e6f0;border-radius:6px;background:#fbfdff}
.oz-case-rys svg{display:block;width:100%;height:auto}
.oz-case-ds{display:grid;grid-template-columns:3fr 2fr;gap:8px;margin:10px 12px 0}
.oz-case-ds>div{border:1.5px solid #d9e6f0;border-radius:6px;padding:6px 10px;background:#f6fafd}
.oz-case-ds ul{list-style:none;margin:0;padding:0;font:400 17px/1.75 "Cambria Math",Cambria,"Times New Roman",serif}
.oz-case-sek ol{margin:0;padding-left:20px;font-size:14.5px}
.oz-case-sek li{margin:0 0 4px}
.oz-case-odp{margin:10px 12px 12px;padding:8px 10px;border-left:4px solid #1b5e20;background:#eef8ec;border-radius:0 6px 6px 0}
.oz-case-odp p{margin:0;font:400 18px/1.6 "Cambria Math",Cambria,"Times New Roman",serif}
.oz-pod{position:absolute;z-index:3;width:min(760px,92vw);max-height:84vh}
.oz-pod .oz-pod-t{margin:2px 48px 10px 0;font:700 22px/1.2 Georgia,"Times New Roman",serif}
/* TASK BU (Jan 27.10): ZZE - dwie kategorie od logo ZZE (skośne kreski), trzy guziki i podokna PRACA / SIŁY ZACHOWAWCZE / NIEZACHOWAWCZE */
.oz-kat{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px 44px;margin:74px 0 8px}
.oz-kat-linie{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.oz-kat-k{position:relative;border:2px solid var(--oz-akcent,#2e9c4a);border-radius:10px;background:#fff;padding:12px 14px 14px;text-align:center;box-shadow:3px 3px 0 rgba(20,32,43,.12)}
.oz .oz-kat-k h4{margin:0;font:800 19px/1.2 "Archivo",system-ui,sans-serif;letter-spacing:.1em;color:#14202b}
.oz .oz-kat-o{margin:4px 0 10px;font-size:15px;color:#3f4652}
.oz-kat-w{display:flex;flex-direction:column;align-items:center;gap:8px}
.oz-kat-w .oz-wzor{min-width:62%;text-align:center}
.oz-guziki{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px;margin:18px 0 16px}
.oz-guzik{--k:#2e9c4a;padding:13px 22px;border:2px solid var(--k);border-radius:999px;background:var(--k);color:#fff;font:800 14px/1 "Archivo",system-ui,sans-serif;letter-spacing:.12em;cursor:pointer;box-shadow:3px 3px 0 rgba(20,32,43,.22)}
.oz-guzik:hover{filter:brightness(1.1)}
.oz-guzik:focus-visible{outline:3px solid #14202b;outline-offset:3px}
@media (max-width:620px){.oz-kat{grid-template-columns:1fr;margin-top:12px}.oz-kat-linie{display:none}}
.oz .oz-pod-opis{font-size:15px;line-height:1.55;margin:0 0 10px}
.oz-pod figure{margin:10px 0 0;border:1.5px solid #e2dccd;border-radius:6px;background:#fff;padding:8px 10px 10px}
.oz-pod figure svg{display:block;width:100%;height:auto}
.oz-pod figcaption{font-size:13px;line-height:1.45;color:#3f4652;margin-top:4px}
.oz-pod .oz-rys-jeden{max-width:460px}
.oz-pod-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.oz-pod-2 figure{margin:10px 0 0}
.oz-pod .oz-leg{margin-top:12px}
.oz sub sub,.oz sub sup,.oz sup sub,.oz sup sup{font-size:84%}
.oz-calka{display:inline-flex;align-items:center;vertical-align:middle}
.oz-calka>b{font-weight:400;font-size:1.9em;line-height:1}
.oz-calka>span{display:inline-flex;flex-direction:column;justify-content:space-between;font-size:.6em;line-height:1.05;height:3.1em;margin:0 .2em 0 -.05em}
/* TASK BU (Jan 27.10): MINEPOT - graf: wzór 1 w środku (korzeń), odnogi J / G / E, nogi z rysunkami i SCHODAMI-POCHODNA */
.mp{--mpk:#d93a24;margin:6px 0 10px}
.mp-korzen{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;width:fit-content;max-width:100%;box-sizing:border-box;margin:0 auto;padding:12px 24px 10px;border:3px solid var(--mpk);border-radius:16px;background:#fff;box-shadow:4px 4px 0 rgba(20,32,43,.14)}
.oz .mp-korzen .oz-wzor{font-size:42px;line-height:1.6;border:none;padding:0 4px;text-align:center;background:none}
.oz .mp-korzen .oz-wzor small{display:block;margin:0;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.mp-gal{list-style:none;margin:0;padding:36px 0 0;display:grid;grid-template-columns:minmax(150px,.5fr) 1.5fr 1.5fr;gap:0 14px;position:relative}
.mp-gal::before{content:"";position:absolute;left:50%;top:0;height:16px;margin-left:-1.5px;border-left:3px solid var(--mpk)}
.mp-g1{position:relative;min-width:0}
.mp-g1::before{content:"";position:absolute;top:-20px;left:-7px;right:-7px;border-top:3px solid var(--mpk)}
.mp-g1:first-child::before{left:50%}
.mp-g1:last-child::before{right:50%}
.mp-g1::after{content:"";position:absolute;top:-20px;left:50%;height:20px;margin-left:-1.5px;border-left:3px solid var(--mpk)}
.mp-wezel{position:relative;z-index:1;display:flex;align-items:center;gap:8px;width:fit-content;margin:0 auto;padding:4px 16px 4px 5px;border:2.5px solid var(--mpk);border-radius:999px;background:#fff}
.mp-wezel svg{display:block;width:50px;height:50px}
.mp-wezel b{font:800 14.5px/1.2 "Archivo",system-ui,sans-serif;letter-spacing:.08em;color:#14202b;white-space:nowrap}
.oz .mp-op{margin:10px 4px 0;font-size:13px;line-height:1.45;color:#3f4652;text-align:center}
.mp-nogi{list-style:none;margin:0;padding:24px 0 0 30px;position:relative}
.mp-nogi::before{content:"";position:absolute;top:0;left:10px;width:calc(50% - 11.5px);height:12px;border-right:3px solid var(--mpk);border-bottom:3px solid var(--mpk);border-bottom-right-radius:10px}
.mp-noga{position:relative;margin:0 0 14px;border:1.5px solid #e2dccd;border-radius:10px;background:#fff;padding:8px 10px 10px}
.mp-noga::before{content:"";position:absolute;left:-21.5px;top:-15.5px;bottom:-15.5px;border-left:3px solid var(--mpk)}
.mp-noga:first-child::before{top:-13px}
.mp-noga:last-child::before{bottom:auto;height:42px}
.mp-noga:first-child:last-child::before{height:39px}
.mp-noga::after{content:"";position:absolute;left:-21.5px;top:24px;width:20px;border-top:3px solid var(--mpk)}
.oz .mp-noga h4{margin:0 0 6px;font:800 13px/1.2 "Archivo",system-ui,sans-serif;letter-spacing:.12em;color:var(--mpk)}
.mp-obok{display:grid;grid-template-columns:.88fr 1.12fr;gap:6px;align-items:center}
.mp-dwa{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mp-noga figure{margin:0}
.mp-noga figure svg{display:block;width:100%;height:auto}
.mp-noga figcaption{font-size:12px;line-height:1.4;color:#3f4652;margin-top:2px}
.mp-dwa+.mp-schody,figure+.mp-schody{margin-top:8px}
.mp-schody{position:relative;container-type:inline-size;width:100%;max-width:290px;margin:0 auto}
.mp-schody svg{display:block;width:100%;height:auto}
.mp-sw{position:absolute;font:400 17px/1.3 "Cambria Math",Cambria,"Times New Roman",serif;font-size:7.6cqw;color:#14202b;white-space:nowrap}
.mp-sw-g{left:3%;bottom:65%}
.mp-sw-d{left:52%;bottom:35.5%}
.mp-sw-p{right:57%;top:52%;transform:translateY(-50%);font-size:6.4cqw;color:#7a1d10}
.mp-ekstrema{margin:6px 0 4px;border:1.5px solid #e2dccd;border-radius:8px;background:#fff;padding:8px 10px 10px}
.mp-ekstrema svg{display:block;width:100%;height:auto}
.mp-ekstrema figcaption{font-size:13px;line-height:1.45;color:#3f4652;margin-top:4px}
@media (max-width:900px){.mp-gal{grid-template-columns:1fr;gap:18px}.mp-gal::before,.mp-g1::before,.mp-g1::after{display:none}.oz .mp-korzen .oz-wzor{font-size:30px}}
/* Jan 26.10 (TASK BO): okno Chemika - obraz z podpisem i licencją, nawigacja, modele interaktywne */
.oz-chem{width:min(980px,96vw)}
.oz-chem .ch-fig{margin:4px 0 14px;text-align:center}
.oz-chem .ch-fig img{display:block;max-width:100%;max-height:50vh;margin:0 auto;border-radius:6px;background:#f3eee2;border:1.5px solid #e2dccd}
.oz-chem .ch-fig.ch-maly img{max-height:220px}
.oz-chem .ch-fig figcaption{font-size:12.5px;line-height:1.4;color:#5b6270;margin-top:5px}
.oz-chem .ch-fig figcaption a{color:#1f62d6}
.oz-chem .ch-brak{display:none}
.oz-chem .ch-nav{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:10px}
.oz-chem .ch-btn{font:600 14px/1.1 "Archivo",system-ui,sans-serif;padding:8px 15px;border:2px solid #14202b;border-radius:999px;background:#fff;color:#14202b;cursor:pointer}
.oz-chem .ch-btn:hover,.oz-chem .ch-btn[aria-pressed="true"]{background:var(--oz-akcent,#3fb7e0);color:#fff;border-color:var(--oz-akcent,#3fb7e0)}
.oz-chem .ch-licz{font:600 13px/1 "Archivo",system-ui,sans-serif;color:#6b7280}
.oz-chem .ch-art{color:#2b3340;background:#f7f3ea;border-left:4px solid var(--oz-akcent,#3fb7e0);padding:8px 12px;border-radius:0 6px 6px 0}
.oz-chem h4{margin:14px 0 6px;font:700 14px/1.2 "Archivo",system-ui,sans-serif;color:#22303c}
.oz-chem .ch-int{border:1.5px solid #e2dccd;border-radius:8px;background:#fff;padding:12px 14px}
.oz-chem .ch-op{color:#4a5260;font-size:14px}
.oz-chem .ch-rz,.oz-chem .ch-dalej{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.oz-chem .ch-chip{display:inline-block;padding:5px 11px;border-radius:999px;border:1.5px solid #c9d6df;background:#f4f7f9;color:#6b7280;transition:all .35s}
.oz-chem .ch-chip.on{border-color:var(--oz-akcent,#3fb7e0);background:#fff;color:#14202b;font-weight:600}
.oz-chem .ch-str{margin:0 6px;color:#c9d6df;font-weight:800;transition:color .35s}
.oz-chem .ch-str.on{color:var(--oz-akcent,#3fb7e0)}
.oz-chem .ch-sciezka{margin:6px 0 10px}
.oz-chem .ch-naz{font-weight:700;margin-right:6px}
.oz-chem .ch-rown,.oz-chem .ch-rw{margin-top:6px;display:inline-block;white-space:normal}
.oz-chem .ch-kroki{margin:8px 0;padding-left:22px}
.oz-chem .ch-kroki li{margin:3px 0;transition:opacity .4s}
.oz-chem .ch-kroki li.off{opacity:.28}
.oz-chem .ch-suw{display:flex;align-items:center;gap:10px;font-weight:600;margin:6px 0}
.oz-chem .ch-suw input{flex:1}
.oz-chem .ch-pod{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
.oz-chem .ch-pp{padding:4px 8px;border-radius:5px;border:1.5px solid #d9d2c3;background:#faf8f3;font:600 14px/1.2 "Cambria Math",Cambria,serif;color:#9aa1ab}
.oz-chem .ch-pp.czesc{background:#fff4d6;border-color:#e0a82e;color:#14202b}
.oz-chem .ch-pp.pelna{background:#dff3e4;border-color:#2e9e4f;color:#14202b}
.oz-chem .ch-uwaga{color:#a3311f;font-weight:600;font-size:14px}
.oz-chem .ch-wynik{font-weight:600}
.oz-chem select{font:500 14px "Archivo",system-ui,sans-serif;padding:5px 6px;border:1.5px solid #14202b;border-radius:6px;background:#fff;margin-left:6px;max-width:100%}
.oz-chem .ch-anim{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 0;min-height:64px;flex-wrap:wrap}
.oz-chem .ch-strona{transition:opacity .6s,transform .6s}
.oz-chem .ch-sub.znika{opacity:.35;transform:translateX(-8px)}
.oz-chem .ch-prod{opacity:.15;transform:translateX(-12px)}
.oz-chem .ch-prod.jest{opacity:1;transform:none}
.oz-chem .ch-strz{font:800 34px/1 system-ui,sans-serif;color:var(--oz-akcent,#3fb7e0);display:flex;flex-direction:column;align-items:center}
.oz-chem .ch-strz small{font:600 12px/1.2 "Archivo",system-ui,sans-serif;color:#4a5260}
.oz-chem .ch-strz.pracuje{animation:ch-puls 1s ease-in-out infinite}
@keyframes ch-puls{50%{transform:scale(1.25)}}
.oz-chem .ch-lista{margin:6px 0;padding-left:20px}
.oz-chem .ch-tab{border-collapse:collapse;margin:8px 0;font-size:14px}
.oz-chem .ch-tab th,.oz-chem .ch-tab td{border:1px solid #e2dccd;padding:4px 10px;text-align:left}
.oz-chem .ch-tab th{background:#f7f3ea}
.oz-chem .ch-test{display:flex;gap:18px;align-items:flex-start}
.oz-chem .ch-probowka{flex:0 0 110px}
.oz-chem .ch-karty2{display:flex;gap:12px;align-items:stretch}
.oz-chem .ch-karta{display:flex;flex-direction:column;gap:4px;flex:1;border:1.5px solid #e2dccd;border-radius:8px;padding:10px;background:#faf8f3;opacity:.6;transition:opacity .4s,border-color .4s;margin:6px 0}
.oz-chem .ch-karta.on{opacity:1;border-color:var(--oz-akcent,#3fb7e0);background:#fff}
.oz-chem .ch-karta img{max-width:100%;max-height:180px;object-fit:contain;align-self:center}
.oz-chem .ch-wz1{font:400 16px/1.5 "Cambria Math",Cambria,serif}
.oz-chem .ch-zr{color:#6b7280;font-size:11.5px}
.oz-chem .ch-siatka{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:6px;margin:8px 0}
.oz-chem .ch-kafel{display:flex;flex-direction:column;align-items:center;padding:6px 2px;border:2px solid var(--k);border-radius:8px;background:#fff;cursor:pointer;font:500 12px/1.2 "Archivo",system-ui,sans-serif;color:#14202b;transition:opacity .3s}
.oz-chem .ch-kafel b{font-size:22px;color:var(--k)}
.oz-chem .ch-kafel.wyg{opacity:.22}
.oz-chem .ch-kafel.on{box-shadow:0 0 0 3px var(--k)}
.oz-chem .ch-kropka{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}
.oz-chem .ch-pierw{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:4px 0 10px}
.oz-chem .ch-pierw-kafel{flex:0 0 150px}
.oz-chem .ch-bohr{flex:0 0 250px}
.oz-chem .ch-dane{flex:1 1 260px;display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:14px}
.oz-chem .ch-dane dt{color:#5b6270}
.oz-chem .ch-dane dd{margin:0;font-weight:600}
.oz-chem .ch-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.oz-chem .ch-galeria .ch-fig{margin:0}
.oz-chem .ch-orbita{transform-origin:190px 190px;animation:ch-obrot 20s linear infinite}
@keyframes ch-obrot{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.oz-chem .ch-orbita,.oz-chem .ch-strz.pracuje{animation:none}}
.oz-chem svg{display:block;max-width:100%;height:auto}
.oz-chem .ch-wykres{margin:8px 0}
.oz-chem.oz-szeroki{width:min(1400px,96vw)}
@keyframes bio-krok{0%,100%{opacity:.35}12%,30%{opacity:1}45%{opacity:.35}}
@keyframes bio-rysuj{to{stroke-dashoffset:0}}
.kamien-milowy:focus:not(:focus-visible),.pierwiastek:focus:not(:focus-visible){outline:none}
.oz sub,.oz sup{font-size:68%;line-height:0}
.oz .zw{position:relative;display:inline-block;line-height:1}
.oz .zw::before{content:"";position:absolute;left:6%;right:2%;top:-.18em;border-top:1.3px solid currentColor}
.oz .zw::after{content:"";position:absolute;right:0;top:-.31em;width:.22em;height:.22em;border:solid currentColor;border-width:1.3px 1.3px 0 0;transform:rotate(45deg)}
.oz .zf{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;margin:0 .15em;font-size:90%;line-height:1.25}
.oz .zf>span:first-child{border-bottom:1.3px solid currentColor;padding:0 .2em .05em}
.oz .zf>span:last-child{padding:.05em .2em 0}
.oz .zr{white-space:nowrap}
.oz .zr>span{border-top:1.3px solid currentColor;padding:0 .12em;margin-left:.04em}
/* --- pasek strony ----------------------------------------------------- */
.pasek{
  position:fixed;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:5px clamp(12px,3vw,24px);
  pointer-events:none;
  font-family:var(--f-ui);
}
.pasek a{pointer-events:auto;text-decoration:none;color:var(--kreda-2);font-size:.82rem}
.pasek a:hover{color:var(--kreda)}
.pasek__znak{letter-spacing:.04em;text-transform:uppercase}
.pasek__znak b{color:var(--kreda);font-weight:600}
.pasek__znak{display:flex;align-items:center;gap:14px}
.pasek__znak .logo-mom{display:block;height:58px;width:auto;border-radius:50%}
.pasek__znak .logo-napis{font:600 1.35rem/1.05 Georgia,"Times New Roman",serif;letter-spacing:.01em;text-transform:none;color:var(--kreda)}
@media (max-width:640px){.pasek__znak .logo-mom{height:46px}.pasek__znak .logo-napis{font-size:1.05rem}}
/* HUD schodzi pod pasek, żeby nic na siebie nie wchodziło */
.hud{top:56px;background:color-mix(in srgb,var(--tlo) 86%,transparent);padding:8px 12px;border-radius:4px}
.pasek{background:color-mix(in srgb,var(--tlo) 82%,transparent)}
@media (max-width:640px){
  .pasek{padding:4px 12px}
  .hud{top:48px;max-width:calc(100vw - 32px)}
  .hud h1{font-size:1.25rem}
  .hud p{font-size:.72rem}
}

/* DEMO: bez przełączników postaci i ręki nauczyciela w chmurce (porównania wariantów) */
.sam-kto-wiersz{display:none !important}
/* DEMO (Jan 2.11): logo W05 duże, obok panelu „Twoja platforma” (zamiast małego w pasku); na telefonie w prawym górnym rogu */
.logo-duze{position:fixed;top:56px;left:352px;width:136px;height:136px;border-radius:50%;z-index:4;pointer-events:none;filter:drop-shadow(0 2px 5px rgba(0,0,0,.2))}
@media (max-width:640px){.logo-duze{left:auto;right:10px;top:48px;width:80px;height:80px}}
/* DEMO (Jan 2.11): Wyloguj jako czerwony przycisk */
.pasek a.pasek__wroc{background:#d6262b;color:#fff;font-weight:600;font-size:.8rem;padding:5px 14px;border-radius:999px;border:2px solid #1d1d1b;box-shadow:0 2px 0 #1d1d1b;letter-spacing:.02em}
.pasek a.pasek__wroc:hover{background:#b81e22;color:#fff}
/* Logo W05 w lewym dolnym rogu, nad przyciskami - + Wyśrodkuj (Jan 2.11) */
.logo-duze{left:16px;right:auto;top:auto;bottom:64px;width:150px;height:150px}
@media (max-width:640px){.logo-duze{left:10px;right:auto;top:auto;bottom:58px;width:84px;height:84px}}