/* Wspólne style działu „Heurystyki i błędy poznawcze” w Atlasie mózgu (/mozg/heurystyki/).
   Tokeny jak w quiz/ i katalog/ Atlasu: czarne pasma pod tytułem i sceną 3D, grafit pod tekstem,
   szkło tylko w pasku postępu. Strona efektu ma własny <style> tylko na to, czego nie używa nikt inny. */
:root {
  color-scheme: dark;
  --h: 240; --s: 8%;
  --czern: #000;
  --tlo: hsl(var(--h) var(--s) 8%);
  --karta: hsl(var(--h) var(--s) 11%);
  --karta-2: hsl(var(--h) var(--s) 14%);
  --linia: hsl(var(--h) var(--s) 100% / .12);
  --linia-2: hsl(var(--h) var(--s) 100% / .26);
  --tekst: hsl(var(--h) var(--s) 96%);
  --tekst-2: hsl(var(--h) var(--s) 70%);
  --tekst-3: hsl(var(--h) var(--s) 56%);
  --akcent: #00BFFF;
  --akcent-tekst: #33CCFF;
  --akcent-tlo: hsl(195 100% 50% / .10);
  --na-akcencie: hsl(195 100% 8%);
  --spor: hsl(36 90% 62%);
  --zysk: hsl(160 55% 55%);
  --strata: hsl(352 75% 70%);
  --krój: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --krój-nazwa: "Newsreader", ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --krzywa: cubic-bezier(.32,.72,0,1);
}
* { box-sizing: border-box; }
html { background: var(--czern); scroll-behavior: smooth; scroll-padding-top: var(--mz-h, 0px); }
/* --mz-h: wysokość menu Atlasu (nav/nav.js); bez menu, w podglądzie, 0 */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--tlo); color: var(--tekst); font: 17px/1.5 var(--krój); -webkit-font-smoothing: antialiased; }
a { color: var(--akcent-tekst); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--tlo); }
.gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wnetrze { max-width: 1180px; margin: 0 auto; }
.waskie { max-width: 720px; }
p { margin: 0 0 14px; max-width: 68ch; text-wrap: pretty; }
.brew { font: italic 17px/1.25 var(--krój-nazwa); color: var(--akcent-tekst); margin: 0 0 10px; }
h1 { margin: 0; font: 600 clamp(30px, 5vw, 52px)/1.08 var(--krój); letter-spacing: -.025em; text-wrap: balance; max-width: 18ch; }
h2 { margin: 0 0 18px; font: 600 clamp(24px, 3.2vw, 34px)/1.18 var(--krój); letter-spacing: -.018em; text-wrap: balance; max-width: 30ch; }
h1 span, h2 span { color: var(--tekst-2); }
h3 { margin: 0 0 8px; font: 600 19px/1.3 var(--krój); letter-spacing: -.005em; }
.drobne { font-size: 13px; line-height: 1.45; color: var(--tekst-3); }
.pasmo-ciemne { background: var(--czern); }
.sekcja { padding-block: 72px; }
.sekcja + .sekcja { border-top: 1px solid var(--linia); }

/* ---------- start ---------- */
.start { padding-block: 64px 72px; }
.lead { margin: 20px 0 0; font-size: 19px; line-height: 1.5; color: var(--tekst-2); max-width: 58ch; }
.akcje { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: 28px; }
.przycisk { min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent; background: var(--akcent); color: var(--na-akcencie);
  font: 600 17px/1 var(--krój); cursor: pointer; display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  transition: transform 120ms var(--krzywa), background-color 150ms, border-color 150ms; }
.przycisk:hover { background: hsl(195 100% 58%); }
.przycisk:active { transform: scale(.97); }
.przycisk.wtorny { background: transparent; color: var(--tekst); border-color: var(--linia-2); }
.przycisk.wtorny:hover { border-color: hsl(0 0% 100% / .45); background: hsl(0 0% 100% / .04); }

/* ---------- nagłówek: tekst po lewej, waga po prawej ---------- */
.start-uklad { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; }
.waga { margin: 0; }
.waga svg { display: block; width: 100%; max-width: 440px; height: auto; margin-inline: auto; overflow: visible; }
.waga text { font-family: var(--krój); }
.waga figcaption { max-width: 40ch; margin: 6px auto 0; text-align: center; }
@media (max-width: 900px) { .start-uklad { grid-template-columns: 1fr; gap: 8px; } .waga svg { max-width: 300px; } .waga { margin-top: 20px; } }
/* nagłówek strony działu: obracany mózg z obszarami, które wracają na stronach efektów (17.10.2026) */
.mozg-start { margin: 0; }
.mozg-start .plotno { aspect-ratio: 1 / 1; max-height: none; border: 0; background: radial-gradient(60% 55% at 50% 50%, hsl(205 60% 11%), transparent 72%); }
.mozg-start figcaption { max-width: 44ch; margin: 4px auto 0; text-align: center; }
@media (max-width: 900px) { .mozg-start { margin-top: 24px; } .mozg-start .plotno { max-width: 420px; margin-inline: auto; aspect-ratio: 1 / 1; } }

/* ---------- w skrócie ---------- */
.skrot { padding-block: 56px; }
.skrot-uklad { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px; align-items: start; }
.skrot ul { margin: 0; padding-left: 20px; display: grid; gap: 12px; max-width: 64ch; }
.skrot li { font-size: 17px; }
.skrot li b { font-weight: 600; }
.spis { display: flex; flex-wrap: wrap; gap: 8px; }
.spis a { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linia-2); color: var(--tekst); text-decoration: none;
  display: inline-flex; align-items: center; font-size: 15px; font-weight: 600; transition: border-color 150ms, background-color 150ms; }
