:root{
  --bg:#14161a;
  --bg-panel:#1b1e24;
  --bg-panel-alt:#20242c;
  --border:#2a2f38;
  --text:#ecebe4;
  --text-dim:#8b909b;
  --amber:#e8a33d;
  --cyan:#4fc3c0;
  --violet:#9c82d8;
  --raster:#6e93be;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --display:'Space Grotesk',ui-sans-serif,sans-serif;
  --body:'IBM Plex Sans',ui-sans-serif,sans-serif;

  /* Semantyka kolorow w TEJ ksiazce (hexy te same co w reszcie serii, znaczenie
     inne — patrz CLAUDE.md):
       --amber  = SWIATLO   (promien sloneczny, ciepla czesc widma, zachod)
       --cyan   = WODA i POWIETRZE (kropelki, para, rozproszony blekit)
       --violet = LOD       (krysztaly, chmury wysokie, halo) + afordancja dodatkow
       --raster = ZIMNE POWIETRZE (masy powietrza na diagramach frontow) */

  /* Niebo — gradienty w SVG i tla widgetow. */
  --sky-day:#4a7fb5;
  --sky-dusk:#c96a3f;
  --sky-night:#161d2e;

  /* Kontrakt tokenow dla assets/sky3d.js — modul czyta wylacznie te nazwy,
     nigdy --amber/--cyan bezposrednio. Dzieki temu da sie go przeniesc do
     innej ksiazki bez edycji samego modulu. */
  --text-muted: var(--text-dim);
  --accent: var(--amber);
  --bg-elevated: var(--bg-panel);
  --radius: 10px;
  --viz-a: var(--violet);
  --viz-b: var(--cyan);
  --viz-grid: var(--border);
  --viz-bg: var(--bg-panel-alt);
}

*{box-sizing:border-box;}
html,body{margin:0;background:var(--bg,#14161a);min-height:100%;}
body{font-family:var(--body);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased;}
.page{max-width:860px;margin:0 auto;padding:56px 24px 100px;background:var(--bg,#14161a);color:var(--text,#ecebe4);}

/* NAWIGACJA GÓRNA (sticky pasek — rozdziały / dodatki / pomocnik) */
.topnav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;background:var(--bg-panel);border-bottom:1px solid var(--border);}
.topnav__brand{font-family:var(--mono);font-weight:600;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--text);white-space:nowrap;}
.topnav__brand span{color:var(--amber);}
.topnav__links{display:flex;align-items:center;gap:22px;font-family:var(--mono);font-size:12.5px;flex-wrap:wrap;}
.topnav__links a{color:var(--text-dim);text-decoration:none;transition:color .15s;white-space:nowrap;}
.topnav__links a:hover{color:var(--amber);}

/* HERO */
.viewport-readout{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--text-dim);text-transform:uppercase;display:flex;gap:18px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:32px;border-bottom:1px solid var(--border);}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--amber);text-transform:uppercase;margin-bottom:16px;}
h1{font-family:var(--display);font-weight:600;font-size:clamp(30px,5vw,50px);line-height:1.08;margin:0 0 20px;letter-spacing:-0.01em;}
.subtitle{font-size:17px;color:var(--text-dim);max-width:640px;}

/* PANELS */
.panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:10px;padding:24px 28px;margin:40px 0;}
.panel-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--cyan);text-transform:uppercase;margin-bottom:14px;}
.panel ul{margin:0;padding-left:20px;}
.panel li{margin-bottom:9px;}
.panel li:last-child{margin-bottom:0;}
.panel.glossary .panel-label{color:var(--violet);}
.panel.practice .panel-label{color:var(--amber);}
.panel.practice p{margin:0;font-size:15.5px;color:var(--text);}
.panel.practice p+p{margin-top:12px;}
.glossary dl{margin:0;}
.glossary dt{font-family:var(--mono);font-weight:500;color:var(--text);margin-top:14px;font-size:14.5px;}
.glossary dt:first-child{margin-top:0;}
.glossary dd{margin:2px 0 0;color:var(--text-dim);font-size:14.5px;}

