/* public/css/sceny/instalacja.css — scena „U Was na serwerze” (/wdrozenie, sekcja #u-was; silnik public/js/sceny.js, spec §7.8).
   HTML+CSS = stan końcowy sceny 6: rama „Wasza instalacja” z serwerem, czterema modułami, licznikiem i wersją po aktualizacji;
   dostawca spoza instalacji przekreślony. Elementy przejściowe scen 3–5 (pismo, strzałka, wzór, role, paczka) są tu ukryte —
   pokazuje je dopiero oś (autoAlpha). Dwa układy: plac 4/3 (domyślnie) i 4/5 do 720 px. Rozmiary w cqi, czytelność max(…px, …cqi). */

/* ——— rama, ściana-granica, etykieta ——— */
.sc-instalacja-rama {
  left: 3cqi; top: 7cqi; width: 72cqi; height: 63cqi; z-index: 1; border-radius: 16px;
  background: radial-gradient(80% 70% at 50% 45%, rgba(255, 154, 60, 0.07), rgba(255, 255, 255, 0.025) 70%);
}
.sc-instalacja-rama-blask {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255, 154, 60, 0.35), 0 0 34px rgba(244, 122, 32, 0.4), inset 0 0 30px rgba(244, 122, 32, 0.16);
}
.sc-instalacja-sciana { left: 3cqi; top: 7cqi; width: 72cqi; height: 63cqi; overflow: visible; z-index: 4; pointer-events: none; }
.sc-instalacja-sciana-linia {
  fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 0;
  filter: drop-shadow(0 0 5px var(--n-blask));
}
/* zewnętrzny element trzyma położenie na ścianie (translate z CSS), oś animuje tylko wewnętrzny napis */
.sc-instalacja-etykieta { left: 6cqi; top: 7cqi; translate: 0 -50%; z-index: 5; }
.sc-instalacja-etykieta > span {
  display: block; white-space: nowrap; font-family: var(--fm); font-weight: 500; font-size: max(10px, 1.45cqi); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--n-tlo); background: var(--accent); border-radius: 1.2cqi; padding: 0.6cqi 1.3cqi;
  box-shadow: 0 0 18px var(--n-blask);
}
.sc-instalacja-brama {
  z-index: 5; border-radius: 4px; pointer-events: none; visibility: hidden; opacity: 0;
  background: var(--n-ok); box-shadow: 0 0 14px var(--n-ok), 0 0 4px #fff;
}
.sc-instalacja-brama-pismo { left: 3cqi; top: 20cqi; width: max(4px, 0.7cqi); height: 16cqi; translate: -50% 0; }
.sc-instalacja-brama-wersja { left: 55cqi; top: 7cqi; width: 17.5cqi; height: max(4px, 0.7cqi); translate: 0 -50%; }

/* ——— poza instalacją ——— */
.sc-instalacja-obcy {
  left: 79cqi; top: 17cqi; width: 18.5cqi; z-index: 2; padding: 1.6cqi 1.8cqi; border-radius: 1.8cqi;
  border: 1px dashed rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.025); color: var(--n-szary);
}
.sc-instalacja-obcy-nazwa { position: relative; display: block; margin-top: 0.6cqi; font-size: max(12px, 1.7cqi); line-height: 1.3; color: var(--n-tekst); }
.sc-instalacja-skreslenie {
  position: absolute; left: -4%; right: -4%; top: 50%; height: 2px; border-radius: 1px; transform-origin: left center;
  background: var(--n-uwaga); box-shadow: 0 0 6px rgba(251, 191, 36, 0.6); rotate: -8deg;
}

