/*
  ARKANIP — baza wiedzy: OTWARCIE MAKIETY (wiedza-otwarcie.js, opis tam). Ładuje TYLKO wiedza.html.
  Wszystko zawężone do `.so` (poza wspólnym blokiem etykiet `mk-*` na końcu); klasy kolidujące ze styles.css
  z prefiksem so- (so-scena, so-sciezka), klatki kluczowe `so-*`, zarejestrowane właściwości `--so-*`
  (`--z` jest zajęte w generatorze konfiguratora). Przeniesione z `_podglad-wiedza-otwarcie.html`
  (wariant A „Rysunek architekta”; B i C uchylone). Podpis w lewym górnym rogu zdjęty 15.10.2026,
  karta wypowiedzi stoi z boku kuli (`.mowa--bok`). Pętle (puls miejsca na parter, pierścień kropki)
  grają dwa razy i stają — app.js i tak zatrzymuje nieskończone animacje.
*/
.so {
  /* kula ARKANIP — ten sam gradient co w platformie i w makiecie serii */
  --kula: radial-gradient(circle at 32% 26%, #9cc8ff 0%, #3f7ff5 36%, var(--blue) 62%, var(--blue-deep) 100%);
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* Na ekranie otwarcia korzeń wychodzi na cały widok (`rozciagnijKorzen` w JS ustawia left / top / width /
   height): ucina go brzeg ekranu, nie pasek akcji — poświata gaśnie łagodnie pod szklanym paskiem. */
.seria--pelna .seria__makieta > .so {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.so__gra {
  position: absolute;
  inset: 0;
}
@property --so-fi { syntax: "<angle>"; inherits: true; initial-value: -31deg; }
@property --so-th { syntax: "<angle>"; inherits: true; initial-value: 58deg; }
@property --so-ok { syntax: "<number>"; inherits: false; initial-value: 1.3; }
@property --so-okx { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --so-oky { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --so-bs { syntax: "<number>"; inherits: false; initial-value: 0.42; }
@property --so-bo { syntax: "<number>"; inherits: false; initial-value: 0.3; }
@property --so-kss { syntax: "<number>"; inherits: false; initial-value: 1; }
.so .so-scena {
  --so-th: 58deg;
  --m-top: var(--surface);
  --m-b: color-mix(in srgb, var(--blue-tint) 38%, var(--surface));
  --m-a: color-mix(in srgb, var(--blue-tint-2) 62%, var(--surface));
  --krawedz: color-mix(in srgb, var(--blue) 16%, transparent);
  --plan: color-mix(in srgb, var(--blue) 55%, transparent);
  position: absolute; left: 0; top: 0;
  width: 800px; height: 780px;
  transform-origin: 0 0;
  transform: translate(var(--ox, 0px), var(--oy, 0px)) scale(var(--k, 1));
}
.so .wjazd {
  position: absolute; inset: 0;
}
.so .scena__poswiata {
  position: absolute; left: 50%; top: 52%; width: 760px; height: 560px; margin: -280px 0 0 -380px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--blue-sky) 16%, transparent), color-mix(in srgb, var(--blue) 5%, transparent) 60%, transparent);
}
.so .oko {
  position: absolute; left: 400px; top: 492px; width: 0; height: 0; transform-style: preserve-3d;
  --so-ok: 1.3; --so-oky: 0px; --so-okx: 0px;
  transform: translate(var(--so-okx), var(--so-oky)) scale(var(--so-ok));
}
.so .swiat {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  transform-style: preserve-3d;
  --so-fi: -31deg;
  transform: rotateX(var(--so-th)) rotateZ(var(--so-fi));
}
.so .g {
  position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d;
}
.so .f {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
}
.so .f-t {
  background: var(--m-top);
}
.so .f-a {
  background: var(--m-a);
}
.so .f-b {
  background: var(--m-b);
}
.so .bryla .f {
  box-shadow: inset 0 0 0 0.6px var(--krawedz);
}
.so .bil {
  position: absolute; left: 0; top: 0; width: max-content; transform-origin: 0 0;
}
.so .bil > * {
  position: relative;
}
.so .podest-gora {
  border-radius: 50%;
  background:
  radial-gradient(closest-side, transparent 98.4%, color-mix(in srgb, var(--blue) 16%, transparent) 99%, transparent 99.7%),
  radial-gradient(circle at 40% 36%, var(--surface) 0%, var(--surface) 46%, color-mix(in srgb, var(--blue-tint) 70%, var(--surface)) 100%);
  box-shadow: inset 0 0 0 0.8px color-mix(in srgb, var(--blue) 14%, transparent);
}
.so .podest-bok {
  background: var(--seg);
  /* wersja 2: tylna połowa walca (podest, cokół) jest niewidoczna, a Chrome przy sortowaniu 3D potrafił wyciągnąć
     jej segmenty PRZED płytę cokołu — biały „klin” z pionową krawędzią po lewej stronie podestu (w finale cięło
     świecący pierścień). Odrzucenie tylnych ścian usuwa błąd i połowę płaszczyzn do sortowania. */
  backface-visibility: hidden;
}
.so .cokol-gora {
  border-radius: 50%; background: color-mix(in srgb, var(--blue-tint-2) 70%, var(--surface));
}
.so .cien-podestu {
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--blue) 26%, transparent), color-mix(in srgb, var(--blue) 8%, transparent) 60%, transparent);
}
.so .so-sciezka {
  background:
  repeating-linear-gradient(0deg, transparent 0 9px, color-mix(in srgb, var(--blue) 9%, transparent) 9px 10px),
  color-mix(in srgb, var(--blue-tint) 85%, var(--surface));
  box-shadow: inset 0 0 0 0.6px color-mix(in srgb, var(--blue) 14%, transparent);
}
.so .plac {
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue-tint) 70%, var(--surface));
  box-shadow: inset 0 0 0 0.6px color-mix(in srgb, var(--blue) 14%, transparent);
}
.so .grawer {
  color: color-mix(in srgb, var(--blue) 45%, transparent); font-size: 9px; font-weight: 700; letter-spacing: 0.16em;
}
.so .grawer svg {
  display: block;
}
.so .cien-drzewa {
  border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--blue) 22%, transparent), transparent);
}
.so .drzewo {
  width: 30px; height: 46px;
}
.so .drzewo i {
  position: absolute; left: 50%; bottom: 0; width: 1.6px; height: 18px; margin-left: -0.8px;
  background: color-mix(in srgb, var(--blue) 30%, var(--surface));
}
.so .drzewo b {
  position: absolute; left: 0; top: 0; width: var(--d, 28px); height: var(--d, 28px); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--surface) 0%, var(--surface) 34%, color-mix(in srgb, var(--blue-tint-2) 85%, var(--surface)) 100%);
  box-shadow: inset -2px -3px 6px color-mix(in srgb, var(--blue) 10%, transparent), 0 4px 10px -6px color-mix(in srgb, var(--blue) 50%, transparent);
}
.so .f.kr,
.so .f.rzut,
.so .f.wymiar {
  background: transparent;
}
.so .kr i {
  position: absolute; inset: 0; display: block;
}
.so .kr-x i {
  background: repeating-linear-gradient(90deg, var(--plan) 0 5px, transparent 5px 9px);
}
.so .kr-y i,
.so .kr-z i {
  background: repeating-linear-gradient(180deg, var(--plan) 0 5px, transparent 5px 9px);
}
.so .kr--lekka i {
  --plan: color-mix(in srgb, var(--blue) 40%, transparent);
}
.so .gra .kr i {
  animation: var(--an) var(--t, 0.3s) cubic-bezier(0.5, 0, 0.4, 1) var(--d, 0s) backwards;
}
@keyframes so-od-l { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes so-od-p { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes so-od-g { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes so-od-d { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.so .wyp {
  background: color-mix(in srgb, var(--blue-tint) 18%, transparent);
}
.so .gra .wyp,
.so .gra .pojaw {
  animation: so-pojaw 0.6s ease-out var(--d, 0s) backwards;
}
@keyframes so-pojaw { from { opacity: 0; } to { opacity: 1; } }
.so .rzut svg {
  display: block; overflow: visible; color: color-mix(in srgb, var(--blue) 50%, transparent);
}
.so .rz {
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
.so .gra .rz {
  animation: so-rz var(--t, 0.55s) cubic-bezier(0.45, 0, 0.3, 1) var(--d, 0s) backwards;
}
@keyframes so-rz { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.so .rzut text {
  fill: color-mix(in srgb, var(--blue) 70%, transparent); font-family: var(--font); font-weight: 800; letter-spacing: 0.12em;
}
.so .gra .rzut text {
  animation: so-pojaw 0.5s ease-out var(--d, 0s) backwards;
}
.so .gas {
  opacity: 0;
}
.so .gra .gas {
  animation: so-gas-rzut 0.6s linear var(--d, 0s) backwards;
}
@keyframes so-gas-rzut { from { opacity: 1; } to { opacity: 0; } }
.so .miejsce {
  background: radial-gradient(70% 80% at 50% 50%, color-mix(in srgb, var(--blue-sky) 26%, transparent), color-mix(in srgb, var(--blue-sky) 8%, transparent) 75%, transparent);
  box-shadow: inset 0 0 0 1.4px color-mix(in srgb, var(--blue-sky) 55%, transparent), 0 0 14px color-mix(in srgb, var(--blue-sky) 35%, transparent);
  opacity: 0.85;
}
.so .gra .miejsce {
  animation: so-pojaw 0.8s ease-out var(--d, 4s) backwards, so-puls 2.6s ease-in-out calc(var(--d, 4s) + 0.8s) 2 alternate;
}
@keyframes so-puls { from { opacity: 0.85; } to { opacity: 0.3; } }
/* etykiety pięter = warstwa 2D `.so-ety` (blok „ETYKIETY PIĘTER (2D)” na końcu pliku); dawne billboardy
   `.so-etykieta` w świecie 3D zdjęte 16.10.2026. Warstwa obraca się razem z podestem (te same klatki czasu). */
.so .gra .so-ety {
  animation: mk-obrot-so 5.6s cubic-bezier(0.35, 0, 0.25, 1) backwards;
}
@keyframes mk-obrot-so { from { --mk-fi: var(--fi0, -21deg); } to { --mk-fi: -31deg; } }
.so .gra .so-et {
  animation: mk-wj 0.6s var(--ease) var(--d, 2s) backwards;
}
.so .gra .so-et.mk-et--teraz .mk-et__kropka {
  animation: mk-kropka 2.6s ease-out var(--d2, 5s) 2;
}
.so .kula-b {
  width: 120px; height: 120px;
}
.so .halo-b {
  width: 190px; height: 190px;
}
.so .halo-b .blask {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--blue-sky) 42%, transparent), color-mix(in srgb, var(--blue) 9%, transparent) 48%, transparent 92%);
  opacity: var(--so-bo); transform: scale(var(--so-bs));
}
.so .gra .halo-b .blask {
  animation: so-blask 1.6s ease-out var(--ksd, 3s) backwards;
}
@keyframes so-blask { 0% { --so-bo: 0; --so-bs: 0.2; } 25% { --so-bo: 0.95; --so-bs: 0.75; } 100% { --so-bo: 0.3; --so-bs: 0.42; } }
.so .kula-b .kula {
  position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px;
  border-radius: 50%; background: var(--kula);
  box-shadow: inset -3px -4px 8px color-mix(in srgb, var(--blue-deep) 45%, transparent), 0 6px 14px -4px color-mix(in srgb, var(--blue) 80%, transparent),
  0 0 8px color-mix(in srgb, var(--blue-sky) 45%, transparent);
  --so-kss: var(--ks, 0.5);
  transform: scale(var(--so-kss));
}
.so .kula-b .kula::after {
  content: ""; position: absolute; left: 22%; top: 14%; width: 34%; height: 24%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
}
.so .gra .kula-b .kula {
  animation: so-kula-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) var(--ksd, 3s) backwards;
}
@keyframes so-kula-pop { from { --so-kss: 0; } to { --so-kss: var(--ks, 0.5); } }
.so .halo-b .fala-k {
  position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%;
  border: 1.5px solid var(--blue-sky); opacity: 0;
}
.so .gra .halo-b .fala-k {
  animation: so-fala-k 1.2s ease-out backwards; animation-delay: var(--d);
}
@keyframes so-fala-k { 0% { opacity: 0; transform: scale(0.5); } 5% { opacity: 0.9; } 100% { opacity: 0; transform: scale(2.6); } }
.so .siatka {
  border-radius: 50%;
  background:
  repeating-linear-gradient(0deg, color-mix(in srgb, var(--blue) 9%, transparent) 0 0.7px, transparent 0.7px 18px),
  repeating-linear-gradient(90deg, color-mix(in srgb, var(--blue) 9%, transparent) 0 0.7px, transparent 0.7px 18px);
  -webkit-mask: radial-gradient(closest-side, #000 72%, transparent 100%);
  mask: radial-gradient(closest-side, #000 72%, transparent 100%);
  opacity: 0.55;
}
.so .gra .siatka {
  animation: so-siatka 4.6s ease-out 0.15s backwards;
}
@keyframes so-siatka { 0% { opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0.55; } }
.so .wymiar svg {
  display: block; overflow: visible; color: color-mix(in srgb, var(--blue) 60%, transparent);
}
.so .wymiar text {
  fill: color-mix(in srgb, var(--blue) 75%, transparent); font-family: var(--font); font-size: 8px; font-weight: 800; letter-spacing: 0.1em;
}
.so .gra .f.wymiar,
.so .gra .wymiar text {
  animation: so-pojaw 0.5s ease-out var(--d, 2s) backwards;
}
.so .gra.so-scena .swiat {
  animation: so-obrot 5.6s cubic-bezier(0.35, 0, 0.25, 1) backwards;
}
@keyframes so-obrot { from { --so-fi: var(--fi0, -21deg); } to { --so-fi: -31deg; } }
.so .gra.so-scena .wjazd {
  animation: so-pojaw 0.7s ease-out backwards;
}
.so .tabliczka {
  position: absolute; left: var(--tx); top: var(--ty); transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 8px 15px 8px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  font-size: 13px; font-weight: 600; color: var(--ink-muted);
  z-index: 3;
}
.so .tabliczka b {
  color: var(--ink); font-weight: 800;
}
.so .tabliczka .dot {
  width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1.3px var(--plan, color-mix(in srgb, var(--blue) 55%, transparent));
}
.so .tabliczka .kresy {
  display: inline-flex; gap: 3px; margin-left: 2px;
}
.so .tabliczka .kresy i {
  width: 14px; height: 5px; border-radius: 3px; border: 1px dashed color-mix(in srgb, var(--blue) 55%, transparent);
}
.so .gra .tabliczka {
  animation: so-wj-tab 0.7s var(--ease) backwards; animation-delay: var(--d, 4s);
}
@keyframes so-wj-tab { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
.so .mowa {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
}
.so .mowa__fala {
  position: absolute; left: calc(var(--kx) + var(--kr) + 9px); top: var(--ky);
  display: flex; align-items: center; gap: 2.5px; height: 16px; margin-top: -8px;
}
.so .mowa__fala i {
  width: 2px; height: 100%; border-radius: 2px; background: var(--blue); transform: scaleY(0.2);
}
.so .gra .mowa__fala i {
  animation: so-bar var(--bt, 0.34s) cubic-bezier(0.45, 0, 0.55, 1) alternate;
  animation-iteration-count: var(--bn, 6);
  animation-delay: calc(var(--t0) + var(--bd, 0s));
}
.so .mowa__fala i:nth-child(1) {
  --h: 0.45; --bd: 0.06s;
}
.so .mowa__fala i:nth-child(2) {
  --h: 0.9; --bd: 0s;
}
.so .mowa__fala i:nth-child(3) {
  --h: 0.65; --bd: 0.12s;
}
.so .mowa__fala i:nth-child(4) {
  --h: 1; --bd: 0.04s;
}
.so .mowa__fala i:nth-child(5) {
  --h: 0.5; --bd: 0.1s;
}
@keyframes so-bar { from { transform: scaleY(0.2); } to { transform: scaleY(var(--h)); } }
.so .mowa__fala {
  opacity: 0;
}
.so .gra .mowa__fala {
  animation: so-fala-zycie var(--ft, 2s) linear backwards; animation-delay: calc(var(--t0) - 0.15s);
}
@keyframes so-fala-zycie { 0% { opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
.so .mowa__linia {
  position: absolute; left: var(--kx); top: var(--lt); height: var(--lh); width: 1px; margin-left: -0.5px;
  background: linear-gradient(0deg, var(--blue), color-mix(in srgb, var(--blue) 35%, transparent));
  transform-origin: 50% 100%;
}
.so .mowa__linia::after {
  content: ""; position: absolute; left: -2.5px; bottom: -3px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 2.5px var(--surface);
}
.so .gra .mowa__linia {
  animation: so-linia 0.4s cubic-bezier(0.3, 0, 0.2, 1) backwards; animation-delay: calc(var(--t0) - 0.4s);
}
@keyframes so-linia { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* karta = układ (pełna szerokość tekstu); tło, ramka i cień leżą na `.mowa__tlo`, które rośnie z pisanym tekstem
   (wersja 2, klatki z pomiaru: wiedza-seria.js `tloMowy`). Padding +1 px = dawna ramka karty, wymiary bez zmian. */
.so .mowa__karta {
  position: absolute; left: var(--kl); top: var(--kt);
  display: flex; align-items: center; gap: 10px;
  padding: 11px 17px 11px 13px; border-radius: 14px;
  white-space: nowrap;
  transform-origin: 50% 100%;
}
.so .mowa__tlo {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  box-sizing: border-box; border-radius: inherit;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-lg);
  pointer-events: none;
}
.so .mowa__tlo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--glass-blik);
}
.so .mowa__kto {
  position: relative; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--kula); box-shadow: 0 0 0 3px var(--blue-tint);
}
.so .mowa__tekst {
  position: relative; white-space: pre; font-size: var(--fs, 15px); font-weight: 600; letter-spacing: -0.012em; line-height: 1.25; color: var(--ink);
}
.so .gra .mowa__karta {
  animation: so-karta 0.55s var(--ease) backwards; animation-delay: calc(var(--t0) - 0.25s);
}
@keyframes so-karta { from { opacity: 0; transform: translateY(6px) scale(0.97); } to { opacity: 1; transform: none; } }
.so .zn {
  position: relative;
}
.so .gra .mowa__tekst .zn {
  animation: so-zn 1ms step-end backwards; animation-delay: calc(var(--t0) + var(--i) * var(--krok));
}
@keyframes so-zn { from { opacity: 0; } to { opacity: 1; } }
.so .zn::after {
  content: ""; position: absolute; right: -1.5px; top: 0.08em; bottom: 0.04em; width: 1.5px; border-radius: 1px;
  background: var(--blue); opacity: 0;
}
.so .gra .mowa__tekst .zn::after {
  animation: so-kursor var(--krok) step-end none; animation-delay: calc(var(--t0) + var(--i) * var(--krok));
}
.so .gra .mowa__tekst .zn:last-child::after {
  animation: so-kursor-ost 1.5s step-end none; animation-delay: calc(var(--t0) + var(--i) * var(--krok));
}
@keyframes so-kursor { from { opacity: 1; } to { opacity: 1; } }
@keyframes so-kursor-ost { 0% { opacity: 1; } 25% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } }
/* Karta wypowiedzi Z BOKU kuli (właściciel, 15.10.2026: „gdzieś na boku, nie nad kulą”): w prawo,
   na wysokości kuli, krótka pozioma kreska z kropką przy kuli; fala mówienia po lewej stronie kuli.
   Bez `.mowa--bok` (telefon — obok nie ma miejsca) karta stoi nad kulą jak dawniej. */
.so .mowa--bok .mowa__linia {
  left: var(--lx); top: var(--ky); width: var(--lw); height: 1px; margin: -0.5px 0 0;
  background: linear-gradient(270deg, color-mix(in srgb, var(--blue) 35%, transparent), var(--blue));
  transform-origin: 0 50%;
}
.so .mowa--bok .mowa__linia::after {
  left: -3px; top: -2.5px; bottom: auto;
}
.so .gra .mowa--bok .mowa__linia {
  animation-name: so-linia-bok;
}
@keyframes so-linia-bok { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.so .mowa--bok .mowa__fala {
  left: calc(var(--kx) - var(--kr) - 9px); transform: translateX(-100%);
}
.so .mowa--bok .mowa__karta {
  transform-origin: 0 50%;
}
@keyframes so-karta-bok { from { opacity: 0; transform: translateX(-6px) scale(0.97); } to { opacity: 1; transform: none; } }
.so .gra .mowa--bok .mowa__karta {
  animation-name: so-karta-bok;
}
@media (prefers-reduced-motion: reduce) {
.so *, .so *::before, .so *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}
@media (max-width: 760px) {
.so .tabliczka {
  font-size: 12px; padding: 6px 12px 6px 7px; gap: 7px;
}
.so .tabliczka .kresy {
  display: none;
}
.so .mowa__kto {
  display: none;
}
.so .mowa__karta {
  padding: 10px 14px;
}
}

/* ======================================================== ETYKIETY PIĘTER (2D) — 16.10.2026 ==
   Wspólne dla otwarcia (`.so`), serii (`.sm`, wiedza-seria.js) i startu (`.st`, wiedza-start.js) — dlatego
   klasy `mk-*` NIE są zawężone do `.so`. Właściciel: „etykiety mają bardzo słabą rozdzielczość, są
   rozpikselowane i w ogóle nie pasują stylowo do makiety”. Przyczyna: dawne etykiety były billboardami
   w świecie 3D (preserve-3d + scale sceny --k + oko 1,3 + na starcie jeszcze scale(--es)) — Chrome
   rasteryzuje taką warstwę w małej skali i rozciąga bitmapę. Teraz to ZWYKŁA warstwa 2D nad sceną
   (`.mk-ety`, rodzeństwo `.mowa`), tekst w docelowej wielkości, bez transformacji skali. Punkt zaczepienia
   liczy CSS z rzutu prostokątnego tego samego co `rzutPkt` w JS (oko 400 / 492, OKO 1,3, θ = 58°):
   --x / --y / --z = punkt świata (liczby), --k / --ox / --oy = skala i przesunięcie sceny (JS w dopasuj),
   --mk-fi = kąt podestu — animowany TYMI SAMYMI klatkami czasu co `.swiat` (osobna kopia na warstwie
   etykiet), więc kropka trzyma się narożnika także w trakcie obrotu kamery, bez rAF. --mk-dz = ruch
   kondygnacji w pionie (start: cykl pięter, seria: wstrząs „kliku”). Uchylone: etykiety w 3D renderowane
   w dużej rozdzielczości i skalowane w dół (ostrość zależna od heurystyk rasteryzacji przeglądarki).

   STYL = C „Legenda z boku” (wybór właściciela 16.10.2026, `_podglad-wiedza-etykiety.html`, runda 6 —
   „»Pacjenci pytają«, pliki i notatki znowu w ogóle nie pasują wizualnie do tej platformy”): kropka na
   narożniku frontu kondygnacji, DŁUGI odnośnik o stałej długości, przy jego końcu krótka pionowa kreska
   legendy i dwa wiersze — numer kapitalikami w błękicie (+ „· start” albo ✓) i nazwa półgrubą. Wszystkie
   trzy kotwice mają te same x / y świata (narożnik frontu), a rzut prostokątny nie przesuwa ich w poziomie
   z wysokością — więc odnośniki kończą się na JEDNEJ wspólnej osi i trzy etykiety tworzą kolumnę legendy
   obok makiety, także w trakcie obrotu kamery i ruchu pięter (bez osobnego liczenia osi w JS). Plan =
   przerywany odnośnik i kreska, pusta kropka, przygaszony tekst; teraz = grubsza kreska i „· start”;
   gotowe = ✓ przy numerze. Środek kropki = kotwica (left −2,5 px, top = −połowa wysokości etykiety).
   Uchylone: szklana pigułka z cienką błękitną obwódką „numer | nazwa” (pierwsza wersja 2D — „techniczny
   tag z panelu administracyjnego”) oraz z rundy 6: A „Opis architekta” (półka z kapitalikami), B „Numer
   kondygnacji” (duży numer), D „Znacznik platformy” (pigułka znacznika z lewego dolnego rogu). */
@property --mk-fi { syntax: "<angle>"; inherits: true; initial-value: -31deg; }
@property --mk-dz { syntax: "<length>"; inherits: false; initial-value: 0px; }
.mk-ety {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  --mk-fi: -31deg;
}
.mk-kotwica {
  position: absolute;
  width: 0;
  height: 0;
  left: calc(var(--ox, 0px) + var(--k, 1) * (400px + 1.3px * (var(--x) * cos(var(--mk-fi)) - var(--y) * sin(var(--mk-fi)))));
  top: calc(var(--oy, 0px) + var(--k, 1) * (492px + 1.3px * ((var(--x) * sin(var(--mk-fi)) + var(--y) * cos(var(--mk-fi))) * 0.529919 - var(--z) * 0.848048) - 1.102462 * var(--mk-dz)));
}
.mk-et {
  position: absolute;
  left: -2.5px;
  top: -20px;
  width: max-content;
  height: 40px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
.mk-et__kropka {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 2px var(--surface);
}
/* odnośnik: stała długość = wspólna oś legendy (kotwice mają ten sam x na ekranie) */
.mk-et__linia {
  flex: none;
  width: 78px;
  height: 1px;
  background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 45%, transparent));
}
.mk-et__tekst {
  position: relative;
  box-sizing: border-box;
  flex: none;
  display: grid;
  grid-template-columns: auto 1fr;
  justify-content: start;
  align-items: center;
  column-gap: 8px;
  row-gap: 3px;
  width: max-content;
  height: 40px;
  padding: 0 0 0 13px;
  font-size: 15px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-shadow: 0 0 8px var(--surface), 0 0 3px var(--surface);
}
/* kreska legendy: pionowa, gaśnie ku końcom, wystaje 14 px nad i pod etykietę */
.mk-et__tekst::before {
  content: "";
  position: absolute;
  left: 0;
  top: -14px;
  bottom: -14px;
  width: 1px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--blue) 45%, transparent) 30%, color-mix(in srgb, var(--blue) 45%, transparent) 70%, transparent);
}
.mk-et__nr {
  grid-row: 1;
  grid-column: 1;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.16em;
  color: var(--blue);
}
.mk-et__naz {
  grid-row: 2;
  grid-column: 1 / -1;
}
.mk-et__start {
  grid-row: 1;
  grid-column: 2;
  justify-self: start;
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.mk-et__start::before {
  content: "· ";
  color: var(--blue);
}
.mk-et__ok {
  grid-row: 1;
  grid-column: 2;
  justify-self: start;
  display: grid;
  place-items: center;
  color: var(--blue);
}
.mk-et__ok svg {
  display: block;
  width: 11px;
  height: 11px;
}
/* teraz: następna do zbudowania — pełna, grubsza kreska legendy i „· start” */
.mk-et--teraz .mk-et__tekst::before {
  width: 2px;
  margin-left: -0.5px;
  background: linear-gradient(180deg, transparent, var(--blue) 25%, var(--blue) 75%, transparent);
}
/* plan: kondygnacja jeszcze tylko narysowana — przerywany odnośnik i kreska, pusta kropka, przygaszony tekst */
.mk-et--plan .mk-et__kropka {
  background: var(--surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 60%, transparent);
}
.mk-et--plan .mk-et__linia {
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--blue) 50%, transparent) 0 3px, transparent 3px 6px);
}
.mk-et--plan .mk-et__tekst {
  color: var(--ink-muted);
  font-weight: 600;
}
.mk-et--plan .mk-et__tekst::before {
  background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--blue) 40%, transparent) 0 3px, transparent 3px 6px);
}
.mk-et--plan .mk-et__nr {
  color: color-mix(in srgb, var(--blue) 60%, transparent);
}
.mk-et--plan .mk-et__ok {
  display: none;
}
/* wejście: kropka stoi na narożniku od pierwszej klatki, odnośnik i legenda odsłaniają się od niej w prawo
   (clip-path z zapasem na kreskę legendy, poświatę tekstu i pierścień kropki). Dawne przesunięcie
   translateX(−6 px) zsuwało kropkę z narożnika na czas wejścia — przy długim odnośniku było to widać. */