/* SECTIONS */
.section{margin:60px 0;}
.section-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--text-dim);text-transform:uppercase;margin-bottom:10px;}
.section h2{font-family:var(--display);font-weight:600;font-size:clamp(23px,3vw,29px);margin:0 0 18px;}
.section p{margin:0 0 16px;font-size:16px;}
.section ul.compact{margin:0 0 16px;padding-left:20px;}
.section ul.compact li{margin-bottom:8px;}
.term-amber{color:var(--amber);font-weight:600;}
.term-cyan{color:var(--cyan);font-weight:600;}
.term-violet{color:var(--violet);font-weight:600;}
.term-raster{color:var(--raster);font-weight:600;}

/* FORMULAS */
.formula{font-family:var(--mono);background:var(--bg-panel-alt);border:1px solid var(--border);border-radius:8px;padding:16px 18px;margin:22px 0;font-size:15px;color:var(--amber);text-align:center;letter-spacing:.02em;overflow-x:auto;line-height:1.8;}
.formula .sub{display:block;margin-top:8px;font-size:12.5px;color:var(--text-dim);letter-spacing:0;white-space:normal;}
.formula .vec{color:var(--cyan);font-weight:700;cursor:help;border-bottom:1px dotted var(--cyan);}
/* Akcja przypisana do wzoru, wewnątrz jego ramki. Wrapper jest blokiem, więc
   kreska ma szerokość widocznej ramki, nie przewijanego wzoru; sticky trzyma
   przycisk w kadrze, gdy długi wzór przewija się poziomo. */
.formula .formula-action{margin-top:12px;padding-top:12px;border-top:1px dashed var(--border);position:sticky;left:0;}
.formula .reveal-btn{line-height:1.4;}
.vec-tooltip{position:fixed;z-index:200;display:none;background:var(--bg-panel-alt);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-family:var(--mono);font-size:12.5px;font-weight:400;color:var(--text);max-width:280px;pointer-events:none;box-shadow:0 4px 16px rgba(0,0,0,.4);}

/* DIAGRAM FRAME */
.diagram-frame{position:relative;border:1px solid var(--border);border-radius:10px;background:var(--bg-panel);padding:16px 16px 20px;margin:26px 0;}
.diagram-hud{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--text-dim);text-transform:uppercase;margin-bottom:8px;}
.diagram-frame svg{width:100%;height:auto;display:block;}
.diagram-caption{font-family:var(--mono);font-size:12px;color:var(--text-dim);margin-top:14px;text-align:center;}

/* NEXT / CLOSING */
.next{border-top:1px solid var(--border);margin-top:70px;padding-top:32px;}
.closing{margin-top:80px;padding-top:40px;border-top:1px solid var(--border);text-align:center;}
.closing p{font-size:17px;color:var(--text-dim);max-width:560px;margin:0 auto 16px;}
.closing .sign{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--amber);text-transform:uppercase;margin-top:24px;}

/* WORKED EXAMPLES */
.worked{background:#15171b;border:1px solid var(--border);border-left:3px solid var(--cyan);border-radius:6px;padding:18px 22px;margin:18px 0;font-family:var(--mono);font-size:13.5px;overflow-x:auto;}
.worked .wlabel{color:var(--cyan);text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;margin-bottom:14px;}
.worked .step{margin:0 0 10px;color:var(--text-dim);}
.worked .step:last-child{margin-bottom:0;}
.worked .v{color:var(--text);}
.worked .result{color:var(--amber);font-weight:600;}
.worked .check{color:var(--text-dim);font-style:italic;font-size:12.5px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--border);}
.worked .step .k{color:var(--violet);}
.worked .step .v{color:var(--text);}

