@font-face {
  font-family: "Gabarito";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonty/gabarito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Gabarito";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonty/gabarito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonty/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonty/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  --smola: #140b07;
  --glina: #1a0f0a;
  --krem: #f8e3cc;
  --krem-cichy: #bda893;
  --linia: rgb(248 227 204 / 0.12);
  --rdza: #c4501c;
  --rdza-tekst: #e8956a;
  --rdza-poswiata: #9b3614;
  --braz: #5a2110;
  --braz-ciemny: #2b1208;
  --dwa-start: #fe7639;
  --dwa-srodek: #ffb88b;

  --ekran: #151517;
  --ekran-pole: #0f0f11;
  --ekran-tekst: #ededed;
  --ekran-cichy: #a1a1a6;
  --ekran-linia: rgb(255 255 255 / 0.1);
  --ok: #3dbb7c;
  --ok-tekst: #5fd49a;

  --gradient-akcji: linear-gradient(135deg, #9b3614, #5a2110);
  --gradient-przycisku:
    radial-gradient(28% 120% at 20% 70%, #9b3614, rgb(155 54 20 / 0)),
    radial-gradient(28% 120% at 80% 70%, #9b3614, rgb(155 54 20 / 0)),
    linear-gradient(110deg, #2b1208, #5a2110 50%, #2b1208);

  --kroj-naglowkow: "Gabarito", "Geist", system-ui, sans-serif;
  --kroj-tekstu: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;

  --spis: 17rem;
  --margines: clamp(1rem, 4vw, 4.5rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--smola);
  color: var(--krem);
  font-family: var(--kroj-tekstu);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4,
p,
dl,
dd,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--rdza-tekst);
  outline-offset: 3px;
  border-radius: 0.35rem;
}

[hidden] {
  display: none !important;
}

.ukryte {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.pomin {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 50;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  background: var(--krem);
  color: var(--smola);
  font-weight: 600;
  transform: translateY(-200%);
}

.pomin:focus {
  transform: none;
}

.logo {
  position: relative;
  display: inline-block;
  height: var(--wysokosc-logo, 3rem);
  aspect-ratio: 480 / 230;
}

.logo__litery {
  position: absolute;
  inset: 0;
  background: var(--krem);
  -webkit-mask: url("logo/litery.png") center / 100% 100% no-repeat;
  mask: url("logo/litery.png") center / 100% 100% no-repeat;
}

.logo__dwa {
  position: absolute;
  left: 29.59%;
  top: 59.43%;
  width: 13.89%;
  height: 39.35%;
}

.logo__luk,
.logo__kreska {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.logo__luk {
  -webkit-mask: url("logo/dwa-luk.svg") center / 100% 100% no-repeat;
  mask: url("logo/dwa-luk.svg") center / 100% 100% no-repeat;
}

.logo__luk::before {
  content: "";
  position: absolute;
  inset: -150%;
  background: conic-gradient(
    from 270deg at 49.88% 46.73%,
    var(--dwa-start) 0%,
    var(--dwa-srodek) 25%,
    var(--krem) 50%,
    var(--dwa-srodek) 75%,
    var(--dwa-start) 100%
  );
  transform-origin: 49.88% 46.73%;
  animation: logo-luk 4s linear infinite;
}

.logo__kreska {
  -webkit-mask: url("logo/dwa-kreska.svg") center / 100% 100% no-repeat;
  mask: url("logo/dwa-kreska.svg") center / 100% 100% no-repeat;
}

.logo__kreska::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 458%;
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--dwa-start) 45.6%, var(--dwa-srodek)) 0%,
    var(--dwa-start) 6.8%,
    var(--dwa-srodek) 19.3%,
    var(--krem) 31.8%,
    var(--dwa-srodek) 44.3%,
    color-mix(in srgb, var(--dwa-start) 45.6%, var(--dwa-srodek)) 50%
  );
  animation: logo-kreska 4s linear infinite;
}

@keyframes logo-luk {
  to {
    transform: rotate(360deg);
  }
}

@keyframes logo-kreska {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

.spis {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: var(--spis);
  padding: 1.5rem 0.85rem 1.1rem;
  border-right: 1px solid var(--linia);
  background: var(--glina);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgb(248 227 204 / 0.2) transparent;
}

.spis__logo {
  align-self: center;
  margin-bottom: 1.25rem;
  border-radius: 0.5rem;
  --wysokosc-logo: 3rem;
}

.spis__nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 1.5rem;
}

.spis__akt {
  margin: 0.9rem 0.8rem 0.2rem;
  font-family: var(--kroj-naglowkow);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--rdza-tekst);
}

