/* bitcoinkasynopolska.com — „Kartoteka"
 *
 * Biała kartoteka z czerwoną nitką: strona ma wyglądać jak segregator
 * otwarty na biurku, a nie jak kasyno. Stąd jasne tło, wyraźna siatka
 * kresek, wąski czerwony akcent na krawędziach i cyfry złożone krojem o
 * stałej szerokości — kolumna liczb musi się zgadzać pionowo, bo to w
 * niej siedzi cała treść tej strony.
 *
 * Zero JavaScriptu. Ruch tylko tam, gdzie ma sens: bębny na pierwszym
 * ekranie. Przy `prefers-reduced-motion` stają.
 */

:root {
  --tlo:      #ffffff;
  /* Kula przy przełączniku języka. Rysowana w adresie, a nie plikiem: jeden
     znak nie jest wart osobnego żądania. */
  --kula: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm0 0c-3 3-3 15 0 18m0-18c3 3 3 15 0 18M3.5 9h17m-17 6h17'/%3E%3C/svg%3E");
  --papier:   #f3f4f6;
  --papier2:  #e9ebef;
  --tusz:     #14161a;
  --tusz2:    #4a5058;
  --tusz3:    #767d87;
  --kreska:   #d8dbe1;
  --kreska2:  #eceef2;
  --czerwien: #cf1229;
  --czerw-t:  #fdeaec;
  --granat:   #16233c;
  --zielen:   #0f7a52;
  --ziel-t:   #e6f4ee;
  --bursztyn: #a86a00;
  --burs-t:   #fdf2dc;

  --szer:  1320px;
  --luz:   28px;
  --r:     3px;
}

* { box-sizing: border-box }

html { -webkit-text-size-adjust: 100% }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tusz);
  font: 400 19px/1.66 Literata, Georgia, "Times New Roman", serif;
  font-synthesis-weight: none;
}

h1, h2, h3, h4, .wy-nad, .wy-dzial-n, .wy-poz b, .wy-liczby b, .wy-znak b {
  font-family: "Fjalla One", "Arial Narrow", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: .005em;
}

h1, h2, h3 { text-wrap: balance; margin: 0 }

h1 { font-size: clamp(34px, 5.4vw, 56px); line-height: 1.08 }
h2 { font-size: clamp(26px, 3.2vw, 35px); line-height: 1.14 }
h3 { font-size: 23px; line-height: 1.22; margin: 34px 0 10px }