.spis a:hover { border-color: var(--akcent); background: var(--akcent-tlo); }
.spis-tytul { font: 600 12px/1 var(--krój); letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-3); margin: 6px 0 12px; }
.zacheta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 6px 0 4px; padding: 14px 16px; border-radius: 16px; border: 1px dashed var(--linia-2); color: var(--tekst-2); font-size: 15px; }
@media (max-width: 900px) { .skrot-uklad { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- pasek postępu (szkło, warstwa nawigacji) ---------- */
.postep { position: sticky; top: calc(var(--mz-h, 0px) + env(safe-area-inset-top, 0px)); z-index: 5; border-bottom: 1px solid var(--linia);
  background: hsl(var(--h) var(--s) 6% / .72); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .05), 0 8px 24px -18px rgb(0 0 0 / .9); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .postep { background: var(--tlo); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.postep .wnetrze { display: flex; align-items: center; gap: 16px; padding-block: 12px; }
.postep-tekst { font: 600 13px/1 var(--krój); letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kreski { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; min-width: 0; }
.kreski i { height: 6px; border-radius: 3px; background: hsl(0 0% 100% / .14); transition: background 200ms; }
.kreski i[data-s="zrobione"] { background: hsl(0 0% 100% / .55); }
.kreski i[data-s="teraz"] { background: var(--akcent); }

/* ---------- gra ---------- */
.gra { padding-block: 48px 72px; }
.stol { max-width: 640px; margin: 0 auto; display: grid; gap: 20px; }
.tryb { margin: 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--linia-2); background: var(--akcent-tlo); font-size: 15px; color: var(--tekst); }
.zaklad { background: var(--karta); border: 1px solid var(--linia); border-radius: 28px; padding: 28px; display: grid; gap: 22px; }
.zaklad-glowa { display: flex; justify-content: space-between; align-items: center; font: italic 16px/1 var(--krój-nazwa); color: var(--tekst-2); }
.strony { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.strona { border-radius: 20px; border: 1px solid var(--linia); background: var(--tlo); padding: 18px 18px 20px; display: grid; gap: 10px; justify-items: start; }
.moneta { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--krój); letter-spacing: .02em;
  background: radial-gradient(circle at 35% 30%, hsl(45 30% 82%), hsl(40 18% 52%) 70%); color: hsl(40 30% 16%);
  box-shadow: inset 0 0 0 3px hsl(40 20% 40% / .6), 0 6px 16px -8px rgb(0 0 0 / .8); }
.strona .nazwa { font-size: 14px; color: var(--tekst-2); }
.strona .kwota { font: 600 clamp(28px, 6vw, 36px)/1.05 var(--krój); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.strona.zysk .kwota { color: var(--zysk); }
.strona.strata .kwota { color: var(--strata); }
.pytanie { margin: 0; text-align: center; font: 600 24px/1.2 var(--krój); }
.wybor { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* oba przyciski celowo jednakowe: wygląd nie może podpowiadać decyzji */
.wybor button { min-height: 60px; border-radius: 18px; border: 1px solid var(--linia-2); background: var(--karta-2); color: var(--tekst);
  font: 600 19px/1 var(--krój); cursor: pointer; transition: transform 120ms var(--krzywa), border-color 150ms, background-color 150ms; }
.wybor button:hover { border-color: var(--akcent); }
.wybor button:active { transform: scale(.97); }
.wybor kbd { font: 500 12px/1 var(--krój); color: var(--tekst-3); margin-left: 8px; border: 1px solid var(--linia-2); border-radius: 6px; padding: 3px 6px; }
@media (hover: none) { .wybor kbd { display: none; } }
.zaklad.zmiana { animation: wjazd 320ms var(--krzywa); }
@keyframes wjazd { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .zaklad.zmiana { animation: none; } }

/* ---------- wynik ---------- */
.os { margin: 24px 0 8px; }
.os svg { width: 100%; height: auto; display: block; overflow: visible; }
.os text { font: 12px var(--krój); fill: var(--tekst-2); }
.rozklad { margin: 28px 0 8px; }
.pasek { display: flex; height: 40px; border-radius: 12px; overflow: hidden; border: 1px solid var(--linia); }
.pasek span { display: grid; place-items: center; font: 600 14px/1 var(--krój); font-variant-numeric: tabular-nums; }
.pasek .r1 { background: hsl(0 0% 100% / .08); }
.pasek .r2 { background: hsl(0 0% 100% / .16); }
.pasek .r3 { background: var(--akcent-tlo); color: var(--akcent-tekst); box-shadow: inset 0 0 0 1px hsl(195 100% 50% / .35); }
.legenda-paska { display: grid; grid-template-columns: 16fr 12.6fr 71fr; gap: 8px; margin-top: 8px; font-size: 13px; line-height: 1.35; color: var(--tekst-2); }
.uwaga { margin: 18px 0; padding: 12px 14px; border-left: 2px solid var(--spor); background: hsl(36 90% 62% / .07); border-radius: 0 12px 12px 0; font-size: 15px; color: var(--tekst); max-width: 68ch; }
.przejscie { margin-top: 28px; font: 600 20px/1.35 var(--krój); max-width: 40ch; }

/* ---------- mózg ---------- */
.mozg { padding-block: 72px; }
/* zakładki etapów są osobnym elementem siatki: na komputerze nad opisem obok sceny, na telefonie tuż nad sceną,
   żeby po przełączeniu było widać zmianę bez przewijania (uwaga Marcina 17.10.2026) */
.scena-uklad { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr;
  grid-template-areas: "scena zakladki" "scena panel"; column-gap: 32px; align-items: start; margin-top: 8px; }
.scena-uklad > .scena { grid-area: scena; }
.scena-uklad > .przystanki { grid-area: zakladki; }
.scena-uklad > .panel { grid-area: panel; }
.scena { position: sticky; top: calc(var(--mz-h, 0px) + 16px); }
.plotno { position: relative; aspect-ratio: 1 / 1; max-height: 78dvh; width: 100%; border-radius: 24px; overflow: hidden; background: radial-gradient(120% 90% at 50% 40%, hsl(215 40% 9%), #000 70%); border: 1px solid var(--linia); touch-action: pan-y; }
.plotno canvas { display: block; width: 100%; height: 100%; }
.stan { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tekst-3); font-size: 15px; text-align: center; padding: 24px; }
.etykiety { position: absolute; inset: 0; pointer-events: none; }
.etykieta { position: absolute; transform: translate(-50%, -100%); padding: 5px 9px; border-radius: 8px; background: hsl(0 0% 0% / .62); border: 1px solid hsl(195 100% 60% / .45);
  font: 600 12px/1.2 var(--krój); color: var(--tekst); white-space: nowrap; transition: opacity 250ms; }
.etykieta::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 14px; background: hsl(195 100% 60% / .6); }
.podpis-sceny { margin-top: 10px; }
.przystanki { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.przystanki button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linia-2); background: transparent; color: var(--tekst-2);
  font: 600 15px/1 var(--krój); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.przystanki button i { font: italic 15px/1 var(--krój-nazwa); color: var(--tekst-3); }
.przystanki button[aria-selected="true"] { border-color: var(--akcent); color: var(--tekst); background: var(--akcent-tlo); }
.przystanki button[aria-selected="true"] i { color: var(--akcent-tekst); }
.panel h3 { font-size: 22px; margin-bottom: 14px; }
.dowod { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 6px 14px; border-radius: 999px; border: 1px solid; margin: 4px 0 16px; max-width: 100%;
  font: 600 11px/1.35 var(--krój); text-wrap: balance; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-2); }
.dowod::before { content: ""; flex: none; width: 14px; border-top: 2px solid currentColor; }
.dowod[data-d="zbiezne"] { color: var(--akcent-tekst); }
.dowod[data-d="spor"] { color: var(--spor); }
.dowod[data-d="spor"]::before { content: "?"; width: auto; border: 0; font-size: 13px; }
.dowod[data-d="z-zastrzezeniami"]::before { border-top-style: dashed; }
.suwak { margin: 22px 0 6px; padding: 18px; border-radius: 20px; border: 1px solid var(--linia); background: var(--karta); }
.suwak label { display: block; font: 600 15px/1.3 var(--krój); margin-bottom: 12px; }
.suwak input[type=range] { width: 100%; accent-color: var(--akcent); min-height: 44px; }
.suwak-osie { display: flex; justify-content: space-between; font-size: 13px; color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.suwak-wartosc { font: 600 17px/1.2 var(--krój); font-variant-numeric: tabular-nums; margin: 10px 0 0; }
.wykresik { margin-top: 12px; }
.wykresik svg { width: 100%; height: auto; display: block; }
.wykresik text { font: 11px var(--krój); fill: var(--tekst-3); }

/* ---------- wykres zakresów ---------- */
.slupki { margin: 26px 0 10px; display: grid; gap: 10px; max-width: 720px; }
.slupek { display: grid; grid-template-columns: minmax(150px, 2fr) 5fr 52px; gap: 12px; align-items: center; font-size: 14px; color: var(--tekst-2); }
.slupek .tor { position: relative; height: 26px; border-radius: 8px; background: hsl(0 0% 100% / .05); }
.slupek .tor b { position: absolute; inset: 0 auto 0 0; border-radius: 8px; background: hsl(0 0% 100% / .22); }
.slupek .tor .jeden { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 1px dashed hsl(0 0% 100% / .55); }
.slupek output { font: 600 16px/1 var(--krój); color: var(--tekst); font-variant-numeric: tabular-nums; text-align: right; }
.slupek.akcent .tor b { background: var(--akcent); opacity: .75; }

/* ---------- karty ---------- */
.karty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.karta { background: var(--karta); border: 1px solid var(--linia); border-radius: 20px; padding: 22px; }
.karta p { font-size: 16px; margin-bottom: 0; }
.karta .liczba { font: 600 34px/1.05 var(--krój); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.porownanie { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; max-width: 520px; }
.porownanie div { background: var(--karta); border: 1px solid var(--linia); border-radius: 18px; padding: 16px 18px; }
.porownanie b { display: block; font: 600 32px/1.1 var(--krój); font-variant-numeric: tabular-nums; }
.porownanie span { font-size: 14px; color: var(--tekst-2); }

/* ---------- dowody i bibliografia ---------- */
.dowody { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 32px; }
.spory { margin: 0 0 32px; padding-left: 20px; max-width: 75ch; }
.spory li { margin-bottom: 10px; color: var(--tekst-2); font-size: 16px; }
.spory li b { color: var(--tekst); font-weight: 600; }
.biblio { margin: 0; padding-left: 0; list-style: none; font-size: 14px; line-height: 1.5; color: var(--tekst-2); max-width: 90ch; }
.biblio li { padding-left: 2em; text-indent: -2em; margin-bottom: 8px; }
.biblio i { color: var(--tekst); }
.stopka { padding-block: 32px 64px; }

@media (max-width: 900px) {
  .scena-uklad { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "zakladki" "scena" "panel"; }
  .scena { position: relative; top: 0; margin-bottom: 28px; }
  .przystanki { margin-bottom: 12px; }
  .plotno { aspect-ratio: 4 / 3.4; }
  .karty, .dowody { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sekcja, .mozg { padding-block: 52px; }
  /* zakładki etapów na telefonie: siatka 2 x 2, żeby razem ze sceną mieściły się na ekranie */
  .przystanki { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .przystanki button { min-height: 44px; padding: 6px 12px; font-size: 14px; line-height: 1.2; text-align: left; justify-content: flex-start; border-radius: 14px; }
  .przystanki button i { font-size: 14px; }
  /* nieparzysta liczba zakładek: ostatnia na całą szerokość */
  .przystanki button:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .zaklad { padding: 20px; border-radius: 24px; }
  .strona { padding: 14px; }
  .moneta { width: 44px; height: 44px; font-size: 11px; }
  .slupek { grid-template-columns: 1fr 52px; }
  .slupek .opis-s { grid-column: 1 / -1; }
  .legenda-paska { font-size: 12px; }
  .postep-tekst { font-size: 12px; }
}

/* ---------- dodatki z efektu sformułowania, wspólne dla kolejnych stron ---------- */
.grafika { margin: 0; }
.grafika svg { display: block; width: 100%; max-width: 440px; height: auto; margin-inline: auto; overflow: visible; }
.grafika text { font-family: var(--krój); }
.grafika figcaption { max-width: 40ch; margin: 6px auto 0; text-align: center; text-wrap: balance; }
@media (max-width: 900px) { .grafika svg { max-width: 300px; } .grafika { margin-top: 20px; } }

.scenariusz { margin: 0; font-size: 17px; line-height: 1.5; color: var(--tekst); max-width: none; }
.program { border-radius: 20px; border: 1px solid var(--linia); background: var(--tlo); padding: 16px 18px 18px; display: grid; gap: 8px; align-content: start; }
.program .nazwa { font: 600 13px/1 var(--krój); letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-3); }
.program p { margin: 0; font-size: 16px; line-height: 1.45; }
.strona .pewna { font: 600 clamp(22px, 5vw, 28px)/1.15 var(--krój); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.strona .los-opis { font-size: 14px; line-height: 1.4; color: var(--tekst-2); margin: 0; }
.strona .los-opis b { color: var(--tekst); font-weight: 600; font-variant-numeric: tabular-nums; }
.kolo { width: 58px; height: 58px; display: block; }
.dostajesz { margin: 0; text-align: center; font: 600 17px/1.3 var(--krój); color: var(--tekst-2); }
.dostajesz b { color: var(--tekst); font-variant-numeric: tabular-nums; }

/* wykres: odsetek wyborów w dwóch ramach */
.ramy { margin: 18px 0 8px; display: grid; gap: 14px; max-width: 760px; }
.rama-wiersz { display: grid; grid-template-columns: minmax(150px, 2fr) 5fr; gap: 12px; align-items: center; font-size: 14px; color: var(--tekst-2); }
.rama-wiersz .tor { display: flex; height: 36px; border-radius: 10px; overflow: hidden; border: 1px solid var(--linia); }
.rama-wiersz .tor span { display: grid; place-items: center; font: 600 14px/1 var(--krój); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.rama-wiersz .tor .pewny { background: hsl(0 0% 100% / .2); color: var(--tekst); }
.rama-wiersz .tor .ryzyko { background: var(--akcent-tlo); color: var(--akcent-tekst); box-shadow: inset 0 0 0 1px hsl(195 100% 50% / .35); }
.rama-wiersz .ty { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--akcent); color: var(--na-akcencie); font: 600 12px/1.4 var(--krój); }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--tekst-2); margin-top: 4px; }
.legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legenda .l-pewny { background: hsl(0 0% 100% / .2); }
.legenda .l-ryzyko { background: var(--akcent-tlo); box-shadow: inset 0 0 0 1px hsl(195 100% 50% / .5); }
.blok-wyniku { margin: 36px 0 0; }
.cytat { margin: 14px 0 18px; padding: 14px 16px; border-left: 2px solid var(--akcent); background: var(--karta); border-radius: 0 14px 14px 0; font-size: 16px; max-width: 68ch; }
.cytat p { margin: 0 0 6px; }
.cytat p:last-child { margin: 0; }
.slupek .tor b.ty-b { background: var(--akcent); opacity: .8; }
.slupek.grupa-start { margin-top: 8px; }

.biblio a { overflow-wrap: anywhere; }
.dowod[data-d="pojedyncze"]::before { border-top-style: dotted; }
.dowod[data-d="mocna"] { color: var(--zysk); }
.dowod[data-d="korelacja"] { color: var(--akcent-tekst); }
.dowod[data-d="korelacja"]::before { border-top-style: dashed; }
/* przyczynowe (uszkodzenia, stymulacja): najmocniejsza etykieta mózgu, od 17.10.2026 przy dyskontowaniu */
.dowod[data-d="przyczynowe"] { color: var(--zysk); }
.dowod[data-d="przyczynowe"]::before { border-top-width: 3px; }

@media (max-width: 560px) {
  .rama-wiersz { grid-template-columns: 1fr; gap: 6px; }
  .strony.programy { grid-template-columns: 1fr; }
  .program { padding: 14px; }
  .kolo { width: 48px; height: 48px; }
}

/* nazwa działu nad tytułem prowadzi do strony startowej działu */
.brew a { color: inherit; text-decoration: none; }
.brew a:hover { text-decoration: underline; }

/* ---------- oceny dowodów: gwiazdki (20.10.2026, decyzja Marcina 00:09) ----------
   Dwie skale po 5 gwiazdek: „Pewność efektu” i „Co wiemy o mózgu”. Skala opisana na stronie działu (#etykiety-dowodu). */
.oceny { display: grid; gap: 12px; margin: 4px 0 0; }
.ocena { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 3px 10px; }
.ocena-nazwa { font: 600 13px/1.3 var(--krój); color: var(--tekst-2); }
.gwiazdki { display: inline-flex; gap: 2px; font: 400 15px/1 var(--krój); justify-self: start; }
.gwiazdki i { font-style: normal; color: hsl(0 0% 100% / .2); }
.gwiazdki i.p { color: var(--akcent-tekst); }
.ocena-opis { grid-column: 1 / -1; font-size: 13px; line-height: 1.4; color: var(--tekst-3); }
.ocena.duza { margin: 2px 0 14px; }
.ocena.duza .gwiazdki { font-size: 22px; }
.ocena.duza .ocena-opis { font-size: 15px; color: var(--tekst-2); }
.skala-gw li { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 10px; align-items: baseline; }
.skala-gw .gwiazdki { font-size: 13px; }

/* ---------- definicja na górze „W skrócie”; zasłona na stronach, gdzie definicja zdradza zadanie ---------- */
.definicja { margin: 0 0 24px; padding: 18px 20px 20px; border-radius: 18px; background: var(--akcent-tlo); border: 1px solid hsl(195 100% 50% / .28); max-width: 64ch; }
.definicja h2 { font-size: 21px; line-height: 1.25; margin: 0 0 8px; max-width: none; }
.definicja .def-tresc p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--tekst); }
.definicja .zaslona { display: none; }
.definicja.zaslonieta .def-tresc { display: none; }
.definicja.zaslonieta .zaslona { display: grid; gap: 14px; }
.definicja .zaslona p { margin: 0; font-size: 16px; color: var(--tekst-2); }
.definicja .zaslona .akcje { margin-top: 0; }
.definicja .zaslona .przycisk { min-height: 44px; font-size: 16px; padding: 0 18px; }

/* ---------- przyklejony spis treści (pojawia się po przewinięciu poza „W skrócie”, chowa na czas zadania) ---------- */
html { scroll-padding-top: calc(var(--mz-h, 0px) + var(--pasek-h, 0px)); }
.spis-pasek { position: fixed; left: 0; right: 0; top: var(--mz-h, 0px); z-index: 55; background: hsl(240 8% 8% / .74);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--linia);
  transform: translateY(-110%); opacity: 0; visibility: hidden; transition: transform 240ms var(--krzywa), opacity 200ms, visibility 0s 240ms; }
.spis-pasek.widoczny { transform: none; opacity: 1; visibility: visible; transition: transform 240ms var(--krzywa), opacity 200ms; }
.spis-pasek .wnetrze { display: flex; gap: 4px; align-items: center; overflow-x: auto; scrollbar-width: none; padding-block: 4px; }
.spis-pasek .wnetrze::-webkit-scrollbar { display: none; }
.spis-pasek a { flex: none; min-height: 44px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; border: 1px solid transparent;
  color: var(--tekst-2); text-decoration: none; font-size: 15px; white-space: nowrap; transition: color 150ms, background-color 150ms, border-color 150ms; }
.spis-pasek a[aria-current="true"] { color: var(--tekst); background: var(--akcent-tlo); border-color: hsl(195 100% 50% / .45); }
@media (hover: hover) { .spis-pasek a:hover { color: var(--tekst); } }
@media (max-width: 900px) { .spis-pasek .wnetrze { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .spis-pasek { background: var(--tlo); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { .spis-pasek { transition: none; } }
.spis-pasek .wnetrze.koniec { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 560px) { .skala-gw li { grid-template-columns: 1fr; gap: 4px; } }
/* zasłonięty opis chowa też punkty „W skrócie” */
.definicja.zaslonieta + ul { display: none; }

/* ---------- plakietka stanu efektu z grupy „Efekty, które nie przetrwały” (G5, decyzja Marcina 23.10.2026) ----------
   Odnosi się do słowa „efekt”: „Nie obronił się” / „Obronił się częściowo” / „Trwa spór”. */
.plakietka { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin: 0 0 14px; padding: 5px 12px 5px 10px; border-radius: 999px;
  font: 600 13px/1.2 var(--krój); letter-spacing: .04em; text-transform: uppercase; border: 1px solid; }
.plakietka::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.plakietka[data-stan="nie"] { color: var(--strata); background: hsl(352 75% 70% / .08); }
.plakietka[data-stan="czesciowo"] { color: var(--spor); background: hsl(36 90% 62% / .08); }
.plakietka[data-stan="spor"] { color: var(--akcent-tekst); background: var(--akcent-tlo); }
.karta-g5 .plakietka { margin: 0; }

/* oś czasu na stronach G5 (od 24.10.2026, prośba Marcina: animowana i bardziej atrakcyjna). Karta na każdy rok, plakietka z rokiem,
   linia z gradientem. Bez JS i przy prefers-reduced-motion wszystko widoczne od razu; animację włącza zadanie.js klasą .ozywiona. */
.os-czasu { --postep: 1; position: relative; list-style: none; margin: 24px 0 10px; padding: 0 0 0 36px; display: grid; gap: 14px; max-width: 76ch; }
.os-czasu::before, .os-czasu::after { content: ""; position: absolute; left: 12px; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; }
.os-czasu::before { background: var(--linia); }
.os-czasu::after { background: linear-gradient(to bottom, var(--akcent), hsl(195 100% 60% / .55) 55%, var(--spor)); transform-origin: top; transform: scaleY(var(--postep)); }
.os-czasu li { position: relative; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--linia); background: var(--karta); font-size: 16px; line-height: 1.5; }
.os-czasu li::before { content: ""; position: absolute; left: -31px; top: 19px; width: 14px; height: 14px; border-radius: 50%; background: var(--tlo); border: 2px solid var(--akcent);
  box-shadow: 0 0 0 4px var(--tlo); z-index: 1; transition: background 400ms ease, box-shadow 400ms ease; }
.os-czasu li.spada { border-color: hsl(36 90% 62% / .3); background: linear-gradient(100deg, hsl(36 90% 62% / .09), var(--karta) 55%); }
.os-czasu li.spada::before { border-color: var(--spor); }
.os-czasu li > b:first-child { display: inline-block; margin: 0 8px 2px 0; padding: 1px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--akcent-tekst); background: hsl(195 100% 60% / .12); border: 1px solid hsl(195 100% 60% / .32); }
.os-czasu li.spada > b:first-child { color: var(--spor); background: hsl(36 90% 62% / .1); border-color: hsl(36 90% 62% / .36); }
.os-czasu.ozywiona li { opacity: 0; transform: translateY(20px); transition: opacity 550ms ease, transform 550ms cubic-bezier(.2, .7, .2, 1), border-color 300ms; }
.os-czasu.ozywiona li.widac { opacity: 1; transform: none; }
.os-czasu.ozywiona li.zapalona::before { background: var(--akcent); box-shadow: 0 0 0 4px var(--tlo), 0 0 16px hsl(195 100% 60% / .75); animation: os-zaplon 600ms ease-out; }
.os-czasu.ozywiona li.spada.zapalona::before { background: var(--spor); box-shadow: 0 0 0 4px var(--tlo), 0 0 16px hsl(36 90% 62% / .75); }
@keyframes os-zaplon { 0% { transform: scale(.7); } 55% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (max-width: 560px) { .os-czasu { padding-left: 30px; } .os-czasu::before, .os-czasu::after { left: 9px; } .os-czasu li { padding: 12px 14px; font-size: 15px; } .os-czasu li::before { left: -28px; } }
@media (prefers-reduced-motion: reduce) { .os-czasu.ozywiona li { opacity: 1; transform: none; transition: none; } .os-czasu.ozywiona li::before { animation: none; } }

/* ======================================================================================================================
   Lista efektów na stronie działu i „Co dalej?” na stronach efektów (25.10.2026, uwaga Marcina: prawie 40 pozycji,
   lista ma pomagać przeglądać; nazwa efektu w nagłówku po zadaniu albo po dojściu do objaśnienia).
   Logika: wspolne/lista.js (strona działu), wspolne/zadanie.js (nazwa w nagłówku, postęp, „Co dalej?”).
   Bez JS widać pełną listę w grupach; pasek przeglądania i licznik postępu pokazuje dopiero skrypt.
   ====================================================================================================================== */
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- licznik postępu czytelnika ---------- */
.postep-czyt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 22px; margin: 6px 0 4px; padding: 18px 20px;
  border-radius: 22px; border: 1px solid var(--linia); background:
  radial-gradient(120% 140% at 0% 0%, hsl(195 100% 50% / .10), transparent 55%), var(--karta); }
.pc-licznik { display: flex; align-items: center; gap: 14px; grid-column: 1 / 3; }
.pc-liczba { font: 600 46px/1 var(--krój); letter-spacing: -.03em; color: var(--akcent-tekst); font-variant-numeric: tabular-nums; min-width: 1.2ch; }
.pc-opis { display: grid; gap: 2px; }
.pc-opis b { font-weight: 600; font-size: 17px; }
.pc-opis span { font-size: 14px; color: var(--tekst-3); }
.pc-pasek { grid-column: 1 / 3; height: 6px; border-radius: 6px; background: hsl(0 0% 100% / .08); overflow: hidden; }
.pc-pasek i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); min-width: 6px; border-radius: inherit;
  background: linear-gradient(90deg, var(--akcent), hsl(160 60% 60%)); transition: width 700ms var(--krzywa); }
.pc-losuj { grid-column: 3; grid-row: 1 / 3; }
.ikona-losuj { width: 20px; height: 20px; }
@media (max-width: 640px) {
  .postep-czyt { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .pc-licznik, .pc-pasek, .pc-losuj { grid-column: 1; grid-row: auto; }
  .pc-losuj { justify-content: center; }
  .pc-liczba { font-size: 38px; }
}

/* ---------- pasek przeglądania (przykleja się pod menu Atlasu) ---------- */
.sekcja-lista { padding-bottom: 72px; }
.przegladarka { position: sticky; top: var(--mz-h, 0px); z-index: 50; margin-top: 18px; padding-block: 10px;
  background: hsl(240 8% 8% / .78); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border-block: 1px solid transparent; transition: border-color 200ms, box-shadow 200ms; }
.przegladarka.przyklejony { border-bottom-color: var(--linia); box-shadow: 0 10px 30px hsl(0 0% 0% / .35); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .przegladarka { background: var(--tlo); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.pg-rzad { display: flex; gap: 10px; align-items: center; }
.pg-szukaj { flex: 1 1 auto; min-width: 0; position: relative; display: flex; align-items: center; }
.pg-szukaj svg { position: absolute; left: 14px; color: var(--tekst-3); pointer-events: none; }
.pg-szukaj input { width: 100%; min-height: 46px; padding: 0 44px 0 44px; border-radius: 999px; border: 1px solid var(--linia-2); background: hsl(0 0% 100% / .04);
  color: var(--tekst); font: 400 16px/1 var(--krój); -webkit-appearance: none; appearance: none; transition: border-color 150ms, background-color 150ms; }
.pg-szukaj input::placeholder { color: var(--tekst-3); }
.pg-szukaj input:focus { outline: none; border-color: var(--akcent); background: hsl(195 100% 50% / .06); }
.pg-szukaj input::-webkit-search-cancel-button { display: none; }
.pg-wyczysc { position: absolute; right: 4px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--tekst-2);
  font: 400 24px/1 var(--krój); cursor: pointer; }
.pg-wyczysc:hover { color: var(--tekst); background: hsl(0 0% 100% / .08); }
.pg-sort select { min-height: 46px; padding: 0 34px 0 16px; border-radius: 999px; border: 1px solid var(--linia-2); color: var(--tekst); font: 500 15px/1 var(--krój); cursor: pointer;
  -webkit-appearance: none; appearance: none; background: hsl(0 0% 100% / .04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%23A9A9B3' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 14px center / 10px; }
.pg-sort select:hover { border-color: hsl(0 0% 100% / .45); }
.pg-sort option { background: #18181c; color: var(--tekst); }
.pg-widok { display: flex; padding: 3px; border-radius: 999px; border: 1px solid var(--linia-2); background: hsl(0 0% 100% / .03); }
.pg-widok button { width: 40px; height: 38px; border: 0; border-radius: 999px; background: transparent; color: var(--tekst-3); cursor: pointer; display: grid; place-items: center;
  transition: color 150ms, background-color 150ms; }
.pg-widok button:hover { color: var(--tekst); }
.pg-widok button[aria-pressed="true"] { color: var(--na-akcencie); background: var(--akcent); }
.lista-tytul { max-width: 40ch; }
.pg-tematy { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; padding-block: 2px; -webkit-overflow-scrolling: touch; }
.pg-tematy::-webkit-scrollbar { display: none; }
.chip { --kolor: var(--akcent); flex: none; min-height: 36px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--linia); background: transparent;
  color: var(--tekst-2); font: 500 14.5px/1 var(--krój); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  transition: color 150ms, background-color 150ms, border-color 150ms, transform 120ms var(--krzywa); }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--kolor); box-shadow: 0 0 10px var(--kolor); }
.chip span { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--tekst-3); }
.chip:hover { color: var(--tekst); border-color: var(--linia-2); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { color: var(--tekst); border-color: color-mix(in srgb, var(--kolor) 60%, transparent); background: color-mix(in srgb, var(--kolor) 15%, transparent); }
.chip[aria-pressed="true"] span { color: var(--tekst-2); }
.chip-niespr::before { width: 10px; height: 10px; background: transparent; border: 1.6px solid var(--tekst-2); box-shadow: none; }
.chip-niespr { margin-left: 6px; }
.chip-niespr[aria-pressed="true"]::before { border-color: var(--akcent-tekst); }
@media (max-width: 640px) {
  .pg-rzad { gap: 8px; }
  .chip { min-height: 40px; }
  .pg-sort select { width: 46px; padding: 0; color: transparent; background-position: center; background-size: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8C8D0' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7h16M7 12h10M10 17h4'/%3E%3C/svg%3E"); background-size: 20px; }
  .pg-sort option { color: var(--tekst); }
  .pg-widok button { width: 36px; }
  .pg-tematy { flex-wrap: nowrap; margin-inline: -16px; padding-inline: 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent); }
}

/* ---------- grupy tematyczne ---------- */
.lista-efektow { padding-top: 8px; }
.lista-wynik { margin: 18px 0 0; font-size: 15px; color: var(--tekst-2); min-height: 0; }
.lista-wynik:empty { display: none; }
.grupa { --kolor: var(--akcent); margin-top: 44px; scroll-margin-top: calc(var(--mz-h, 0px) + var(--pg-h, 150px) + 12px); }
.grupa-naglowek { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.grupa-ikona { flex: none; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; color: var(--kolor);
  background: color-mix(in srgb, var(--kolor) 13%, transparent); border: 1px solid color-mix(in srgb, var(--kolor) 35%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--kolor) 18%, transparent); }
.grupa-ikona svg { width: 26px; height: 26px; }
.grupa-naglowek h3 { margin: 2px 0 4px; font: 600 23px/1.2 var(--krój); letter-spacing: -.012em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grupa-liczba { font: 600 13px/1 var(--krój); padding: 5px 9px; border-radius: 999px; color: var(--tekst-2); background: hsl(0 0% 100% / .07); font-variant-numeric: tabular-nums; }
.grupa-naglowek p { margin: 0; font-size: 15.5px; color: var(--tekst-2); }
.grupa-wstep { margin: -4px 0 18px 64px; font-size: 15.5px; color: var(--tekst-2); max-width: 78ch; }
@media (max-width: 640px) { .grupa-wstep { margin-left: 0; } .grupa-naglowek h3 { font-size: 21px; } .grupa { margin-top: 36px; } }

/* ---------- karty efektów ---------- */
.karty-efektow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1040px) { .karty-efektow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px) { .karty-efektow { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
.karta-efekt { --kolor: var(--akcent); position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 12px; align-content: start; padding: 18px 20px 18px;
  border-radius: 22px; color: inherit; text-decoration: none; background: var(--karta); border: 1px solid var(--linia);
  transition: border-color 200ms, background-color 200ms, transform 260ms var(--krzywa), box-shadow 260ms var(--krzywa); }
.karta-efekt[data-tematy^="pieniadze"] { --kolor: hsl(160 55% 58%); }
.karta-efekt[data-tematy^="szanse"] { --kolor: hsl(36 90% 62%); }
.karta-efekt[data-tematy^="pewnosc"] { --kolor: hsl(265 75% 76%); }
.karta-efekt[data-tematy^="patrzenie"] { --kolor: hsl(195 100% 62%); }
.karta-efekt[data-tematy^="siebie"] { --kolor: hsl(320 65% 74%); }
.karta-efekt[data-tematy^="inni"] { --kolor: hsl(212 85% 72%); }
.karta-efekt[data-tematy^="nie-przetrwaly"] { --kolor: hsl(352 75% 72%); }
.karta-efekt::before { content: ""; position: absolute; z-index: -1; inset: -1px; border-radius: inherit; pointer-events: none; opacity: .55;
  background: radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--kolor) 11%, transparent), transparent 62%); transition: opacity 260ms; }
@media (hover: hover) {
  .karta-efekt:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--kolor) 55%, transparent); background: var(--karta-2);
    box-shadow: 0 16px 36px hsl(0 0% 0% / .4), 0 0 0 1px color-mix(in srgb, var(--kolor) 18%, transparent); }
  .karta-efekt:hover::before { opacity: 1; }
  .karta-efekt:hover .miniatura { transform: scale(1.07); box-shadow: 0 0 22px color-mix(in srgb, var(--kolor) 35%, transparent); }
  .karta-efekt:hover .dalej::after { transform: translateX(4px); }
}
.karta-efekt:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; border-radius: 22px; }
.karta-gora { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; }
.miniatura { width: 64px; height: 64px; border-radius: 18px; object-fit: cover; background: #000; border: 1px solid hsl(0 0% 100% / .1);
  transition: transform 300ms var(--krzywa), box-shadow 300ms; }