.spis__kreska {
  margin: 0.75rem 0.8rem;
  border: 0;
  border-top: 1px solid var(--linia);
}

.pozycja {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.75rem;
  padding: 0.4rem 0.8rem;
  border-radius: 0.75rem;
  color: var(--krem-cichy);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.pozycja:hover {
  background: rgb(248 227 204 / 0.05);
  color: var(--krem);
}

.pozycja[aria-current="true"],
.pozycja[aria-current="page"] {
  background: rgb(196 80 28 / 0.16);
  color: var(--rdza-tekst);
}

.pozycja__ikona {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pozycja__nazwa {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--krem);
}

.pozycja[aria-current="true"] .pozycja__nazwa,
.pozycja[aria-current="page"] .pozycja__nazwa {
  color: var(--rdza-tekst);
}

.pozycja__opis {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.beta {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--linia);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--krem-cichy);
  vertical-align: 0.1em;
}

.beta--duza {
  margin-left: 0.5rem;
  padding: 0.15rem 0.6rem;
  font-family: var(--kroj-tekstu);
  font-size: 0.875rem;
  letter-spacing: 0;
  vertical-align: 0.35em;
}

.spis__zaloguj {
  margin-top: auto;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--linia);
  border-radius: 0.65rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.spis__zaloguj:hover {
  border-color: rgb(232 149 106 / 0.6);
  color: var(--rdza-tekst);
}

.pasek {
  display: none;
}

.tresc {
  margin-left: var(--spis);
  padding: 0 var(--margines) 3rem;
  overflow-x: clip;
}

.tresc > * {
  max-width: 76rem;
}

.podpis {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--krem-cichy);
}

.przycisk {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 1.35rem;
  border-radius: 0.6rem;
  background: var(--braz-ciemny);
  color: var(--krem);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  text-shadow: 0 1px 1px rgb(0 0 0 / 0.3);
  transition: filter 0.15s;
}

.przycisk::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: 200%;
  background: var(--gradient-przycisku);
  animation: przycisk 6s ease-in-out infinite alternate;
}

.przycisk:hover {
  filter: brightness(1.1);
}

@keyframes przycisk {
  to {
    transform: translateX(-50%);
  }
}

.link-mocny {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgb(232 149 106 / 0.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: color 0.15s, text-decoration-color 0.15s;
}

.link-mocny:hover {
  color: var(--rdza-tekst);
  text-decoration-color: currentColor;
}

.hero {
  position: relative;
  display: grid;
  gap: 3.5rem;
  align-items: center;
  padding: clamp(3.5rem, 9vh, 7rem) 0 2rem;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform, opacity;
}

.hero::before {
  top: -12%;
  right: -12%;
  width: min(58rem, 92vw);
  height: 44rem;
  background: radial-gradient(closest-side, rgb(155 54 20 / 0.55), rgb(155 54 20 / 0));
  animation: poswiata-a 14s ease-in-out infinite;
}

.hero::after {
  top: 14%;
  right: 18%;
  width: min(32rem, 70vw);
  height: 26rem;
  background: radial-gradient(closest-side, rgb(254 118 57 / 0.26), rgb(254 118 57 / 0));
  animation: poswiata-b 10s ease-in-out infinite;
}

@keyframes poswiata-a {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.75;
  }
  25% {
    transform: translate(-20%, 14%) scale(1.15);
    opacity: 1;
  }
  50% {
    transform: translate(-32%, -4%) scale(0.92);
    opacity: 0.8;
  }
  75% {
    transform: translate(-10%, -16%) scale(1.1);
    opacity: 1;
  }
}

@keyframes poswiata-b {
  0%,
  100% {
    transform: translate(0, 0) scale(0.9);
    opacity: 0.45;
  }
  33% {
    transform: translate(38%, 22%) scale(1.2);
    opacity: 1;
  }
  66% {
    transform: translate(-30%, 30%) scale(1);
    opacity: 0.7;
  }
}

