:root {
  color-scheme: light;
  --ink: #17212b;
  --muted: #5d6a75;
  --paper: #ffffff;
  --soft: #f4f7f5;
  --line: #d9e0dc;
  --navy: #16324a;
  --green: #176b55;
  --green-soft: #e7f3ee;
  --amber: #a75d17;
  --amber-soft: #fff2df;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--soft);
  /* Inter nie jest ładowany żadnym @font-face — nie udajemy, że jest.
     Jawny stos systemowy zamiast cichego fallbacku. */
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.62;
  letter-spacing: 0;
}
a { color: #155f88; text-underline-offset: 3px; }
a:hover { color: #0e435f; }
img { max-width: 100%; height: auto; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; z-index: 20; background: #fff; padding: 10px 14px; }
.wrap { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.site-head { background: var(--paper); border-bottom: 1px solid var(--line); }
.head-row { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; background: var(--green); border-radius: 6px; font-family: Georgia, serif; }
.site-nav { display: flex; align-items: center; gap: 22px; font-size: 14px; font-weight: 700; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--ink); }
.nav-cta { padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.intro-band { padding: 54px 0 44px; background: var(--navy); color: #fff; }
.intro-band .eyebrow { color: #9fd4c2; }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .75fr); gap: 52px; align-items: end; }
.eyebrow { margin: 0 0 8px; color: var(--green); font-size: 12px; font-weight: 800; text-transform: uppercase; }
h1, h2, h3 { margin-top: 0; line-height: 1.18; letter-spacing: 0; }
h1 { max-width: 900px; margin-bottom: 16px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 5vw, 58px); font-weight: 700; }
h2 { margin-bottom: 14px; font-family: Georgia, "Times New Roman", serif; font-size: 30px; }
h3 { margin-bottom: 8px; font-size: 18px; }
.lead { max-width: 760px; margin: 0; color: #dbe7e3; font-size: 18px; }
.intro-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 14px; border: 1px solid transparent; border-radius: 6px; font-weight: 800; text-decoration: none; }
.button.primary { color: #fff; background: var(--green); }
.button.secondary { color: var(--ink); background: #fff; border-color: var(--line); }
.intro-stat { border-left: 1px solid rgba(255,255,255,.24); padding-left: 28px; }
.intro-stat strong { display: block; font-family: Georgia, serif; font-size: 40px; line-height: 1; }
.intro-stat span { display: block; margin-top: 8px; color: #c9d8d3; font-size: 14px; }
.breadcrumbs { padding: 16px 0; color: var(--muted); font-size: 13px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 7px; color: #9aa4aa; }
.page { padding: 42px 0 68px; }
.section { padding: 44px 0; border-top: 1px solid var(--line); }
.section:first-child { padding-top: 0; border-top: 0; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .55fr); gap: 30px; align-items: end; margin-bottom: 24px; }
.section-head p { margin: 0; color: var(--muted); }
.category-grid, .topic-grid, .task-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.category-card, .topic-card, .task-card { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); }
.category-card a, .topic-card a, .task-card a { color: var(--ink); text-decoration: none; }
.category-card a:hover, .topic-card a:hover, .task-card a:hover { color: var(--green); }
.category-card p, .topic-card p, .task-card p { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.count { display: inline-block; margin-top: 13px; color: var(--green); font-size: 12px; font-weight: 800; }
.topic-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.topic-link, .chip { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-size: 12px; text-decoration: none; }
.topic-link:hover { border-color: #9db7aa; color: var(--green); }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .65fr); gap: 42px; }
.prose { min-width: 0; }
.prose p { max-width: 76ch; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 7px; }
.aside-block { align-self: start; padding: 20px; border-left: 4px solid var(--green); background: var(--green-soft); }
.aside-block h2, .aside-block h3 { font-family: inherit; font-size: 16px; }
.aside-block p:last-child { margin-bottom: 0; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0; }
.metric { padding: 15px; border: 1px solid var(--line); background: var(--paper); }
.metric strong { display: block; font-size: 22px; }
.metric span { color: var(--muted); font-size: 12px; }
.task-card .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.task-card h3 { font-family: Georgia, serif; font-size: 18px; }
.task-card .meta span { color: var(--muted); font-size: 11px; font-weight: 700; }
.task-card-preview { position: relative; max-height: 174px; margin-top: 10px; overflow: hidden; }
.task-card-preview::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 42px; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); }
.task-card .card-math { margin: 0; font-size: 14px; line-height: 1.5; }
.task-card .card-math .katex-display { margin: 8px 0; overflow: hidden; text-align: left; }
.task-card-link { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 800; }
.task-page { padding: 32px 0 72px; }
.task-heading { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.task-heading h1 { max-width: 980px; color: var(--ink); font-size: clamp(30px, 4vw, 46px); }
.task-heading .lead { color: var(--muted); font-size: 16px; }
.task-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 34px; margin-top: 28px; }
.task-content { min-width: 0; }
.task-section { margin-bottom: 16px; padding: 24px; border: 1px solid var(--line); background: var(--paper); }
.task-section h2 { font-family: inherit; font-size: 18px; }
.math-source { white-space: pre-wrap; overflow-wrap: anywhere; font-family: Georgia, "Times New Roman", serif; font-size: 17px; line-height: 1.65; }
.math-source .katex-display { overflow-x: auto; overflow-y: hidden; padding: 7px 0; }
.math-source .katex { font-size: 1em; }
.task-panels details { margin-top: 10px; border: 1px solid var(--line); background: var(--paper); }
.task-panels summary { cursor: pointer; padding: 14px 18px; font-weight: 800; }
.task-panels details[open] summary { border-bottom: 1px solid var(--line); }
.panel-content { padding: 18px; }
.exercise-list { display: grid; gap: 18px; }
.exercise { scroll-margin-top: 18px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); }
.exercise:target { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.exercise-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 18px 22px 14px; border-bottom: 1px solid var(--line); }
.exercise-head .eyebrow { margin-bottom: 4px; }
.exercise-head h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 22px; }
.exercise-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.exercise-meta span { padding: 3px 7px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 11px; font-weight: 700; }
.exercise-question { padding: 22px; }
.exercise-panels { border-top: 1px solid var(--line); }
.exercise-panels details + details { border-top: 1px solid var(--line); }
.exercise-panels summary { cursor: pointer; padding: 12px 22px; color: var(--navy); font-size: 14px; font-weight: 800; }
.exercise-panels details[open] summary { background: #f7faf8; border-bottom: 1px solid var(--line); }
.exercise-panels .panel-content { padding: 18px 22px 22px; }
.exercise-panels .editorial-hint { border-left: 3px solid var(--amber); background: #fffdf8; }
.exercise-panels .editorial-solution { border-left: 3px solid var(--green); background: #fbfefc; }
.exercise-panels .editorial-solution h4 { margin: 16px 0 5px; color: var(--navy); font-size: 13px; text-transform: uppercase; }
.exercise-panels .editorial-solution h4:first-child { margin-top: 0; }
.exercise-foot { display: flex; justify-content: space-between; gap: 16px; padding: 10px 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.exercise-foot a { color: var(--muted); }
.source-note { color: var(--muted); font-size: 13px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list summary { cursor: pointer; padding: 15px 0; font-weight: 800; }
.faq-list p { margin: -3px 0 16px; color: var(--muted); }
.notice { padding: 18px; border: 1px solid #edc796; background: var(--amber-soft); }
.site-foot { padding: 32px 0; border-top: 1px solid var(--line); background: var(--paper); color: var(--muted); font-size: 13px; }
.foot-row { display: flex; justify-content: space-between; gap: 26px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 16px; }
.foot-links a { color: var(--muted); }
@media (max-width: 900px) {
  .intro-grid, .section-head, .content-grid, .task-body { grid-template-columns: 1fr; }
  .intro-stat { border-left: 0; border-top: 1px solid rgba(255,255,255,.24); padding: 20px 0 0; }
  .category-grid, .topic-grid, .task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .wrap { width: min(calc(100% - 28px), var(--max)); }
  .head-row { align-items: flex-start; padding: 14px 0; }
  .site-nav { gap: 12px; font-size: 12px; }
  .site-nav .nav-optional { display: none; }
  .intro-band { padding: 38px 0 34px; }
  h1 { font-size: 36px; }
  .category-grid, .topic-grid, .task-grid, .metric-row { grid-template-columns: 1fr; }
  .task-section { padding: 18px; }
  .exercise-head { align-items: stretch; flex-direction: column; gap: 10px; padding: 16px; }
  .exercise-meta { justify-content: flex-start; }
  .exercise-question { padding: 18px 16px; }
  .exercise-panels summary, .exercise-panels .panel-content { padding-inline: 16px; }
  .foot-row { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════════════════
   WARSTWA CZYTELNOŚCI ROZWIĄZAŃ — v2, 2026-08-26
   Cel: rozwiązania mają się CZYTAĆ, a nie tylko wyświetlać.
   Wszystkie reguły są addytywne — nie usuwają ani nie zmieniają nazw klas
   używanych w treści, więc działają na całym korpusie bez zmian w HTML.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light dark;
  --sol-bg:        #fbfefc;
  --sol-rule:      #cfe3d8;
  --result-bg:     #eef7f2;
  --result-rule:   #176b55;
  --step-num:      #6b8f80;
  --given-bg:      #f6f8fa;
  --formula-rule:  #b9cfc4;
}

/* ── Motyw ciemny: wyłącznie przez preferencję systemu, bez zmian w HTML ── */
@media (prefers-color-scheme: dark) and (min-width: 99999px) {
  :root {
    --ink: #e6edf3; --muted: #9bb0ac; --paper: #131a20; --soft: #0d1317;
    --line: #26333b; --navy: #0e2233; --green: #57c9a5; --green-soft: #10281f;
    --amber: #e0a860; --amber-soft: #2a1f10;
    --sol-bg: #101c17; --sol-rule: #23483b; --result-bg: #10281f;
    --result-rule: #57c9a5; --step-num: #79a596; --given-bg: #161d23;
    --formula-rule: #2b4a3d;
  }
  a { color: #6fb6dd; }
  a:hover { color: #9fd0ea; }
  .button.secondary { background: var(--paper); }
  .topic-link, .chip { background: var(--paper); }
  .exercise-panels details[open] summary { background: #16211b; }
  .task-card-preview::after {
    background: linear-gradient(to bottom, rgba(19,26,32,0), var(--paper));
  }
  .notice { border-color: #5a4526; }
}

/* ── Typografia treści matematycznej ─────────────────────────────────────
   pre-wrap zostaje (fallback bez JS zależy od surowych \n), ale ograniczamy
   miarę wiersza i porządkujemy odstępy — to jest główna zmiana czytelności. */
.math-source {
  font-size: 17.5px;
  line-height: 1.75;
  hyphens: none;
}
.exercise-question .math-source,
.panel-content .math-source { max-width: 68ch; }

/* Wzory blokowe dostają powietrze i delikatną oś wizualną */
.math-source .katex-display {
  margin: 1.15em 0;
  padding: 0.55em 0 0.55em 1.05em;
  border-left: 2px solid var(--formula-rule);
  text-align: left;
}
.math-source .katex-display > .katex { text-align: left; }
/* Wzór blokowy tuż po innym wzorze — zbijamy podwójny odstęp */
.math-source .katex-display + .katex-display { margin-top: -0.35em; }
/* Wzory inline nie mogą się łamać w losowym miejscu */
.math-source .katex { white-space: nowrap; }
.math-source .katex-display .katex { white-space: normal; }

/* Poziomy scroll wzoru sygnalizowany cieniem, nie ucięciem */
.math-source .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  background:
    linear-gradient(to right, var(--paper) 30%, rgba(255,255,255,0)) left center / 24px 100% no-repeat,
    linear-gradient(to left,  var(--paper) 30%, rgba(255,255,255,0)) right center / 24px 100% no-repeat;
}

/* ── Hierarchia paneli ───────────────────────────────────────────────────
   Cztery panele wyglądały identycznie, więc nic nie prowadziło wzroku.
   Rozwiązanie to główny produkt — dostaje najmocniejszy sygnał. */
.exercise-panels summary {
  display: flex;
  align-items: center;
  gap: 9px;
  transition: background .12s ease;
}
.exercise-panels summary::before {
  content: "";
  flex: none;
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: var(--line);
}
.exercise-panels details:nth-of-type(1) summary::before { background: var(--green); }
.exercise-panels details:nth-of-type(2) summary::before { background: var(--navy); }
.exercise-panels details:nth-of-type(3) summary::before { background: var(--amber); }
.exercise-panels summary:hover { background: var(--soft); }
.exercise-panels details[open] .panel-content { animation: sol-in .16s ease-out; }
@keyframes sol-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }

/* Panel rozwiązania — tło odróżniające go od reszty */
.exercise-panels details:nth-of-type(2)[open] .panel-content {
  background: var(--sol-bg);
  border-left: 2px solid var(--sol-rule);
}

/* ── Konwencje treści stosowane przez redakcję ───────────────────────────
   Klasy dodawane w HTML zadania. Opisane w PRZEWODNIK-REDAKCYJNY.md. */

/* Wynik końcowy — to, czego uczeń szuka wzrokiem najpierw */
.math-source.result,
.panel-content .result {
  max-width: 68ch;
  margin-top: 1.1em;
  /* dalsze właściwości poniżej */
  padding: 0.75em 1em;
  border-left: 3px solid var(--result-rule);
  border-radius: 0 4px 4px 0;
  background: var(--result-bg);
  font-weight: 600;
}
.result .katex-display { margin: .45em 0; padding-left: 0; border-left: 0; }
/* Wynik wstrzykiwany przez JS leży WEWNĄTRZ .math-source, które ma już swoją
   miarę wiersza. Zagnieżdżony cap w ch liczyłby się od półgrubej cyfry i dawał
   blok szerszy niż tekst wokół — dlatego tu miarę zdejmujemy. */
.math-source > .result { max-width: 100%; }

/* Odpowiedź zamknięta jako odznaka — 515 zadań miało tu samotną literę */
.answer-badge {
  display: inline-grid;
  place-items: center;
  min-width: 2.4em;
  height: 2.4em;
  padding: 0 .5em;
  border: 2px solid var(--result-rule);
  border-radius: 6px;
  background: var(--result-bg);
  color: var(--result-rule);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

/* Dane z treści zadania przywołane w rozwiązaniu */
.math-source.given {
  padding: 0.7em 0.95em;
  border-radius: 4px;
  background: var(--given-bg);
  font-size: 16.5px;
}

/* Kroki rozwiązania — numeracja generowana przez CSS, nie wpisywana w treść */
.solution-steps { counter-reset: krok; display: flex; flex-direction: column; gap: 1.15em; }
.solution-steps > .step { position: relative; padding-left: 2.4em; }
.solution-steps > .step::before {
  counter-increment: krok;
  content: counter(krok);
  position: absolute;
  left: 0;
  top: 0.15em;
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border: 1px solid var(--sol-rule);
  border-radius: 50%;
  background: var(--paper);
  color: var(--step-num);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Dwa warianty, bo w korpusie występują dwie postacie kroku:
   .step > .step-label  — krok opakowany w blok (postać z pierwszego cyklu),
   .step-label          — etykieta „Krok N.” wewnątrz akapitu, tak wygląda
                          format wymagany przez przewodnik redakcyjny i tak
                          zapisane są wszystkie rozwiązania w bazie.
   Druga postać ZOSTAJE W WIERSZU: w źródle kroki są rozdzielone pustą linią,
   która renderuje się jako dwa <br>, więc display:block dokładałby trzeci
   odstęp i rozstrzeliwał rozwiązanie na pół ekranu. */
.step > .step-label,
.step-label {
  color: var(--muted);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.step > .step-label {
  display: block;
  margin-bottom: .3em;
}
.step-label + br { display: none; }
/* text-transform dziedziczy się do wnętrza KaTeX i FAŁSZUJE matematykę:
   etykieta „Założenia \(a>0,\ a\neq1\)” malowała się jako „A>0, A≠1”, a w
   wyjściu MathML — tym, które czyta czytnik ekranu — „∣q∣<1” stawało się
   „∣Q∣<1”. W matematyce inna wielkość litery to inna zmienna, więc etykieta
   twierdziła nieprawdę. Wielkie litery zostają dla tekstu, wzory wracają
   do swojego zapisu. Zgłoszone przez audytora liczb rzeczywistych. */
.step-label .katex,
.step-label .katex *,
.step-label .katex-mathml,
.step-label .katex-html {
  text-transform: none;
  letter-spacing: normal;
}
.step .math-source { max-width: 64ch; }

/* ── Grafika zadania ──────────────────────────────────────────────────────
   Reguły przeniesione z buildu z grafikami i uzupełnione o obsługę motywu
   ciemnego — oryginał miał zaszyte `background:#fff`, które w trybie ciemnym
   daje białą płachtę pod rysunkiem. */
.task-visual {
  margin: 22px 0 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  text-align: center;
}
.task-visual-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 900px;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 2px;
}
.task-visual figcaption {
  margin-top: 9px;
  color: var(--muted);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 12px;
  text-align: left;
}
/* Skany CKE są czarno-białe na białym tle. W trybie ciemnym samo odwrócenie
   dałoby negatyw; delikatne przygaszenie zachowuje czytelność bez rażenia. */
@media (prefers-color-scheme: dark) and (min-width: 99999px) {
  .task-visual { background: #f2f3f5; }
  .task-visual-image { filter: saturate(.9) brightness(.97); }
}
:root[data-theme="dark"] .task-visual { background: #f2f3f5; }
@media print {
  .task-visual { break-inside: avoid; page-break-inside: avoid; border-color: #999; }
  .task-visual-image { max-height: 12cm; }
}

/* ── Odczyt redakcyjny uszkodzonej treści ─────────────────────────────────
   Treść polecenia jest nietykalna — musi zostać dokładnie taka, jaką
   opublikowała CKE, także wtedy, gdy ekstrakcja PDF ją zniszczyła.
   Gdy polecenie jest nieczytelne, redakcja NIE poprawia go, tylko dopisuje
   obok własny odczyt, jawnie oznaczony jako opracowanie. */
.exercise-question .editorial-transcript {
  margin-top: 1.1em;
  border: 1px dashed var(--amber);
  border-radius: 4px;
  background: var(--amber-soft);
}
.exercise-question .editorial-transcript > summary {
  cursor: pointer;
  padding: .6em .9em;
  color: var(--amber);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .03em;
}
.exercise-question .editorial-transcript .panel-content { padding: 0 .9em .9em; }
.editorial-transcript .transcript-basis {
  display: block;
  margin-top: .7em;
  color: var(--muted);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
}
.editorial-transcript .transcript-basis::before {
  content: "Podstawa odczytu: ";
  font-weight: 700;
}

/* Uwaga o typowym błędzie */
.math-source.pitfall,
.panel-content .pitfall {
  max-width: 68ch;
  margin-top: 1em;
  padding: 0.7em 0.95em;
  border-left: 3px solid var(--amber);
  background: var(--amber-soft);
  font-size: 16.5px;
}

/* Opracowanie redakcyjne — istniejący wzorzec, wzmocniony */
.exercise-panels .editorial-solution h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 1.5em 0 .5em;
  letter-spacing: .05em;
  font-weight: 800;
}
.exercise-panels .editorial-solution h4::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sol-rule);
}

/* ── Druk: uczniowie drukują zestawy zadań ───────────────────────────────
   Panele domyślnie zwinięte są niewidoczne na wydruku — rozwijamy je,
   ale odpowiedzi zostawiamy na końcu, żeby dało się rozwiązywać na papierze. */
@media print {
  :root { color-scheme: light; }
  .site-head, .site-foot, .breadcrumbs, .intro-actions,
  .site-nav, .skip-link, .aside-block, .task-card-link { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .intro-band { padding: 0 0 12pt; background: none; color: #000; }
  .intro-band .lead, .intro-band .eyebrow { color: #333; }
  .exercise {
    break-inside: avoid;
    page-break-inside: avoid;
    border: 1px solid #999;
    margin-bottom: 10pt;
  }
  .exercise-panels details { display: block; }
  .exercise-panels details > summary { list-style: none; font-weight: 700; }
  /* Treść zadania i polecenie zawsze widoczne; rozwiązania po rozwinięciu */
  .exercise-panels details[open] > .panel-content { display: block; }
  .math-source .katex-display { border-left: 1px solid #bbb; }
  a[href^="#"]::after { content: ""; }
}

/* ── Dostępność ──────────────────────────────────────────────────────────*/
.exercise-panels summary:focus-visible,
a:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

@media (max-width: 640px) {
  .math-source { font-size: 16.5px; line-height: 1.7; }
  .math-source .katex-display { padding-left: .7em; margin: 1em 0; }
  .solution-steps > .step { padding-left: 2.1em; }
}


/* ── Tekst wyłącznie dla czytnika ekranu ──────────────────────────────────
   Nagłówki zadań powtarzały się w obrębie strony („Zadanie 3" dziesięć razy),
   więc lista nagłówków, po której nawiguje osoba niewidoma, była bezużyteczna.
   Kontekst dopisany tym stylem czyni każdy nagłówek unikalnym, nie zmieniając
   wyglądu. Nie używamy display:none ani visibility:hidden — te usuwają tekst
   także z drzewa dostępności, czyli robią dokładnie odwrotność zamierzenia. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ── Odnośnik do pełnego skanu arkusza ────────────────────────────────────
   Na stronie widać wycięty rysunek. Pełny skan — z nagłówkiem CKE i treścią
   polecenia w oryginalnym składzie — jest o jedno kliknięcie dalej i do tego
   momentu nie kosztuje ani bajta. Nauczyciel, który chce sprawdzić, czy
   przepisana treść zgadza się z arkuszem, ma to pod ręką; uczeń, który chce
   tylko rozwiązać zadanie, nie pobiera 30 kB skanu na każde zadanie. */
.task-visual figcaption .scan-link { font-weight: 600; white-space: nowrap; }


/* ── Zadanie bez rysunku ──────────────────────────────────────────────────
   117 zadań miało pod treścią skan, który nie zawierał żadnego rysunku —
   samą treść polecenia albo pustą kratownicę na obliczenia. Skan zniknął
   ze strony, ale informacja o tym, że go nie ma, zostaje: inaczej ktoś
   szukałby rysunku, o którym mówi polecenie („zaznacz na osi"), i nie
   wiedziałby, czy strona coś zgubiła, czy arkusz tak wyglądał. */
.task-noscan {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}


/* ── Karta zadania z innej kategorii ──────────────────────────────────────
   Zadanie należy zwykle do kilku kategorii, ale pełną treść z rozwiązaniem
   ma tylko w jednej — w temacie głównym. Na pozostałych stronach pojawia się
   jako karta: tyle, żeby rozpoznać zadanie i zdecydować, czy się nim zająć.

   Powód nie jest oszczędnościowy, tylko taki, że trzy kopie tego samego
   zadania pod trzema adresami to dla wyszukiwarki treść powielona, a dla
   czytelnika strona, która nie wiadomo gdzie się kończy. */
.task-ref-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.task-ref {
  min-width: 0;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
}
.task-ref .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.task-ref .meta span { color: var(--muted); font-size: 11px; font-weight: 700; }
.task-ref h3 { margin: 0 0 6px; font-family: Georgia, serif; font-size: 16px; }
.task-ref h3 a { color: var(--ink); text-decoration: none; }
.task-ref h3 a:hover { color: var(--green); text-decoration: underline; }
/* Zajawka na karcie jest teraz .math-source, bo wzory w niej mają się
   renderować tak jak wszędzie indziej — wcześniej uczeń widział na karcie
   surowe \dfrac{4}{a_n}. Trzy rzeczy trzeba przy tym cofnąć z reguł
   .math-source, bo tam służą długiemu tekstowi zadania, a nie kaflowi:
   krój (karta zostaje bezszeryfowa), stopień pisma i zachowanie białych
   znaków — zajawka jest jednowierszowa, pre-wrap tylko by ją rozciągał. */
.task-ref .zajawka {
  margin: 0;
  color: var(--muted);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: normal;
  /* Kafle w siatce mają trzymać równą wysokość; wzór dłuższy niż karta
     przycinamy zamiast rozpychać kolumnę. */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.task-ref .zajawka .katex { font-size: 1em; }
/* KaTeX domyślnie nie łamie wzoru; w kafli szerokim na 270 px długi wzór
   wyszedłby poza kartę, więc tu wyjątkowo pozwalamy mu się zawinąć. */
.task-ref .zajawka .katex { white-space: normal; }


/* Karta na stronie spisu nosi h2, nie h3 — inaczej miedzy <h1> strony a kartami
   powstaje dziura w numeracji naglowkow i spis, po ktorym nawiguje czytnik
   ekranu, rozpada sie. Wyglad zostaje taki jak przy h3. */
.category-card h2, .topic-card h2 {
  margin-bottom: 8px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

/* ── Zadania poza ekranem: pomijamy renderowanie do czasu przewinięcia ──────────
   Karty zadań są w HTML w całości (wyszukiwarka widzi wszystko), ale przeglądarka
   nie maluje tych, których nie widać. Na stronie z 300 zadaniami to różnica
   między malowaniem 300 kart a kilkunastu.

   `contain-intrinsic-size: auto 420px` — `auto` sprawia, że przeglądarka zapamiętuje
   zmierzoną wysokość karty i używa jej potem, więc pasek przewijania nie skacze.
   420px to tylko wartość startowa, zanim zmierzy pierwszą kartę.

   `@media screen` — przy drukowaniu wszystko ma być wyrenderowane. */
@media screen {
  .exercise {
    content-visibility: auto;
    contain-intrinsic-size: auto 420px;
  }
}