/* YGOOW - wspolny arkusz strony (wyniesiony z base.html 2026-11-13, zeby /d pod CSP style-src 'self'
   mial ten sam naglowek, szerokosc i stopke co reszta strony). */
:root{
  --bg:#080b0f; --bg2:#0d1117; --bg3:#111820; --border:#1e2d3d;
  --accent:#00d4ff; --accent2:#7c3aed; --accent3:#10b981;
  --warn:#f59e0b; --red:#ef4444; --text:#e2e8f0; --muted:#8593a8;
  --mono:'JetBrains Mono',monospace; --sans:'Space Grotesk',sans-serif;
  --maxw:1140px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:rgba(0,212,255,.25);color:#fff}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
    padding:14px 32px;backdrop-filter:blur(12px);background:rgba(8,11,15,.6);border-bottom:1px solid transparent;transition:.3s}
nav.scrolled{background:rgba(8,11,15,.85);border-bottom-color:var(--border)}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{height:36px;width:36px;display:block;border-radius:9px;filter:drop-shadow(0 1px 8px rgba(0,212,255,.35))}
.nav-links{display:flex;align-items:center;gap:28px;font-size:13px;color:var(--muted);font-family:var(--mono)}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:var(--accent)}
.nav-cta{padding:8px 16px;border:1px solid rgba(0,212,255,.3);border-radius:3px;color:var(--accent)!important;background:rgba(0,212,255,.05);transition:.2s}
.nav-cta:hover{background:rgba(0,212,255,.12);box-shadow:0 0 24px rgba(0,212,255,.15)}
/* Burger bez JS (checkbox hack) - dziala pod Tor Browser Safest (JS off). Input ukryty wizualnie, ale focusowalny (klawiatura). */
.nav-toggle{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;opacity:0;overflow:hidden;clip:rect(0,0,0,0)}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:.2s}
.nav-burger:hover{border-color:var(--accent)}
.nav-toggle:focus-visible + .nav-burger{border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,212,255,.3)}
.nav-burger span{display:block;width:20px;height:2px;margin:0 auto;background:var(--text);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.nav-toggle:checked + .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle:checked + .nav-burger span:nth-child(2){opacity:0}
.nav-toggle:checked + .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:760px){
  .nav-burger{display:flex}
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(8,11,15,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);
    padding:6px 0;max-height:calc(100vh - 70px);overflow-y:auto;
    transform:translateY(-10px);opacity:0;pointer-events:none;transition:transform .25s ease,opacity .25s ease}
  .nav-toggle:checked ~ .nav-links{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:14px 32px;font-size:14px;border-bottom:1px solid rgba(30,45,61,.4)}
  .nav-links a:last-child{border-bottom:none}
  .nav-cta{margin:10px 32px;text-align:center;border-radius:4px}
}