.hero__tytul {
  max-width: 16ch;
  font-family: var(--kroj-naglowkow);
  font-size: clamp(2.6rem, 4.4vw, 4.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.hero__lead {
  max-width: 38rem;
  margin-top: 1.5rem;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--krem-cichy);
}

.hero__akcje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2rem;
}

.hero__uwaga {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--krem-cichy);
}

.hero__akty {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linia);
  font-family: var(--kroj-naglowkow);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hero__akty a {
  color: var(--krem-cichy);
  text-decoration: none;
  transition: color 0.15s;
}

.hero__akty a:hover {
  color: var(--krem);
}

.demo {
  width: 100%;
  max-width: 32rem;
}

.demo__ekran {
  padding: 1.25rem;
  border: 1px solid var(--ekran-linia);
  border-radius: 1.1rem;
  background: var(--ekran);
  color: var(--ekran-tekst);
  font-size: 0.875rem;
  line-height: 1.45;
  box-shadow:
    0 40px 90px -30px rgb(0 0 0 / 0.75),
    0 0 0 1px rgb(254 118 57 / 0.06);
}

.demo__glowa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--ekran-linia);
}

.demo__nazwa {
  font-weight: 600;
}

.demo__etapy {
  display: flex;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--ekran-cichy);
}

.demo__etapy li {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  transition: background-color 0.3s, color 0.3s;
}

.demo__etapy li.jest {
  background: rgb(196 80 28 / 0.18);
  color: var(--rdza-tekst);
}

.demo__pole {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.85rem;
}

.demo__glowa + .demo__pole {
  margin-top: 0;
}

.demo__etykieta {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--ekran-cichy);
}

.demo__licznik {
  font-variant-numeric: tabular-nums;
}

.demo__wartosc {
  min-height: 2.4rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 0.5rem;
  background: var(--ekran-pole);
}

.demo__wartosc--kod {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

.pisze::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.05em;
  margin-left: 1px;
  background: var(--rdza-tekst);
  vertical-align: -0.15em;
  animation: kursor 0.8s steps(1) infinite;
}

@keyframes kursor {
  50% {
    opacity: 0;
  }
}

.demo__status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--ok-tekst);
}

.demo__status.szuka {
  color: var(--ekran-cichy);
}

.demo__status.szuka .kropka {
  background: var(--ekran-cichy);
}

.demo__kategoria {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--ekran-cichy);
}

.demo__zdjecia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 1rem;
}

.demo__zdjecia li {
  position: relative;
  font-size: 0.6875rem;
  color: var(--ekran-cichy);
}

.demo__zdjecia svg {
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 0.35rem;
  border-radius: 0.5rem;
}

.plakietka {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.6);
  color: var(--krem);
  font-size: 0.625rem;
  font-style: normal;
  line-height: 1.5;
}

.demo__parametry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ekran-linia);
}

.demo__parametry dt {
  font-size: 0.75rem;
  color: var(--ekran-cichy);
}

.demo__stopka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.25rem;
  margin-top: 1.1rem;
}

.demo__gotowe {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgb(61 187 124 / 0.14);
  color: var(--ok-tekst);
  font-size: 0.8125rem;
  font-weight: 500;
}

.powtorz {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--ekran-linia);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--ekran-cichy);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.powtorz:hover {
  color: var(--ekran-tekst);
  border-color: rgb(255 255 255 / 0.25);
}

.czeka {
  opacity: 0;
  transform: translateY(4px);
}

[data-krok] {
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

.kropka {
  display: inline-block;
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ekran-cichy);
}

.kropka--ok {
  background: var(--ok);
}

.kropka--uwaga {
  background: var(--rdza);
}

.akt {
  margin-top: clamp(6rem, 14vh, 10rem);
  padding-top: 2.5rem;
  border-top: 1px solid var(--linia);
  scroll-margin-top: 1rem;
}

.akt__tytul {
  font-family: var(--kroj-naglowkow);
  font-size: clamp(4rem, 11vw, 9.5rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.045em;
}

.akt__opis {
  max-width: 34rem;
  margin-top: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--krem-cichy);
}

.rozdzial {
  margin-top: clamp(4rem, 10vh, 6.5rem);
}

.rozdzial__glowa {
  max-width: 44rem;
  margin-bottom: 2.75rem;
}