/* ——— serwer ——— */
.sc-instalacja-serwer {
  left: 6.5cqi; top: 12.5cqi; width: 12cqi; height: 53.5cqi; z-index: 2; display: flex; flex-direction: column; gap: 1cqi;
  padding: 1.3cqi; border-radius: 1.6cqi; border: 1px solid var(--n-brzeg);
  background: linear-gradient(180deg, var(--n-tlo3), var(--n-tlo2)); box-shadow: 0 1.6cqi 4cqi rgba(0, 0, 0, 0.45);
}
.sc-instalacja-jednostka {
  flex: 1; display: flex; align-items: center; gap: 0.7cqi; padding: 0 0.9cqi; border-radius: 0.8cqi;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
}
.sc-instalacja-jednostka i { flex: none; width: max(5px, 0.85cqi); aspect-ratio: 1; border-radius: 50%; background: var(--n-ok); box-shadow: 0 0 6px var(--n-ok); }
.sc-instalacja-jednostka i:nth-child(2) { background: var(--accent-l); box-shadow: 0 0 6px var(--n-blask); }
.sc-instalacja-jednostka i:nth-child(3) { background: var(--n-ok); opacity: 0.55; }
.sc-instalacja-jednostka b { flex: 1; height: max(3px, 0.45cqi); border-radius: 1px; background: rgba(255, 255, 255, 0.14); }
.sc-instalacja-serwer-podpis { flex: none; text-align: center; font-size: max(12px, 1.6cqi); line-height: 1.2; color: var(--n-szary); }

/* ——— gniazda i moduły (siatka 2 × 2) ——— */
.sc-instalacja-m1, .sc-instalacja-m3 { left: 22cqi; }
.sc-instalacja-m2, .sc-instalacja-m4 { left: 48cqi; }
.sc-instalacja-m1, .sc-instalacja-m2 { top: 12cqi; }
.sc-instalacja-m3, .sc-instalacja-m4 { top: 32cqi; }
.sc-instalacja-gniazdo, .sc-instalacja-modul { width: 24.5cqi; height: 18.5cqi; }
.sc-instalacja-gniazdo {
  z-index: 1; border-radius: 2.2cqi; border: 1.5px dashed rgba(255, 154, 60, 0.55); visibility: hidden; opacity: 0;
  box-shadow: 0 0 18px rgba(244, 122, 32, 0.35), inset 0 0 14px rgba(244, 122, 32, 0.2);
}
.sc-instalacja-modul { overflow: hidden; display: flex; flex-direction: column; gap: 0.8cqi; padding: 1.9cqi 2.4cqi; }
.sc-instalacja-modul .sc-tytul { margin: 0; font-size: max(14px, 2.3cqi); }
.sc-instalacja-modul > *, .sc-instalacja-pismo > *, .sc-instalacja-wzor > *, .sc-instalacja-rola > *, .sc-instalacja-licznik > * { flex: none; }
.sc-instalacja-modul::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: 0.85;
}
.sc-instalacja-opis { font-size: max(12px, 1.6cqi); line-height: 1.3; color: var(--n-szary); }
.sc-instalacja-portale { font-size: max(12px, 1.6cqi); line-height: 1.3; color: var(--n-tekst); }
.sc-instalacja-portale span { display: inline-block; white-space: nowrap; margin-right: 0.8cqi; }
.sc-instalacja-portale span::before {
  content: ""; display: inline-block; width: max(5px, 0.7cqi); aspect-ratio: 1; margin-right: 0.6cqi; border-radius: 50%;
  vertical-align: 0.15em; background: var(--accent-l); box-shadow: 0 0 5px var(--n-blask);
}
.sc-instalacja-polysk {
  position: absolute; top: -20%; bottom: -20%; left: -45%; width: 35%; pointer-events: none; rotate: 18deg;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 220, 180, 0.32), rgba(255, 255, 255, 0));
}
.sc-instalacja-czyta { left: 58cqi; top: 29.4cqi; z-index: 7; white-space: nowrap; visibility: hidden; opacity: 0; box-shadow: 0 0 16px var(--n-blask); }