/* SERIES NAV (ACES / Perlin multi-part dodatki) */
.series-nav{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;margin:20px 0 0;}
.series-nav span,.series-nav a{padding:5px 12px;border:1px solid var(--border);border-radius:14px;color:var(--text-dim);text-decoration:none;transition:border-color .15s,color .15s;}
.series-nav a:hover{color:var(--amber);border-color:var(--amber);}
.series-nav .current{color:var(--amber);border-color:var(--amber);}

.note{font-size:13px;color:var(--text-dim);font-style:italic;}

/* LEGEND CHIPS (interaktywny diagram w Rozdziale 1) */
.legend{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px;}
.chip{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;padding:6px 13px;border:1px solid var(--border);border-radius:20px;cursor:pointer;background:var(--bg-panel-alt);color:var(--text);transition:opacity .2s,border-color .2s;user-select:none;}
.chip:hover{border-color:var(--text-dim);}
.chip.off{opacity:.35;}
.chip .dot{width:8px;height:8px;border-radius:50%;flex:none;}
.ray-off{opacity:.1;transition:opacity .25s;}
.ray-group{transition:opacity .25s;}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;}
}

/* SPIS TREŚCI (index.html) */
.part{margin:56px 0;}
.part-label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--cyan);text-transform:uppercase;margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.part-label.violet{color:var(--violet);}
.part-label.amber{color:var(--amber);}
.index-list{display:flex;flex-direction:column;}
.index-row{display:block;padding:14px 4px;text-decoration:none;color:var(--text);border-bottom:1px solid var(--border);transition:padding-left .15s,border-color .15s;}
.index-list .index-row:first-child{border-top:1px solid var(--border);}
.index-row:hover{padding-left:10px;border-color:var(--amber);}
.index-num{font-family:var(--mono);font-size:10.5px;color:var(--text-dim);letter-spacing:.05em;text-transform:uppercase;display:block;margin-bottom:4px;}
.index-title{font-size:15.5px;font-weight:500;display:block;}
.index-hook{font-size:13.5px;color:var(--text-dim);display:block;margin-top:4px;max-width:640px;}
.footer-note{margin-top:70px;padding-top:28px;border-top:1px solid var(--border);font-size:13.5px;color:var(--text-dim);}

/* IDŹ GŁĘBIEJ (rozdziały/dodatki → dodatki którę je rozwijają) */
.deeper{border-top:1px solid var(--border);margin-top:56px;padding-top:24px;}
.deeper-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--violet);text-transform:uppercase;margin-bottom:12px;}
.deeper a{display:block;color:var(--text);text-decoration:none;font-size:14.5px;margin-bottom:8px;border-bottom:1px dotted var(--border);padding-bottom:8px;}
.deeper a:last-child{margin-bottom:0;border-bottom:none;padding-bottom:0;}
.deeper a:hover{color:var(--amber);}
.inline-deeper{display:inline-block;margin:8px 0 4px;padding:5px 14px;border:1px solid var(--border);border-radius:14px;font-family:var(--mono);font-size:12px;color:var(--violet);text-decoration:none;transition:border-color .15s,color .15s;}
.inline-deeper:hover{border-color:var(--amber);color:var(--amber);}

/* POMOCNIK OBLICZENIOWY */
.toc{background:var(--bg-panel);border:1px solid var(--border);border-radius:10px;padding:20px 28px;margin:36px 0;}
.toc ol{margin:0;padding-left:22px;}
.toc li{margin-bottom:8px;font-size:15px;}
.toc a{color:var(--text);text-decoration:none;border-bottom:1px dotted var(--text-dim);}
.toc a:hover{color:var(--amber);}
.chapter-head{margin:70px 0 30px;padding-bottom:16px;border-bottom:2px solid var(--border);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.chapter-head .num{font-family:var(--mono);font-size:13px;color:var(--amber);letter-spacing:.1em;}
.chapter-head h2{font-family:var(--display);font-weight:600;font-size:clamp(21px,3vw,27px);margin:0;}
.subsection{margin:36px 0;}
.subsection h3{font-family:var(--display);font-weight:600;font-size:18px;margin:0 0 14px;color:var(--text);}
.subsection p{margin:0 0 14px;font-size:15.5px;}
.exercise{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:18px 22px;margin:16px 0;}
.exercise .elabel{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--violet);text-transform:uppercase;margin-bottom:10px;}
.exercise .given{font-family:var(--mono);font-size:14px;color:var(--text);margin-bottom:12px;}
.reveal-btn{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--amber);background:none;border:1px solid var(--amber);border-radius:20px;padding:6px 16px;cursor:pointer;transition:background .2s;}
.reveal-btn:hover{background:rgba(232,163,61,0.12);}

