:root { color-scheme: dark; --bg:#131315; --panel:#1d1d20; --line:#2a2a2e;
  --text:#e6e6e8; --dim:#9a9a9f; --faint:#7c7c80; --accent:#0a84ff; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.wrap { max-width:46rem; margin:0 auto; padding:clamp(2rem,6vw,5rem) 1.25rem 4rem; }
header { display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap;
  padding-bottom:1.5rem; border-bottom:1px solid var(--line); margin-bottom:2rem; }
h1 { font-size:1.6rem; margin:0; letter-spacing:-.01em; }
.tag { color:var(--faint); font-size:.9rem; }
h2 { font-size:1.05rem; margin:2.25rem 0 .6rem; }
p, li { color:var(--dim); }
strong { color:var(--text); font-weight:600; }
ul { padding-left:1.1rem; }
li { margin:.35rem 0; }
a { color:var(--accent); }
.lead { font-size:1.1rem; color:var(--text); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:1rem 1.25rem; margin:1.5rem 0; }
footer { margin-top:3.5rem; padding-top:1.25rem; border-top:1px solid var(--line);
  color:var(--faint); font-size:.85rem; display:flex; gap:1.25rem; flex-wrap:wrap; }

/* Górna krawędź „L" na poziomie górnej krawędzi kafelka.
   Samo `align-items:flex-start` nie wystarcza: pudełko wiersza tekstu
   jest wyższe niż wersaliki, więc litera siada niżej niż jej pudełko.
   Ujemny margines zdejmuje tę różnicę — wyrównanie jest optyczne,
   nie geometryczne. */
header { align-items:flex-start; gap:1rem; }
.titles { display:flex; flex-direction:column; gap:.3rem; min-width:0; }
/* −0,22em zamiast −0,18em: poprawka **optyczna**, nie geometryczna.
   Górna krawędź kafelka to długa jasna linia na ciemnym tle i czyta
   się jako wyższa, niż jest; litera to pojedynczy słupek i przy tej
   samej współrzędnej wygląda na niżej. Stąd tytuł podniesiony
   o piksel ponad równość mierzoną. */
.titles h1 { line-height:1; margin:-.22em 0 0; }

/* Ikona z mastera **pełnokadrowego**, zaokrąglona tu, a nie w pliku.
   Wersja dla macOS ma wokół kafelka przezroczysty margines z cieniem,
   więc widoczny kafelek zaczynał się kilka pikseli niżej niż krawędź
   obrazka — tytuł wyrównany do obrazka wyglądał przez to za wysoko,
   choć geometrycznie był równo. */
.mark { width:4rem; height:4rem; flex:0 0 auto; border-radius:22.4%;
  box-shadow:0 2px 10px rgba(0,0,0,.55); }
@media (max-width:30rem) { .mark { width:3rem; height:3rem; } }

/* Zrzut ekranu. Pełna szerokość kolumny, bez marginesów bocznych — na wąskim
   ekranie i tak nic z niego nie widać poza ogólnym układem, więc nie ma po co
   go jeszcze zwężać. Ramka zamiast cienia, bo ciemny interfejs na ciemnym tle
   rozpływa się bez krawędzi. */
.shot { margin:2rem 0; }
.shot img { width:100%; height:auto; display:block; border-radius:8px;
  border:1px solid rgba(255,255,255,.12); }
.shot figcaption { margin-top:.6rem; font-size:.85rem; color:var(--dim); }

/* Wezwanie do pobrania. Stało dotąd wyłącznie w stopce, pod całą treścią —
   czyli tam, gdzie trafiał tylko ktoś, kto przeczytał wszystko do końca.
   Ludzie z Reddita wchodzili i wychodzili, nie klikając nic. */
.cta { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin:1.75rem 0; }
.button { display:inline-block; background:#2f6fed; color:#fff; text-decoration:none;
  font-weight:600; padding:.7rem 1.4rem; border-radius:8px; }
.button:hover { background:#4680f5; }
.fine { font-size:.85rem; color:var(--dim); }