.karta-naglowek { display: grid; gap: 4px; min-width: 0; }
.karta-efekt h3 { margin: 0; font: 600 20px/1.22 var(--krój); letter-spacing: -.01em; text-wrap: balance; }
.karta-temat { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px/1.2 var(--krój); letter-spacing: .02em; color: var(--tekst-3); }
.karta-temat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--kolor); box-shadow: 0 0 8px var(--kolor); }
.karta-efekt.w-swojej .karta-temat { display: none; }
.karta-efekt .karta-plakietka { margin: 0; padding: 3px 9px 3px 8px; font-size: 11px; gap: 6px; }
.karta-efekt .karta-plakietka::before { width: 6px; height: 6px; }
.karta-efekt .pytanie-karty { margin: 0; font-size: 16.5px; line-height: 1.42; color: var(--tekst); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.karta-efekt .czas { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--tekst-3); }
.karta-efekt .czas-krotki { display: none; }
.karta-efekt .oceny { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 2px 0 0; padding-top: 12px; border-top: 1px solid var(--linia); }
.karta-efekt .ocena { display: inline-flex; align-items: center; gap: 7px; }
.karta-efekt .ocena-nazwa { font: 500 12.5px/1.2 var(--krój); color: var(--tekst-3); }
.karta-efekt .gwiazdki { font-size: 13px; }
.karta-efekt .ocena-opis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.karta-efekt .dalej { font: 600 15px/1.2 var(--krój); color: var(--akcent-tekst); display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; }
.karta-efekt .dalej::after { content: "→"; transition: transform 200ms var(--krzywa); }
/* znacznik postępu (dopisuje lista.js; 25.10.2026 ikony zamiast etykiet): oko = odkryty, oko i ptaszek = odkryty z zadaniem */
.znacznik { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 7px; border-radius: 999px;
  color: var(--akcent-tekst); background: hsl(195 100% 50% / .12); border: 1px solid hsl(195 100% 50% / .35); }