p { margin: 0 0 18px }
a { color: var(--czerwien); text-underline-offset: 3px; text-decoration-thickness: 1px }
a:hover { color: #9c0c1e }

:focus-visible { outline: 3px solid var(--czerwien); outline-offset: 2px }

img { max-width: 100%; height: auto }

.wy-skok {
  position: absolute; left: -9999px; top: 0; z-index: 30;
  background: var(--granat); color: #fff; padding: 12px 18px; text-decoration: none;
}
.wy-skok:focus { left: 8px; top: 8px }

.wy-srodek { max-width: var(--szer); margin: 0 auto; padding: 0 16px }

.wy-plyta {
  background: var(--tlo);
  border: 1px solid var(--kreska);
  border-radius: var(--r);
}

/* ------------------------------------------------------------ szyld --- */

.wy-szyld { padding: 14px 0 0; background: var(--papier) }
.wy-szyld .wy-plyta { border-top: 3px solid var(--czerwien) }

.wy-szyld-g {
  display: flex; flex-wrap: wrap; gap: 14px 26px;
  align-items: center; justify-content: space-between;
  padding: 16px var(--luz);
}

.wy-znak { text-decoration: none; color: inherit; display: block }
.wy-znak b { display: block; font-size: 27px; line-height: 1.05; letter-spacing: .01em }
.wy-znak i { font-style: normal; color: var(--czerwien) }
.wy-znak u { text-decoration: none; color: var(--tusz3) }
.wy-znak span {
  display: block; margin-top: 3px; font-size: 12px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tusz3);
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.wy-licznik { display: flex; gap: 22px; margin: 0; flex-wrap: wrap }
.wy-licznik span {
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--tusz3);
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.wy-licznik b { display: block; font-size: 21px; color: var(--tusz); letter-spacing: 0 }

/* Przełącznik języka. Stoi w liczniku, bo tam jest jedyne miejsce w szyldzie,
   które nie przesuwa się przy dłuższym menu, i działa w obie strony: z polskiej
   połowy prowadzi na angielską, z angielskiej wraca na polską. */
.wy-jezyk {
  align-self: center; margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border: 1px solid var(--kreska2); border-radius: 3px;
  text-decoration: none; color: var(--tusz2); background: #fff;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.wy-jezyk::before {
  content: ""; width: 13px; height: 13px; flex: none;
  background: currentColor;
  -webkit-mask: var(--kula) center/contain no-repeat;
  mask: var(--kula) center/contain no-repeat;
}
.wy-jezyk:hover { color: var(--czerwien); border-color: var(--czerwien) }
.wy-jezyk:focus-visible { outline: 2px solid var(--czerwien); outline-offset: 2px }


.wy-menu {
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid var(--kreska2);
  padding: 0 calc(var(--luz) - 14px);
  overflow-x: auto; scrollbar-width: none;
}
.wy-menu::-webkit-scrollbar { display: none }
.wy-menu a {
  padding: 13px 14px; text-decoration: none; color: var(--tusz2); white-space: nowrap;
  font-family: "Fjalla One", Arial, sans-serif; font-size: 17px;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.wy-menu a:hover { color: var(--czerwien) }
.wy-menu a.tu { color: var(--tusz); border-bottom-color: var(--czerwien) }

/* ------------------------------------------------------------ wstęp --- */

.wy-wstep { margin-top: 14px; padding: 32px var(--luz) 30px }
.wy-wstep-2 {
  display: grid; gap: 30px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
}

.wy-okruchy {
  font-size: 13px; color: var(--tusz3); margin: 0 0 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.wy-okruchy a { color: var(--tusz3) }

.wy-nad {
  margin: 0 0 12px; font-size: 13px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--czerwien);
}
.wy-nad::before {
  content: ""; display: inline-block; width: 26px; height: 3px; background: var(--czerwien);
  vertical-align: .28em; margin-right: 10px;
}

.wy-lid { margin: 16px 0 0; font-size: 21px; line-height: 1.56; color: var(--tusz2); max-width: 62ch }

.wy-drobne { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px }
.wy-drobne span {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12.5px;
  background: var(--papier); border: 1px solid var(--kreska); border-radius: 999px;
  padding: 5px 13px; color: var(--tusz2);
}

.wy-guziki { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 24px }

.wy-g, .wy-w {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "Fjalla One", Arial, sans-serif; font-size: 17px; letter-spacing: .02em;
  text-decoration: none; border-radius: 999px; padding: 12px 24px; border: 1.5px solid transparent;
}
.wy-g-1 { background: var(--granat); color: #fff }
.wy-g-1:hover { background: #0d1728; color: #fff }
.wy-g-2 { border-color: var(--kreska); color: var(--tusz) }
.wy-g-2:hover { border-color: var(--tusz3); color: var(--tusz) }

.wy-w { background: var(--czerwien); color: #fff }
.wy-w:hover { background: #a90e21; color: #fff }
.wy-w i { width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: .85; flex: none }
.wy-w-a { padding: 11px 22px; font-size: 16px }

/* ------------------------------------------------------------ układ --- */

.wy-uklad {
  display: grid; gap: 26px; margin: 26px 0 40px;
  grid-template-columns: minmax(260px, 310px) minmax(0, 1fr);
}
.wy-uklad-1 { grid-template-columns: minmax(0, 1fr) }

.wy-tresc {
  background: var(--tlo); border: 1px solid var(--kreska); border-radius: var(--r);
  padding: 8px var(--luz) 32px;
  min-width: 0;
}
.wy-tresc > section { padding: 26px 0; border-bottom: 1px solid var(--kreska2) }
.wy-tresc > section:last-of-type { border-bottom: 0 }
.wy-tresc > section > p, .wy-tresc > section > ul li, .wy-tresc > section > ol li { max-width: 78ch }

.wy-dzial-g { margin: 0 0 20px; padding-left: 52px; position: relative }
.wy-dzial-n {
  position: absolute; left: 0; top: 2px;
  font-size: 15px; color: var(--czerwien); letter-spacing: .04em;
  border: 1.5px solid var(--czerw-t); background: var(--czerw-t);
  border-radius: 3px; padding: 3px 7px;
}
.wy-dzial-s {
  display: block; margin-top: 7px; font-size: 14px; color: var(--tusz3);
  letter-spacing: .04em; text-transform: uppercase;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.wy-cienki { font-size: 16px; color: var(--tusz3); line-height: 1.6 }

.wy-uwaga {
  border-left: 4px solid var(--czerwien); background: var(--czerw-t);
  padding: 16px 20px; margin: 22px 0; border-radius: 0 var(--r) var(--r) 0;
  font-size: 18px;
}
.wy-uwaga p:last-child { margin-bottom: 0 }

.wy-tresc ul, .wy-tresc ol { padding-left: 22px; margin: 0 0 20px }
.wy-tresc li { margin-bottom: 9px }
.wy-tresc ul { list-style: none; padding-left: 0 }
.wy-tresc ul > li { position: relative; padding-left: 26px }
.wy-tresc ul > li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 9px; height: 2px; background: var(--czerwien);
}

/* ------------------------------------------------------------- spis --- */

.wy-spis {
  border: 1px solid var(--kreska); border-left: 3px solid var(--granat);
  border-radius: 0 var(--r) var(--r) 0; padding: 18px 22px; margin: 22px 0 6px;
  background: var(--papier);
}
.wy-spis b {
  display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tusz3); margin-bottom: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.wy-spis ol {
  margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 30px;
  counter-reset: sp; font-size: 16.5px;
}
.wy-spis li { counter-increment: sp; margin-bottom: 7px; break-inside: avoid }
.wy-spis li::before {
  content: counter(sp, decimal-leading-zero) " "; color: var(--tusz3);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px;
}
.wy-spis a { color: var(--tusz) }
.wy-spis a:hover { color: var(--czerwien) }

/* ---------------------------------------------------------- liczniki --- */

.wy-liczby {
  display: grid; gap: 1px; background: var(--kreska); border: 1px solid var(--kreska);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 22px 0; border-radius: var(--r); overflow: hidden;
}
.wy-liczby > div { background: var(--tlo); padding: 16px 18px }
.wy-liczby b { display: block; font-size: 33px; line-height: 1.05 }
.wy-liczby span { display: block; font-size: 14px; color: var(--tusz2); margin-top: 3px }
.wy-liczby i { display: block; font-size: 13px; color: var(--tusz3); font-style: normal; margin-top: 4px }

/* ------------------------------------------------------------ wpisy --- */

.wy-rejestr { display: grid; gap: 14px; margin: 22px 0 }

.wy-wpis {
  display: grid; gap: 18px; align-items: start;
  grid-template-columns: 58px 170px minmax(0, 1fr);
  border: 1px solid var(--kreska); border-radius: var(--r);
  padding: 18px 20px; background: var(--tlo);
}
.wy-wpis-1 { border-color: var(--czerwien); box-shadow: inset 4px 0 0 var(--czerwien) }

.wy-poz { text-align: center }
.wy-poz i { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--tusz3); font-style: normal }
.wy-poz b { display: block; font-size: 30px; line-height: 1 }
.wy-poz u {
  display: block; text-decoration: none; margin-top: 6px; font-size: 16px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  background: var(--papier); border-radius: 3px; padding: 3px 0; color: var(--tusz);
}
.wy-poz em { font-style: normal; color: var(--tusz3); font-size: 12px }

.wy-tabliczka, .wy-mala {
  display: flex; align-items: center; justify-content: center;
  background: var(--papier); border: 1px solid var(--kreska2); border-radius: var(--r);
}
.wy-tabliczka { height: 76px; padding: 10px 14px }
.wy-tabliczka img { max-height: 100%; object-fit: contain }
.wy-tabliczka.jasne, .wy-mala.jasne { background: var(--granat); border-color: var(--granat) }
.wy-tabliczka.pusta, .wy-mala.pusta {
  font-family: "Fjalla One", Arial, sans-serif; color: var(--tusz3); letter-spacing: .08em;
}
.wy-tabliczka.pusta { font-size: 26px }

.wy-wpis-c { min-width: 0 }
.wy-wpis-c h3 { margin: 0 0 8px; font-size: 25px }
.wy-wpis-c h3 a { color: var(--tusz); text-decoration: none }
.wy-wpis-c h3 a:hover { color: var(--czerwien) }
.wy-wpis-c h3 span {
  display: block; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px; color: var(--tusz3); letter-spacing: 0; margin-top: 4px;
}
.wy-zdanie { margin: 0 0 12px; font-size: 17.5px; color: var(--tusz2); line-height: 1.55 }

.wy-znaczki { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px }
.wy-znaczki span {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px;
  border: 1px solid var(--kreska); border-radius: 999px; padding: 3px 11px; color: var(--tusz2);
}
.wy-znaczki .jest { background: var(--ziel-t); border-color: #b9ddcd; color: var(--zielen) }

.wy-pola { display: grid; gap: 8px 16px; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); margin-bottom: 16px }
.wy-pole i {
  display: block; font-style: normal; font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tusz3); margin-bottom: 4px;
}
.wy-pole s { display: block; height: 5px; background: var(--papier2); border-radius: 3px; text-decoration: none }
.wy-pole em { display: block; height: 100%; background: var(--tusz3); border-radius: 3px }
.wy-pole.pelne em { background: var(--zielen) }
.wy-pole.puste s { background: var(--czerw-t) }

.wy-wyjscia { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.wy-czytaj {
  font-family: "Fjalla One", Arial, sans-serif; font-size: 16px; text-decoration: none;
  border: 1.5px solid var(--kreska); border-radius: 999px; padding: 9px 18px; color: var(--tusz);
}
.wy-czytaj:hover { border-color: var(--tusz3); color: var(--tusz) }

/* ------------------------------------------------- lista czterdziestu --- */

.wy-lista40 {
  display: grid; gap: 1px; background: var(--kreska);
  border: 1px solid var(--kreska); border-radius: var(--r); overflow: hidden; margin: 22px 0;
}
.wy-l40 {
  background: var(--tlo); display: grid; gap: 16px; align-items: start;
  grid-template-columns: 44px 128px minmax(0, 1fr) auto;
  padding: 14px 18px;
}
.wy-l40 > b {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 15px; color: var(--tusz3);
  padding-top: 4px;
}
.wy-l40-c { min-width: 0 }
.wy-l40-c h3 { margin: 0 0 4px; font-size: 20px }
.wy-l40-c h3 a { color: var(--tusz); text-decoration: none }
.wy-l40-c h3 a:hover { color: var(--czerwien) }
.wy-l40-c p { margin: 0; font-size: 16.5px; color: var(--tusz2); line-height: 1.5; max-width: 82ch }
.wy-l40-z {
  display: inline-block; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 3px; padding: 2px 8px; margin-left: 8px; vertical-align: 3px;
}
.wy-l40-z.r { background: var(--ziel-t); color: var(--zielen) }
.wy-l40-z.d { background: var(--burs-t); color: var(--bursztyn) }
.wy-l40 .wy-mala { height: 54px; padding: 7px 10px }
.wy-l40 .wy-mala img { max-height: 100%; object-fit: contain }
.wy-l40-w { display: flex; flex-direction: column; gap: 7px; align-items: stretch }

/* ---------------------------------------------------------- recenzja --- */

.wy-obzor {
  border: 1px solid var(--kreska); border-radius: var(--r); margin: 26px 0;
  overflow: hidden; background: var(--tlo);
}
.wy-obzor-g {
  display: grid; gap: 18px; align-items: center;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  padding: 18px 20px; border-bottom: 1px solid var(--kreska2); background: var(--papier);
}
.wy-obzor-g h3 { margin: 0; font-size: 27px }
.wy-obzor-g .wy-info {
  display: block; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px; color: var(--tusz3); margin-top: 4px;
}
.wy-obzor-p { padding: 20px 20px 6px }
.wy-obzor-p > :last-child { margin-bottom: 14px }

/* ------------------------------------------------------------ tabela --- */

.wy-tabzwoj { overflow-x: auto; margin: 22px 0; border: 1px solid var(--kreska); border-radius: var(--r) }
.wy-tab { border-collapse: collapse; width: 100%; font-size: 16.5px; min-width: 560px }
.wy-tab th, .wy-tab td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--kreska2) }
.wy-tab thead th {
  background: var(--granat); color: #fff; font-family: "Fjalla One", Arial, sans-serif;
  font-size: 15px; letter-spacing: .04em;
}
.wy-tab tbody th { font-weight: 600; background: var(--papier) }
.wy-tab tbody tr:last-child th, .wy-tab tbody tr:last-child td { border-bottom: 0 }
.wy-tab .lb { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 15px; font-variant-numeric: tabular-nums }
.wy-tab .tak { color: var(--zielen) }
.wy-tab tbody tr:nth-child(even) td { background: #fafbfc }
.wy-tab tbody tr:nth-child(even) th { background: var(--papier2) }

/* ------------------------------------------------------------- kroki --- */

.wy-kroki { list-style: none; padding: 0 !important; margin: 22px 0 }
.wy-kroki li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--kreska2); margin: 0 !important;
}
.wy-kroki li::before { content: none !important }
.wy-kroki li:last-child { border-bottom: 0 }
.wy-kroki i {
  font-style: normal; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 15px; color: #fff; background: var(--granat); border-radius: 3px;
  height: 30px; display: flex; align-items: center; justify-content: center;
}
.wy-kroki b { display: block; font-size: 18.5px; margin-bottom: 3px }
.wy-kroki span { display: block; color: var(--tusz2); font-size: 17px; line-height: 1.55 }

/* ------------------------------------------------------------ monety --- */

.wy-monety { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 }
.wy-moneta {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13.5px;
  border: 1px solid var(--kreska); border-radius: 3px; padding: 5px 12px;
  background: var(--papier); color: var(--tusz);
}

/* ------------------------------------------------------------- brama --- */

.wy-brama {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
  border: 1px solid var(--czerwien); border-left: 4px solid var(--czerwien);
  border-radius: 0 var(--r) var(--r) 0; padding: 20px 24px; margin: 26px 0; background: var(--tlo);
}
.wy-brama b { display: block; font-family: "Fjalla One", Arial, sans-serif; font-size: 23px; margin-bottom: 4px }
.wy-brama span { display: block; color: var(--tusz2); font-size: 17px; max-width: 62ch }

/* ------------------------------------------------------------ opinie --- */

.wy-opinie {
  display: grid; gap: 14px; margin: 22px 0;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.wy-opinia {
  border: 1px solid var(--kreska); border-radius: var(--r); padding: 18px 20px; background: var(--tlo);
}
.wy-opinia-g {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--kreska2);
}
.wy-opinia-g b { font-family: "Fjalla One", Arial, sans-serif; font-size: 19px }
.wy-opinia-g u {
  text-decoration: none; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px; color: var(--tusz3); white-space: nowrap;
}
.wy-opinia p { margin: 0 0 10px; font-size: 17px; line-height: 1.55; color: var(--tusz2) }
.wy-opinia p:last-child { margin-bottom: 0 }
.wy-opinia-t {
  display: flex; gap: 5px; margin-bottom: 10px; flex-wrap: wrap;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px;
}
.wy-opinia-t span { border-radius: 3px; padding: 2px 8px; background: var(--papier); color: var(--tusz2) }
.wy-opinia-t .plus { background: var(--ziel-t); color: var(--zielen) }
.wy-opinia-t .minus { background: var(--czerw-t); color: var(--czerwien) }

/* ----------------------------------------------------------- rysunki --- */

.wy-rys { margin: 24px 0; padding: 0 }
.wy-rys svg, .wy-rys img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--kreska); border-radius: var(--r); background: var(--tlo);
}
.wy-rys figcaption {
  margin-top: 9px; font-size: 15px; color: var(--tusz3); line-height: 1.5;
  border-left: 3px solid var(--kreska); padding-left: 12px; max-width: 78ch;
}