/* LAYOUT */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
section{position:relative}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.section-title{font-size:clamp(26px,3.6vw,40px);font-weight:700;letter-spacing:-.5px;color:#fff;line-height:1.15}
.section-sub{color:var(--muted);max-width:620px;margin-top:14px;font-size:15px}

/* HERO */
header.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--border);padding:76px 0 32px}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(30,45,61,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(30,45,61,.35) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 75%);pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.45;pointer-events:none;animation:drift 22s ease-in-out infinite alternate}
.blob.a{width:520px;height:520px;background:radial-gradient(circle,rgba(0,212,255,.35),transparent 70%);top:-120px;left:-100px}
.blob.b{width:480px;height:480px;background:radial-gradient(circle,rgba(124,58,237,.32),transparent 70%);bottom:-140px;right:-80px;animation-delay:-8s}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(60px,40px)}}
.scanline{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.18) 3px);pointer-events:none;opacity:.35}
.hero-inner{position:relative;z-index:2;width:100%}
.hero-title{font-size:clamp(38px,7vw,78px);font-weight:700;letter-spacing:-2px;line-height:.98;color:#fff}
.hero-title .red{background:linear-gradient(120deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{margin-top:22px;max-width:560px;color:var(--muted);font-size:15px}
.hero-cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:40px}
.badge{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:1px;padding:5px 11px;border-radius:2px;border:1px solid rgba(0,212,255,.25);color:var(--accent);background:rgba(0,212,255,.04)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:13px;font-weight:600;padding:13px 22px;border-radius:4px;border:1px solid transparent;cursor:pointer;transition:.2s}
.btn-primary{background:linear-gradient(120deg,var(--accent),#0891b2);color:#021018;box-shadow:0 8px 30px rgba(0,212,255,.22)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,212,255,.34)}
.btn-ghost{border-color:var(--border);color:var(--text);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* REDACTION DEMO */
.demo{margin-top:56px;border:1px solid var(--border);border-radius:8px;background:rgba(13,17,23,.7);backdrop-filter:blur(6px);overflow:hidden;max-width:520px}
.demo-bar{display:flex;gap:6px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg2)}
.dot{width:10px;height:10px;border-radius:50%}
.demo-body{padding:18px 16px;font-family:var(--mono);font-size:13px;display:grid;gap:12px}
.msg{display:flex;gap:10px;align-items:baseline}
.msg .t{color:var(--muted);font-size:11px;min-width:42px}
.msg .c{color:#cbd5e1}
.msg.locked .c{color:var(--red);background:linear-gradient(90deg,rgba(239,68,68,.08),transparent);padding:2px 8px;border-radius:3px;letter-spacing:2px}

/* SECTIONS */
.pad{padding:110px 0}
.pad-sm{padding:80px 0}

/* FEATURES */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
@media(max-width:880px){.grid3{grid-template-columns:1fr}}
.card{border:1px solid var(--border);border-radius:8px;padding:26px 24px;background:var(--bg2);transition:.25s;position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:.25s}
.card:hover{transform:translateY(-4px);border-color:rgba(0,212,255,.35)}
.card:hover::before{opacity:1}
.card .ic{font-size:26px;color:var(--accent);margin-bottom:14px;line-height:1}
.card h3{font-size:16px;color:#fff;margin-bottom:8px;font-weight:600}
.card p{font-size:13.5px;color:var(--muted);line-height:1.6}

/* STATS (home: measured band) */
.stat{border:1px solid var(--border);border-radius:8px;padding:24px 22px;background:var(--bg)}
.stat .num{font-family:var(--mono);font-size:clamp(26px,3.2vw,34px);font-weight:700;color:#fff;letter-spacing:-.5px;line-height:1.1;margin-bottom:10px}
.stat p{font-size:13.5px;color:var(--muted);line-height:1.6}
/* Siegel BSFZ pod liczbami (docs/BSFZ-SIEGEL.md): karta jak .stat na cala szerokosc; pierscien zrownany z trescia
   karty (ujemny margines zjada przezroczysty margines SVG, Schutzraum zostaje), na telefonie tekst schodzi pod siegel. */
.stat.bsfz-band{display:flex;align-items:center;flex-wrap:wrap;gap:4px 18px;margin-top:18px;padding:14px 22px}
.bsfz-band .seal{flex:none;margin:-12px -6px -12px -25px}
.bsfz-band img{display:block;width:132px;height:132px}
.bsfz-band .txt{flex:1 1 260px;padding:6px 0}
.bsfz-band p{max-width:780px}
.bsfz-band p a{color:var(--accent);white-space:nowrap}

/* STEPS */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
@media(max-width:880px){.steps{grid-template-columns:1fr}}
.step{padding-top:18px;border-top:1px solid var(--border)}
.step .n{font-family:var(--mono);color:var(--accent);font-size:13px}
.step h3{font-size:17px;color:#fff;margin:10px 0 8px;font-weight:600}
.step p{color:var(--muted);font-size:13.5px}

/* PHILOSOPHY terminal */
.term{border:1px solid var(--border);border-radius:8px;background:#060a0e;font-family:var(--mono);font-size:13.5px;line-height:1.9;overflow:hidden;margin-top:40px}
.term .head{padding:10px 16px;border-bottom:1px solid var(--border);color:var(--muted);font-size:11px;background:var(--bg2)}
.term .body{padding:22px 22px}
.term .c-muted{color:var(--muted)}
.term .c-acc{color:var(--accent)}
.term .c-grn{color:var(--accent3)}
.term .cursor{display:inline-block;width:8px;height:15px;background:var(--accent);animation:blink 1.1s steps(1) infinite;vertical-align:-2px}
@keyframes blink{50%{opacity:0}}

/* CTA band */
.ctaband{border:1px solid rgba(0,212,255,.2);border-radius:12px;padding:56px 40px;text-align:center;background:radial-gradient(ellipse at center,rgba(0,212,255,.06),transparent 70%),var(--bg2);position:relative;overflow:hidden}
.ctaband h2{font-size:clamp(24px,3.4vw,38px);color:#fff;font-weight:700;letter-spacing:-.5px}
.ctaband p{color:var(--muted);margin:14px auto 30px;max-width:440px}
.ctaband .cta-note{font-size:13px;margin:26px auto 0;max-width:560px}
.ctaband .cta-note a{color:var(--accent)}

/* FOOTER */
footer{border-top:1px solid var(--border);padding:48px 0 40px;background:var(--bg2)}
.foot{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.foot .col h4{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.foot .col a{display:block;color:#94a3b8;font-size:13px;padding:3px 0;transition:color .2s}
.foot .col a:hover{color:var(--accent)}
.foot .legacy{max-width:320px;color:var(--muted);font-size:13px}
.foot .legacy .logo{height:30px;width:auto;display:block;margin-bottom:14px;filter:drop-shadow(0 1px 6px rgba(0,212,255,.3))}
.foot-bottom{max-width:var(--maxw);margin:36px auto 0;padding:18px 32px 0;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--muted)}
.onion{margin-top:16px;font-family:var(--mono);font-size:11px}
.onion-label{display:block;color:var(--accent);margin-bottom:5px;letter-spacing:1px}
.onion code{color:var(--muted);word-break:break-all;display:block;line-height:1.5}
.onion-copy,.share-copy{background:none;border:1px solid var(--border);color:var(--muted);font-family:var(--mono);font-size:10px;padding:2px 8px;border-radius:3px;cursor:pointer;margin-top:6px;transition:.2s}
.onion-copy:hover,.share-copy:hover{border-color:var(--accent);color:var(--accent)}
.share{display:inline-flex;align-items:center;gap:12px}
.share a,.share button{color:var(--muted);font-size:15px;background:none;border:none;cursor:pointer;transition:color .2s}
.share a:hover,.share button:hover{color:var(--accent)}
/* BSFZ-Siegel (docs/BSFZ-SIEGEL.md, AGB BSFZ): grafika 1:1, zawsze z linkiem na strone BSFZ, tylko w kolumnie YGOOW -
   nie w foot-bottom obok BeatTime. SVG ma wlasny przezroczysty margines (19 % boku), wiekszy niz Schutzraum
   z leitfadenu (10 %), wiec podpis stoi tuz przy pudelku; ujemny margines zrownuje pierscien z logo. */
.foot .bsfz{display:flex;align-items:center;gap:4px;margin:14px 0 0 -24px}
.foot .bsfz .seal{flex:none;padding:0}
.foot .bsfz img{display:block;width:124px;height:124px}
.foot .bsfz p{font-size:11.5px;line-height:1.55}
.foot .bsfz p a{display:inline;padding:0;font-size:inherit;border-bottom:1px solid rgba(148,163,184,.3)}

/* PROSE (legal) */
.prose{max-width:var(--maxw);margin:0 auto;padding:140px 32px 90px}
.prose h1{font-size:clamp(30px,4vw,44px);color:#fff;letter-spacing:-.5px;margin-bottom:8px}
.prose .updated{font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:36px}
.prose h2{font-size:20px;color:#fff;margin:36px 0 12px;font-weight:600}
.prose p,.prose li{color:#94a3b8;font-size:15px;line-height:1.75}
.prose ul{margin:12px 0 12px 22px}
.prose li{margin:6px 0}
.prose .note{border-left:3px solid var(--accent2);background:rgba(124,58,237,.06);padding:14px 18px;border-radius:4px;color:#a78bfa;font-size:13.5px;font-family:var(--mono);margin:24px 0}
.prose .ph{color:var(--warn)}
.prose a.inline,.prose a{color:var(--accent);border-bottom:1px solid rgba(0,212,255,.3)}
.prose h3{font-size:16px;color:#fff;margin:26px 0 8px;font-weight:600}
.prose strong{color:#cbd5e1}
.prose ol{margin:12px 0 12px 22px}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--bg3);padding:2px 6px;border-radius:3px;color:var(--accent3);word-break:break-word}
.prose pre{background:#060a0e;border:1px solid var(--border);border-radius:6px;padding:16px;overflow:auto;margin:18px 0}
.prose pre code{background:none;padding:0;color:#cbd5e1}
.prose blockquote{border-left:3px solid var(--accent);background:rgba(0,212,255,.05);padding:10px 18px;margin:18px 0;color:#94a3b8}
.prose hr{border:none;border-top:1px solid var(--border);margin:32px 0}
.prose table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px}
.prose th,.prose td{border:1px solid var(--border);padding:8px 12px;text-align:left}
.prose th{background:var(--bg2);color:#fff}
.prose .admonition{border-left:3px solid var(--accent2);background:rgba(124,58,237,.06);padding:12px 18px;border-radius:4px;margin:20px 0;font-size:14px}
.prose .admonition-title{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--accent2);margin-bottom:6px}
/* Blog list */
.bloglist{max-width:var(--maxw);margin:0 auto;padding:140px 32px 90px}
.bloglist h1{font-size:clamp(30px,4vw,44px);color:#fff;margin-bottom:32px}
.postitem{display:block;padding:22px 0;border-top:1px solid var(--border);transition:.2s}
.postitem:hover{padding-left:8px}
.postitem .date{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:1px}
.postitem h2{font-size:20px;color:#fff;margin:6px 0 6px;font-weight:600}
.postitem p{color:var(--muted);font-size:14px}
/* Markdown images + app screenshots */
.prose img{max-width:100%;border-radius:8px}
/* Siegel BSFZ we wpisie (te same reguly co w stopce): link bez podkreslenia prozy, podpis obok,
   ujemny margines (19 % z 176 px) zrownuje pierscien z kolumna tekstu. */
.prose .seal-fig{display:flex;align-items:center;gap:8px;margin:26px 0 10px -34px}
.prose .seal-fig a{flex:none;border-bottom:none}
.prose .seal-fig img{display:block;width:176px;height:176px;border-radius:0}
.prose .seal-fig figcaption{font-size:13px;line-height:1.6;color:var(--muted)}
/* Galeria zrzutów apki - pasek scroll-snap jak karuzela tipów: bez JS przewija się natywnie
   (Tor Browser „Safest"), z JS dochodzi przeciąganie myszą. */
.shots{display:flex;gap:18px;margin:14px 0 6px;padding:6px 2px 18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;-webkit-overflow-scrolling:touch}
.has-js .shots{cursor:grab}
.shots.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.shots:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
.shots::-webkit-scrollbar{height:8px}
.shots::-webkit-scrollbar-track{background:transparent}
.shots::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
.shots::-webkit-scrollbar-thumb:hover{background:var(--accent)}
.shots figure{flex:0 0 230px;margin:0;scroll-snap-align:start}
.prose .shots img{display:block;width:230px;height:auto;aspect-ratio:127/270;border:1px solid var(--border);
  border-radius:18px;box-shadow:0 12px 36px rgba(0,0,0,.4);-webkit-user-drag:none}
.shots figcaption{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.shots figcaption b{display:block;color:#e2e8f0;font-size:13px;font-weight:600;margin-bottom:2px}
.shots-h{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin:30px 0 0}
@media(max-width:560px){.shots figure{flex-basis:62vw}.prose .shots img{width:62vw}}
/* Strona postępów: etykiety statusu (done/built/next/ahead) + legenda. */
.st{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;
  padding:2px 8px;border-radius:10px;border:1px solid;white-space:nowrap;line-height:1.5}
.st.done{color:#34d399;border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.07)}
.st.built{color:var(--accent);border-color:rgba(0,212,255,.4);background:rgba(0,212,255,.06)}
.st.next{color:#fbbf24;border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.07)}
.st.ahead{color:var(--muted);border-color:var(--border)}
.prose .legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px 18px;
  border:1px solid var(--border);border-radius:8px;padding:14px 16px;margin:22px 0 8px}
.prose .legend p{font-size:13px;line-height:1.5;color:var(--muted);margin:0}
.prose .legend .st{margin-right:8px}
.page-progress td:nth-child(2){white-space:nowrap}
.page-progress td:first-child{color:#cbd5e1;font-weight:500}
@media(max-width:560px){ /* tabele postępów jako karty - bez ściskania trzech kolumn na telefonie */
  .page-progress table,.page-progress tbody,.page-progress tr,.page-progress td{display:block;width:100%}
  .page-progress thead{display:none}
  .page-progress tr{border:1px solid var(--border);border-radius:8px;margin:10px 0;padding:10px 14px}
  .page-progress td{border:none;padding:2px 0}
  .page-progress td:nth-child(2){margin:4px 0 2px}
}

/* TIPS carousel - mirror of the in-app cards. CSS-ONLY (scroll-snap): native horizontal
   scroll + snap, zero JS, so it works fully under Tor Browser "Safest". Per-card accent via
   --tip-accent / --tip-glow set inline (no color-mix - bulletproof on Firefox ESR / Tor). */
.tips-rail{display:flex;gap:18px;margin-top:44px;padding:6px 2px 20px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:auto;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;-webkit-overflow-scrolling:touch}
/* Mysz na PC nie przeciaga overflow natywnie - wlasciwy click-and-drag dokłada JS (progresywnie). */
.has-js .tips-rail{cursor:grab}
.tips-rail.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.tips-rail::-webkit-scrollbar{height:8px}
.tips-rail::-webkit-scrollbar-track{background:transparent}
.tips-rail::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}
.tips-rail::-webkit-scrollbar-thumb:hover{background:var(--accent)}
.tipcard{scroll-snap-align:center;flex:0 0 clamp(258px,82%,340px);
  border:1px solid var(--border);border-radius:14px;padding:28px 26px;background:var(--bg2);
  display:flex;flex-direction:column;gap:15px;transition:transform .25s,border-color .25s}
.tipcard:hover{transform:translateY(-4px);border-color:var(--tip-accent,var(--accent))}
.tipcard .tip-ic{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:29px;
  color:var(--tip-accent,var(--accent));border:1.5px solid var(--tip-accent,var(--accent));
  background:radial-gradient(circle,var(--tip-glow,rgba(0,212,255,.22)),transparent 70%)}
.tipcard h3{font-size:16.5px;color:#fff;font-weight:700;line-height:1.25}
.tipcard p{font-size:13.5px;color:var(--muted);line-height:1.6}
.tips-hint{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;
  letter-spacing:1px;color:var(--muted);margin-top:10px;text-transform:uppercase}
.tips-hint .ln{height:1px;width:34px;background:linear-gradient(90deg,var(--accent),transparent)}
.tips-hint .ln.r{background:linear-gradient(270deg,var(--accent),transparent)}
@media(max-width:560px){.tipcard{flex-basis:86%}}
/* Stopka karuzeli: hint + strzalki. Strzalki tylko gdy JS (bez JS zostaje pasek + scroll-snap). */
.tips-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:12px}
.tips-nav{display:none;gap:10px}
.has-js .tips-nav{display:inline-flex}
.tips-arrow{width:46px;height:38px;display:grid;place-items:center;border:1px solid var(--border);
  border-radius:6px;background:rgba(255,255,255,.02);color:var(--text);font-size:17px;cursor:pointer;transition:.2s}
.tips-arrow:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 20px rgba(0,212,255,.12)}
.tips-arrow:active{transform:translateY(1px)}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.blob{animation:none}}
/* RWD: prose na malych ekranach - mniejszy padding + szerokie tabele przewijane poziomo (zero overflow strony) */
@media(max-width:600px){
  .prose,.bloglist{padding-left:20px;padding-right:20px}
  .prose table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* === 2026-11-13: jedna szerokosc, jeden naglowek i jedna stopka dla calej strony (takze /d) === */
[hidden]{display:none!important}
/* Miedzy telefonem a szerokim ekranem linki menu musza sie zmiescic w jednym rzedzie (burger tylko <= 760 px). */
@media(min-width:761px) and (max-width:1100px){
  nav{padding:14px 20px}
  .nav-links{gap:15px;font-size:12px}
  .nav-cta{padding:7px 11px}
}
/* Stopka: zegar .beat bez atrybutow style= (CSP /d ma style-src 'self'). */
.foot-bottom .beat{color:inherit}
.foot-bottom .beat-clock{color:var(--accent)}

/* Podstrony: wstep pod tytulem i ostrzezenia w kolorach strony (admonition z Markdown: !!! warning / danger / tip). */
.prose .lead{font-size:16.5px;line-height:1.7;color:#a3b1c2;max-width:880px;margin:4px 0 8px}
.prose .admonition.warning{border-left-color:var(--warn);background:rgba(245,158,11,.07)}
.prose .admonition.warning .admonition-title{color:var(--warn)}
.prose .admonition.danger{border-left-color:var(--red);background:rgba(239,68,68,.07)}
.prose .admonition.danger .admonition-title{color:#f87171}
.prose .admonition.tip{border-left-color:var(--accent3);background:rgba(16,185,129,.07)}
.prose .admonition.tip .admonition-title{color:#34d399}
.prose .admonition p{margin:6px 0}
.prose .admonition ul{margin:6px 0 6px 20px}

/* Mapa krokow (przewodnik): karty jak .card na stronie glownej, kazda prowadzi do swojej sekcji. */
.prose .guide-map{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 8px}
@media(max-width:880px){.prose .guide-map{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.prose .guide-map{grid-template-columns:1fr}}
.prose .guide-map a{display:block;border:1px solid var(--border);border-radius:8px;padding:16px 18px;background:var(--bg2);transition:.2s}
.prose .guide-map a:hover{border-color:rgba(0,212,255,.35);transform:translateY(-2px)}
.prose .guide-map .n{display:block;font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:1px}
.prose .guide-map b{display:block;color:#fff;font-size:15px;margin:4px 0 2px}
.prose .guide-map span.d{display:block;color:var(--muted);font-size:13px;line-height:1.5}
/* Zrzuty z komputera (instalator w przegladarce): szeroko, z ramka i podpisem. */
.prose figure.wide{margin:18px 0 22px}
.prose figure.wide img{display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:8px;box-shadow:0 12px 36px rgba(0,0,0,.35)}
.prose figure.wide figcaption{margin-top:8px;font-size:13px;line-height:1.55;color:var(--muted)}
/* Skroty kluczy i odciski: zawsze lamane, nigdy poziomy pasek strony. */
.prose code.hash{display:block;font-size:12.5px;line-height:1.6;word-break:break-all;padding:8px 12px;margin:8px 0;color:var(--accent3)}

/* Strona alfa: film obok listy "co juz dziala". */
.prose .alpha-top{display:grid;grid-template-columns:300px minmax(0,1fr);gap:34px;align-items:start;margin:24px 0 10px}
@media(max-width:820px){.prose .alpha-top{grid-template-columns:1fr}}
.prose .alpha-top video{display:block;width:100%;max-width:300px;height:auto;aspect-ratio:9/20;border:1px solid var(--border);border-radius:22px;background:#000;box-shadow:0 18px 44px rgba(0,0,0,.45)}
.prose .alpha-top .vcap{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--muted);max-width:300px}
.prose .alpha-top h2:first-child{margin-top:0}
/* Akapity w prozie: kolejny akapit z odstepem (wczesniej tekst laczyl sie w jeden blok). Bez klas - .lead, .shots-h,
   .updated i podpisy maja wlasne odstepy. */
.prose p + p:not([class]){margin-top:14px}
/* Drobny druk (znaki towarowe itp.). */
.prose p.small-print{margin-top:34px;font-size:12.5px;line-height:1.6;color:var(--muted)}