.rozdzial__tytul,
.sekcja__tytul {
  font-family: var(--kroj-naglowkow);
  font-size: clamp(2rem, 3.4vw, 2.85rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.rozdzial__lead {
  margin-top: 0.75rem;
  font-size: clamp(1.125rem, 1.5vw, 1.3rem);
  line-height: 1.45;
  color: var(--krem);
}

.rozdzial__uklad {
  display: grid;
  gap: 2rem 3.5rem;
  align-items: start;
}

.rozdzial__uklad + .rozdzial__uklad {
  margin-top: 3.5rem;
}

.rozdzial__tekst {
  max-width: 36rem;
  color: var(--krem-cichy);
}

.rozdzial__tekst > p + p {
  margin-top: 1rem;
}

.rozdzial__podtytul {
  margin: 0 0 0.85rem;
  font-family: var(--kroj-naglowkow);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--krem);
}

* + .rozdzial__podtytul {
  margin-top: 2rem;
}

.rozdzial__kolumny {
  display: grid;
  gap: 1rem 3rem;
  max-width: 64rem;
  margin-bottom: 2.25rem;
  color: var(--krem-cichy);
}

.rozdzial__kolumny--listy {
  gap: 2rem 3.5rem;
  margin-bottom: 3rem;
}

.rozdzial__dostajesz {
  max-width: 64rem;
  margin: 3.5rem 0 2.5rem;
  color: var(--krem-cichy);
}

@media (min-width: 60rem) {
  .lista.lista--dwie {
    display: block;
    columns: 2;
    column-gap: 3rem;
  }

  .lista--dwie li {
    margin-bottom: 0.55rem;
    break-inside: avoid;
  }
}

.przypis {
  padding-left: 0.9rem;
  border-left: 2px solid var(--rdza);
  font-size: 0.9375rem;
}

.lista-opisowa {
  display: grid;
  gap: 1.6rem;
}

.lista-opisowa dt {
  font-family: var(--kroj-naglowkow);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--krem);
}

.lista-opisowa dd {
  margin-top: 0.3rem;
}

.drogi {
  max-width: 64rem;
  margin-bottom: 4.5rem;
}

.drogi__lista {
  display: grid;
  gap: 2.25rem 4rem;
  margin-top: 1.5rem;
}

.drogi__lista li {
  padding-top: 1.1rem;
  border-top: 1px solid var(--linia);
  color: var(--krem-cichy);
}

.drogi__nazwa {
  margin: 0 0 0.45rem;
  font-family: var(--kroj-naglowkow);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--krem);
}

.drogi__lista p {
  max-width: 30rem;
}

@media (min-width: 48rem) {
  .drogi__lista {
    grid-template-columns: 1fr 1fr;
  }
}

.legenda {
  display: grid;
  gap: 1.1rem;
  margin-top: 1.5rem;
}

.legenda div {
  display: grid;
  justify-items: start;
  gap: 0.35rem;
}

.rozdzial__uklad--srodek {
  align-items: center;
}

.lista {
  display: grid;
  gap: 0.55rem;
}

.lista li {
  position: relative;
  padding-left: 1.1rem;
}

.lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--rdza);
}

.zrzut img {
  width: 100%;
  height: auto;
  border: 1px solid var(--linia);
  border-radius: 0.9rem;
  background: #0b0b0c;
  box-shadow: 0 30px 70px -35px rgb(0 0 0 / 0.8);
}

.zrzut--szeroki {
  max-width: 76rem;
}

.zrzut--szeroki + .rozdzial__uklad {
  margin-top: 4rem;
}

.rozdzial__uklad + .zrzut--szeroki,
.rozdzial__uklad + .para-zrzutow {
  margin-top: 3.5rem;
}

.para-zrzutow {
  display: grid;
  gap: 1rem 1.25rem;
  align-items: start;
  max-width: 76rem;
}

.zrzut__obraz {
  width: 100%;
  height: auto;
  border: 1px solid var(--linia);
  border-radius: 0.9rem;
  background: #0b0b0c;
  box-shadow: 0 30px 70px -35px rgb(0 0 0 / 0.8);
}

.para-zrzutow .podpis {
  margin-top: 0;
}