.znacznik svg { width: 15px; height: 15px; }
.znacznik.zadanie { color: hsl(160 60% 66%); background: hsl(160 55% 55% / .13); border-color: hsl(160 55% 55% / .4); }
.znacznik.zadanie svg + svg { width: 13px; height: 13px; margin-left: -1px; }
.karta-efekt[data-postep] .karta-gora { padding-right: 52px; }
.karta-efekt[data-postep="zadanie"] .miniatura { box-shadow: 0 0 0 2px hsl(160 55% 55% / .55); }
.karta-efekt[data-postep="odkryty"] .miniatura { box-shadow: 0 0 0 2px hsl(195 100% 50% / .45); }
.pc-opis #pc-drobne { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.pc-legenda { display: inline-flex; align-items: center; gap: 6px; color: var(--tekst-2); }
.pc-legenda .znacznik { position: static; height: 22px; padding: 0 5px; }
.pc-legenda .znacznik svg { width: 12px; height: 12px; }
.pc-legenda .znacznik.zadanie svg + svg { width: 11px; height: 11px; }

/* widok listy: jeden wiersz na efekt */
.karty-efektow.widok-lista { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.widok-lista .karta-efekt { grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 16px; align-items: center; padding: 12px 16px; border-radius: 18px; }
.widok-lista .karta-gora { display: contents; }
.widok-lista .miniatura { grid-row: 1 / 3; grid-column: 1; width: 52px; height: 52px; border-radius: 14px; }
.widok-lista .karta-naglowek { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.widok-lista .karta-efekt h3 { font-size: 17.5px; order: -1; }
.widok-lista .karta-temat { font-size: 12px; }
.widok-lista .karta-plakietka { font-size: 10px; align-self: center; }
.widok-lista .pytanie-karty { grid-column: 2; grid-row: 2; font-size: 15px; color: var(--tekst-2); -webkit-line-clamp: 1; }
.widok-lista .czas { grid-column: 3; grid-row: 1; text-align: right; }
.widok-lista .czas-pelny { display: none; }
.widok-lista .czas-krotki { display: inline; font-variant-numeric: tabular-nums; }
.widok-lista .oceny { grid-column: 3; grid-row: 2; border: 0; padding: 0; margin: 0; gap: 2px 12px; justify-content: flex-end; flex-wrap: nowrap; }
.widok-lista .ocena-nazwa { font-size: 11.5px; }
.widok-lista .gwiazdki { font-size: 11.5px; }
.widok-lista .dalej { display: none; }
.widok-lista .znacznik { position: static; grid-column: 3; grid-row: 1; justify-self: end; height: 24px; padding: 0 6px; }
.widok-lista .karta-efekt[data-postep] .czas { display: none; }
.widok-lista .karta-efekt[data-postep] .karta-gora { padding-right: 0; }
@media (hover: hover) { .widok-lista .karta-efekt:hover { transform: translateX(3px); } }
@media (max-width: 760px) {
  .widok-lista .karta-efekt { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 11px 12px 11px 11px; gap: 2px 12px; }
  .widok-lista .miniatura { width: 48px; height: 48px; }
  .widok-lista .karta-temat { display: none; }
  .widok-lista .karta-efekt .karta-plakietka { font-size: 9.5px; padding: 2px 7px 2px 6px; letter-spacing: .03em; }
  .widok-lista .karta-efekt h3 { font-size: 16.5px; }
  .widok-lista .pytanie-karty { -webkit-line-clamp: 2; font-size: 14px; grid-column: 2 / 4; }
  .widok-lista .oceny { display: none; }
  .widok-lista .czas { font-size: 12.5px; align-self: start; padding-top: 3px; }
}
/* wjazd kart po zmianie filtra */
.karta-efekt.wjazd { animation: karta-wjazd-l 420ms var(--krzywa) both; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes karta-wjazd-l { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .karta-efekt, .karta-efekt.wjazd, .miniatura { animation: none; transition: none; } }
.pusto { margin-top: 28px; padding: 28px; border-radius: 22px; border: 1px dashed var(--linia-2); text-align: center; display: grid; justify-items: center; gap: 12px; }
.pusto p { margin: 0; color: var(--tekst-2); }
.pusto b { color: var(--tekst); }
.lista-efektow .skala-link { margin: 32px 0 0; }

/* ---------- strona efektu: nazwa w nagłówku po zadaniu albo po dojściu do objaśnienia ---------- */
.brew-efekt { color: var(--tekst); font-style: normal; font-family: var(--krój); font-weight: 600; font-size: 15px; letter-spacing: 0; }
.brew-efekt::before { content: "›"; margin: 0 8px; color: var(--tekst-3); font-weight: 400; }
.pasek-efekt { position: sticky; left: 0; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 8px; max-width: min(46vw, 340px); min-height: 44px;
  padding: 0 16px 0 2px; margin-right: 2px; font: 600 15px/1.2 var(--krój); color: var(--tekst); white-space: nowrap;
  background: linear-gradient(90deg, hsl(240 8% 8%) calc(100% - 18px), transparent); }
.pasek-efekt span { overflow: hidden; text-overflow: ellipsis; }
.pasek-efekt::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--akcent); box-shadow: 0 0 10px var(--akcent); }
.odkryte-teraz { animation: odkryj 900ms var(--krzywa) both; }
@keyframes odkryj { 0% { opacity: 0; filter: blur(6px); transform: translateY(4px); } 60% { opacity: 1; filter: blur(0); text-shadow: 0 0 18px hsl(195 100% 60% / .9); } 100% { transform: none; text-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .odkryte-teraz { animation: none; } }

/* ---------- strona efektu: „Co dalej?” (przed źródłami) ---------- */
.co-dalej .dalej-uklad { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 8px; }
@media (max-width: 960px) { .co-dalej .dalej-uklad { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .co-dalej .karta-dalej { grid-column: 1 / -1; } }
@media (max-width: 560px) { .co-dalej .dalej-uklad { gap: 12px; } .karta-akcja { padding: 16px; gap: 6px; } .karta-akcja svg { width: 26px; height: 26px; } .karta-akcja b { font-size: 16.5px; } .karta-akcja span { font-size: 13.5px; } }
.co-dalej .karta-efekt .dalej-etykieta { font: 500 13px/1.3 var(--krój); color: var(--tekst-3); margin: 0; }
.karta-akcja { position: relative; overflow: hidden; display: grid; align-content: start; gap: 10px; padding: 20px; border-radius: 22px; border: 1px solid var(--linia);
  background: var(--karta); color: var(--tekst); text-decoration: none; font: inherit; text-align: left; cursor: pointer;
  transition: border-color 200ms, background-color 200ms, transform 260ms var(--krzywa); }
.karta-akcja svg { width: 30px; height: 30px; color: var(--akcent-tekst); }
.karta-akcja b { font: 600 18px/1.25 var(--krój); }
.karta-akcja span { font-size: 14.5px; color: var(--tekst-2); }
@media (hover: hover) { .karta-akcja:hover { transform: translateY(-3px); border-color: var(--akcent); background: var(--karta-2); } .karta-akcja:hover svg { animation: kostka 600ms var(--krzywa); } }
@keyframes kostka { 50% { transform: rotate(-14deg) scale(1.1); } }

/* 25.10.2026 (Marcin, ok. 16:00): widok listy na komputerze w dwóch kolumnach; oceny w linijce pod pytaniem zamiast przy prawej krawędzi */
@media (min-width: 1100px) {
  .karty-efektow.widok-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
  .widok-lista .karta-efekt { grid-template-columns: 60px minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; gap: 3px 16px; align-items: start; padding: 14px 18px 14px 14px; }
  .widok-lista .miniatura { grid-row: 1 / 4; width: 60px; height: 60px; }
  .widok-lista .pytanie-karty { grid-column: 2 / 4; -webkit-line-clamp: 2; }
  .widok-lista .czas { padding-top: 3px; }
  .widok-lista .oceny { grid-column: 2 / 4; grid-row: 3; align-self: end; justify-content: flex-start; margin-top: 6px; gap: 2px 18px; }
}
/* nagłówki (reguła 25.10.2026): na komputerze drugie zdanie nagłówka listy od nowej linijki; sklejanie słów robi zadanie.js (sklej) */
.lista-tytul { text-wrap: balance; }
@media (min-width: 901px) { .lista-tytul { max-width: 52ch; } .lista-tytul span { display: block; } }
h3 { text-wrap: balance; }
/* liczba przy nazwie grupy sklejona z ostatnim słowem (&nbsp; w lista_efektow.py), nie w osobnej linijce na telefonie */
.grupa-naglowek h3 { display: block; }
.grupa-naglowek h3 .grupa-liczba { display: inline-block; margin-left: 4px; vertical-align: 3px; }

/* ===================== Odświeżenie stron efektów (pilot 25.10.2026, Efekt framingu) =====================
   Działa tylko na stronach z klasą odswiezona na elemencie body; pozostałe strony bez zmian do czasu wdrożenia.
   Wzór: strony tematyczne (dopamina, sen; Atlas mózgu/tematy/README.md). Zasada: forma pracuje dla treści.
   Klasy z przedrostkiem od- (nazwy .slupki, .porownanie, .teza są zajęte albo kolidują z tematy/komponenty.css).
   Ruch włącza zadanie.js (sekcja „Odświeżenie”) klasą .od-ruch na elemencie html; bez JS i przy „ogranicz ruch” stan końcowy. */
.odswiezona { --szklo-tlo: linear-gradient(160deg, hsl(212 55% 24% / .34), hsl(232 30% 9% / .55) 45%, hsl(240 22% 5% / .62));
  --szklo-kraw: hsl(200 60% 85% / .16); }
.odswiezona .sekcja { position: relative; isolation: isolate; }
.odswiezona .sekcja::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 38% at 8% 12%, hsl(197 80% 30% / .16), transparent 70%), radial-gradient(40% 34% at 96% 70%, hsl(330 70% 40% / .08), transparent 70%); }
.odswiezona .sekcja:nth-of-type(even)::before { background: radial-gradient(44% 36% at 92% 10%, hsl(197 80% 30% / .15), transparent 70%), radial-gradient(40% 34% at 4% 80%, hsl(160 60% 30% / .08), transparent 70%); }

/* szkło kart */
.odswiezona .od-szklo, .odswiezona .karta, .odswiezona .skrot-uklad > div > ul {
  background: var(--szklo-tlo); border: 1px solid var(--szklo-kraw); border-radius: 24px;
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .08), 0 18px 48px hsl(220 70% 2% / .38); }
.odswiezona .skrot-uklad > div > ul { list-style: none; padding: 20px 22px; }
.odswiezona .skrot-uklad > div > ul li { position: relative; padding-left: 22px; }
.odswiezona .skrot-uklad > div > ul li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%;
  background: var(--akcent); box-shadow: 0 0 10px hsl(195 100% 50% / .7); }