/* ----------------------------------------------------------- pytania --- */

.wy-pytania { margin: 22px 0; border-top: 1px solid var(--kreska) }
.wy-pytania details { border-bottom: 1px solid var(--kreska) }
.wy-pytania summary {
  cursor: pointer; padding: 16px 40px 16px 0; position: relative; list-style: none;
  font-family: "Fjalla One", Arial, sans-serif; font-size: 20px;
}
.wy-pytania summary::-webkit-details-marker { display: none }
.wy-pytania summary::after {
  content: "+"; position: absolute; right: 6px; top: 12px; font-size: 26px;
  color: var(--czerwien); line-height: 1;
}
.wy-pytania details[open] summary::after { content: "–" }
.wy-pytania details > div { padding: 0 0 18px; color: var(--tusz2) }
.wy-pytania details > div p:last-child { margin-bottom: 0 }

/* ------------------------------------------------------------ boczna --- */

.wy-boczna { min-width: 0 }
.wy-boczna-h {
  font-size: 13px; letter-spacing: .11em; text-transform: uppercase; color: var(--tusz3);
  font-family: "JetBrains Mono", ui-monospace, monospace; margin: 0 0 8px; padding: 0 2px;
}
.wy-boczna-h:not(:first-child) { margin-top: 26px }
.wy-boczna-c {
  background: var(--tlo); border: 1px solid var(--kreska); border-radius: var(--r);
  padding: 6px 16px 14px; margin-bottom: 4px;
}
.wy-boczna-p { font-size: 15px; color: var(--tusz3); margin: 12px 0 2px; line-height: 1.5 }

