:root {
  --tlo: #0a0a0a;
  --atrament: #0b0b0b;
  --papier: #f4f1ea;
  --papier-2: rgba(244, 241, 234, .78);
  --linia: rgba(244, 241, 234, .24);
  --akcent: #ff8a5b;
  --akcent-ciemny: #1a0d06;
  --lalka-1: #8c1426;
  --lalka-2: #2a060d;
  --gutter: 18px;
  --maks: 480px;
  --gora-bezp: env(safe-area-inset-top, 0px);
  --dol-bezp: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overscroll-behavior: none; }
body {
  background: var(--tlo);
  color: var(--papier);
  font: 400 16px/1.45 var(--display);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
}
p, h1, h2, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.tor {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: var(--maks);
  margin-inline: auto;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: var(--tlo);
}
.tor::-webkit-scrollbar { display: none; }
.prowadnica { height: 400%; }
.krok { position: absolute; left: 0; width: 1px; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; pointer-events: none; }
.km { top: 0; }
.k0 { top: 100%; }
.k1 { top: 200%; }
.k2 { top: 300%; }
.k3 { top: 400%; }

.scena {
  --p: 0;
  --p1: clamp(0, var(--p), 1);
  --p2: clamp(0, calc(var(--p) - 1), 1);
  --p3: clamp(0, calc(var(--p) - 2), 1);
  position: sticky;
  top: 0;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  isolation: isolate;
}

.foto { position: absolute; left: 0; right: 0; top: 0; height: var(--foto-box, 62%); overflow: hidden; isolation: isolate; will-change: transform; }
.foto::before { content: ''; position: absolute; inset: 0; z-index: 1; background: url(img/ziarno.png) repeat; background-size: 160px; mix-blend-mode: overlay; opacity: .55; }
.foto::after { content: ''; position: absolute; z-index: 2; left: -2px; right: -2px; bottom: -3px; height: 44%; background: linear-gradient(180deg, rgba(10, 10, 10, 0), rgba(10, 10, 10, .55) 50%, var(--tlo) 90%); }
.foto img { position: absolute; z-index: 0; left: var(--foto-left, 0px); top: var(--foto-top, 0px); width: var(--foto-w, 100%); height: var(--foto-h, 100%); object-fit: cover; }
.foto { pointer-events: none; }
.foto { z-index: 0; }
.cien { z-index: 1; }
.foto img {
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 1.4s ease, transform 2.4s var(--ease);
}
.gotowe .foto img { opacity: 1; transform: none; }

.cien {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 8, 8, .14) 0%, rgba(8, 8, 8, 0) 14%);
}
.cien::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 8, 8, .25) 0%, rgba(8, 8, 8, .78) 34%, rgba(8, 8, 8, .9) 100%);
  opacity: var(--p1);
  will-change: opacity;
}