/* Wariant "idz glebiej" dla przyciskow otwierajacych fizyke poza formulami -
   fiolet zamiast bursztynu, zeby nie mylic z "Wyjasnij ten wzor". */
.advanced-btn{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--violet);background:none;border:1px solid var(--violet);border-radius:20px;padding:6px 16px;cursor:pointer;transition:background .2s;margin-top:10px;}
.advanced-btn:hover{background:rgba(156,130,216,0.12);}
.answer{display:none;margin-top:14px;padding-top:14px;border-top:1px dashed var(--border);font-family:var(--mono);font-size:13.5px;color:var(--cyan);}
.answer.shown{display:block;}
.answer .line{margin-bottom:6px;color:var(--text-dim);}
.answer .line .res{color:var(--cyan);font-weight:600;}

/* NAWIGACJA DOLNA (rozdziały / dodatki / pomocnik) */
.site-nav{border-top:1px solid var(--border);margin-top:70px;padding-top:24px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:13px;}
.site-nav a{color:var(--text-dim);text-decoration:none;transition:color .15s;}
.site-nav a:hover{color:var(--amber);}
.site-nav.chapter-nav{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;}
.site-nav.chapter-nav a.nav-prev{grid-column:1;text-align:left;}
.site-nav.chapter-nav a.nav-toc{grid-column:2;text-align:center;}
.site-nav.chapter-nav a.nav-next{grid-column:3;text-align:right;}

/* SUWAKI PRZY DIAGRAMACH (interaktywne wersje statycznych porównań) */
.diagram-controls{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-family:var(--mono);font-size:12.5px;color:var(--text-dim);flex-wrap:wrap;}
.diagram-controls input[type=range]{flex:1;min-width:120px;accent-color:var(--amber);}
.diagram-controls .value-readout{color:var(--amber);white-space:nowrap;}

/* MODAL (wyjaśnienie trudnych wzorów krok po kroku) */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(10,11,13,.75);z-index:100;padding:24px;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal-panel{position:relative;background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;max-width:640px;max-height:85vh;overflow-y:auto;padding:32px 32px 28px;}
.modal-panel h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,3vw,23px);margin:0 0 18px;color:var(--text);}
.modal-panel p{margin:0 0 14px;font-size:15px;color:var(--text);}
.modal-panel p:last-child{margin-bottom:0;}
.modal-panel ul{margin:0 0 14px;padding-left:20px;}
.modal-panel li{margin-bottom:10px;font-size:15px;}
.modal-panel strong{color:var(--amber);}
.modal-panel .formula{margin:16px 0;}
.modal-panel em{color:var(--text-dim);}
.modal-panel a{color:var(--cyan);}
.modal-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--bg-panel-alt);color:var(--text-dim);font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s;}
.modal-close:hover{color:var(--amber);border-color:var(--amber);}

/* MAPA DODATKÓW (epilog) */
.map-group{margin:0 0 28px;}
.map-group:last-child{margin-bottom:0;}
.map-group a{display:block;color:var(--text);text-decoration:none;font-size:14.5px;padding:8px 0;border-bottom:1px dotted var(--border);}
.map-group a:last-child{border-bottom:none;}
.map-group a:hover{color:var(--amber);}
.map-group .m-num{font-family:var(--mono);font-size:11.5px;color:var(--text-dim);letter-spacing:.04em;margin-right:10px;}

