:root{
  /* motyw jasny — ciepły papier */
  --bg:#f4f0e5;
  --surface:#fbf8f0;
  --surface-2:#ece7d9;
  --text:#1b190f;
  --text-2:#57534a;
  --muted:#928d7e;
  --line:#dbd5c5;
  --line-strong:#1b190f;

  /* jeden akcent — atramentowy błękit */
  --accent:#284bc9;
  --accent-ink:#1c3391;
  --accent-bg:rgba(40,75,201,.08);
  --accent-glow:rgba(40,75,201,.06);

  /* kolory języków (paski). Dobrane tak, by odcienie (hue) nie kolidowały ze
     sobą wizualnie — zwłaszcza csharp/kotlin, które w realnych barwach GitHub
     Linguist (#7355dd / #A97BFF) leżą prawie na tym samym hue co --l-css i
     --l-lua; tutaj rozstawione w wolnej przestrzeni między --l-css a --l-cpp.
     UWAGA: same odcienie 27° od siebie NIE WYSTARCZYŁY na cienkim 4px pasku
     (zweryfikowane wizualnie na produkcji) — csharp/kotlin zlewały się mimo
     różnych hue. Teraz różnią się też WYRAŹNIE jasnością/nasyceniem
     (csharp ciemny/stonowany, kotlin jasny/nasycony), nie tylko odcieniem. */
  --l-python:#3776ab; --l-js:#c9a400; --l-cpp:#e0517f; --l-shell:#3c9a3c;
  --l-css:#6a4bb0; --l-html:#d9552b; --l-lua:#4b60c4; --l-docker:#3a7ca5;
  --l-java:#b8721e; --l-csharp:#6f2da9; --l-kotlin:#e36dae;
}
/* motyw ciemny sterowany atrybutem shella (spójny z całym hubem) */
[data-rz-theme="dark"]{
  --bg:#16150e;
  --surface:#1d1b13;
  --surface-2:#25221a;
  --text:#ece7da;
  --text-2:#a8a395;
  --muted:#6f6a5c;
  --line:#2c2a20;
  --line-strong:#ece7da;

  --accent:#8aa2ff;
  --accent-ink:#b9c6ff;
  --accent-bg:rgba(138,162,255,.12);
  --accent-glow:rgba(138,162,255,.07);
}

*{box-sizing:border-box; border-radius:0;}
html,body{margin:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:'Space Grotesk',system-ui,sans-serif; font-size:15px; line-height:1.6;
  font-feature-settings:"tnum" 1;
  -webkit-font-smoothing:antialiased;
}
/* subtelna głębia tła — ledwo wyczuwalny tint akcentu u góry.
   UWAGA: używamy ::after, bo shell (wspólny pasek) zajmuje body::before
   na placeholder górnego paska — jeden element ::before na body. */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 70% at 50% -12%, var(--accent-glow), transparent 55%);
}
a{color:inherit;}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;}

/* ---------- kolumna treści (wyśrodkowana; pasek rezerwuje górę/lewą sam) ---------- */
.page{max-width:960px; margin:0 auto; padding:44px 56px 80px;}
.eyebrow{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--accent);
  letter-spacing:.04em; margin-bottom:24px;}
h1{font-size:52px; font-weight:700; line-height:1.03; letter-spacing:-0.025em; margin:0 0 20px;}
.lede{font-size:17px; color:var(--text-2); max-width:52ch; margin:0;}

.rule{height:1px; border:0; margin:52px 0 40px;
  background:linear-gradient(90deg, var(--line-strong), transparent 85%);}

.sec-head{display:flex; align-items:baseline; gap:12px; margin-bottom:22px;}
.sec-label{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text);
  letter-spacing:.12em; text-transform:uppercase;}
.sec-count{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted);}

.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px;}
.chip{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-2);
  background:transparent; border:1px solid var(--line); padding:6px 13px; cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;}
.chip:hover{border-color:var(--accent); color:var(--accent);}
.chip.active{background:var(--accent); color:var(--surface); border-color:var(--accent);}

.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:18px;}
.card{border:1px solid var(--line); background:var(--surface); padding:20px;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;}
.card:hover{border-color:var(--accent); transform:translateY(-3px);
  box-shadow:0 0 0 1px var(--accent-bg);}
.card.hide{display:none;}
.card-head{display:flex; align-items:baseline; gap:10px; margin-bottom:12px;}
.idx{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted);}
.card-title{font-size:19px; font-weight:500; margin:0; flex:1;}
.updated{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted);}
.card-desc{font-size:14px; color:var(--text-2); margin:0 0 16px; line-height:1.55;
  /* stała wysokość niezależnie od tego, czy opis jest, jest krótki czy długi:
     min-height rezerwuje miejsce nawet przy pustym <p> (brak opisu), a
     line-clamp obcina dłuższy tekst do tych samych 2 linii z wielokropkiem. */
  min-height:calc(1.55em * 2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;}

.langbar{display:flex; height:4px; overflow:hidden; margin-bottom:16px; opacity:.9;}
.langbar span{display:block;}

.card-foot{display:flex; justify-content:space-between; align-items:center;
  padding-top:14px; border-top:1px solid var(--line);
  font-family:'JetBrains Mono',monospace; font-size:11px;}
.langs{color:var(--muted);}
.repo-link{color:var(--text-2); text-decoration:none;}
.repo-link:hover{color:var(--accent);}

/* ---------- stopka ---------- */
.foot{margin-top:56px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; gap:16px; align-items:center;
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--muted);}
.foot a{color:var(--text-2); text-decoration:none;}
.foot a:hover{color:var(--accent);}
.foot-sep{margin-left:auto;}

/* subtelna animacja wejścia (reveal) — czysty CSS; treść zawsze kończy widoczna */
@keyframes rz-reveal{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: no-preference){
  .reveal{animation:rz-reveal .55s ease both;}
  .hero.reveal{animation-delay:.04s;}
  .cards .card:nth-child(1){animation-delay:.10s;}
  .cards .card:nth-child(2){animation-delay:.17s;}
  .cards .card:nth-child(3){animation-delay:.24s;}
  .cards .card:nth-child(4){animation-delay:.31s;}
  .cards .card:nth-child(5){animation-delay:.38s;}
}

@media (max-width:760px){
  .page{padding:32px 16px 52px; max-width:none;}
  .eyebrow{margin-bottom:18px;}
  h1{font-size:30px;}
  .lede{font-size:16px;}
  .rule{margin:36px 0 30px;}
  .cards{grid-template-columns:1fr;}
}
@media (max-width:360px){
  h1{font-size:26px;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
}