.gora {
  position: absolute;
  z-index: 5;
  top: calc(var(--gora-bezp) + 14px);
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  opacity: 0;
  transition: opacity 1s ease 1.1s;
}
.gotowe .gora { opacity: 1; }
.znaczek {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px 7px 10px;
  border: 1px solid rgba(244, 241, 234, .3);
  border-radius: 99px;
  background: rgba(8, 8, 8, .42);
  font: 500 .72rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kropka { width: 7px; height: 7px; border-radius: 50%; background: var(--akcent); box-shadow: 0 0 0 0 rgba(255, 138, 91, .7); animation: puls 2.4s ease-out infinite; }
@keyframes puls { 70% { box-shadow: 0 0 0 8px rgba(255, 138, 91, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 138, 91, 0); } }

.kroki { display: flex; align-items: center; gap: 2px; padding: 0 4px 0 12px; border: 1px solid rgba(244, 241, 234, .3); border-radius: 99px; background: rgba(8, 8, 8, .42); }
.licznik { font: 500 .72rem/1 var(--mono); letter-spacing: .08em; margin-right: 6px; color: var(--papier-2); }
.licznik b { color: var(--papier); font-weight: 500; }
.kroki button {
  width: 24px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.kroki button::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(244, 241, 234, .45);
  transition: transform .4s var(--ease), background .4s;
}
.kroki button[aria-current="step"]::before { background: var(--papier); transform: scale(1.6); }
.kroki button:focus-visible { outline: 2px solid var(--akcent); outline-offset: -4px; border-radius: 6px; }

.pas {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  top: calc(var(--foto-box, 62%) - var(--pas-h, 120px));
  padding: 0 var(--gutter) 2px;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(0, calc(var(--p1) * -40px), 0);
  opacity: clamp(0, 1 - var(--p1) * 2.4, 1);
  will-change: transform, opacity;
}
.napis {
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 62%;
  line-height: .8;
  letter-spacing: -.012em;
  font-size: calc((min(100vw, var(--maks)) - 2 * var(--gutter)) * .335);
  color: var(--papier);
  text-shadow: 0 2px 30px rgba(8, 8, 8, .35);
  pointer-events: none;
}
.napis-w {
  display: inline-block;
  transform: translate3d(-120vw, 0, 0) skewX(-8deg);
  transition: transform 1.25s var(--ease) .15s;
  will-change: transform;
}
.gotowe .napis-w { transform: none; }

.panele {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: calc(var(--gora-bezp) + 64px);
  bottom: calc(var(--dol-bezp) + 10px);
}
.panel {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  max-height: 100%;
  will-change: transform, opacity;
}
.p1 {
  bottom: 34px;
  transform: translate3d(calc(var(--p1) * 40%), 0, 0);
  opacity: clamp(0, 1 - var(--p1) * 2.2, 1);
}
.p2 {
  transform: translate3d(calc((1 - var(--p1)) * -40% + var(--p2) * 40%), 0, 0);
  opacity: clamp(0, min((var(--p1) - .42) / .58, 1 - var(--p2) * 2.2), 1);
}
.p3 {
  transform: translate3d(calc((1 - var(--p2)) * -40% + var(--p3) * 40%), 0, 0);
  opacity: clamp(0, min((var(--p2) - .42) / .58, 1 - var(--p3) * 2.2), 1);
}
.scena.petla { --p1: calc(1 - var(--p3)); }
.petla .p1 {
  transform: translate3d(calc((1 - var(--p3)) * -40%), 0, 0);
  opacity: clamp(0, (var(--p3) - .42) / .58, 1);
}

.etykieta {
  font: 500 .72rem/1.2 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--akcent);
  margin-bottom: 10px;
}
.tytul {
  font: 800 2.05rem/.95 var(--display);
  font-stretch: 80%;
  letter-spacing: -.01em;
  margin-bottom: 14px;
}

.p1 .wjazd {
  padding-left: 14px;
  border-left: 2px solid var(--akcent);
  transform: translate3d(120vw, 0, 0);
  transition: transform 1.25s var(--ease) .55s;
}
.gotowe .p1 .wjazd { transform: none; }
.lead { font-size: 1.12rem; line-height: 1.42; font-weight: 450; text-wrap: pretty; text-shadow: 0 1px 14px rgba(8, 8, 8, .6); }
.lead strong { display: block; font: 850 1.9rem/1 var(--display); font-stretch: 78%; letter-spacing: -.005em; margin-bottom: 8px; }
.lead em { font-style: normal; font-weight: 700; }
.odliczanie {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font: 500 .72rem/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--papier-2);
}
.odliczanie-ile:not(:empty) { padding: 4px 8px; border-radius: 99px; background: var(--akcent); color: var(--akcent-ciemny); letter-spacing: .06em; }
.wygrana .lead strong { color: var(--akcent); }

.tytul-tagi { font-size: 1.5rem; line-height: 1; margin-bottom: 10px; }
.dorobek { margin-bottom: 16px; font-size: .9rem; line-height: 1.42; color: var(--papier-2); text-wrap: pretty; }
.dorobek b { color: var(--papier); font-weight: 650; }

.kafle { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 8px; }
.kafle li { grid-column: span 2; min-width: 0; }
.kafle li.szeroki { grid-column: span 3; }
.kafle .kafel { width: 100%; }
.szeroki .kafel { aspect-ratio: 2 / 1; }
.kafel-audio .kafel-okl { object-position: 50% 22%; }
.kafel-audio { box-shadow: 0 0 0 1px rgba(244, 241, 234, .3), 0 12px 30px -12px rgba(0, 0, 0, .95); }
.kafel-audio .graj { animation: none; background: var(--papier); }
.kafel-audio .graj svg { fill: var(--tlo); }
.kafle li { --k: clamp(0, calc((var(--p1) - .45 - var(--i) * .06) / .3), 1); transform: translate3d(0, calc((1 - var(--k)) * 26px), 0); opacity: var(--k); }
.kafle li:nth-child(1) { --i: 0; }
.kafle li:nth-child(2) { --i: 1; }
.kafle li:nth-child(3) { --i: 2; }
.kafle li:nth-child(4) { --i: 3; }
.kafle li:nth-child(5) { --i: 4; }
.kafle li:nth-child(6) { --i: 5; }
.kafel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1;
  padding: 10px;
  overflow: hidden;
  border-radius: 3px;
  text-decoration: none;
}
.kafel-film, .kafel-okladka {
  border: 0;
  padding: 8px;
  color: var(--papier);
  background: #120709;
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .9);
  cursor: pointer;
  text-align: left;
  transition: transform .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.kafel-film:active, .kafel-okladka:active { transform: scale(.96); }