.odswiezona .od-szklo { padding: 26px 28px 12px; max-width: 76ch; }
.odswiezona .definicja { background: linear-gradient(160deg, hsl(197 90% 40% / .18), hsl(230 30% 9% / .5)); box-shadow: inset 0 1px 0 hsl(0 0% 100% / .08), 0 0 34px hsl(195 100% 50% / .12); }
.odswiezona .karta .liczba { background: linear-gradient(180deg, #fff 30%, hsl(197 100% 72%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .odswiezona .od-szklo, .odswiezona .karta, .odswiezona .skrot-uklad > div > ul { background: var(--karta); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (max-width: 560px) { .odswiezona .od-szklo { padding: 20px 18px 6px; } }

/* podtytuł w dwóch piętrach: duże zdanie z tezą, pod nim mały akapit */
.od-podtytul { margin: 20px 0 0; font: 500 clamp(19px, 2vw, 24px)/1.38 var(--krój); color: var(--tekst); max-width: 34ch; text-wrap: balance; }
.od-podtytul + .lead { margin-top: 12px; font-size: 17px; }

/* słupki w kolorach o stałym znaczeniu, rosnące po kolei */
.odswiezona .slupek .tor b { background: linear-gradient(90deg, hsl(0 0% 100% / .12), hsl(0 0% 100% / .3)); transform-origin: left;
  transition: transform 900ms cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--n, 0) * 120ms); }
