/* Słownik parametrów generatorów obrazu (spar1411) - 14.11.2026. Kolory ze zmiennych motywu, ostre krawędzie, hairline. */
.spar{--sp-ac:var(--g-ac,var(--accent,#A78BFA));--sp-tx:var(--g-tx,var(--text,#E8E4F1));--sp-mu:var(--g-mu,var(--muted,#BDB6CC));--sp-ln:var(--g-line,var(--border,#2A2637));--sp-bg2:var(--g-bg2,#17141F);box-sizing:border-box;max-width:880px;margin:0 auto;padding:40px 16px 72px;color:var(--sp-tx);font-family:"Recursive Dev",system-ui,sans-serif;font-size:16.5px;line-height:1.72;overflow-wrap:anywhere}
.spar *,.spar *::before,.spar *::after{box-sizing:border-box}
.spar a{color:var(--sp-ac)}
.spar .sp-okr{font-family:var(--font-mono,monospace);font-size:12px;color:var(--sp-mu);margin:0 0 18px}
.spar .sp-okr a{color:var(--sp-mu);text-decoration:none}
.spar .sp-eyebrow{font-family:var(--font-mono,monospace);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--sp-ac)}
.spar h1{font-family:var(--font-display,"Space Grotesk",sans-serif);font-size:clamp(30px,5vw,46px);line-height:1.06;letter-spacing:-.02em;margin:12px 0 14px}
.spar h2{font-family:var(--font-display,"Space Grotesk",sans-serif);font-size:clamp(21px,3vw,26px);line-height:1.25;margin:44px 0 14px;letter-spacing:-.01em}
.spar .sp-lead{font-size:19px;line-height:1.6;border-left:3px solid var(--sp-ac);padding-left:16px;margin:0 0 10px}
.spar .sp-aka{font-family:var(--font-mono,monospace);font-size:12.5px;color:var(--sp-mu);margin:0 0 6px}
.spar .sp-test{font-size:14px;color:var(--sp-mu);border-top:1px solid var(--sp-ln);border-bottom:1px solid var(--sp-ln);padding:10px 0;margin:14px 0}
.spar .sp-test b{color:var(--sp-tx);font-weight:600}
.spar .sp-test code{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
.spar .sp-mj{border:1px solid var(--sp-ln);border-left:3px solid var(--sp-ac);padding:14px 16px;font-size:15px;margin:18px 0}
/* suwak przed/po */
.spar .sp-cmp{position:relative;width:100%;overflow:hidden;background:var(--sp-bg2);margin:6px 0 0;touch-action:pan-y;user-select:none}
.spar .sp-cmp img{display:block;width:100%;height:auto}
.spar .sp-cmp .sp-po{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.spar .sp-cmp .sp-po img{width:100%;height:100%;object-fit:cover}
.spar .sp-cmp .sp-kreska{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.spar .sp-cmp .sp-kreska::after{content:"";position:absolute;top:50%;left:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border:2px solid #fff;background:rgba(0,0,0,.55)}
.spar .sp-cmp input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;touch-action:pan-y}
.spar .sp-cmp .sp-et{position:absolute;top:8px;padding:3px 8px;font-family:var(--font-mono,monospace);font-size:11.5px;background:rgba(0,0,0,.66);color:#fff;pointer-events:none;max-width:46%}
.spar .sp-cmp .sp-et.l{left:8px}.spar .sp-cmp .sp-et.p{right:8px;text-align:right}
.spar .sp-pod{font-size:13px;color:var(--sp-mu);margin:6px 0 0}
/* siatka */
.spar .sp-siatka{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:6px 0 0}
.spar .sp-siatka.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.spar .sp-siatka figure{margin:0}
.spar .sp-siatka img{display:block;width:100%;height:auto;background:var(--sp-bg2)}
.spar .sp-siatka figcaption{font-family:var(--font-mono,monospace);font-size:12px;color:var(--sp-mu);padding:5px 0 0;line-height:1.4}
@media(max-width:600px){.spar .sp-siatka.n3{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* tabela -> karty na telefonie */
.spar table.sp-tab{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5;table-layout:fixed}
.spar table.sp-tab th,.spar table.sp-tab td{border-bottom:1px solid var(--sp-ln);padding:9px 8px 9px 0;text-align:left;vertical-align:top;overflow-wrap:anywhere}
.spar table.sp-tab th{font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sp-mu);font-weight:700}
.spar table.sp-tab td:first-child{font-weight:600;width:19%}
.spar table.sp-tab code{font-size:13px;white-space:normal}
.spar table.sp-tab .sp-uw{display:block;font-size:12.5px;color:var(--sp-mu);margin-top:3px}
.spar table.sp-tab tr.sp-brak td{color:var(--sp-mu)}
@media(max-width:700px){.spar table.sp-tab thead{display:none}.spar table.sp-tab,.spar table.sp-tab tbody,.spar table.sp-tab tr,.spar table.sp-tab td{display:block;width:100%!important}.spar table.sp-tab tr{border-bottom:1px solid var(--sp-ln);padding:8px 0}.spar table.sp-tab td{border:0;padding:2px 0}.spar table.sp-tab td[data-l]::before{content:attr(data-l) ": ";font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sp-mu)}}
.spar .sp-zr{font-size:13px;color:var(--sp-mu);margin:10px 0 0;padding:0;list-style:none}
.spar .sp-zr li{margin:2px 0}
.spar ul.sp-kiedy{padding-left:20px;margin:0}
.spar ul.sp-kiedy li{margin:0 0 6px}
.spar .sp-blad{border-left:3px solid var(--g-zw,#FF6A3D);padding:2px 0 2px 16px}
/* kod do skopiowania */
.spar .sp-kod{position:relative;border:1px solid var(--sp-ln);background:var(--sp-bg2)}
.spar .sp-kod pre{margin:0;padding:16px 16px 16px 16px;white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--font-mono,"JetBrains Mono",monospace);font-size:13.5px;line-height:1.6;color:var(--sp-tx);background:transparent;overflow:visible}
.spar .sp-kopiuj{display:block;width:100%;border:0;border-top:1px solid var(--sp-ln);background:transparent;color:var(--sp-ac);font-family:var(--font-mono,monospace);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:10px;cursor:pointer;text-align:left}
.spar .sp-kopiuj:hover{background:rgba(255,255,255,.04)}
/* FAQ */
.spar details.sp-faq{border-bottom:1px solid var(--sp-ln);padding:10px 0}
.spar details.sp-faq summary{cursor:pointer;font-weight:600;list-style:none}
.spar details.sp-faq summary::-webkit-details-marker{display:none}
.spar details.sp-faq summary::before{content:"+ ";color:var(--sp-ac)}
.spar details.sp-faq[open] summary::before{content:"- "}
.spar details.sp-faq p{margin:8px 0 0}
/* powiązane */
.spar .sp-pow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--sp-ln)}
.spar .sp-pow a{display:block;padding:12px 12px 12px 0;border-bottom:1px solid var(--sp-ln);text-decoration:none;color:var(--sp-tx)}
.spar .sp-pow a b{display:block;font-family:var(--font-display,sans-serif);font-size:16px}
.spar .sp-pow a span{font-size:13px;color:var(--sp-mu)}
@media(max-width:560px){.spar .sp-pow{grid-template-columns:1fr}}
.spar .sp-ramka{border:1px solid var(--sp-ln);padding:14px 16px;margin:22px 0;font-size:15px}
/* hub: wyszukiwarka i karty haseł */
.sp-hub{--sp-ac:var(--g-ac,var(--accent,#A78BFA));--sp-tx:var(--g-tx,var(--text,#E8E4F1));--sp-mu:var(--g-mu,var(--muted,#BDB6CC));--sp-ln:var(--g-line,var(--border,#2A2637));margin:28px 0;overflow-wrap:anywhere}
.sp-hub *{box-sizing:border-box}
.sp-hub label{display:block;font-family:var(--font-mono,monospace);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--sp-mu)}
.sp-hub input[type=search]{display:block;width:100%;margin:8px 0 0;padding:12px 14px;border:1px solid var(--sp-ln);border-radius:0;background:transparent;color:var(--sp-tx);font-size:16px;font-family:inherit}
.sp-hub .sp-filtry{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
.sp-hub .sp-filtry button{border:1px solid var(--sp-ln);border-radius:0;background:transparent;color:var(--sp-tx);font-family:var(--font-mono,monospace);font-size:12px;padding:7px 10px;cursor:pointer}
.sp-hub .sp-filtry button[aria-pressed=true]{background:var(--sp-ac);border-color:var(--sp-ac);color:#0b0812}
.sp-hub .sp-licz{font-family:var(--font-mono,monospace);font-size:12px;color:var(--sp-mu);margin:8px 0 0}
.sp-hub h3.sp-grupa{font-family:var(--font-mono,monospace)!important;font-size:12px!important;letter-spacing:.16em;text-transform:uppercase;color:var(--sp-ac);margin:26px 0 8px!important}
.sp-hub .sp-karty{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--sp-ln);border-left:1px solid var(--sp-ln)}
.sp-hub .sp-karta{display:block;border-right:1px solid var(--sp-ln);border-bottom:1px solid var(--sp-ln);padding:0 0 12px;text-decoration:none!important;color:var(--sp-tx)!important}
.sp-hub .sp-karta img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;margin:0 0 10px;background:#17141F}
.sp-hub .sp-karta .sp-bez{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;margin:0 0 10px;font-family:var(--font-mono,monospace);font-size:26px;color:var(--sp-ac);background:rgba(255,255,255,.03)}
.sp-hub .sp-karta b{display:block;padding:0 12px;font-family:var(--font-display,sans-serif);font-size:16.5px;line-height:1.3}
.sp-hub .sp-karta span{display:block;padding:4px 12px 0;font-size:13.5px;line-height:1.45;color:var(--sp-mu)}
.sp-hub .sp-karta i{display:block;padding:6px 12px 0;font-style:normal;font-family:var(--font-mono,monospace);font-size:11px;color:var(--sp-mu)}
.sp-hub [hidden]{display:none!important}
@media(max-width:820px){.sp-hub .sp-karty{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.sp-hub .sp-karty{grid-template-columns:1fr}.sp-hub .sp-karta img,.sp-hub .sp-karta .sp-bez{aspect-ratio:16/9}}
.sp-box{border:1px solid var(--g-line,var(--border,#2A2637));border-left:3px solid var(--g-ac,var(--accent,#A78BFA));padding:14px 16px;margin:26px 0;font-size:15.5px;line-height:1.6}
.sp-box b.hd{display:block;font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--g-ac,var(--accent,#A78BFA));margin:0 0 6px}