@keyframes mk-wj {
  from { opacity: 0; clip-path: inset(-24px 100% -24px -8px); }
  to { opacity: 1; clip-path: inset(-24px -24px -24px -8px); }
}
@keyframes mk-gas { from { opacity: 1; } to { opacity: 0; } }
@keyframes mk-kropka {
  0% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 2px color-mix(in srgb, var(--blue-sky) 70%, transparent); }
  70%, 100% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 10px transparent; }
}
/* telefon: krótszy odnośnik i mniejsze dwa wiersze, bez „start” (piętra stoją ciasno) */
@media (max-width: 760px) {
  .mk-et { height: 32px; top: -16px; }
  .mk-et__linia { width: 26px; }
  .mk-et__tekst { height: 32px; padding-left: 9px; row-gap: 2px; font-size: 12px; }
  .mk-et__nr { font-size: 9px; }
  .mk-et__start { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-ety, .mk-ety * { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}

/* wersja 2: zdanie, które nie mieści się w jednym wierszu nawet przy 12–13 px, łamie się na dwa (zrównoważone) */
.so .mowa__karta.mowa__karta--wiersze {
  white-space: normal;
}
.so .mowa__karta--wiersze .mowa__tekst {
  white-space: normal;
  text-wrap: balance;
}

/* R2W (runda 2 bazy wiedzy): tabliczka „Asystent Klinika Jasny Uśmiech · w budowie · 0 z 3” wychodziła na 360 px
   10 px za prawy brzeg ekranu. Na wąskim ekranie łamie się na dwa zrównoważone wiersze; „ · ” trzyma się
   poprzedniego słowa (twarda spacja w wiedza-otwarcie.js), kreski planu znikają już od 760 px. */
@media (max-width: 480px) {
  .so .tabliczka {
    white-space: normal;
    width: max-content;
    max-width: calc(100vw - 40px);
    border-radius: 18px;
    text-align: left;
  }
  .so .tabliczka > span:not(.dot):not(.kresy) {
    text-wrap: balance;
  }
  .so .tabliczka .dot {
    flex: none;
  }
}