/* Geometria znaku i ramki wymiarowej - wspolna dla ekranu logowania i systemu.
   Tu siedzi wylacznie to, co wynika z samego rysunku (proporcje, odsuniecia
   wymiarow). Rozmiar logo ustawia sobie kazda strona osobno, bo w naglowku
   systemu jest male, a na scenie logowania duze. */

.logo {
  /* viewBox jest przyciety do samego rysunku (bylo 0 0 8200 3824 z szerokim
     marginesem swiatla), zeby lewa krawedz znaku stala w jednej linii z tekstem
     pod spodem. */
  position:relative; aspect-ratio:6570/2191;
  transform-origin:50% 50%; will-change:transform;
}
/* Sam napis ma inne proporcje niz cale logo - przycinamy do jego krawedzi. */
.logo.napis { aspect-ratio:4914/819; }
.lyr { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.lyr path { transition:none; }   /* fill zmieniamy wylacznie animacjami WAAPI */

/* Ramka wymiarowa lezy dokladnie na znaku i ma ten sam viewBox, wiec jedna
   wspolrzedna znaczy w obu to samo miejsce: 816 to lewa krawedz rysunku i tyle.
   Wczesniej ramka byla wieksza od logo o procentowe wciecia (-73,78% / -23,06%)
   i przy najmniejszej roznicy w liczeniu tych procentow cala siatka jechala
   w innej skali niz znak. Linie wychodzace poza viewBox rysuja sie dzieki
   overflow:visible - i o to chodzi, bo wymiary maja stac wokol rysunku. */
.dims { position:absolute; inset:0; z-index:3; overflow:visible; }
.dims line, .dims path { stroke:var(--dim-line,#8D9BA1); stroke-width:15; fill:none; }
.dims .arw { fill:var(--dim-line,#8D9BA1); stroke:none; }
.dims text {
  font-family:"IBM Plex Mono",monospace; font-size:150px; fill:var(--dim-text,#A9B5BA);
  letter-spacing:.04em;
}
.dims .grp { opacity:0; }