.kafel-film:focus-visible, .kafel-okladka:focus-visible { outline: 2px solid var(--papier); outline-offset: 2px; }
.kafel-okl, .kafel-wideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kafel-wideo { opacity: 0; transition: opacity .6s ease; }
.kafel-wideo.gra { opacity: 1; }
.kafel-film::after, .kafel-okladka::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 8, 8, .45) 0%, rgba(8, 8, 8, 0) 30%, rgba(8, 8, 8, 0) 52%, rgba(8, 8, 8, .82) 100%);
}
.kafel-film > span, .kafel-okladka > span { position: relative; z-index: 1; }
.kafel-okladka::after { background: linear-gradient(180deg, rgba(8, 8, 8, 0) 55%, rgba(8, 8, 8, .85) 100%); }
.kafel-okladka { justify-content: flex-end; }
.kafel-film { box-shadow: 0 0 0 1px rgba(255, 138, 91, .55), 0 12px 30px -12px rgba(140, 20, 38, .9); }
.kafel-gora { display: flex; }
.kafel-tag { font: 500 .66rem/1.1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--papier); }
.kafel-dol { display: flex; align-items: center; gap: 5px; font: 500 .7rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.kafel-dol-film { font: 800 .95rem/1 var(--display); font-stretch: 80%; letter-spacing: 0; text-transform: uppercase; gap: 7px; }
.graj { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--akcent); flex: none; }
.graj svg { width: 12px; height: 12px; fill: var(--akcent-ciemny); margin-left: 2px; }
.kafel-film .graj { animation: puls-graj 2.6s ease-out infinite; }
@keyframes puls-graj { 0% { box-shadow: 0 0 0 0 rgba(255, 138, 91, .6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(255, 138, 91, 0); } }
.ikona { width: 14px; height: 14px; fill: currentColor; flex: none; }
.kafel-wkrotce {
  border: 1px solid var(--linia);
  background: rgba(244, 241, 234, .05);
  color: rgba(244, 241, 234, .72);
}
.kafel-nr { font: 300 1.5rem/1 var(--display); font-stretch: 62%; }

.press-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 2px 4px;
  border-top: 1px solid var(--linia);
  text-decoration: none;
  color: var(--papier-2);
}
.press-link-t { font: 700 .95rem/1 var(--display); font-stretch: 85%; color: var(--papier); }
.press-link-o { flex: 1; font: 500 .68rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.press-link:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }
.press-link:active { opacity: .7; }
.strzalka { width: 20px; height: 20px; flex: none; stroke: currentColor; stroke-width: 2; fill: none; }
.etykieta-kafle { margin-bottom: 8px; }
.podpis { display: grid; gap: 1px; margin-top: 6px; font: 500 .64rem/1.25 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: rgba(244, 241, 234, .7); }
.podpis b { font: 700 .8rem/1.15 var(--display); font-stretch: 85%; letter-spacing: 0; text-transform: none; color: var(--papier); }
.kafel-okladka { box-shadow: 0 0 0 1px rgba(244, 241, 234, .22), 0 14px 30px -14px rgba(0, 0, 0, .95); }
@media (max-width: 380px) { .licznik { display: none; } .kroki { padding-left: 4px; } }