@media (min-width: 60rem) {
  .para-zrzutow {
    grid-template-columns: 1fr 1fr;
  }

  .para-zrzutow .podpis {
    grid-column: 1 / -1;
  }
}

.ekran {
  padding: 1.35rem;
  border: 1px solid var(--ekran-linia);
  border-radius: 1rem;
  background: var(--ekran);
  color: var(--ekran-tekst);
  font-size: 0.875rem;
  line-height: 1.45;
}

.ekran__naglowek {
  margin-bottom: 1.1rem;
}

.ekran__tytul {
  font-size: 1rem;
  font-weight: 600;
}

.ekran__opis {
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  color: var(--ekran-cichy);
}

.ekran__wiersz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ekran-linia);
  font-weight: 500;
}

.chip {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--ekran-linia);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ekran-cichy);
  white-space: nowrap;
}

.chip--ok {
  border-color: transparent;
  background: rgb(61 187 124 / 0.15);
  color: var(--ok-tekst);
}

.chip--akcja {
  border-color: transparent;
  background: rgb(196 80 28 / 0.18);
  color: var(--rdza-tekst);
}

.postep {
  padding: 1rem;
  border: 1px solid var(--ekran-linia);
  border-radius: 0.75rem;
}

.postep__liczby {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
}

.postep__liczby span + span {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ekran-cichy);
  font-variant-numeric: tabular-nums;
}

.postep__pasek {
  height: 0.4rem;
  margin: 0.75rem 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  overflow: hidden;
}

.postep__pasek span {
  display: block;
  width: var(--ile, 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--gradient-akcji);
}

.postep__stan {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  font-size: 0.8125rem;
  color: var(--ekran-cichy);
}

.postep__stan b {
  color: var(--ekran-tekst);
}

.wiersze {
  margin-top: 0.75rem;
}

.wiersze li,
.rozpoznania li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--ekran-linia);
}

.wiersze li:last-child,
.rozpoznania li:last-child {
  border-bottom: 0;
}

.rozpoznania li {
  display: grid;
  grid-template-columns: 0.5rem minmax(0, 1fr);
  gap: 0.15rem 0.75rem;
  justify-content: start;
}

.rozpoznania .kropka {
  grid-row: span 2;
  align-self: start;
  margin-top: 0.45rem;
}

.rozpoznania b {
  font-weight: 600;
}

.rozpoznania span:not(.kropka) {
  font-size: 0.8125rem;
  color: var(--ekran-cichy);
}

.animacja {
  display: grid;
  gap: 0.6rem;
  width: 100%;
  max-width: 36rem;
}

.animacja > .powtorz {
  justify-self: end;
}

.ekran__naglowek--produkt {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem 1rem;
}

.ekran__stopka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ekran-linia);
}

.ekran__uwaga {
  margin-top: 0.9rem;
}

.produkt-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.65rem 0.2rem 0.4rem;
  border: 1px solid var(--ekran-linia);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--ekran-cichy);
  white-space: nowrap;
}

.produkt-chip svg {
  width: 0.5rem;
  height: 1.15rem;
}

.przycisk-ekranu {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 0.5rem;
  background: var(--gradient-akcji);
  color: var(--krem);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.przycisk-maly {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.2rem 0.7rem;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 0.45rem;
  font-size: 0.75rem;
  color: var(--ekran-cichy);
}

.przycisk-ekranu,
.przycisk-maly,
.kafelek {
  transition: transform 0.15s, filter 0.15s, box-shadow 0.15s, border-color 0.25s, color 0.25s, background-color 0.25s;
}

.wcisniety {
  transform: scale(0.94);
  filter: brightness(1.25);
  box-shadow: 0 0 0 3px rgb(232 149 106 / 0.35);
}

.miniatura {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.4rem;
  flex-shrink: 0;
}

.kody {
  min-height: calc(4 * 1.45em + 1.2rem);
  padding: 0.6rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 0.5rem;
  background: var(--ekran-pole);
  color: var(--ekran-tekst);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  white-space: pre-line;
}

.wiersze--import li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
}

.wiersz__kod {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ekran-cichy);
}

.wiersz__nazwa--cicha {
  color: var(--ekran-cichy);
}

.wybor li {
  display: grid;
  grid-template-columns: 1rem 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--ekran-linia);
}