/* FOKUS KLAWIATURY (wcześniej brak — nawigacja Tab-em była niewidoczna) */
a:focus-visible,button:focus-visible,input:focus-visible,
.vec:focus-visible,.chip:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:4px;
}

/* WĄSKIE EKRANY */
@media (max-width:560px){
  .topnav{padding:12px 16px;gap:10px;}
  .topnav__brand{font-size:11px;}
  .topnav__links{gap:14px;font-size:11.5px;}
  .page{padding:36px 16px 80px;}
  .site-nav.chapter-nav{grid-template-columns:1fr;gap:14px;}
  .site-nav.chapter-nav a.nav-prev,
  .site-nav.chapter-nav a.nav-toc,
  .site-nav.chapter-nav a.nav-next{grid-column:1;text-align:left;}
  .viewport-readout{gap:10px;}
  .panel{padding:20px 18px;margin:32px 0;}
  .diagram-frame{padding:12px 12px 16px;}
  .section{margin:44px 0;}
  .modal-panel{padding:26px 20px 22px;}
}

/* ============================================================
   WIDGETY 3D (assets/sky3d.js)
   ------------------------------------------------------------
   Ramka dla widgetow three.js. Swiadomie blizniacza do
   .diagram-frame — czytelnik ma widziec "to jest ten sam rodzaj
   ilustracji, tylko zywy", a nie osobny gatunek elementu.
   ============================================================ */
.viz3d{border:1px solid var(--border);border-radius:10px;background:var(--bg-panel);padding:16px 16px 20px;margin:32px 0;}
.viz3d__head{margin-bottom:14px;}
.viz3d__title{font-family:var(--display);font-weight:600;font-size:17px;margin:0 0 6px;color:var(--text);}
.viz3d__sub{margin:0;font-size:14px;color:var(--text-dim);}

/* Scena. aspect-ratio zamiast sztywnej wysokosci — canvas ma sie skalowac
   z szerokoscia kolumny, a nie zostawiac czarnego pasa na telefonie. */
.viz3d__stage{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--bg-panel-alt);}
.viz3d__stage canvas{display:block;width:100%;height:100%;}
/* Silnik bez aspect-ratio (przegladarka sprzed 2021) zwinalby scene do
   wysokosci 0 — wtedy nawet fallback bylby niewidoczny. */
@supports not (aspect-ratio: 1){.viz3d__stage,.sim__stage{min-height:210px;}}
.viz3d__stage.is-grab canvas{cursor:grab;}
.viz3d__stage.is-grab canvas:active{cursor:grabbing;}

/* Plakietka "przeciagnij, zeby obrocic" — tylko na widgetach z kamera. */
.viz3d__badge{position:absolute;left:10px;bottom:10px;font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);background:rgba(20,22,26,.72);border:1px solid var(--border);border-radius:12px;padding:4px 10px;pointer-events:none;}

/* Fallback bez WebGL. Wypelnia scene w calosci, wiec czytelnik nigdy nie
   oglada pustego czarnego prostokata — dostaje zdanie wyjasniajace i
   informacje, ze akapit obok jest kompletny bez widgetu. */
.viz3d__fallback{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;font-size:14px;color:var(--text-dim);}
.viz3d.no-webgl .viz3d__fallback{display:flex;}
.viz3d.no-webgl .viz3d__stage canvas{display:none;}
.viz3d__fallback strong{color:var(--text);font-weight:600;}
/* Linia z powodem awarii, dopisywana przez assets/interactive.js.
   Jasniejsza od zdania wlasciwego rozdzialu (ktore zostaje w --text-dim). */
.viz3d__why{color:var(--text);max-width:46ch;}

/* Panel suwakow. Grid 3-kolumnowy (etykieta / suwak / odczyt) trzyma
   odczyty w jednej kolumnie, wiec liczby nie skacza w poziomie przy
   przeciaganiu — to samo, co robi tabular-nums w odczycie. */