.ramka {
  padding: 18px 16px 16px;
  border: 1px solid var(--linia);
  border-radius: 3px;
  background: rgba(10, 13, 22, .62);
}
.opis { color: var(--papier-2); font-size: .95rem; margin-bottom: 16px; }
.pole { display: flex; gap: 6px; }
.pole input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 14px;
  border: 1px solid rgba(244, 241, 234, .38);
  border-radius: 3px;
  background: rgba(8, 8, 8, .55);
  font-size: 16px;
}
.pole input::placeholder { color: rgba(244, 241, 234, .55); }
.pole input:focus-visible { outline: 2px solid var(--akcent); outline-offset: 1px; border-color: transparent; }
.wyslij {
  height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: 3px;
  background: var(--akcent);
  color: var(--akcent-ciemny);
  font-weight: 750;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .3s var(--ease), background .3s;
}
.wyslij:active { transform: scale(.96); }
.wyslij:focus-visible { outline: 2px solid var(--papier); outline-offset: 2px; }
.wyslij[disabled] { opacity: .6; }
.zgoda { margin-top: 10px; font-size: .72rem; line-height: 1.4; color: rgba(244, 241, 234, .68); }
.komunikat { min-height: 1.3em; margin-top: 8px; font-size: .88rem; font-weight: 600; }
.komunikat.blad { color: #ffb199; }
.zapis.wyslane .pole { opacity: .45; pointer-events: none; }
.miodek { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.follow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.follow-t { font: 500 .7rem/1.25 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--akcent); }
.sociale { display: flex; gap: 8px; }
.social {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(244, 241, 234, .38); background: rgba(8, 8, 8, .45); color: var(--papier);
  transition: transform .3s var(--ease), background .3s, color .3s;
}
.social svg { width: 21px; height: 21px; fill: currentColor; }
.social svg.obrys { fill: none; stroke: currentColor; stroke-width: 1.8; }
.social:active { transform: scale(.92); background: var(--papier); color: var(--atrament); }
.social:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
.reprezentacja { margin-top: 18px; }
.reprezentacja .etykieta { margin-bottom: 4px; }
.p3 .reprezentacja { margin-top: 0; }
.p3 .ramka { margin-top: 18px; }
.osoba { font: 800 1.35rem/1.15 var(--display); font-stretch: 85%; }
.linki { display: flex; flex-wrap: wrap; column-gap: 16px; }
.mail, .tel {
  font-size: 1rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--akcent);
  padding: 8px 0;
  display: inline-block;
}
.mail:focus-visible, .tel:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }
.akcje { display: flex; gap: 8px; margin-top: 8px; }
.akcja {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border: 1px solid rgba(244, 241, 234, .38);
  border-radius: 99px;
  background: rgba(8, 8, 8, .4);
  font-size: .9rem;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: transform .3s var(--ease), background .3s;
}
.akcja svg { width: 18px; height: 18px; fill: currentColor; }
.akcja:active { transform: scale(.96); background: rgba(244, 241, 234, .12); }
.akcja:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }

.film {
  width: 100%;
  max-width: var(--maks);
  height: 100%;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: #000;
  color: var(--papier);
  overflow: hidden;
}
.film[open] { display: flex; flex-direction: column; animation: film-wejscie .5s var(--ease); }
.film::backdrop { background: rgba(0, 0, 0, .9); }
@keyframes film-wejscie { from { opacity: 0; transform: scale(.96); } }
.film video { flex: 1; min-height: 0; width: 100%; object-fit: cover; background: #000; }
.film-pasek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px var(--gutter) calc(var(--dol-bezp) + 14px);
  font-size: .85rem;
}
.film-spotify {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 44px;
  padding: 0 16px;
  border-radius: 99px;
  background: var(--akcent);
  color: var(--akcent-ciemny);
  font-weight: 750;
  text-decoration: none;
}
.film-spotify .ikona { width: 18px; height: 18px; }
.film-zamknij {
  position: absolute;
  top: calc(var(--gora-bezp) + 12px);
  right: 12px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 8, 8, .6);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.film-zamknij svg { width: 20px; height: 20px; stroke: var(--papier); stroke-width: 2; fill: none; }
.film-zamknij:focus-visible, .film-spotify:focus-visible { outline: 2px solid var(--papier); outline-offset: 2px; }