.wybor__cena {
  font-variant-numeric: tabular-nums;
  color: var(--ekran-cichy);
}

.pole-wyboru {
  position: relative;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid rgb(255 255 255 / 0.3);
  border-radius: 0.25rem;
  transition: background-color 0.2s, border-color 0.2s;
}

.pole-wyboru.zaznaczone {
  border-color: var(--rdza);
  background: var(--rdza);
}

.pole-wyboru.zaznaczone::after {
  content: "";
  position: absolute;
  left: 0.27rem;
  top: 0.08rem;
  width: 0.28rem;
  height: 0.52rem;
  border: solid var(--krem);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.zestaw-wynik {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgb(196 80 28 / 0.45);
  border-radius: 0.75rem;
  background: rgb(196 80 28 / 0.06);
}

.zestaw-wynik__nazwa {
  font-weight: 600;
}

.zestaw-wynik__cena {
  margin-top: 0.3rem;
}

.zestaw-wynik__cena b {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.tekst-ok {
  margin-left: 0.4rem;
  font-size: 0.8125rem;
  color: var(--ok-tekst);
}

.podglad {
  padding: 1rem;
  border: 1px solid var(--ekran-linia);
  border-radius: 0.75rem;
}

.podglad__naglowek {
  font-weight: 600;
}

.podglad__sekcja {
  margin: 0.35rem 0 1rem;
}

.podglad__tekst {
  border-radius: 0.35rem;
}

.swiezy {
  animation: swiezy 1.8s ease-out;
}

@keyframes swiezy {
  from {
    background: rgb(61 187 124 / 0.22);
    box-shadow: 0 0 0 0.35rem rgb(61 187 124 / 0.22);
  }
  to {
    background: transparent;
    box-shadow: 0 0 0 0.35rem transparent;
  }
}

.podglad__edycja {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
}

.podglad__pole {
  width: 100%;
  min-height: calc(3 * 1.45em + 1rem);
  padding: 0.5rem 0.65rem;
  border: 1px solid rgb(232 149 106 / 0.55);
  border-radius: 0.5rem;
  background: var(--ekran-pole);
}

.podglad__lista {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--ekran-cichy);
}

.podglad__lista li {
  position: relative;
  padding-left: 0.9rem;
}

.podglad__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--ekran-cichy);
}

.podglad__lista b {
  color: var(--ekran-tekst);
  font-weight: 600;
}

.postep__koniec {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ok-tekst);
}

.wynik {
  font-size: 0.875rem;
  color: var(--ekran-cichy);
  white-space: nowrap;
}

.wynik b {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ekran-tekst);
  font-variant-numeric: tabular-nums;
}

.po-wyslaniu {
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.8rem;
  border-left: 3px solid var(--rdza);
  border-radius: 0.4rem;
  background: rgb(196 80 28 / 0.1);
  font-size: 0.8125rem;
}

.po-wyslaniu span {
  color: var(--rdza-tekst);
}

.kryteria li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem;
  padding: 0.55rem 0;
}

.kryteria li > span:nth-child(2) {
  font-size: 0.8125rem;
  color: var(--ekran-cichy);
  font-variant-numeric: tabular-nums;
}

.kryteria li b {
  color: var(--ekran-tekst);
}

.kryteria__pasek {
  grid-column: 1 / -1;
  height: 0.3rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  overflow: hidden;
}

.kryteria__pasek span,
.plik__pasek span {
  display: block;
  width: var(--ile, 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--gradient-akcji);
  transition: width 0.5s ease-out;
}

.oferta-wiersz {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}

.oferta-wiersz__nazwa {
  font-weight: 600;
}

.oferta-wiersz--nowa,
.wyroznienie {
  margin-top: 0.9rem;
  padding: 0.7rem;
  border: 1px solid rgb(61 187 124 / 0.35);
  border-radius: 0.75rem;
  background: rgb(61 187 124 / 0.06);
}

.kafelki {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}

.kafelek {
  min-width: 3.4rem;
  padding: 0.4rem 0.6rem;
  border: 1px dashed rgb(255 255 255 / 0.22);
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  text-align: center;
  color: var(--ekran-cichy);
}

.kafelek--ta {
  border-style: solid;
  border-color: transparent;
  background: rgb(255 255 255 / 0.08);
  color: var(--ekran-tekst);
  font-weight: 600;
}