.viz3d__controls{display:grid;grid-template-columns:auto 1fr auto;gap:10px 12px;align-items:center;margin-top:16px;font-family:var(--mono);font-size:12.5px;color:var(--text-dim);}
.viz3d__controls label{white-space:nowrap;}
.viz3d__controls input[type=range]{width:100%;min-width:80px;accent-color:var(--amber);}
.viz3d__controls .value-readout{color:var(--amber);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right;}

/* Presety (np. dziesiec rodzajow chmur na jednym silniku). */
.viz3d__presets{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
.viz3d__presets button{font-family:var(--mono);font-size:11.5px;padding:5px 13px;border:1px solid var(--border);border-radius:14px;background:var(--bg-panel-alt);color:var(--text-dim);cursor:pointer;transition:color .15s,border-color .15s;}
.viz3d__presets button:hover{color:var(--text);border-color:var(--text-dim);}
.viz3d__presets button.is-active{color:var(--amber);border-color:var(--amber);}

.viz3d__note{margin-top:16px;padding-top:14px;border-top:1px dashed var(--border);font-size:14px;color:var(--text-dim);}
.viz3d__note p{margin:0 0 10px;}
.viz3d__note p:last-child{margin-bottom:0;}

/* ============================================================
   SYMULACJE CANVAS2D
   Lzejsze od 3D, uzywane tam gdzie cos musi sie DZIAC w czasie
   (konwekcja, koalescencja kropel, przejscie frontu).
   ============================================================ */
.sim{border:1px solid var(--border);border-radius:10px;background:var(--bg-panel);padding:16px 16px 20px;margin:26px 0;}
.sim__stage{position:relative;aspect-ratio:2/1;border-radius:8px;overflow:hidden;background:var(--bg-panel-alt);}
.sim__stage canvas{display:block;width:100%;height:100%;}
.sim__bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;font-family:var(--mono);font-size:12.5px;color:var(--text-dim);}
.sim__bar input[type=range]{flex:1;min-width:110px;accent-color:var(--amber);}
.sim__bar .value-readout{color:var(--amber);white-space:nowrap;font-variant-numeric:tabular-nums;}
.sim__btn{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--amber);background:none;border:1px solid var(--amber);border-radius:20px;padding:5px 14px;cursor:pointer;transition:background .2s;}
.sim__btn:hover{background:rgba(232,163,61,0.12);}
.sim__caption{font-family:var(--mono);font-size:12px;color:var(--text-dim);margin-top:14px;text-align:center;}

/* ============================================================
   MIT / PROSTOWANIE — blok wlasny tej ksiazki
   ------------------------------------------------------------
   Ksiazka popularnonaukowa o niebie ma gotowy zestaw mitow do
   obalenia ("niebo jest niebieskie od oceanu", "chmura to para
   wodna", "chmury sa lekkie"). Zamiast wplatac je w proze,
   dostaja wlasny, rozpoznawalny blok: przekreslone zdanie
   fałszywe, pod nim prawdziwe. Czytelnik ma zapamietac oba —
   samo prawdziwe nie wyparuje starego przekonania.
   ============================================================ */
.myth{background:var(--bg-panel);border:1px solid var(--border);border-left:3px solid var(--amber);border-radius:6px;padding:18px 22px;margin:26px 0;}
.myth__label{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-bottom:12px;}
.myth__wrong{margin:0 0 10px;font-size:15px;color:var(--text-dim);}
.myth__wrong::before{content:"✕";color:var(--text-dim);font-family:var(--mono);margin-right:10px;}
.myth__right{margin:0;font-size:15.5px;color:var(--text);}
.myth__right::before{content:"✓";color:var(--cyan);font-family:var(--mono);margin-right:10px;}
.myth__why{margin:12px 0 0;padding-top:12px;border-top:1px dashed var(--border);font-size:14px;color:var(--text-dim);}