.sluchaj { background: linear-gradient(180deg, #1a1a1a, #070707 46%); }
.sluchaj-gora {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: calc(var(--gora-bezp) + 18px) 64px 14px var(--gutter);
}
.sluchaj-okl {
  flex: none;
  width: 108px;
  height: 108px;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 3px;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .95), 0 0 0 1px rgba(244, 241, 234, .1);
}
.sluchaj-info { min-width: 0; }
.sluchaj-info .etykieta { margin-bottom: 6px; }
.sluchaj-t { margin: 0 0 4px; font: 850 1.75rem/1 var(--display); font-stretch: 80%; }
.sluchaj-o { margin: 0; color: var(--papier-2); font-size: .88rem; }
.sluchaj-o b { color: var(--papier); font-weight: 700; }
.sluchaj-lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--gutter) 10px;
  border-top: 1px solid var(--linia);
  -webkit-overflow-scrolling: touch;
}
.sluchaj-meta { margin: 10px 0 2px; font: 500 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--papier-2); }
.utwory { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.utwor {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid rgba(244, 241, 234, .07);
  background: none;
  color: var(--papier);
  font: 500 .95rem/1.2 var(--display);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.utwor:active { opacity: .6; }
.utwor:focus-visible { outline: 2px solid var(--akcent); outline-offset: -2px; border-radius: 3px; }
.utwor-nr { font: 500 .72rem/1 var(--mono); color: var(--papier-2); text-align: right; }
.utwor-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.utwor-d { font: 500 .72rem/1 var(--mono); color: var(--papier-2); }
.utwor[aria-current="true"] { color: var(--akcent); }
.utwor[aria-current="true"] .utwor-nr { font-size: 0; }
.utwor[aria-current="true"] .utwor-nr::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background: linear-gradient(var(--akcent), var(--akcent)) 0 100% / 3px 40% no-repeat,
              linear-gradient(var(--akcent), var(--akcent)) 50% 100% / 3px 90% no-repeat,
              linear-gradient(var(--akcent), var(--akcent)) 100% 100% / 3px 60% no-repeat;
}
.sluchaj.gra .utwor[aria-current="true"] .utwor-nr::before { animation: slupki .9s ease-in-out infinite alternate; }
@keyframes slupki {
  to { background-size: 3px 85%, 3px 35%, 3px 100%; }
}
.odtwarzacz {
  flex: none;
  padding: 12px var(--gutter) calc(var(--dol-bezp) + 12px);
  background: #0d0d0d;
  border-top: 1px solid var(--linia);
}
.odtw-t { margin: 0 0 4px; font: 700 .98rem/1.2 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.odtw-pasek input {
  --pos: 0%;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.odtw-pasek input::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--papier) var(--pos), rgba(244, 241, 234, .22) var(--pos)); }