.kafelek--jest {
  border-style: solid;
  border-color: #d99a2b;
  color: #f2b84b;
  font-weight: 600;
}

.kafelek.wskazany {
  border-color: var(--rdza-tekst);
  color: var(--rdza-tekst);
  box-shadow: 0 0 0 3px rgb(232 149 106 / 0.25);
  transform: translateY(-2px);
}

.dymek {
  position: relative;
  display: inline-block;
  margin: 0.7rem 0 0 6.2rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--ekran-linia);
  border-radius: 0.5rem;
  background: #26262a;
  font-size: 0.75rem;
}

.dymek::before {
  content: "";
  position: absolute;
  top: -0.35rem;
  left: 1.6rem;
  width: 0.6rem;
  height: 0.6rem;
  border-top: 1px solid var(--ekran-linia);
  border-left: 1px solid var(--ekran-linia);
  background: #26262a;
  transform: rotate(45deg);
}

.plik {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) auto;
  grid-template-areas:
    "ikona nazwa chip"
    "pasek pasek pasek";
  align-items: center;
  gap: 0.55rem 0.65rem;
  margin-bottom: 0.5rem;
  padding: 0.75rem;
  border: 1px dashed rgb(255 255 255 / 0.18);
  border-radius: 0.75rem;
}

.plik__ikona {
  grid-area: ikona;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: var(--ekran-cichy);
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.plik__nazwa {
  grid-area: nazwa;
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plik .chip {
  grid-area: chip;
}

.plik__pasek {
  grid-area: pasek;
  height: 0.3rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  overflow: hidden;
}

.plik__pasek span {
  transition-duration: 0.9s;
}

.bez-przejscia {
  transition: none !important;
}

.wyroznienie {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.zasady,
.dostep {
  margin-top: clamp(6rem, 14vh, 10rem);
  padding-top: 2.5rem;
  border-top: 1px solid var(--linia);
}

.zasady__lista {
  max-width: 64rem;
  margin-top: 2.5rem;
}

.zasady__granica {
  max-width: 44rem;
  margin-top: 3rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--rdza);
  color: var(--krem-cichy);
}

.dostep {
  position: relative;
  padding-bottom: 2rem;
}

.dostep::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -10%;
  top: 0;
  width: min(50rem, 90vw);
  height: 30rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(155 54 20 / 0.34), rgb(155 54 20 / 0));
  pointer-events: none;
  animation: poswiata-a 16s ease-in-out infinite reverse;
}

.dostep .sekcja__tytul {
  max-width: 16ch;
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.dostep__tekst {
  max-width: 36rem;
  margin-top: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--krem-cichy);
}

.stopka {
  display: grid;
  gap: 0.35rem;
  margin-top: 6rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linia);
  font-size: 0.8125rem;
  color: var(--krem-cichy);
}

.stopka a {
  text-underline-offset: 0.25em;
}

.stopka__prawne {
  max-width: 44rem;
}

.stopka__linki {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin-bottom: 0.75rem;
}

.rozdzial__wiecej {
  margin-top: 1.5rem;
}

.pytania {
  margin-top: clamp(6rem, 14vh, 10rem);
  padding-top: 2.5rem;
  border-top: 1px solid var(--linia);
}

.pytania__lista {
  display: grid;
  gap: 2rem 3.5rem;
  max-width: 64rem;
  margin-top: 2.5rem;
}

.pytania__lista h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--krem);
}

.pytania__lista p {
  margin-top: 0.5rem;
  color: var(--krem-cichy);
}

.okruszki {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  padding-top: 2.5rem;
  font-size: 0.8125rem;
  color: var(--krem-cichy);
}

.okruszki a {
  text-underline-offset: 0.25em;
}

.okruszki a:hover {
  color: var(--krem);
}

.artykul {
  max-width: 46rem;
  margin-top: 1.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--linia);
}