.wy-wiersz {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 13px 0; border-bottom: 1px solid var(--kreska2);
}
.wy-wiersz:last-child { border-bottom: 0 }
.wy-mala { height: 52px; padding: 6px }
.wy-mala img { max-height: 100%; object-fit: contain }
.wy-mala.pusta { font-size: 14px }
.wy-wiersz b { font-family: "Fjalla One", Arial, sans-serif; font-weight: 400; font-size: 18px }
.wy-wiersz b a { color: var(--tusz); text-decoration: none }
.wy-wiersz b a:hover { color: var(--czerwien) }
.wy-info { display: block; font-size: 14px; color: var(--tusz3); line-height: 1.42; margin-top: 2px }
.wy-wiersz-w { display: flex; gap: 8px; align-items: center; margin-top: 9px; flex-wrap: wrap }
.wy-mini {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px;
  text-decoration: none; color: var(--tusz3); border-bottom: 1px solid var(--kreska);
}
.wy-boczna-so { display: block; padding: 11px 0; border-bottom: 1px solid var(--kreska2) }
.wy-boczna-so:last-child { border-bottom: 0 }
.wy-boczna-so b { font-family: "Fjalla One", Arial, sans-serif; font-weight: 400; font-size: 18px }
.wy-boczna-so b a { color: var(--tusz); text-decoration: none }