/* ——— licznik i wersja ——— */
.sc-instalacja-licznik { left: 22cqi; top: 52.5cqi; width: 31cqi; height: 15cqi; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1cqi; }
.sc-instalacja-liczby { display: flex; gap: 2.6cqi; align-items: baseline; color: var(--n-szary); }
.sc-instalacja-liczby .sc-liczba { font-size: max(20px, 3.6cqi); margin-right: 0.4cqi; }
.sc-instalacja-licznik-obrys {
  position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; visibility: hidden; opacity: 0;
  box-shadow: 0 0 0 2px var(--n-ok), 0 0 22px rgba(74, 222, 128, 0.45);
}
.sc-instalacja-wersja {
  left: 55cqi; top: 52.5cqi; width: 17.5cqi; height: 15cqi; display: flex; flex-wrap: wrap; align-items: baseline; align-content: center;
  gap: 0.6cqi 1.2cqi; padding: 1.9cqi 2.2cqi;
}
.sc-instalacja-zamiana { display: grid; }
.sc-instalacja-zamiana > * { grid-area: 1 / 1; }
.sc-instalacja-numer { font-family: var(--fd); font-weight: 600; font-size: max(20px, 3.6cqi); line-height: 1; color: #fff; }
.sc-instalacja-stara { visibility: hidden; opacity: 0; }
.sc-instalacja-kopia { flex: 1 0 100%; font-size: max(12px, 1.45cqi); line-height: 1.2; color: var(--n-ok); }

/* ——— elementy przejściowe scen 3–6: w stanie końcowym ukryte ——— */
.sc-instalacja-pismo, .sc-instalacja-tor, .sc-instalacja-wyjscie, .sc-instalacja-zostaje,
.sc-instalacja-wzor, .sc-instalacja-rola, .sc-instalacja-paczka { visibility: hidden; opacity: 0; }

/* pismo (scena 3) */
.sc-instalacja-pismo {
  left: 22cqi; top: 11cqi; width: 25cqi; height: 40.5cqi; z-index: 6; overflow: hidden; display: flex; flex-direction: column; gap: 0.9cqi;
  background: linear-gradient(180deg, #1f2738, #161d2b); border-color: rgba(255, 154, 60, 0.45);
}
.sc-instalacja-pismo .sc-tytul { margin: 0; }
.sc-instalacja-sygn { font-size: max(12px, 1.5cqi); line-height: 1.3; color: var(--n-szary); }
.sc-instalacja-wiersz { position: relative; display: block; height: max(4px, 0.75cqi); border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.sc-instalacja-wiersz:nth-of-type(2n) { width: 82%; }
.sc-instalacja-wiersz:last-of-type { width: 64%; }
.sc-instalacja-wiersz i { position: absolute; inset: 0; background: var(--accent-l); transform-origin: left center; opacity: 0.85; }
.sc-instalacja-odczyt { display: flex; flex-wrap: wrap; gap: 0.6cqi; margin-top: auto; }
.sc-instalacja-odczyt .sc-chip { white-space: nowrap; text-transform: none; letter-spacing: 0.02em; }
.sc-instalacja-skan { position: absolute; inset: 0; z-index: 1; pointer-events: none; visibility: hidden; opacity: 0; }
.sc-instalacja-skan::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent-l);
  box-shadow: 0 0 14px 3px var(--n-blask), 0 0 3px #fff;
}
.sc-instalacja-skan::after {
  content: ""; position: absolute; left: 0; right: 0; top: -10cqi; height: 10cqi;
  background: linear-gradient(180deg, rgba(255, 154, 60, 0), rgba(255, 154, 60, 0.16));
}

/* strzałka „na zewnątrz” i odbicie od ściany: tor obrócony w CSS, oś przesuwa elementy wzdłuż jego osi x */
.sc-instalacja-tor { left: 47cqi; top: 26cqi; width: 28cqi; height: 6cqi; translate: 0 -50%; transform-origin: left center; z-index: 7; pointer-events: none; }
.sc-instalacja-kreska {
  position: absolute; left: 0; right: 0; top: 50%; height: max(2px, 0.45cqi); margin-top: calc(max(2px, 0.45cqi) / -2); transform-origin: left center; border-radius: 2px;
  background: linear-gradient(90deg, rgba(251, 191, 36, 0), var(--n-uwaga)); box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}
.sc-instalacja-grot { position: absolute; inset: 0; }
.sc-instalacja-grot i {
  position: absolute; left: -2.2cqi; top: calc(50% - 1.3cqi); width: 0; height: 0; transform-origin: right center;
  border-top: 1.3cqi solid transparent; border-bottom: 1.3cqi solid transparent; border-left: 2.2cqi solid var(--n-uwaga);
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.8));
}
.sc-instalacja-uderzenie {
  position: absolute; left: calc(100% - 1cqi); top: calc(50% - 8cqi); width: 2cqi; height: 16cqi; border-radius: 50%;
  background: radial-gradient(closest-side, #fff, rgba(255, 154, 60, 0.85) 40%, rgba(244, 122, 32, 0)); opacity: 0;
}
.sc-instalacja-iskra { position: absolute; left: 100%; top: 50%; width: 0; height: 0; }
.sc-instalacja-iskra i {
  position: absolute; left: 0; top: -1px; width: 5.5cqi; height: 2px; border-radius: 2px; transform-origin: left center; opacity: 0;
  background: linear-gradient(90deg, #fff, var(--accent-l) 40%, rgba(255, 154, 60, 0)); box-shadow: 0 0 6px var(--n-blask);
}
.sc-instalacja-iskra i:nth-child(1) { rotate: 95deg; }
.sc-instalacja-iskra i:nth-child(2) { rotate: 128deg; width: 4cqi; }
.sc-instalacja-iskra i:nth-child(3) { rotate: 152deg; }
.sc-instalacja-iskra i:nth-child(4) { rotate: 180deg; width: 7cqi; }
.sc-instalacja-iskra i:nth-child(5) { rotate: 206deg; }
.sc-instalacja-iskra i:nth-child(6) { rotate: 232deg; width: 4cqi; }
.sc-instalacja-iskra i:nth-child(7) { rotate: 265deg; }
.sc-instalacja-wyjscie, .sc-instalacja-zostaje { left: 51cqi; top: 18.5cqi; z-index: 8; white-space: nowrap; background: var(--n-tlo2); }
.sc-instalacja-zostaje { box-shadow: 0 0 18px rgba(74, 222, 128, 0.35); }

/* wzór pisma (scena 4) */
.sc-instalacja-wzor {
  left: 24cqi; top: 11cqi; width: 46cqi; height: 40.5cqi; z-index: 6; display: flex; flex-direction: column; gap: 1.1cqi;
  background: linear-gradient(180deg, #f6f1ea, #ece4d8); color: #2b2620; border-color: rgba(255, 255, 255, 0.5);
}
.sc-instalacja-wzor .sc-mono { color: #7a6f62; }
.sc-instalacja-wzor-glowa { display: flex; align-items: center; gap: 1.2cqi; padding-bottom: 1cqi; border-bottom: 1px solid rgba(43, 38, 32, 0.18); }
.sc-instalacja-sygnet { flex: none; width: max(14px, 3cqi); aspect-ratio: 1; border-radius: 0.8cqi; background: var(--accent); box-shadow: inset 0 0 0 0.5cqi rgba(255, 255, 255, 0.35); }
.sc-instalacja-wzor-glowa .sc-instalacja-zamiana { font-family: var(--fd); font-weight: 600; font-size: max(14px, 2.3cqi); line-height: 1.15; color: #1d1915; }
.sc-instalacja-pole {
  justify-self: start; align-self: center; font-family: var(--fm); font-weight: 500; font-size: max(11px, 1.45cqi); letter-spacing: 0.04em;
  color: #9a8e80; border: 1px dashed #b3a796; border-radius: 0.6cqi; padding: 0.3cqi 0.9cqi;
}
.sc-instalacja-wasze { align-self: center; }
.sc-instalacja-zamiana > .sc-instalacja-pole { visibility: hidden; opacity: 0; }
.sc-instalacja-wzor-wiersz { display: block; width: 80%; height: max(4px, 0.7cqi); border-radius: 2px; background: rgba(43, 38, 32, 0.16); transform-origin: left center; }
.sc-instalacja-wzor-sad { align-self: flex-end; text-align: right; font-size: max(12px, 1.45cqi); line-height: 1.3; color: #5d5348; }
.sc-instalacja-wzor-stopka { margin-top: auto; padding-top: 1cqi; border-top: 1px solid rgba(43, 38, 32, 0.18); font-size: max(12px, 1.5cqi); line-height: 1.25; color: #5d5348; }
.sc-instalacja-wzor-chip { position: absolute; right: 2cqi; bottom: 6.6cqi; }

/* role (scena 5) */
.sc-instalacja-rola {
  top: 11cqi; width: 15.5cqi; height: 40.5cqi; z-index: 6; display: flex; flex-direction: column; gap: 1.2cqi; padding: 1.8cqi;
  background: linear-gradient(180deg, #1f2738, #161d2b);
}
.sc-instalacja-r1 { left: 22cqi; }
.sc-instalacja-r2 { left: 39.25cqi; }
.sc-instalacja-r3 { left: 56.5cqi; }
.sc-instalacja-osoba { display: flex; flex-direction: column; gap: 0.8cqi; }
.sc-instalacja-osoba > i {
  flex: none; display: grid; place-items: center; width: max(26px, 4.6cqi); aspect-ratio: 1; border-radius: 50%; font-style: normal;
  font-family: var(--fd); font-weight: 600; font-size: max(13px, 2cqi); color: var(--n-tlo); background: var(--accent-l);
}
.sc-instalacja-r2 .sc-instalacja-osoba > i { background: var(--n-ok); }
.sc-instalacja-r3 .sc-instalacja-osoba > i { background: var(--n-uwaga); }
.sc-instalacja-osoba b { display: block; font-family: var(--fd); font-weight: 600; font-size: max(14px, 2.2cqi); color: #fff; }
.sc-instalacja-haslo { display: flex; align-items: center; gap: 0.5cqi; height: max(16px, 2.8cqi); padding: 0 0.9cqi; border-radius: 0.8cqi; border: 1px solid var(--n-brzeg); background: rgba(0, 0, 0, 0.25); }
.sc-instalacja-haslo i { width: max(4px, 0.7cqi); aspect-ratio: 1; border-radius: 50%; background: var(--n-tekst); }
.sc-instalacja-haslo em {
  margin-left: auto; width: max(5px, 0.8cqi); height: max(9px, 1.5cqi); rotate: 45deg;
  border-right: 2px solid var(--n-ok); border-bottom: 2px solid var(--n-ok);
}
.sc-instalacja-kafle { display: grid; gap: 0.8cqi; }
.sc-instalacja-kafle span {
  display: block; padding: 0.9cqi 1cqi; border-radius: 0.9cqi; font-size: max(12px, 1.5cqi); line-height: 1.2; color: var(--n-tekst);
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1);
}
.sc-instalacja-kafle span:first-child { border-color: rgba(255, 154, 60, 0.6); background: rgba(244, 122, 32, 0.16); }

/* paczka nowej wersji (scena 6) */
.sc-instalacja-paczka {
  left: 55cqi; top: 52.5cqi; width: 17.5cqi; height: 15cqi; z-index: 8; display: flex; flex-direction: column; justify-content: center; gap: 0.5cqi;
  background: linear-gradient(180deg, #3a2412, #24170d); border-color: var(--accent); box-shadow: 0 0 26px var(--n-blask);
}
.sc-instalacja-paczka b { font-family: var(--fd); font-weight: 600; font-size: max(20px, 3.6cqi); line-height: 1; color: #fff; }

/* ——— telefon (plac 4/5): obcy u góry, serwer poziomo, moduły 2 × 2, licznik i wersja na dole ——— */
@media (max-width: 720px) {
  .sc-instalacja-rama, .sc-instalacja-sciana { left: 4cqi; top: 16.5cqi; width: 92cqi; height: 104.5cqi; }
  .sc-instalacja-etykieta { left: 8cqi; top: 121cqi; }
  .sc-instalacja-etykieta > span { font-size: max(10px, 2.6cqi); padding: 1cqi 2.2cqi; border-radius: 2cqi; }
  .sc-instalacja-obcy { left: 8cqi; top: 2cqi; width: 84cqi; padding: 1.6cqi 3cqi; border-radius: 2.6cqi; }
  .sc-instalacja-obcy-nazwa { display: inline-block; margin-top: 0.4cqi; font-size: max(12px, 3.3cqi); }
  .sc-instalacja-brama-pismo { left: 4cqi; top: 46cqi; height: 24cqi; width: max(4px, 1.2cqi); }
  .sc-instalacja-brama-wersja { left: 60cqi; top: 16.5cqi; width: 32cqi; height: max(4px, 1.2cqi); }

  .sc-instalacja-serwer { left: 8cqi; top: 21cqi; width: 84cqi; height: 8.5cqi; flex-direction: row; gap: 1.6cqi; padding: 1.4cqi; border-radius: 2.4cqi; }
  .sc-instalacja-jednostka { gap: 1cqi; padding: 0 1.4cqi; border-radius: 1.2cqi; }
  .sc-instalacja-jednostka i { width: max(5px, 1.4cqi); }
  .sc-instalacja-jednostka b { height: max(3px, 0.8cqi); }
  .sc-instalacja-serwer-podpis { align-self: center; width: 17cqi; font-size: max(12px, 3.2cqi); }

  .sc-instalacja-m1, .sc-instalacja-m3 { left: 8cqi; }
  .sc-instalacja-m2, .sc-instalacja-m4 { left: 51cqi; }
  .sc-instalacja-m1, .sc-instalacja-m2 { top: 32cqi; }
  .sc-instalacja-m3, .sc-instalacja-m4 { top: 61cqi; }
  .sc-instalacja-gniazdo, .sc-instalacja-modul { width: 41cqi; height: 27cqi; }
  .sc-instalacja-gniazdo { border-radius: 3.4cqi; }
  .sc-instalacja-modul { gap: 1.2cqi; padding: 2.6cqi 2.6cqi 2.6cqi 3cqi; border-radius: 3.4cqi; }
  .sc-instalacja-opis { font-size: max(12px, 3.3cqi); }
  .sc-instalacja-portale { gap: 1.2cqi; }
  .sc-instalacja-czyta { left: 58cqi; top: 58.4cqi; }
  .sc-instalacja-modul .sc-tytul { font-size: max(14px, 4cqi); }
  .sc-instalacja-portale { font-size: max(12px, 3.2cqi); }
  .sc-instalacja-portale span { margin-right: 1.6cqi; }
  .sc-instalacja-portale span::before { width: max(5px, 1.4cqi); margin-right: 1.2cqi; }

  .sc-instalacja-licznik { left: 8cqi; top: 90.5cqi; width: 50cqi; height: 26cqi; padding: 2.6cqi 3cqi; gap: 1.4cqi; border-radius: 3.4cqi; }
  .sc-instalacja-liczby { gap: 4cqi; }
  .sc-instalacja-liczby > span { display: flex; flex-direction: column; font-size: max(12px, 3.2cqi); }
  .sc-instalacja-liczby .sc-liczba { font-size: max(22px, 6.4cqi); }
  .sc-instalacja-wersja, .sc-instalacja-paczka { left: 60cqi; top: 90.5cqi; width: 32cqi; height: 26cqi; padding: 2.6cqi 3cqi; gap: 1.2cqi; border-radius: 3.4cqi; }
  .sc-instalacja-wersja { column-gap: 2cqi; }
  .sc-instalacja-skreslenie { rotate: -3deg; }
  .sc-instalacja-numer, .sc-instalacja-paczka b { font-size: max(22px, 6.4cqi); }
  .sc-instalacja-kopia { font-size: max(12px, 3cqi); }

  .sc-instalacja-pismo { left: 8cqi; top: 32cqi; width: 41cqi; height: 64cqi; gap: 1.6cqi; padding: 3cqi 3.4cqi; border-radius: 3.4cqi; }
  .sc-instalacja-sygn { font-size: max(12px, 3cqi); }
  .sc-instalacja-wiersz { height: max(4px, 1.3cqi); }
  .sc-instalacja-odczyt { gap: 1.2cqi; }
  .sc-instalacja-tor { left: 28.5cqi; top: 32cqi; width: 15.5cqi; height: 10cqi; rotate: -90deg; }
  .sc-instalacja-grot i { left: -3.6cqi; top: calc(50% - 2.2cqi); border-top-width: 2.2cqi; border-bottom-width: 2.2cqi; border-left-width: 3.6cqi; }
  .sc-instalacja-kreska { height: max(2px, 0.9cqi); margin-top: calc(max(2px, 0.9cqi) / -2); }
  .sc-instalacja-uderzenie { left: calc(100% - 1.7cqi); top: calc(50% - 13cqi); width: 3.4cqi; height: 26cqi; }
  .sc-instalacja-iskra i { width: 9cqi; height: 2px; }
  .sc-instalacja-iskra i:nth-child(2n) { width: 7cqi; }
  .sc-instalacja-wyjscie, .sc-instalacja-zostaje { left: 53cqi; top: 36cqi; }

  .sc-instalacja-wzor { left: 8cqi; top: 32cqi; width: 84cqi; height: 64cqi; gap: 2cqi; padding: 3.4cqi 4cqi; border-radius: 3.4cqi; }
  .sc-instalacja-wzor-glowa { gap: 2.4cqi; padding-bottom: 2cqi; }
  .sc-instalacja-sygnet { width: max(16px, 6cqi); border-radius: 1.4cqi; }
  .sc-instalacja-wzor-glowa .sc-instalacja-zamiana { font-size: max(15px, 4.4cqi); }
  .sc-instalacja-pole { font-size: max(11px, 3cqi); padding: 0.6cqi 1.8cqi; border-radius: 1.2cqi; }
  .sc-instalacja-wzor-wiersz { height: max(4px, 1.3cqi); }
  .sc-instalacja-wzor-stopka { padding-top: 2cqi; font-size: max(12px, 3.2cqi); }
  .sc-instalacja-wzor-sad { font-size: max(12px, 3cqi); }
  .sc-instalacja-wzor-chip { right: 4cqi; bottom: 12cqi; }

  .sc-instalacja-rola {
    left: 8cqi; width: 84cqi; height: 24.5cqi; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: center;
    gap: 2cqi 2.4cqi; padding: 2.4cqi 3cqi; border-radius: 3.4cqi;
  }
  .sc-instalacja-r1 { left: 8cqi; top: 32cqi; }
  .sc-instalacja-r2 { left: 8cqi; top: 59cqi; }
  .sc-instalacja-r3 { left: 8cqi; top: 86cqi; }
  .sc-instalacja-osoba { flex: 1 1 auto; flex-direction: row; align-items: center; gap: 2cqi; }
  .sc-instalacja-osoba > i { width: max(28px, 8cqi); font-size: max(14px, 3.6cqi); }
  .sc-instalacja-osoba .sc-mono { display: none; }
  .sc-instalacja-osoba b { font-size: max(15px, 4.2cqi); }
  .sc-instalacja-haslo { width: 28cqi; height: max(18px, 6cqi); gap: 1.2cqi; padding: 0 2cqi; border-radius: 1.6cqi; }
  .sc-instalacja-haslo i { width: max(4px, 1.4cqi); }
  .sc-instalacja-haslo em { width: max(5px, 1.5cqi); height: max(9px, 2.8cqi); }
  .sc-instalacja-kafle { flex: 1 0 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6cqi; }
  .sc-instalacja-kafle span { padding: 1.4cqi 1cqi; border-radius: 1.6cqi; font-size: max(12px, 3.2cqi); text-align: center; white-space: nowrap; }
}