.artykul__tytul {
  font-family: var(--kroj-naglowkow);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.artykul__lead {
  margin-top: 1.25rem;
  font-size: clamp(1.125rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  color: var(--krem);
}

.artykul h2 {
  margin-top: 3rem;
  font-family: var(--kroj-naglowkow);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.artykul h3 {
  margin-top: 1.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}

.artykul p,
.artykul ul,
.artykul ol {
  margin-top: 1rem;
  color: var(--krem-cichy);
}

.artykul ul,
.artykul ol {
  padding-left: 1.25rem;
}

.artykul ul {
  list-style: disc;
}

.artykul ol {
  list-style: decimal;
}

.artykul li + li {
  margin-top: 0.4rem;
}

.artykul .powiazane__lista {
  padding-left: 0;
  list-style: none;
}

.artykul .powiazane__lista li + li {
  margin-top: 0;
}

.artykul li::marker {
  color: var(--rdza-tekst);
}

.artykul strong {
  font-weight: 600;
  color: var(--krem);
}

.artykul a:not(.przycisk) {
  font-weight: 500;
  color: var(--krem);
  text-decoration-color: rgb(232 149 106 / 0.55);
  text-underline-offset: 0.25em;
}

.artykul a:not(.przycisk):hover {
  color: var(--rdza-tekst);
}

.artykul__przyklad {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--rdza);
  background: var(--glina);
  color: var(--krem);
}

.artykul__cta {
  margin-top: 3.5rem;
  padding: 1.75rem;
  border: 1px solid var(--linia);
  border-radius: 1rem;
  background: var(--glina);
}

.artykul__cta .przycisk {
  margin-top: 1.25rem;
}

.powiazane {
  max-width: 46rem;
  margin-top: 4rem;
}

.powiazane__tytul {
  font-family: var(--kroj-naglowkow);
  font-size: 1.125rem;
  font-weight: 700;
}

.powiazane__lista {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.powiazane__lista a {
  display: block;
  height: 100%;
  padding: 1rem 1.25rem;
  border: 1px solid var(--linia);
  border-radius: 0.75rem;
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}

.powiazane__lista a:hover {
  border-color: rgb(232 149 106 / 0.45);
  background: rgb(248 227 204 / 0.03);
}

.powiazane__nazwa {
  display: block;
  font-weight: 600;
  color: var(--krem);
}

.powiazane__opis {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.875rem;
  color: var(--krem-cichy);
}

@media (min-width: 48rem) {
  .pytania__lista,
  .powiazane__lista {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 72rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 30rem);
    min-height: min(52rem, 100vh);
  }

  .rozdzial__kolumny {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 80rem) {
  .rozdzial__uklad {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }

  .rozdzial__uklad > .rozdzial__tekst {
    position: sticky;
    top: 2.5rem;
  }

  .rozdzial__uklad--zrzut {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    align-items: center;
  }
}

@media (max-width: 63.99rem) {
  html {
    scroll-padding-top: 5rem;
  }

  .pasek {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--linia);
    background: rgb(20 11 7 / 0.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .pasek__logo {
    --wysokosc-logo: 2.4rem;
    border-radius: 0.4rem;
  }

  .pasek__menu {
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--linia);
    border-radius: 0.6rem;
    background: transparent;
    color: var(--krem);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
  }

  .spis {
    top: 3.6rem;
    width: min(20rem, 88vw);
    border-top: 1px solid var(--linia);
    box-shadow: 30px 0 60px rgb(0 0 0 / 0.5);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 0.25s ease-out, visibility 0s 0.25s;
  }

  .spis-otwarty .spis {
    transform: none;
    visibility: visible;
    transition: transform 0.25s ease-out;
  }

  .spis__logo {
    display: none;
  }

  .tresc {
    margin-left: 0;
  }

  .hero {
    padding-top: 2.5rem;
  }

  .akt,
  .zasady,
  .dostep {
    scroll-margin-top: 4rem;
  }
}

@media (max-width: 40rem) {
  .demo__ekran {
    padding: 1rem;
  }

  .demo__etapy li:not(.jest) {
    display: none;
  }

  .ekran {
    padding: 1rem;
  }

  .wiersze--import li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .wiersz__kod {
    grid-column: 1 / -1;
  }

  .dymek {
    margin-left: 4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .logo__luk::before,
  .logo__kreska::before,
  .przycisk::before,
  .pisze::after,
  .hero::before,
  .hero::after,
  .dostep::before {
    animation: none;
  }

  [data-krok],
  .spis,
  .kryteria__pasek span,
  .plik__pasek span {
    transition: none;
  }

  .swiezy {
    animation: none;
  }
}