/* ============================================================
   STRONY TERENOWE (teren/)
   Otwierane na telefonie, na dworze. Wieksze cele dotykowe,
   mniej ozdobnikow, wszystko ma dzialac jedna reka.
   ============================================================ */

/* Klucz do rozpoznawania chmur — drzewo decyzyjne. Jeden krok na ekranie. */
.tree__step{display:none;}
.tree__step.is-active{display:block;}
.tree__q{font-family:var(--display);font-weight:600;font-size:clamp(20px,4vw,26px);margin:0 0 8px;}
.tree__hint{font-size:14.5px;color:var(--text-dim);margin:0 0 24px;}
.tree__opts{display:flex;flex-direction:column;gap:12px;}
.tree__opt{display:block;width:100%;text-align:left;background:var(--bg-panel);border:1px solid var(--border);border-radius:10px;padding:16px 20px;color:var(--text);font-family:var(--body);font-size:16px;cursor:pointer;transition:border-color .15s,padding-left .15s;}
.tree__opt:hover{border-color:var(--amber);padding-left:26px;}
.tree__opt small{display:block;margin-top:5px;font-size:13.5px;color:var(--text-dim);}
.tree__crumbs{font-family:var(--mono);font-size:11.5px;color:var(--text-dim);margin-bottom:20px;min-height:1.4em;}
.tree__crumbs button{background:none;border:none;color:var(--text-dim);font-family:var(--mono);font-size:11.5px;cursor:pointer;padding:0;text-decoration:underline dotted;}
.tree__crumbs button:hover{color:var(--amber);}

/* Wynik: nazwa chmury + co z niej wynika. */
.result-card{background:var(--bg-panel);border:1px solid var(--amber);border-radius:10px;padding:24px 26px;}
.result-card__genus{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-bottom:10px;}
.result-card__name{font-family:var(--display);font-weight:600;font-size:clamp(24px,5vw,32px);margin:0 0 6px;}
.result-card__pl{font-size:15px;color:var(--text-dim);margin:0 0 18px;}
.result-card__means{font-size:15.5px;margin:0 0 18px;}
.result-card svg{width:100%;height:auto;display:block;margin:0 0 18px;border-radius:8px;background:var(--bg-panel-alt);}

/* Kalendarz nieba — miesiac po miesiacu. */
.month{border-bottom:1px solid var(--border);padding:20px 0;}
.month:first-of-type{border-top:1px solid var(--border);}
.month__name{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px;}
.month__items{margin:0;padding-left:20px;}
.month__items li{margin-bottom:8px;font-size:15px;}
.month__items li:last-child{margin-bottom:0;}
.month__items .when{font-family:var(--mono);font-size:12.5px;color:var(--amber);}

/* Sciaga "co ta chmura zapowiada" — para: widzisz X → bedzie Y. */
.cheat{display:grid;grid-template-columns:1fr auto 1fr;gap:0 16px;align-items:center;border-top:1px solid var(--border);padding:16px 0;}
.cheat:last-of-type{border-bottom:1px solid var(--border);}
.cheat__see strong{display:block;font-size:15.5px;margin-bottom:3px;}
.cheat__see small,.cheat__then small{display:block;font-size:13.5px;color:var(--text-dim);}
.cheat__arrow{font-family:var(--mono);color:var(--amber);font-size:15px;}
.cheat__then strong{display:block;font-size:15.5px;margin-bottom:3px;color:var(--amber);}
.cheat__lead{font-family:var(--mono);font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;grid-column:1/-1;margin-bottom:10px;}

/* Galeria malych wykresow biegunowych (Dodatek C) — siatka, zwija sie do
   mniejszej liczby kolumn zanim podpisy zaczna sie zderzac. */
.size-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:20px 0;}
.size-gallery__item{text-align:center;}
.size-gallery__item svg{width:100%;height:auto;display:block;}
.size-gallery__label{font-family:var(--mono);font-size:11.5px;color:var(--text);margin-top:6px;}
.size-gallery__x{font-family:var(--mono);font-size:11px;color:var(--text-dim);margin-top:2px;}