.odswiezona .slupek.od-z .tor b { background: linear-gradient(90deg, hsl(160 55% 55% / .35), var(--zysk)); box-shadow: 0 0 14px hsl(160 55% 55% / .3); }
.odswiezona .slupek.od-t .tor b { background: linear-gradient(90deg, hsl(352 75% 70% / .35), var(--strata)); box-shadow: 0 0 14px hsl(352 75% 70% / .3); }
.odswiezona .slupek.akcent .tor b, .odswiezona .slupek .tor b.ty-b { background: linear-gradient(90deg, hsl(195 100% 50% / .35), var(--akcent)); box-shadow: 0 0 16px hsl(195 100% 50% / .4); opacity: 1; }
.odswiezona .slupek output { color: var(--tekst); }
.odswiezona .slupek.od-z output { color: hsl(160 60% 72%); }
.odswiezona .slupek.od-t output { color: hsl(352 85% 80%); }
.od-ruch .slupki.od-czeka .slupek .tor b { transform: scaleX(0); }
.odswiezona .rama-wiersz .tor { transition: clip-path 1100ms cubic-bezier(.2,.7,.2,1); clip-path: inset(0 0 0 0 round 10px); }
.odswiezona .rama-wiersz .tor .pewny { background: linear-gradient(90deg, hsl(0 0% 100% / .16), hsl(0 0% 100% / .3)); }
.od-ruch .ramy.od-czeka .rama-wiersz .tor { clip-path: inset(0 100% 0 0 round 10px); }
.odswiezona .ramy .rama-wiersz:nth-child(2) .tor { transition-delay: 220ms; }