/* ------------------------------------------------------------- bębny --- */

.wy-bebny {
  border: 1px solid var(--kreska); border-radius: var(--r); padding: 18px;
  background: var(--papier);
}
.wy-bebny-g { display: flex; align-items: center; gap: 10px; margin-bottom: 14px }
.wy-pasek { width: 26px; height: 3px; background: var(--czerwien); flex: none }
.wy-bebny-n {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tusz3);
}
.wy-szyba {
  --cela: 72px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  background: var(--granat); border-radius: var(--r); padding: 6px; position: relative;
}
.wy-szyba::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px;
  background: var(--czerwien); opacity: .55; transform: translateY(-1px); pointer-events: none;
}
.wy-beben { height: calc(var(--cela) * 3); overflow: hidden; background: #0e1829; border-radius: 2px }
.wy-tasma { display: block; will-change: transform }
.wy-kom {
  display: flex; align-items: center; justify-content: center;
  height: var(--cela); color: #f4c33a;
}
.wy-kom svg { width: 40px; height: 40px }
.wy-s-romb { color: #58b6ff }
.wy-s-dzwonek { color: #ffd166 }
.wy-s-podkowa { color: #9ee6c4 }
.wy-s-siodemka { color: #ff6b7a }
.wy-s-gwiazda { color: #ffe066 }

/* Taśma niesie zestaw trzy razy (18 komórek). Przesunięcie o sześć komórek
 * równa się długości zestawu, więc bęben zawsze staje na symbolu. */
@keyframes wy-rolka {
  0%        { transform: translateY(0); animation-timing-function: cubic-bezier(.28,.05,.2,1) }
  48%, 100% { transform: translateY(calc(var(--cela) * -6)) }
}
.wy-t1 { animation: wy-rolka 3.4s infinite }
.wy-t2 { animation: wy-rolka 3.4s infinite .22s }
.wy-t3 { animation: wy-rolka 3.4s infinite .44s }

.wy-bebny .wy-w { margin-top: 14px; width: 100%; justify-content: center; text-align: center }
.wy-bebny-p { margin: 12px 0 0; font-size: 14px; color: var(--tusz3); line-height: 1.5 }

/* ------------------------------------------------------------- dalej --- */

.wy-dalej { border-top: 2px solid var(--granat); margin-top: 32px; padding-top: 18px }
.wy-dalej p {
  margin: 0 0 10px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tusz3);
}
.wy-dalej ul { list-style: none; padding: 0 !important; margin: 0; display: flex; flex-wrap: wrap; gap: 9px }
.wy-dalej li { margin: 0 !important; padding: 0 !important }
.wy-dalej li::before { content: none !important }
.wy-dalej a {
  display: inline-block; text-decoration: none; color: var(--tusz);
  border: 1px solid var(--kreska); border-radius: 999px; padding: 8px 17px; font-size: 16px;
}
.wy-dalej a:hover { border-color: var(--czerwien); color: var(--czerwien) }

/* ------------------------------------------------------------ stopka --- */

.wy-stopka { background: var(--granat); color: #c3cbd8; padding: 40px 0 96px; margin-top: 30px }
.wy-stopka-k {
  display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.wy-stopka h4 {
  margin: 0 0 12px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.wy-stopka ul { list-style: none; margin: 0; padding: 0 }
.wy-stopka li { margin-bottom: 8px }
.wy-stopka a { color: #c3cbd8; text-decoration: none; font-size: 17px }
.wy-stopka a:hover { color: #fff; text-decoration: underline }
.wy-stopka-d { margin: 20px 0 0; font-size: 14.5px; line-height: 1.6; color: #97a2b3; max-width: 100ch }

/* --------------------------------------------------------------- pas --- */

.wy-pas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--granat); border-top: 2px solid var(--czerwien);
  padding: 9px 16px calc(9px + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: center;
}
.wy-pas a {
  display: inline-flex; align-items: center; gap: 9px; color: #fff; text-decoration: none;
  font-family: "Fjalla One", Arial, sans-serif; font-size: 16.5px; letter-spacing: .02em;
  background: var(--czerwien); border-radius: 999px; padding: 10px 26px; text-align: center;
}
.wy-pas a:hover { background: #a90e21; color: #fff }
.wy-pas i { width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: .85; flex: none }

/* ------------------------------------------------------------- wąsko --- */

@media (max-width: 1080px) {
  .wy-uklad { grid-template-columns: minmax(0, 1fr) }
  .wy-boczna { order: 2 }
  .wy-wstep-2 { grid-template-columns: minmax(0, 1fr) }
  .wy-bebny { max-width: 420px }
}

@media (max-width: 760px) {
  :root { --luz: 18px }
  body { font-size: 18px }
  .wy-wpis { grid-template-columns: 46px minmax(0, 1fr); gap: 12px }
  .wy-wpis .wy-tabliczka { grid-column: 2; height: 58px; justify-self: start; width: 140px }
  .wy-wpis-c { grid-column: 1 / -1 }
  .wy-l40 { grid-template-columns: 34px minmax(0, 1fr) }
  .wy-l40 .wy-mala { grid-column: 2; width: 110px; height: 46px }
  .wy-l40-c, .wy-l40-w { grid-column: 1 / -1 }
  .wy-l40-w { flex-direction: row; flex-wrap: wrap }
  .wy-obzor-g { grid-template-columns: minmax(0, 1fr) }
  .wy-spis ol { columns: 1 }
  .wy-licznik { gap: 16px }
  .wy-licznik b { font-size: 18px }
  .wy-jezyk { margin-left: 0; padding: 6px 10px }
  .wy-szyba { --cela: 58px }
  .wy-kom svg { width: 32px; height: 32px }
  .wy-tresc { padding-left: 16px; padding-right: 16px }
  .wy-wstep { padding: 24px 18px }
}

@media (prefers-reduced-motion: reduce) {
  .wy-tasma { animation: none !important; transform: translateY(calc(var(--cela) * -6)) }
}