@media (max-width:720px){
  .size-gallery{grid-template-columns:repeat(2,1fr);}
}

/* Tablica czastek (Rozdzial 3, sekcja o budowie) — kazda karta: rysunek
   budowy + pasek widma (UV / widzialne / podczerwien), kreskowanie tam,
   gdzie czastka pochlania (ta sama konwencja co hatchAbsorb w Dodatku C).
   Tekst jest w HTML, nie w SVG, zeby zostal czytelny na telefonie.
   Proporcje .band-key (1 : 1,6 : 1) musza odpowiadac paskom w SVG
   (40 / 64 / 40 jednostek). */
.particle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.particle-card{background:var(--bg-panel-alt);border:1px solid var(--border);border-radius:8px;padding:12px 14px 14px;}
.particle-card svg{width:100%;height:auto;display:block;}
.particle-card__name{font-family:var(--mono);font-size:12.5px;color:var(--text);margin:8px 0 2px;}
.particle-card__shape{font-size:12.5px;color:var(--text-dim);font-style:italic;margin:0 0 8px;}
.particle-card__row{font-size:13px;line-height:1.45;color:var(--text-dim);margin:0 0 5px;}
.particle-card__row:last-child{margin-bottom:0;}
.particle-card__row b{display:block;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);opacity:.8;}
.particle-card__row--see{color:var(--text);}
.band-key{display:grid;grid-template-columns:1fr 1.6fr 1fr;border-radius:4px;overflow:hidden;font-family:var(--mono);font-size:11px;text-align:center;margin:0 0 10px;}
.band-key span{padding:4px 2px;}
.band-key__uv,.band-key__ir{background:rgba(139,144,155,.22);color:var(--text-dim);}
.band-key__vis{background:rgba(232,163,61,.28);color:var(--text);}
.band-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--mono);font-size:11.5px;color:var(--text-dim);margin:0 0 16px;}
.band-legend i{display:inline-block;width:24px;height:11px;margin-right:7px;vertical-align:-1px;border-radius:2px;}
.band-legend .abs{background:repeating-linear-gradient(45deg,#14161a 0 2px,rgba(139,144,155,.85) 2px 4.2px);}
.band-legend .weak{background:repeating-linear-gradient(45deg,#14161a 0 1.2px,rgba(139,144,155,.5) 1.2px 6.4px);}
.band-legend .clear{background:rgba(139,144,155,.22);}

@media (max-width:720px){
  .particle-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .particle-grid{grid-template-columns:1fr;gap:10px;}
  .particle-card{display:grid;grid-template-columns:112px 1fr;gap:0 12px;align-items:start;}
  .particle-card__name{margin-top:0;}
  .band-key{font-size:10px;}
}

@media (max-width:560px){
  .size-gallery{grid-template-columns:1fr 1fr;gap:14px;}
  .viz3d__controls{grid-template-columns:1fr;gap:4px 0;}
  .viz3d__controls .value-readout{text-align:left;}
  .viz3d__stage{aspect-ratio:4/3;}
  .cheat{grid-template-columns:1fr;gap:8px;}
  .cheat__arrow{transform:rotate(90deg);width:1em;}

  /* Pasek gorny nie miesci sie w jednej linii przy 360 px: marka zostaje
     w swojej, linki schodza pod nia. */
  .topnav{flex-wrap:wrap;gap:8px 16px;padding:12px 18px;}
  .topnav__links{gap:16px;}

  /* Odczyty suwakow niosa opis slowny ("45 st. - okolice poludnia"), wiec
     nowrap rozpychal strone w poziomie. Na waskich ekranach maja zawijac. */
  .diagram-controls .value-readout,
  .viz3d__controls .value-readout,
  .sim__bar .value-readout{white-space:normal;}
}