:root {
    --r-main-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --r-heading-font: 'Inter', system-ui, sans-serif;
    --orange: #ea7600;
    --orange-soft: #ffb46b;
    --red-soft: #ff7a6b;
    --green-soft: #6fd99a;
  }

  /* Mobile-fallback global — gdy Reveal CSS nieładowany (≤900px), zapewnij sensowne defaults */
  html, body {
    margin: 0; padding: 0;
    background: #0a0a0a;
    color: #e8e8e8;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  *, *::before, *::after { box-sizing: border-box; }
  a { color: var(--orange); }
  img { max-width: 100%; height: auto; }
  .reveal { font-feature-settings: "ss01", "cv11"; }
  .reveal h1, .reveal h2, .reveal h3, .reveal h4 { letter-spacing: -0.015em; text-transform: none; font-weight: 700; }
  .reveal h1 { color: var(--orange); }
  .reveal h2 { color: var(--orange); font-size: 1.5em; margin-bottom: 0.4em; }
  .reveal h3 { color: #ddd; font-size: 1.05em; }
  .reveal h4 { color: var(--orange); font-size: 0.95em; margin: 0 0 0.3em 0; }

  .reveal section img {
    background: #111; border: 1px solid #222; border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0,0,0,.5);
    max-height: 60vh; object-fit: contain;
    cursor: zoom-in; transition: transform 0.15s, box-shadow 0.15s;
  }
  .reveal section img:hover {
    transform: scale(1.015); box-shadow: 0 8px 32px rgba(234,118,0,.25);
  }
  .reveal .grid-2 img { max-height: 52vh; }
  .reveal .grid-3 img { max-height: 36vh; }

  /* Lightbox — kliknij obraz, otwiera się na całą stronę */
  .lightbox {
    position: fixed; inset: 0; background: rgba(0,0,0,0.96); z-index: 9999;
    display: none; align-items: center; justify-content: center; cursor: zoom-out;
    padding: 2vh 2vw;
    animation: lightbox-fade 0.18s ease;
  }
  .lightbox.active { display: flex; }
  .lightbox img {
    max-width: 96vw; max-height: 92vh; object-fit: contain;
    box-shadow: 0 0 60px rgba(0,0,0,.9); border-radius: 4px;
    cursor: zoom-out;
  }
  .lightbox::after {
    content: "← → przeglądaj · klik lub Esc zamyka"; position: absolute;
    bottom: 1.5vh; left: 50%; transform: translateX(-50%);
    color: #999; font-size: 12px; letter-spacing: 0.1em; font-weight: 500;
    background: rgba(0,0,0,0.5); padding: 0.4em 1em; border-radius: 4px;
    pointer-events: none;
  }
  .lightbox-counter {
    position: absolute; top: 2vh; left: 50%; transform: translateX(-50%);
    color: #fff; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
    letter-spacing: 0.08em; background: rgba(230,126,34,0.92);
    padding: 5px 13px; border-radius: 999px; pointer-events: none;
  }
  .lightbox-counter:empty { display: none; }
  @keyframes lightbox-fade {
    from { opacity: 0; } to { opacity: 1; }
  }
  /* hint widoczny przez 4s gdy strona się ładuje, potem znika */
  .zoom-hint {
    position: fixed; bottom: 14px; right: 14px; background: rgba(234,118,0,0.95);
    color: #111; font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
    padding: 6px 12px; border-radius: 4px; z-index: 998;
    animation: hint-fade 5s ease forwards;
    pointer-events: none;
  }
  @keyframes hint-fade {
    0%, 60% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(8px); }
  }

  .reveal .grid-2 { display: grid; grid-template-columns: 5fr 6fr; gap: 1.2em; align-items: center; }
  .reveal .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.8em; align-items: center; }

  /* Flip — image po prawej, tekst po lewej (przełamanie rytmu) */
  .reveal .grid-2.flip > *:nth-child(1) { order: 2; }
  .reveal .grid-2.flip > *:nth-child(2) { order: 1; }
  .reveal .grid-2.flip { grid-template-columns: 6fr 5fr; }

  /* Image-zoom — gdy interesuje nas detal, nie cały obraz */
  .reveal section img.zoom-detail {
    object-position: top center;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .reveal .left { text-align: left; }
  .reveal kbd {
    display: inline-block; padding: 0.08em 0.45em; margin: 0 0.1em;
    background: #1f1f1f; border: 1px solid #444; border-bottom-width: 2px;
    border-radius: 4px; color: #f0f0f0; font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.78em; font-weight: 600;
  }
  .reveal code {
    background: #1f1f1f; padding: 0.05em 0.35em; border-radius: 3px;
    font-family: 'JetBrains Mono', monospace; font-size: 0.85em;
    color: #f3a955;
  }
  .reveal .muted { color: #888; font-size: 0.7em; }
  .reveal .note { color: #999; font-style: italic; font-size: 0.7em; }

  /* UI term highlight — Blender menu/panel/operator names */
  bl {
    color: var(--orange-soft); font-weight: 600;
    background: rgba(234,118,0,0.08); padding: 0.02em 0.25em; border-radius: 3px;
    font-style: normal; white-space: nowrap;
  }

  /* Language toggle — show one variant of each <bl> at a time */
  body[data-ui="en"] bl pl { display: none; }
  body[data-ui="pl"] bl en { display: none; }

  /* Toggle button */
  .lang-toggle {
    position: fixed; top: 12px; right: 14px; z-index: 999;
    display: flex; gap: 0; background: #1a1a1a; border: 1px solid #333;
    border-radius: 6px; overflow: hidden; font-family: 'Inter', sans-serif;
    box-shadow: 0 2px 12px rgba(0,0,0,.6);
  }

  /* Back to home (landing) */
  .back-home {
    position: fixed; top: 50px; left: 14px; z-index: 999;
    background: #1a1a1a; border: 1px solid #333; border-radius: 6px;
    color: #888; padding: 5px 10px; font-size: 11px; font-weight: 600;
    text-decoration: none; transition: color 0.15s, background 0.15s;
    box-shadow: 0 2px 12px rgba(0,0,0,.6);
  }
  .back-home:hover { color: var(--orange); background: #222; }
  @media (max-width: 768px) { .back-home { top: 60px; left: 8px; padding: 8px 10px; min-height: 32px; font-size: 10px; } }
  @media (max-width: 480px) { .back-home { display: none; } }

  /* Page language switcher (PL ⇄ EN) — top-left, same style as lang-toggle */
  .page-lang {
    position: fixed; top: 12px; left: 14px; z-index: 999;
    display: flex; gap: 0; background: #1a1a1a; border: 1px solid #333;
    border-radius: 6px; overflow: hidden; font-family: 'Inter', sans-serif;
    box-shadow: 0 2px 12px rgba(0,0,0,.6);
  }
  .page-lang .label {
    padding: 6px 10px; color: #555; font-size: 10px; letter-spacing: 0.15em;
    text-transform: uppercase; align-self: center; border-right: 1px solid #333;
    background: transparent;
  }
  .page-lang a {
    background: transparent; color: #888; border: none;
    padding: 6px 12px; font-weight: 700; font-size: 11px; letter-spacing: 0.1em;
    cursor: pointer; transition: color 0.15s, background 0.15s;
    text-decoration: none; display: flex; align-items: center; gap: 4px;
  }
  .page-lang a:hover { color: #ccc; background: #222; }
  .page-lang a.active { background: var(--orange); color: #111; cursor: default; pointer-events: none; }
  .page-lang a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
  @media (max-width: 768px) {
    .page-lang { top: 8px; left: 8px; }
    .page-lang .label { display: none; }
    .page-lang a { padding: 8px 10px; min-height: 44px; }
  }
  .lang-toggle button {
    background: transparent; color: #888; border: none; padding: 6px 12px;
    font-weight: 700; font-size: 11px; letter-spacing: 0.1em; cursor: pointer;
    transition: all 0.15s;
  }
  .lang-toggle button:hover { color: #ccc; }
  .lang-toggle button.active { background: var(--orange); color: #111; }
  .lang-toggle .label {
    padding: 6px 10px; color: #555; font-size: 10px; letter-spacing: 0.15em;
    text-transform: uppercase; align-self: center; border-right: 1px solid #333;
  }

  /* Callouts — Guru style */
  .reveal .protip {
    border-left: 3px solid var(--orange); background: linear-gradient(90deg, rgba(234,118,0,0.12) 0%, rgba(234,118,0,0) 100%);
    padding: 0.5em 0.8em; margin: 0.5em 0; text-align: left; font-size: 0.7em; border-radius: 0 4px 4px 0;
  }
  .reveal .protip::before {
    content: "💡 PRO TIP"; display: block; color: var(--orange); font-weight: 800;
    font-size: 0.7em; letter-spacing: 0.15em; margin-bottom: 0.25em;
  }
  .reveal .mistake {
    border-left: 3px solid var(--red-soft); background: linear-gradient(90deg, rgba(255,122,107,0.10) 0%, rgba(255,122,107,0) 100%);
    padding: 0.5em 0.8em; margin: 0.5em 0; text-align: left; font-size: 0.7em; border-radius: 0 4px 4px 0;
  }
  .reveal .mistake::before {
    content: "⚠️ CZĘSTY BŁĄD"; display: block; color: var(--red-soft); font-weight: 800;
    font-size: 0.7em; letter-spacing: 0.15em; margin-bottom: 0.25em;
  }
  .reveal .rule {
    background: #181818; border: 1px solid #333; border-radius: 6px;
    padding: 0.6em 1em; margin: 0.6em 0; text-align: center; font-size: 0.85em; font-weight: 600;
    color: #fff;
  }
  .reveal .rule strong { color: var(--orange); }

  .reveal .quote {
    background: #0e0e0e; border-left: 3px solid var(--orange);
    padding: 0.4em 0.8em; margin: 0.4em 0; font-style: italic;
    color: #d4d4d4; font-size: 0.7em; text-align: left;
  }

  /* Principle — Gleb Alexandrov atmospheric rule */
  .reveal section.principle {
    text-align: center;
  }
  .reveal section.principle .label {
    color: #888; font-size: 0.5em; letter-spacing: 0.45em; text-transform: uppercase;
    margin-bottom: 0.7em; font-weight: 600;
  }
  .reveal section.principle h2 {
    color: #fff; font-size: 2em; line-height: 1.15; max-width: 80%; margin: 0 auto 0.5em auto;
    font-weight: 800; text-transform: none; letter-spacing: -0.02em;
  }
  .reveal section.principle h2 strong { color: var(--orange); }
  .reveal section.principle .principle-sub {
    color: #aaa; font-size: 0.65em; max-width: 65%; margin: 0.6em auto 0; font-style: italic;
  }

  /* Lekcja — marker początku lekcji (course mode) */
  .reveal section.lesson {
    text-align: center;
  }
  .reveal section.lesson .lesson-num {
    display: block; font-size: 0.4em; letter-spacing: 0.5em;
    color: #5fa8e8; font-weight: 700; margin-bottom: 0.6em; text-transform: uppercase;
  }
  .reveal section.lesson h1 {
    color: #fff; font-size: 2.4em; line-height: 1; font-weight: 800;
    text-shadow: 0 4px 30px rgba(0,0,0,.6);
  }
  .reveal section.lesson .lesson-time {
    color: #aaa; font-size: 0.55em; margin-top: 0.7em; letter-spacing: 0.1em;
  }
  .reveal section.lesson .lesson-goals {
    margin: 1.4em auto 0; max-width: 70%; text-align: left;
    background: rgba(95,168,232,0.07); border: 1px solid rgba(95,168,232,0.2);
    border-radius: 6px; padding: 0.9em 1.3em; font-size: 0.55em;
  }
  .reveal section.lesson .lesson-goals h4 { color: #5fa8e8; font-size: 1em; margin: 0 0 0.4em 0; }
  .reveal section.lesson .lesson-goals ul { margin: 0; padding-left: 1.2em; }

  /* Ćwiczenie — zadanie dla ucznia */
  .reveal section.exercise {
    background: linear-gradient(135deg, #050d1a 0%, #001a30 100%);
    text-align: left;
  }
  .reveal section.exercise h2 { color: #5fa8e8; font-size: 1.3em; }
  .reveal section.exercise .ex-tag {
    display: inline-block; padding: 0.15em 0.7em; border-radius: 3px;
    background: #5fa8e8; color: #001428; font-weight: 800;
    font-size: 0.55em; letter-spacing: 0.2em; margin-bottom: 0.5em;
  }
  .reveal section.exercise .ex-body { font-size: 0.78em; max-width: 85%; margin: 0 auto; }
  .reveal section.exercise ol { margin: 0.5em 0; }
  .reveal section.exercise .ex-time {
    margin-top: 1em; color: #888; font-size: 0.7em; text-align: right;
  }
  .reveal section.exercise .ex-deliv {
    background: rgba(95,168,232,0.1); border-left: 3px solid #5fa8e8;
    padding: 0.5em 0.8em; margin-top: 0.8em; font-size: 0.85em; border-radius: 0 4px 4px 0;
  }
  .reveal section.exercise .ex-deliv::before {
    content: "✓ ODDAJESZ"; display: block; color: #5fa8e8; font-weight: 800;
    font-size: 0.7em; letter-spacing: 0.15em; margin-bottom: 0.2em;
  }

  /* Cinematic — manifesto-like full-screen statement */
  .reveal section.cinematic {
    text-align: left;
  }
  .reveal section.cinematic .manifest {
    max-width: 80%; margin: 0 auto; padding: 0 4%;
  }
  .reveal section.cinematic h2 {
    color: #fff; font-size: 1.7em; line-height: 1.18; font-weight: 600; letter-spacing: -0.01em;
    margin: 0;
  }
  .reveal section.cinematic h2 .accent { color: var(--orange); font-weight: 800; }
  .reveal section.cinematic .signature {
    margin-top: 1.4em; color: #888; font-size: 0.55em; letter-spacing: 0.15em;
  }

  .reveal table { font-size: 0.7em; border-collapse: collapse; width: 100%; }
  .reveal table td, .reveal table th { padding: 0.3em 0.7em; }
  .reveal table th { color: var(--orange); border-bottom: 1px solid #333; text-align: left; }
  .reveal table tbody tr + tr td { border-top: 1px solid #1a1a1a; }

  .reveal ul { line-height: 1.4; }
  .reveal ol { line-height: 1.4; }
  .reveal li + li { margin-top: 0.1em; }
  .reveal .small { font-size: 0.74em; }
  .reveal .xs { font-size: 0.6em; }

  /* Auto-fit zmniejsza czcionkę by slajd się zmieścił; scroll tylko gdy to nie wystarczy */
  .reveal .slides section.present {
    max-height: 100vh;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: #444 transparent;
  }
  .reveal .slides section.present.needs-scroll { overflow-y: auto; }
  .reveal .slides section.present::-webkit-scrollbar { width: 6px; }
  .reveal .slides section.present::-webkit-scrollbar-track { background: transparent; }
  .reveal .slides section.present::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
  .reveal .slides section.present::-webkit-scrollbar-thumb:hover { background: var(--orange); }

  /* Widoczny wskaźnik przewijania — pojawia się tylko gdy slajd ma ukrytą treść poniżej */
  .scroll-cue {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    height: 84px; display: flex; justify-content: center; align-items: flex-end;
    pointer-events: none; opacity: 0; transition: opacity 0.35s ease;
    background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0));
  }
  .scroll-cue.show { opacity: 1; }
  .scroll-cue .scroll-cue-pill {
    margin-bottom: 12px; font-family: 'Inter', sans-serif;
    font-size: 13px; font-weight: 700; letter-spacing: 0.03em; color: #fff;
    background: var(--orange); padding: 6px 15px 7px; border-radius: 999px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.5);
    animation: scrollCueBounce 1.5s ease-in-out infinite;
  }
  @keyframes scrollCueBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
  }

  /* Hero */
  .reveal section.hero { height: 100%; padding: 0; }
  .reveal section.hero .hero-content {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    justify-content: center; align-items: flex-start; padding: 7% 8%;
    text-align: left; z-index: 1;
    background: linear-gradient(110deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.15) 100%);
  }
  .reveal section.hero h1 {
    font-size: 2.4em; line-height: 1.02; margin: 0 0 0.2em 0; font-weight: 800;
    text-shadow: 0 2px 24px rgba(0,0,0,.7);
  }
  .reveal section.hero h3 { color: #fff; font-weight: 500; margin: 0.1em 0 0.6em 0; text-shadow: 0 2px 14px rgba(0,0,0,.7); }
  .reveal section.hero p { color: #d6d6d6; margin: 0.3em 0; }
  .reveal section.hero .hero-meta {
    margin-top: 1.4em; display: flex; gap: 1.6em; align-items: center; flex-wrap: wrap;
    color: #aaa; font-size: 0.65em;
  }
  .reveal section.hero .hero-meta strong { color: var(--orange); }

  /* Chapter */
  .reveal section.chapter h1 {
    font-size: 3em; line-height: 1; margin: 0; color: var(--orange); font-weight: 900;
    text-shadow: 0 4px 30px rgba(0,0,0,.6);
  }
  .reveal section.chapter .chapter-num {
    display: block; font-size: 0.32em; letter-spacing: 0.5em;
    color: #cc8030; font-weight: 600; margin-bottom: 0.6em; text-transform: uppercase;
  }
  .reveal section.chapter .chapter-sub {
    color: #ddd; font-size: 0.55em; font-weight: 400; margin-top: 0.6em;
    text-shadow: 0 2px 14px rgba(0,0,0,.6);
  }

  /* Big-question slide */
  .reveal section.bigq h2 { font-size: 2em; line-height: 1.1; max-width: 80%; margin: 0 auto; color: #fff; }
  .reveal section.bigq h2 strong { color: var(--orange); }
  .reveal section.bigq .answer { font-size: 0.7em; margin-top: 1.4em; color: #aaa; max-width: 70%; margin-left: auto; margin-right: auto; }

  /* Cards */
  .reveal .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8em; text-align: left; }
  .reveal .cards-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.8em; text-align: left; }
  .reveal .card {
    background: #141414; border: 1px solid #2a2a2a;
    border-left: 3px solid var(--orange);
    border-radius: 6px; padding: 0.6em 0.9em; font-size: 0.7em;
  }
  .reveal .card h4 { margin: 0 0 0.2em 0; }
  .reveal .card p, .reveal .card ul { margin: 0; }
  .reveal .card ul { padding-left: 1.1em; }

  /* Keys */
  .reveal .keys-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em 2em; text-align: left; font-size: 0.7em; }
  .reveal .keys-grid h4 { margin: 0 0 0.3em 0; font-size: 1.1em; }
  .reveal .keys-row { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 0.6em; padding: 0.18em 0; border-bottom: 1px solid #1a1a1a; }
  .reveal .keys-row .desc { color: #ccc; }

  .reveal .deck-footer {
    position: fixed; bottom: 8px; left: 14px; font-size: 11px; color: #555;
    z-index: 5; pointer-events: none;
  }
  .reveal figure { margin: 0; }
  .reveal figcaption { font-size: 0.55em; color: #888; margin-top: 0.3em; font-style: italic; }
  .reveal .col-2 { columns: 2; column-gap: 1.6em; text-align: left; }
  .reveal .col-2 li { break-inside: avoid; margin-bottom: 0.3em; }

  /* ========== ACCESSIBILITY ========== */

  /* Skip link — keyboard users skip to slides */
  .skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 9999;
    background: var(--orange); color: #111; padding: 0.6em 1.2em;
    text-decoration: none; font-weight: 700; border-radius: 0 0 6px 0;
  }
  .skip-link:focus { left: 0; }

  /* :focus-visible — pomarańczowy outline gdy nawigujemy klawiaturą */
  .reveal a:focus-visible,
  .reveal button:focus-visible,
  .lang-toggle button:focus-visible,
  .reveal section img:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 3px;
  }

  /* prefers-reduced-motion — respekt dla użytkowników z wrażliwością na ruch */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .reveal section img:hover { transform: none; }
    .zoom-hint { display: none; }
  }

  /* ========== RESPONSIVE — TABLET (≤1024px) ========== */
  @media (max-width: 1024px) {
    .reveal .cards-3 { grid-template-columns: 1fr 1fr; }
  }

  /* ============================================================
     MOBILE-TAKEOVER (≤900px) — Reveal się wyłącza,
     deck staje się naturalnym, długim artykułem
     ============================================================ */
  @media (max-width: 900px) {
    /* WYMUSZENIE WIDOCZNOŚCI — Reveal CSS domyślnie ukrywa sekcje */
    .reveal .slides > section,
    .reveal .slides > section > section {
      visibility: visible !important;
      pointer-events: auto !important;
      opacity: 1 !important;
    }

    /* iOS / mobile scroll fix — html i body MUSZĄ pozwalać przewijać.
       Reveal CSS ustawia html.reveal-full-page { overflow:hidden; height:100% }
       oraz `.reveal-viewport { overflow:hidden }` — zerujemy. */
    html, body {
      overflow-y: auto !important;
      overflow-x: hidden !important;
      height: auto !important;
      min-height: 100dvh;
      font-size: 17px;
      line-height: 1.55;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      position: static !important;
    }
    body {
      background: #0a0a0a;
      color: #e8e8e8;
      font-family: 'Inter', system-ui, sans-serif;
      width: 100%;
    }

    /* Wyłączamy całe pozycjonowanie Reveala */
    .reveal-viewport, .reveal {
      position: static !important;
      height: auto !important;
      min-height: auto !important;
      max-height: none !important;
      overflow: visible !important;
      transform: none !important;
      perspective: none !important;
      width: 100% !important;
    }
    .reveal .slides {
      position: static !important;
      transform: none !important;
      width: 100% !important;
      height: auto !important;
      max-height: none !important;
      left: 0 !important;
      top: 0 !important;
      perspective: none !important;
      display: block !important;
      pointer-events: auto !important;
      overflow: visible !important;
    }

    /* Każda sekcja = naturalny blok artykułu */
    .reveal .slides > section,
    .reveal .slides > section > section {
      position: relative !important;
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      width: 100% !important;
      height: auto !important;
      min-height: auto !important;
      max-height: none !important;
      padding: 3.5rem 1.2rem !important;
      margin: 0 !important;
      transform: none !important;
      top: auto !important;
      left: auto !important;
      overflow: visible !important;
      box-sizing: border-box !important;
      border-bottom: 1px solid #1a1a1a;
      background: #0a0a0a !important;
      text-align: left;
    }

    /* Stack wszystkie gridy do 1 kolumny */
    .reveal .grid-2,
    .reveal .grid-3,
    .reveal .grid-img-text,
    .reveal .cards,
    .reveal .cards-3,
    .reveal .keys-grid {
      grid-template-columns: 1fr !important;
      gap: 1.4rem !important;
    }
    .reveal .col-2 { columns: 1 !important; }

    /* Typografia — naturalny, czytelny rozmiar */
    .reveal h1 { font-size: 2rem !important; line-height: 1.15; margin: 0 0 0.6rem 0; }
    .reveal h2 {
      font-size: 1.45rem !important; line-height: 1.2;
      margin: 0 0 1rem 0; color: var(--orange);
    }
    .reveal h3 { font-size: 1.05rem !important; }
    .reveal h4 { font-size: 0.95rem !important; }
    .reveal p, .reveal ul, .reveal ol { font-size: 1rem !important; }
    .reveal .small { font-size: 0.92rem !important; }
    .reveal .xs { font-size: 0.78rem !important; }
    .reveal .muted { font-size: 0.85rem !important; }
    .reveal .note { font-size: 0.85rem !important; }
    .reveal kbd { font-size: 0.85em !important; }
    .reveal code { font-size: 0.92em !important; }

    /* Obrazy — pełna szerokość, naturalna wysokość */
    .reveal section img {
      max-width: 100% !important; max-height: none !important; width: 100% !important;
      height: auto !important; cursor: zoom-in;
    }
    .reveal .grid-2 img, .reveal .grid-3 img { max-height: none !important; }

    /* Tabele — naturalne, scrollowalne */
    .reveal table { font-size: 0.85rem !important; width: 100%; max-width: 100%; }

    /* Hero */
    .reveal section.hero { min-height: 88vh !important; padding: 0 !important; position: relative; }
    .reveal section.hero .hero-content {
      position: relative !important; inset: auto !important;
      padding: 5rem 1.4rem 5rem !important; min-height: 88vh;
    }
    .reveal section.hero h1 { font-size: 2.2rem !important; }
    .reveal section.hero h3 { font-size: 1.1rem !important; }
    .reveal section.hero .hero-meta { font-size: 0.85rem !important; gap: 0.8rem; }
    /* Scroll indicator — strzałka w dół + napis "Przewiń" */
    .reveal section.hero::after {
      content: "↓ przewiń, by zacząć";
      position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
      color: var(--orange); font-size: 0.85rem; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase;
      animation: scroll-bounce 2s ease-in-out infinite;
      z-index: 2;
    }
    @keyframes scroll-bounce {
      0%, 100% { transform: translate(-50%, 0); opacity: 0.7; }
      50% { transform: translate(-50%, 6px); opacity: 1; }
    }

    /* Chapter / lesson / principle */
    .reveal section.chapter, .reveal section.lesson { padding: 4rem 1.2rem !important; }
    .reveal section.chapter h1, .reveal section.lesson h1 { font-size: 2rem !important; }
    .reveal section.lesson .lesson-num { font-size: 0.85rem !important; letter-spacing: 0.3em; }
    .reveal section.lesson .lesson-time { font-size: 0.85rem !important; }
    .reveal section.lesson .lesson-goals { max-width: 100% !important; font-size: 0.85rem !important; }
    .reveal section.principle h2 { font-size: 1.6rem !important; max-width: 100% !important; }
    .reveal section.cinematic h2 { font-size: 1.3rem !important; max-width: 100% !important; }
    .reveal section.bigq h2 { font-size: 1.6rem !important; max-width: 100% !important; }

    /* Callout cards */
    .reveal .protip, .reveal .mistake, .reveal .quote, .reveal .ex-deliv {
      font-size: 0.9rem !important; padding: 0.8rem 1rem !important;
    }
    .reveal .rule { font-size: 1rem !important; padding: 0.9rem 1.2rem !important; }
    .reveal .card { font-size: 0.9rem !important; padding: 1rem !important; }

    /* Reveal UI elements — niepotrzebne w trybie artykułu */
    .reveal .controls, .reveal .progress, .reveal .slide-number,
    .reveal .deck-footer { display: none !important; }
    .reveal .backgrounds { display: none !important; }

    /* Lang toggle — kompakt, lepkie u góry */
    .lang-toggle {
      position: fixed; top: 0.6rem; right: 0.6rem;
      box-shadow: 0 2px 16px rgba(0,0,0,.7);
    }
    .lang-toggle .label { display: none; }
    .lang-toggle button { min-width: 44px; min-height: 44px; padding: 8px 12px; }

    /* Lightbox hint — wyłączony (touch nie potrzebuje hintu) */
    .zoom-hint { display: none !important; }

    /* Bezpośrednie tło hero (Reveal nie renderuje już .backgrounds) */
    .reveal section.hero {
      background-image: url('img/render/3d2.jpg') !important;
      background-size: cover !important;
      background-position: center !important;
    }
    /* Inne sekcje z data-background-color/gradient — przywróć z atrybutu */
    .reveal section[data-background-color] { background: #0a0a0a !important; }
  }

  /* Bardzo wąskie ekrany */
  @media (max-width: 480px) {
    html, body { font-size: 16px; }
    .reveal section.hero h1 { font-size: 1.7rem !important; }
    .reveal h1 { font-size: 1.7rem !important; }
    .reveal h2 { font-size: 1.25rem !important; }
    .reveal table { font-size: 0.78rem !important; }
  }

  /* ========== PRINT ========== */
  @media print {
    .lang-toggle, .zoom-hint, .lightbox, .deck-footer { display: none !important; }
    .reveal section img { max-height: none; page-break-inside: avoid; }
    body[data-ui="en"] bl pl, body[data-ui="pl"] bl en { display: inline; }
    body[data-ui="en"] bl pl::before { content: " ("; }
    body[data-ui="en"] bl pl::after { content: ")"; }
  }