/* wyróżniona liczba z doliczaniem */
.od-liczba { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 6px 0 18px; padding: 16px 20px; border-radius: 20px; max-width: 62ch;
  border: 1px solid hsl(195 100% 70% / .22); background: radial-gradient(120% 160% at 0% 0%, hsl(197 80% 30% / .28), transparent 62%), hsl(230 20% 6% / .55);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .07), 0 14px 36px hsl(220 70% 2% / .35); }
.od-liczba b { flex: none; font: 700 clamp(42px, 4.4vw, 58px)/1 var(--krój); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap;
  background: linear-gradient(180deg, #fff 30%, hsl(197 100% 72%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.od-liczba b small { font-size: .42em; font-weight: 600; letter-spacing: 0; margin-left: .18em; }
.od-liczba span { flex: 1 1 18ch; min-width: 15ch; max-width: 40ch; font-size: 15.5px; line-height: 1.4; color: var(--tekst); }
@media (max-width: 560px) { .od-liczba { padding: 14px 16px; } .od-liczba span { flex-basis: 100%; max-width: none; } }

/* karta tezy: dwie karty i znak między nimi (≠ albo =). Zasłonięta jak definicja, gdy zdradza zadanie. */
.od-teza { position: relative; margin: 26px 0 8px; padding: 20px 18px 16px; border-radius: 24px; max-width: 760px; border: 1px solid hsl(195 100% 70% / .24);
  background: radial-gradient(90% 120% at 15% 0%, hsl(160 70% 35% / .2), transparent 60%), radial-gradient(80% 120% at 100% 100%, hsl(352 75% 50% / .16), transparent 60%), hsl(230 20% 6% / .6);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / .07), 0 20px 50px hsl(220 70% 2% / .4); }
.od-teza-para { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; }
.od-teza-k { --k: var(--akcent); display: grid; align-content: center; gap: 6px; padding: 16px 14px 14px; border-radius: 18px; text-align: center;
  border: 1px solid color-mix(in srgb, var(--k) 60%, transparent); background: color-mix(in srgb, var(--k) 12%, transparent);
  box-shadow: 0 0 26px color-mix(in srgb, var(--k) 22%, transparent), inset 0 0 22px color-mix(in srgb, var(--k) 10%, transparent); }
.od-teza-k span { font-size: 13px; line-height: 1.3; color: var(--tekst-2); letter-spacing: .02em; }
.od-teza-k b { font: 700 clamp(21px, 2.4vw, 28px)/1.12 var(--krój); letter-spacing: -.015em; color: color-mix(in srgb, var(--k) 40%, #fff); text-wrap: balance; }
.od-teza-k em { justify-self: center; margin-top: 4px; padding: 5px 12px; border-radius: 999px; font: normal 600 13px/1.2 var(--krój);
  color: color-mix(in srgb, var(--k) 35%, #fff); background: color-mix(in srgb, var(--k) 22%, transparent); border: 1px solid color-mix(in srgb, var(--k) 50%, transparent); }
.od-teza-k em output { font: inherit; font-size: 17px; font-variant-numeric: tabular-nums; }
.od-teza-znak { display: grid; place-items: center; min-width: 52px; font: 300 clamp(44px, 5vw, 60px)/1 var(--krój); color: hsl(330 100% 75%);
  text-shadow: 0 0 18px hsl(330 100% 60% / .75), 0 0 4px hsl(330 100% 70%); }
.od-teza figcaption { margin: 14px 4px 0; font-size: 15px; line-height: 1.45; color: var(--tekst-2); text-align: center; text-wrap: pretty; }
.od-ruch .od-teza.od-czeka .od-teza-k:first-child { opacity: 0; transform: translateX(-26px); }
.od-ruch .od-teza.od-czeka .od-teza-k:last-child { opacity: 0; transform: translateX(26px); }
.od-ruch .od-teza.od-czeka .od-teza-znak { opacity: 0; transform: scale(.3) rotate(-30deg); }
.od-teza.od-gotowa .od-teza-k, .od-teza.od-gotowa .od-teza-znak { transition: opacity 700ms ease, transform 900ms cubic-bezier(.2,.8,.2,1); }
.od-teza.od-gotowa .od-teza-znak { transition-delay: 380ms; animation: od-puls 2.8s ease-in-out 1.3s 2; }
@keyframes od-puls { 50% { text-shadow: 0 0 30px hsl(330 100% 62% / .95), 0 0 6px hsl(330 100% 75%); } }
.od-teza .od-zaslona { display: none; }
.od-teza.od-zakryta .od-teza-para, .od-teza.od-zakryta figcaption { filter: blur(9px); opacity: .55; pointer-events: none; user-select: none; }
.od-teza.od-zakryta .od-zaslona { display: grid; place-content: center; justify-items: center; gap: 12px; position: absolute; inset: 0; padding: 16px; text-align: center; border-radius: inherit; background: hsl(230 20% 6% / .35); }
.od-zaslona p { margin: 0; max-width: 40ch; font-size: 15px; color: var(--tekst); }
.od-zaslona .przycisk { min-height: 44px; font-size: 16px; padding: 0 18px; }
@media (max-width: 560px) {
  .od-teza-para { grid-template-columns: 1fr; gap: 4px; }
  .od-teza-znak { min-width: 0; font-size: 40px; line-height: 1.1; }
  .od-ruch .od-teza.od-czeka .od-teza-k:first-child, .od-ruch .od-teza.od-czeka .od-teza-k:last-child { transform: translateY(16px); }
}

/* demonstracja: ten sam banknot, dwa opisy (Efekt framingu) */
.od-demo { margin: 22px 0 6px; padding: 20px 20px 16px; border-radius: 24px; max-width: 760px; border: 1px solid var(--szklo-kraw, var(--linia));
  background: var(--szklo-tlo, var(--karta)); box-shadow: inset 0 1px 0 hsl(0 0% 100% / .08), 0 18px 48px hsl(220 70% 2% / .38); }
.od-demo-uklad { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 22px; align-items: center; }
.od-demo svg { display: block; width: 100%; height: auto; overflow: visible; }
.od-demo svg text { font-family: var(--krój); }
.od-przelacz { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; border: 1px solid var(--linia-2); background: hsl(0 0% 100% / .04); margin-bottom: 14px; flex-wrap: wrap; }
.od-przelacz button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; color: var(--tekst-2); font: 600 15px/1 var(--krój); cursor: pointer; transition: background-color 200ms, color 200ms; }
.od-przelacz button[aria-pressed="true"][data-r="z"] { background: hsl(160 55% 55% / .22); color: hsl(160 60% 80%); box-shadow: inset 0 0 0 1px hsl(160 55% 55% / .6); }
.od-przelacz button[aria-pressed="true"][data-r="t"] { background: hsl(352 75% 70% / .22); color: hsl(352 85% 85%); box-shadow: inset 0 0 0 1px hsl(352 75% 70% / .6); }
.od-demo-wynik { display: grid; gap: 6px; }
.od-demo-wynik .etyk { font-size: 13px; color: var(--tekst-2); }
.od-demo-wynik output { font: 700 clamp(44px, 5vw, 60px)/1 var(--krój); letter-spacing: -.03em; font-variant-numeric: tabular-nums; transition: color 400ms; }
.od-demo[data-r="z"] .od-demo-wynik output { color: hsl(160 60% 72%); }
.od-demo[data-r="t"] .od-demo-wynik output { color: hsl(352 85% 80%); }
.od-demo-wynik .zostaje { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--linia); font-size: 14px; color: var(--tekst); }
.od-demo-wynik .zostaje b { font-size: 18px; }
.od-demo figcaption { margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--tekst-3); }
.od-demo .czesc { transition: opacity 450ms ease, fill 450ms ease; }
.od-demo .napis { transition: opacity 450ms ease; }
.od-demo[data-r="z"] .cz-t { opacity: .28; } .od-demo[data-r="t"] .cz-z { opacity: .28; }
.od-demo[data-r="z"] .n-t, .od-demo[data-r="t"] .n-z { opacity: 0; }
@media (max-width: 640px) { .od-demo-uklad { grid-template-columns: 1fr; gap: 12px; } .od-demo { padding: 16px 14px 12px; }
  .od-przelacz { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .od-przelacz button { padding: 0 8px; font-size: 14px; } }

/* grafika w nagłówku (Efekt framingu): jeden banknot, rama zmienia kolor */
.od-hero .rama-z, .od-hero .rama-t, .od-hero .et-z, .od-hero .et-t { transition: opacity 900ms ease; }
.od-ruch .od-hero.zmienia .rama-z, .od-ruch .od-hero.zmienia .et-z { animation: od-rama 7s ease-in-out infinite; }
.od-ruch .od-hero.zmienia .rama-t, .od-ruch .od-hero.zmienia .et-t { animation: od-rama 7s ease-in-out -3.5s infinite; }
@keyframes od-rama { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } }
.od-hero .rama-t, .od-hero .et-t { opacity: 0; }

/* pytanie otwierające akapit pogrubione (Marcin 25.10.2026, 20:38) */
.odswiezona .hak { font-weight: 650; color: var(--tekst); }
/* słupki „po wysokiej” i „po niskiej” liczbie (zakotwiczenie): ciepły i chłodny, Ty zostaje błękitne */
.odswiezona .slupek.od-wys .tor b { background: linear-gradient(90deg, hsl(36 90% 62% / .35), var(--spor)); box-shadow: 0 0 14px hsl(36 90% 62% / .3); }
.odswiezona .slupek.od-nis .tor b { background: linear-gradient(90deg, hsl(265 70% 72% / .35), hsl(265 70% 72%)); box-shadow: 0 0 14px hsl(265 70% 72% / .3); }
.odswiezona .slupek.od-wys output { color: hsl(36 95% 74%); }
.odswiezona .slupek.od-nis output { color: hsl(265 85% 84%); }

/* trójki liczb (np. klasyk i powtórka w opcji domyślnej): szkło i odstęp od akapitu pod spodem (uwaga Marcina 25.10.2026, 22:01) */
.odswiezona .trojki { margin: 18px 0 22px; }
.odswiezona .trojki > div { background: var(--szklo-tlo); border: 1px solid var(--szklo-kraw); border-radius: 20px; padding: 18px;
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 1px 0 hsl(0 0% 100% / .08), 0 14px 36px hsl(220 70% 2% / .35); }
.odswiezona .trojki > div > b:first-of-type { background: linear-gradient(180deg, #fff 30%, hsl(197 100% 72%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.odswiezona .trojki > div > b:first-of-type small { -webkit-text-fill-color: var(--tekst-2); }
/* pastylki z tekstem w dwóch linijkach (uwaga Marcina 25.10.2026, 22:01): marginesy w środku, równe łamanie */
.od-teza-k em { padding: 6px 14px; line-height: 1.35; border-radius: 16px; text-wrap: balance; }
.od-przelacz button { line-height: 1.2; padding-block: 6px; text-wrap: balance; }
@media (max-width: 640px) { .od-przelacz { border-radius: 26px; } .od-przelacz button { min-height: 44px; border-radius: 22px; } }

/* znak ≠ i = w karcie tezy rysowany w SVG przez zadanie.js (uwaga Marcina 25.10.2026, 23:59: kreska w cienkim glifie ginęła w poświacie) */
.od-teza-znak.od-znak-svg svg { width: 54px; height: 54px; overflow: visible; fill: none; stroke: hsl(330 100% 78%); stroke-width: 4.5; stroke-linecap: round;
  filter: drop-shadow(0 0 5px hsl(330 100% 60% / .75)); }
.od-teza-znak.od-znak-svg svg .kreska { stroke: hsl(330 100% 86%); stroke-width: 5; }
@media (max-width: 560px) { .od-teza-znak.od-znak-svg svg { width: 44px; height: 44px; } }

/* znaki „<”, „>” i „≈” w SVG (decyzja Marcina W4, 26.10.2026) i format „na 100” w demonstracji (W5) */
.od-teza-znak.od-znak-svg svg { stroke-linejoin: round; }
.od-demo-wynik output .od-jedn { font-size: .42em; font-weight: 600; letter-spacing: 0; }