.odtw-pasek input::-moz-range-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--papier) var(--pos), rgba(244, 241, 234, .22) var(--pos)); }
.odtw-pasek input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5.5px; border-radius: 50%; background: var(--papier); border: 0; }
.odtw-pasek input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--papier); border: 0; }
.odtw-pasek input:focus-visible { outline: 2px solid var(--akcent); outline-offset: 4px; }
.odtw-czas { display: flex; justify-content: space-between; margin-top: 2px; font: 500 .68rem/1 var(--mono); letter-spacing: .06em; color: var(--papier-2); }
.odtw-przyciski { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 6px; }
.odtw-graj, .odtw-skok {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.odtw-graj { width: 58px; height: 58px; background: var(--akcent); }
.odtw-graj svg { width: 24px; height: 24px; fill: var(--akcent-ciemny); }
.odtw-skok { width: 44px; height: 44px; background: none; }
.odtw-skok svg { width: 22px; height: 22px; fill: var(--papier); }
.odtw-graj .ik-pauza, .sluchaj.pauza .odtw-graj .ik-graj { display: inline; }
.odtw-graj .ik-graj, .sluchaj.pauza .odtw-graj .ik-pauza { display: none; }
.odtw-graj:active, .odtw-skok:active { transform: scale(.92); }
.odtw-graj:focus-visible, .odtw-skok:focus-visible { outline: 2px solid var(--papier); outline-offset: 3px; }
@media (max-height: 640px) {
  .sluchaj-okl { width: 84px; height: 84px; }
  .sluchaj-t { font-size: 1.5rem; }
  .odtw-graj { width: 52px; height: 52px; }
}

.foto { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(1.045); }
.stopka { margin-top: 18px; font: 400 .7rem/1.3 var(--mono); color: rgba(244, 241, 234, .62); }

.wskazowka {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: calc(var(--dol-bezp) + 6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font: 500 .7rem/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--papier-2);
  opacity: calc(1 - var(--p) * 3);
  pointer-events: none;
}
.wskazowka i { display: block; width: 1px; height: 12px; background: linear-gradient(var(--papier), transparent); animation: kapie 1.8s var(--ease) infinite; transform-origin: top; }
.wskazowka span { opacity: 0; transition: opacity .8s ease 1.9s; }
.gotowe .wskazowka span { opacity: 1; }
.ruszyl .wskazowka { visibility: hidden; }
@keyframes kapie { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

@media (max-height: 640px) {
  .lead { font-size: 1rem; }
  .tytul { font-size: 1.7rem; margin-bottom: 10px; }
  .lead strong { font-size: 1.6rem; }
  .tytul-tagi { font-size: 1.3rem; }
  .dorobek { font-size: .82rem; line-height: 1.36; margin-bottom: 12px; }
  .kafle { gap: 6px; }
  .kafel { padding: 7px; }
  .ramka { padding: 14px 14px 10px; }
  .p3 .ramka { margin-top: 12px; }
  .follow { margin-top: 10px; }
  .social { width: 42px; height: 42px; }
  .osoba { font-size: 1.2rem; }
  .mail, .tel { padding: 5px 0; }
  .akcja { height: 42px; }
  .stopka { margin-top: 10px; }
  .p1 { bottom: 30px; }
}

.poza-telefonem { display: none; }
.bok { display: none; }
@media (min-width: 900px) {
  body { background: radial-gradient(80% 60% at 50% 40%, #1c1c1c, #050505); }
  .tor { box-shadow: 0 0 0 1px rgba(244, 241, 234, .08), 0 40px 120px -20px rgba(0, 0, 0, .8); }
  .poza-telefonem { display: block; position: fixed; left: 40px; bottom: 36px; font: 500 .72rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 241, 234, .55); }
}

@media (min-width: 1100px) and (min-height: 560px) {
  .poza-telefonem { display: none !important; }
  .bok {
    display: block;
    position: fixed;
    top: 50%;
    width: min(290px, calc(50vw - var(--maks) / 2 - 90px));
    transform: translateY(-50%);
    color: var(--papier);
    opacity: 0;
    transition: opacity 1s ease 1.4s;
  }
  .gotowe .bok { opacity: 1; }
  .bok-lewy { right: calc(50% + var(--maks) / 2 + 64px); }
  .bok-prawy { left: calc(50% + var(--maks) / 2 + 64px); }
  .bok .etykieta { margin-bottom: 12px; }
  .bok-odstep { margin-top: 34px; }
  .bok-press {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px 12px;
    padding: 16px 0;
    border-top: 1px solid var(--linia);
    border-bottom: 1px solid var(--linia);
    color: var(--papier);
    text-decoration: none;
  }
  .bok-press-t { font: 800 1.6rem/1 var(--display); font-stretch: 80%; }
  .bok-press-o { grid-column: 1; font: 500 .68rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--papier-2); }
  .bok-press .strzalka { grid-column: 2; grid-row: 1 / span 2; transition: transform .3s var(--ease); }
  .bok-press:hover .strzalka { transform: translateX(4px); }
  .bok-osoba { margin: 0 0 6px; font: 800 1.3rem/1.15 var(--display); font-stretch: 85%; }
  .bok-osoba span { font-weight: 500; color: var(--papier-2); }
  .bok-linki { display: grid; gap: 6px; margin: 0; }
  .bok-linki a { color: var(--papier); text-decoration: underline; text-decoration-color: var(--akcent); text-underline-offset: 4px; width: fit-content; }
  .bok a:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }
  .bok-qr { width: 150px; padding: 10px; border-radius: 6px; background: var(--papier); }
  .bok-qr img { display: block; width: 100%; height: auto; }
  .bok-qr-t { margin: 18px 0 6px; font: 800 1.3rem/1.1 var(--display); font-stretch: 85%; }
  .bok-qr-o { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--papier-2); }
  .bok kbd { display: inline-block; min-width: 22px; padding: 1px 5px; border: 1px solid var(--linia); border-radius: 4px; font: 500 .75rem/1.3 var(--mono); text-align: center; color: var(--papier); }
}

@media (prefers-reduced-motion: reduce) {
  .napis-w, .p1 .wjazd, .foto img { transform: none !important; transition: opacity .6s ease; }
  .p1 { transform: none; opacity: calc(1 - var(--p1) * 2); }
  .p2 { transform: none; opacity: calc(var(--p1) * 2 - 1 - var(--p2) * 2); }
  .p3 { transform: none; opacity: calc(var(--p2) * 2 - 1 - var(--p3) * 2); }
  .petla .p1 { transform: none; opacity: calc(var(--p3) * 2 - 1); }
  .kafle li { transform: none; }
  .kropka, .wskazowka i { animation: none; }
}