/* TitanMC /blog/minecraft-serwer-nie-laczy — the look of this page only (loaded after landing-v1.css; classes pg-cn-*).
„Ścieżka pakietu”: follow your packet through the rainy night and see where it breaks. One language for the whole page:
signal lines and nodes, blue = flowing, red = broken, gold = the destination (titanmc.pl). Motion is transform/opacity
only; loops run on the compositor (CSS / Web Animations) and stop off screen (lp-pg-connect.js). */
body[data-pg="connect"]{--lp-acc:#6C8CFF;--lp-acc-rgb:108,140,255;--pg-cn-red:#FF5D6C;--pg-cn-red-rgb:255,93,108;
  --ca:var(--lp-acc-rgb);--cr:var(--pg-cn-red-rgb);/* short aliases: rgba(var(--ca),a) = accent, rgba(var(--cr),a) = red */
  --pg-cn-blue-hi:#BFD0FF;
--pg-cn-blk:#10121F;--pg-cn-blk-2:#0A0B14;--pg-cn-mono:'JetBrains Mono',ui-monospace,monospace;
--pg-cn-rain-near:url(/img/lp/connect/rain-near.svg);
--pg-cn-rain-far:url(/img/lp/connect/rain-far.svg);}

/* the landing pages leave the browser's 8 px body margin (a strip beside the hero); this page sizes its own parts border-box */
body[data-pg="connect"]{margin:0}
body[data-pg="connect"] [class*="pg-cn-"],body[data-pg="connect"] .lp-hero{box-sizing:border-box}

/* ── hero: night picture, rain, lightning */
body[data-pg="connect"] .lp-hero-fx{display:none}
body[data-pg="connect"] .lp-hero--post{min-height:min(100svh,1040px);padding:clamp(90px,11vh,132px) 24px clamp(10px,2vh,24px);align-items:stretch}
body[data-pg="connect"] .lp-hero-bg img{object-position:58% 38%}
body[data-pg="connect"] .lp-hero-bg picture{display:block;height:100%;transition:transform 1.6s var(--lp-ease)}
body[data-pg="connect"] .lp-hero-bg::after{background:
linear-gradient(180deg,rgba(8,8,13,.72) 0%,rgba(8,8,13,.2) 22%,rgba(8,8,13,.2) 46%,rgba(8,8,13,.62) 72%,rgba(8,8,13,.94) 92%,var(--lp-bg) 100%),
linear-gradient(90deg,rgba(8,8,13,.84) 0%,rgba(8,8,13,.52) 34%,rgba(8,8,13,.04) 68%,rgba(8,8,13,.1) 100%),
radial-gradient(42% 46% at 70% 26%,rgba(var(--ca),.1),transparent 72%)}
.pg-cn-flash{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;mix-blend-mode:color-dodge;
background:radial-gradient(70% 62% at 60% 20%,rgba(150,160,190,.92),rgba(120,132,170,.6) 44%,rgba(90,100,140,.28) 72%,transparent),linear-gradient(180deg,rgba(130,140,175,.5),rgba(80,90,130,.2) 70%,transparent)}
.pg-cn-bolt{position:absolute;left:76%;top:9%;width:42px;height:140px;opacity:0;filter:drop-shadow(0 0 8px rgba(200,215,255,.95))}
.pg-cn-rain{position:absolute;inset:-60px -8%;z-index:-1;overflow:hidden;pointer-events:none;transform:rotate(5deg);opacity:0;transition:transform 1.8s var(--lp-ease),opacity 2.4s ease}
.pg-cn-go .pg-cn-rain{opacity:1}
.pg-cn-rain i{position:absolute;left:0;right:0;top:-420px;bottom:0;background-repeat:repeat;will-change:transform}
.pg-cn-rain-far{background-image:var(--pg-cn-rain-far);background-size:200px 260px;opacity:.3;animation:pg-cn-fall-f 1.1s linear infinite}
.pg-cn-rain-near{background-image:var(--pg-cn-rain-near);background-size:300px 420px;opacity:.36;animation:pg-cn-fall-n .66s linear infinite}

/* ── hero: editorial layout (title across, lead + actions left, author + numbers right, the route band below) */
.pg-cn-hero .lp-hero-in{max-width:1340px;grid-template-columns:minmax(0,1fr) minmax(300px,480px);grid-template-rows:auto auto auto auto minmax(0,1fr);
grid-template-areas:"top top" "h1 h1" "lead side" "act side" "route route";column-gap:clamp(36px,5vw,96px);row-gap:0;align-items:start;text-align:left}
.pg-cn-hero .lp-hero-copy{display:contents}
.pg-cn-top{grid-area:top;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 18px}
.pg-cn-top .lp-crumbs ol{margin:0}
.pg-cn-hero .lp-crumbs li+li::before{content:'';display:inline-block;width:14px;height:1px;margin:0 9px 0 1px;vertical-align:.3em;background:linear-gradient(90deg,rgba(var(--ca),.25),rgba(var(--ca),.8))}
.pg-cn-hero .lp-crumbs li[aria-current]{color:var(--pg-cn-blue-hi)}
.pg-cn-hero .lp-cat{background:rgba(var(--ca),.12);border-color:rgba(var(--ca),.42);color:var(--pg-cn-blue-hi)}
.pg-cn-hero .lp-cat::before{content:'';width:6px;height:6px;background:var(--lp-acc);box-shadow:0 0 8px rgba(var(--ca),.9)}
.pg-cn-hero .lp-h1{grid-area:h1;margin:0 0 24px;font-size:clamp(2.1rem,3.9vw,3.6rem);line-height:1.05}
.pg-cn-hero .lp-lead{grid-area:lead;max-width:44rem;margin:0 0 26px;color:rgba(243,239,230,.82)}
.pg-cn-side{grid-area:side;padding-top:3px}
.pg-cn-hero .lp-meta{gap:8px 18px;margin:0 0 16px;font-size:.84rem}
.pg-cn-hero .lp-meta i{color:var(--lp-acc)}
.pg-cn-hero .lp-stats{max-width:none;margin:0;border-radius:14px;background:rgba(var(--ca),.16);border-color:rgba(var(--ca),.24)}
.pg-cn-hero .lp-stat{padding:13px 8px 11px;background:rgba(8,9,16,.86)}
.pg-cn-hero .lp-stat b{font-size:clamp(1.6rem,1.9vw,2.05rem);white-space:nowrap}
.pg-cn-hero .lp-stat>span{font-size:.64rem;letter-spacing:.12em}
.pg-cn-hero .lp-actions{grid-area:act}

/* ── the route band */
.pg-cn-route{--vert:0;--cz:88px;--bs:64px;--is:48px;--nw:150px;--tk:6px;grid-area:route;align-self:end;position:relative;height:calc(var(--cz) + var(--bs) + 84px);margin-top:clamp(4px,1.6vh,22px);
display:flex;align-items:flex-end;gap:14px}
.pg-cn-route-k{position:relative;display:inline-flex;align-items:center;gap:8px;margin:0;font:700 .66rem/1 'Rajdhani',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--pg-cn-blue-hi)}
.pg-cn-route-k i{width:6px;height:6px;background:var(--lp-acc);box-shadow:0 0 0 3px rgba(var(--ca),.18)}
.pg-cn-note{position:relative;margin:0;font-size:.74rem;line-height:1;color:var(--lp-faint)}
.pg-cn-note i{margin-right:4px;color:rgba(var(--ca),.7)}
.pg-cn-note-t{display:none}
@media(hover:none){.pg-cn-note-p{display:none}.pg-cn-note-t{display:inline}}
/* the signal monitor: an oscilloscope screen (graticule, ticks, label) that grows up into the free band above the route
   (--pg-cn-sx from the js); --sbl = the baseline's distance from the screen's bottom */
.pg-cn-scope{--sbl:calc(var(--cz) * .4556);display:none;position:absolute;left:0;right:0;top:calc(var(--cz) * .08 - var(--pg-cn-sx,0px));height:calc(var(--cz) * .84 + var(--pg-cn-sx,0px));pointer-events:none;
background:linear-gradient(rgba(var(--ca),.2),rgba(var(--ca),.2)) 0 calc(100% - var(--sbl))/100% 1px no-repeat,
linear-gradient(0deg,rgba(var(--ca),.09),transparent) 0 0/100% calc(100% - var(--sbl)) no-repeat,
repeating-linear-gradient(90deg,rgba(var(--ca),.45) 0 1px,transparent 1px 24px) 0 calc(100% - var(--sbl) + 5px)/100% 5px no-repeat,
repeating-linear-gradient(0deg,rgba(var(--ca),.09) 0 1px,transparent 1px 32px) 0 calc(100% - var(--sbl) + 1px),
repeating-linear-gradient(90deg,rgba(var(--ca),.14) 0 1px,transparent 1px 120px),repeating-linear-gradient(90deg,rgba(var(--ca),.05) 0 1px,transparent 1px 24px);
-webkit-mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 26%);-webkit-mask-composite:source-in;
mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 26%);mask-composite:intersect}
.pg-cn-js .pg-cn-scope{display:block}
.pg-cn-js .pg-cn-scope:not(.is-sized){visibility:hidden}
.pg-cn-scope::before{content:'Sygnał';position:absolute;left:3.2%;bottom:calc(var(--sbl) + 12px);font:400 .6rem/1 var(--pg-cn-mono);letter-spacing:.26em;text-transform:uppercase;color:rgba(191,208,255,.56)}
.pg-cn-shint{display:none}
/* monitor parts (js): baseline, pulse sprites riding with the packets, red break pulse + flat line, interference, drops */
.pg-cn-sb,.pg-cn-flat{position:absolute;left:0;right:0;bottom:calc(var(--sbl) - 1px);height:2px;pointer-events:none}
.pg-cn-sb{background:rgba(176,198,255,.88);box-shadow:0 0 7px 1px rgba(108,140,255,.45)}
.pg-cn-flat{background:linear-gradient(90deg,rgba(255,107,121,.95),rgba(255,93,108,.38));box-shadow:0 0 7px rgba(255,93,108,.5);opacity:0;transition:opacity .3s;will-change:opacity}
.pg-cn-flat.is-on{opacity:1}
.pg-cn-sps{position:absolute;left:0;top:0;bottom:0;width:0}
.pg-cn-spc{position:absolute;left:0;top:0;bottom:0;width:0;transition:opacity .35s;will-change:opacity}
.pg-cn-route.is-fail .pg-cn-spc{opacity:0}
.pg-cn-sp,.pg-cn-bsp{--sh:calc(var(--pg-cn-amp,60px) / .75);position:absolute;left:-46px;width:92px;height:var(--sh);bottom:calc(var(--sbl) - var(--sh) * .2);opacity:0;pointer-events:none;
will-change:transform,opacity;background:url(/img/lp/connect/ecg.svg) 0 0/100% 100% no-repeat}
.pg-cn-sp.is-probe{--sh:calc(var(--pg-cn-amp,60px) * 1.25 / .75)}
.pg-cn-sp::after{content:'';position:absolute;right:50%;bottom:20%;width:var(--trl,190px);height:2px;margin-bottom:-1px;background:linear-gradient(90deg,transparent,rgba(170,192,255,.75));pointer-events:none}
.pg-cn-sp.is-red::after{right:auto;left:50%;background:linear-gradient(270deg,transparent,rgba(255,120,134,.8))}
.pg-cn-sp.is-red,.pg-cn-bsp{background-image:url(/img/lp/connect/ecg-red.svg)}
.pg-cn-bsp{left:0;margin-left:-46px;transform-origin:50% 80%}
.pg-cn-nz{position:absolute;left:0;width:110px;height:20px;bottom:calc(var(--sbl) - 10px);opacity:0;transition:opacity .3s;pointer-events:none;will-change:transform,opacity}
.pg-cn-nz.is-on{opacity:1}
.pg-cn-nz::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 20' preserveAspectRatio='none'%3E%3Crect x='4' y='8' width='102' height='4' fill='rgb(9,10,18)' fill-opacity='.94'/%3E%3Cpolyline points='0 10 4 9.8 8 9.2 12 10.5 16 8.0 20 10.2 24 9.1 28 6.4 32 10.1 36 5.2 40 9.2 44 4.5 48 4.3 52 8.9 56 15.1 60 4.5 64 6.3 68 11.6 72 14.9 76 10.8 80 9.1 84 13.6 88 7.1 92 11.9 96 9.1 100 9.0 104 9.3 108 9.9 110 10' fill='none' stroke='rgba(190,208,255,.9)' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;animation:pg-cn-jit .24s steps(1) infinite}
.pg-cn-drop{position:absolute;bottom:0;width:1px;margin-left:-.5px;height:calc(var(--sbl) - 9px);background:repeating-linear-gradient(180deg,rgba(160,186,255,.34) 0 2px,transparent 2px 5px)}
.pg-cn-drop.is-gold{background:repeating-linear-gradient(180deg,rgba(246,207,87,.45) 0 2px,transparent 2px 5px)}
.pg-cn-drop.is-bad{background:repeating-linear-gradient(180deg,rgba(255,93,108,.75) 0 2px,transparent 2px 5px)}
/* the cable: a dark sheath with a lit core (--tk thick), the dashes of the flow ride in the core */
.pg-cn-track{position:absolute;left:0;right:0;top:calc(var(--cz) + var(--bs) / 2 - var(--tk) / 2);height:var(--tk);pointer-events:none}
.pg-cn-seg,.pg-cn-tail{position:absolute;top:0;height:var(--tk);overflow:hidden;border-radius:var(--tk)}
.pg-cn-seg{--sheath:linear-gradient(180deg,rgba(3,4,9,.96),rgba(3,4,9,.3) 20%,rgba(240,244,255,.42) 34%,rgba(240,244,255,.06) 50%,transparent 58%,rgba(3,4,9,.5) 80%,rgba(3,4,9,.96));background:var(--sheath),#4F6BD4}
.pg-cn-seg::after{content:'';position:absolute;inset:0;background:var(--sheath),#7E2638;opacity:0;transition:opacity .35s}
.pg-cn-tail{transition:opacity .35s}
.pg-cn-seg{left:calc(var(--nw) / 2 + var(--i) * (100% - var(--nw)) / 4);width:calc((100% - var(--nw)) / 4)}
.pg-cn-seg:nth-child(2){--i:0}.pg-cn-seg:nth-child(3){--i:1}.pg-cn-seg:nth-child(4){--i:2}.pg-cn-seg:nth-child(5){--i:3}
.pg-cn-seg:nth-child(5){background:var(--sheath),linear-gradient(90deg,#4A66CC,#C99A1E)}
.pg-cn-seg b{position:absolute;left:-24px;right:0;top:calc(50% - 1px);height:2px;opacity:.8;background:repeating-linear-gradient(90deg,rgba(232,239,255,.9) 0 4px,transparent 4px 12px);
animation:pg-cn-flow .9s linear infinite;transition:opacity .35s}
.pg-cn-seg.is-off::after{opacity:1}
.pg-cn-seg.is-off b{opacity:0}
.pg-cn-seg:nth-child(3)::after{transition-delay:.06s}.pg-cn-seg:nth-child(4)::after{transition-delay:.12s}.pg-cn-seg:nth-child(5)::after{transition-delay:.18s}
.pg-cn-seg:nth-child(3) b{transition-delay:.06s}.pg-cn-seg:nth-child(4) b{transition-delay:.12s}.pg-cn-seg:nth-child(5) b{transition-delay:.18s}
.pg-cn-tail--l{right:calc(100% - var(--nw) / 2);width:50vw;background:linear-gradient(90deg,transparent,rgba(74,102,204,.6))}
.pg-cn-tail--r{left:calc(100% - var(--nw) / 2);width:50vw;background:linear-gradient(90deg,rgba(201,154,30,.7),transparent 70%)}
.pg-cn-tail--r.is-off{opacity:.25}
.pg-cn-spot{position:absolute;left:0;top:-34px;width:220px;height:70px;margin-left:-110px;background:radial-gradient(closest-side,rgba(160,185,255,.2),transparent);opacity:0;transition:opacity .45s}
.pg-cn-route.is-hover .pg-cn-spot{opacity:1}
.pg-cn-pks{position:absolute;left:calc(var(--nw) / 2);top:calc(var(--tk) / 2);width:0;height:0}
.pg-cn-pk{position:absolute;left:-5px;top:-5px;width:10px;height:10px;opacity:0;will-change:transform}
.pg-cn-pk b{position:absolute;inset:0;background:#AFC3FF;box-shadow:inset 2px 2px 0 rgba(255,255,255,.85),inset -2px -2px 0 rgba(48,70,170,.7),0 0 12px 2px rgba(var(--ca),.7);transition:opacity .22s}
.pg-cn-pk b::before{content:'';position:absolute;right:100%;top:3px;width:44px;height:4px;background:linear-gradient(90deg,transparent,rgba(var(--ca),.7))}
.pg-cn-pk.is-probe{width:12px;height:12px;left:-6px;top:-6px}
.pg-cn-pk.is-probe b{background:#DCE5FF}
.pg-cn-pk.is-probe b::before{top:4px;width:64px}
.pg-cn-pk.is-red b{background:#FF8C97;box-shadow:inset 2px 2px 0 rgba(255,230,232,.85),inset -2px -2px 0 rgba(150,20,40,.7),0 0 14px 3px rgba(var(--cr),.75)}
.pg-cn-pk.is-red b::before{right:auto;left:100%;background:linear-gradient(270deg,transparent,rgba(var(--cr),.6))}
.pg-cn-pk.is-garble b{background:repeating-linear-gradient(90deg,#FF5D6C 0 3px,#F6CF57 3px 5px,#6C8CFF 5px 8px);box-shadow:0 0 12px 2px rgba(246,207,87,.5)}
.pg-cn-pk.is-dead b{opacity:0}
.pg-cn-calm{position:absolute;left:0;top:0;transition:opacity .35s}
.pg-cn-route.is-fail .pg-cn-calm{opacity:0}
/* calm packets, LED blinks, gold glow = Web Animations in calmBuild() (CSS keyframes/timing with var() ran on the main thread) */
.pg-cn-route .pg-cn-node.is-bad .pg-cn-led,.pg-cn-route .pg-cn-node.is-far .pg-cn-led,.pg-cn-route .pg-cn-node.is-bad .pg-cn-blk::after,.pg-cn-route .pg-cn-node.is-far .pg-cn-blk::after{animation:none}
.pg-cn-node.is-far .pg-cn-led{opacity:.2}
/* the failure cycle's parts keep their own layers (no page re-layering per failure) */
.pg-cn-seg::after,.pg-cn-tail--r,.pg-cn-blk,.pg-cn-blk::before,.pg-cn-blk::after,.pg-cn-led,.pg-cn-ring,.pg-cn-calm,.pg-cn-wifi,.pg-cn-pk b{will-change:transform,opacity}

/* nodes */
.pg-cn-nodes{position:absolute;left:0;right:0;top:var(--cz);display:flex;justify-content:space-between;margin:0;padding:0;list-style:none}
.pg-cn-node{width:var(--nw);text-align:center}
.pg-cn-node a{position:relative;display:grid;justify-items:center;gap:9px;color:inherit;text-decoration:none;background:none;outline:0}
.pg-cn-blk{position:relative;display:grid;place-items:center;width:var(--bs);height:var(--bs);border-radius:12px;
background:linear-gradient(180deg,#151829,var(--pg-cn-blk-2));border:1px solid rgba(var(--ca),.3);
box-shadow:inset 2px 2px 0 rgba(255,255,255,.07),inset -2px -3px 0 rgba(0,0,0,.5),0 16px 30px -16px rgba(0,0,0,.95),0 0 0 6px rgba(8,8,13,.62);
transition:transform .35s var(--lp-ease)}
.pg-cn-blk::before{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;border:1px solid rgba(var(--cr),.85);background:radial-gradient(circle at 50% 45%,rgba(var(--cr),.42),rgba(var(--cr),.1) 70%);opacity:0;transition:opacity .2s}
.pg-cn-blk::after{content:'';position:absolute;left:10%;right:10%;bottom:-7px;height:6px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--ca),.45),transparent);opacity:.5;transition:opacity .3s}
.pg-cn-blk>svg{grid-area:1/1;width:var(--is);height:var(--is);image-rendering:pixelated}
.pg-cn-wifi{transition:opacity .3s}
.pg-cn-hop{position:absolute;z-index:1;left:calc(50% - var(--bs) / 2 + 7px);top:6px;font:400 .56rem/1 var(--pg-cn-mono);letter-spacing:.04em;color:rgba(243,239,230,.36);pointer-events:none}
.pg-cn-led{position:absolute;top:6px;right:6px;width:5px;height:5px;background:var(--lp-acc);opacity:.55;box-shadow:0 0 6px 1px rgba(var(--ca),.8)}
.pg-cn-node:last-child .pg-cn-led{background:var(--lp-gold-hi);box-shadow:0 0 6px 1px rgba(246,207,87,.8)}
.pg-cn-node:last-child .pg-cn-blk{border-color:rgba(212,160,23,.45)}
.pg-cn-node:last-child .pg-cn-blk::after{background:radial-gradient(closest-side,rgba(246,207,87,.5),transparent)}
.pg-cn-ring{position:absolute;inset:-9px;border-radius:17px;border:2px solid var(--pg-cn-red);opacity:0;pointer-events:none}
.pg-cn-cur{position:absolute;left:calc((var(--bs) - var(--is)) / 2 + var(--is) * 6 / 16);top:calc((var(--bs) - var(--is)) / 2 + var(--is) * 8 / 16);width:calc(var(--is) / 16);height:calc(var(--is) / 16);
background:#E4ECFF;animation:pg-cn-blink 1.1s steps(2,start) infinite}
.pg-cn-beacon{position:absolute;left:calc((var(--bs) - var(--is)) / 2 + var(--is) * 7 / 16);top:calc((var(--bs) - var(--is)) / 2);width:calc(var(--is) / 8);height:calc(var(--is) / 16);
background:var(--pg-cn-red);box-shadow:0 0 8px 2px rgba(var(--cr),.85);animation:pg-cn-beacon 1.8s steps(1) infinite}
.pg-cn-tick{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;background:var(--pg-cn-blue-hi);opacity:0;pointer-events:none}
.pg-cn-tick.is-last{background:var(--pg-cn-red)}
.pg-cn-spark{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;background:#FF9AA4;pointer-events:none;opacity:0}
.pg-cn-name{font:700 .74rem/1.25 'Rajdhani',sans-serif;letter-spacing:.15em;text-transform:uppercase;color:rgba(243,239,230,.74);text-wrap:balance}
.pg-cn-sub{display:block;margin-top:-5px;font:400 .6rem/1.2 var(--pg-cn-mono);color:rgba(246,207,87,.78)}
.pg-cn-node.is-far .pg-cn-blk{opacity:.5}
.pg-cn-node.is-far .pg-cn-name{color:rgba(243,239,230,.36)}
.pg-cn-node.is-bad .pg-cn-blk::before{opacity:1}
.pg-cn-node.is-bad .pg-cn-blk::after{background:radial-gradient(closest-side,rgba(var(--cr),.6),transparent);opacity:1}
.pg-cn-node.is-bad .pg-cn-led{background:var(--pg-cn-red);opacity:1;box-shadow:0 0 8px 2px rgba(var(--cr),.9)}
.pg-cn-node.is-bad .pg-cn-name{color:#FFB3BA}
.pg-cn-route.is-nowifi .pg-cn-wifi{opacity:.12}
@media(hover:hover){
.pg-cn-node a:hover .pg-cn-blk{transform:translateY(-4px);border-color:rgba(var(--ca),.7)}
.pg-cn-node a:hover .pg-cn-name{color:#fff}
.pg-cn-node a:hover .pg-cn-blk::after{opacity:.9}
.pg-cn-node a{cursor:pointer}
}
body[data-pg="connect"] .pg-cn-hero .pg-cn-node a:focus-visible{outline:none!important}
.pg-cn-node a:focus-visible .pg-cn-blk{outline:2px solid var(--pg-cn-blue-hi);outline-offset:5px}

@media(min-width:760px){
.pg-cn-node a::before,.pg-cn-node a::after{content:'';position:absolute;top:calc(var(--bs) / 2 - 9px);width:10px;height:18px;border-radius:3px;pointer-events:none;border:1px solid rgba(var(--ca),.4);
background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 34% 66%,rgba(0,0,0,.55)),linear-gradient(#8FA6FF,#8FA6FF) 0 50%/100% 2px no-repeat,#141A31;transition:border-color .3s}
.pg-cn-node a::before{right:calc(50% + var(--bs) / 2 - 2px)}
.pg-cn-node a::after{left:calc(50% + var(--bs) / 2 - 2px)}
.pg-cn-node.is-bad a::before,.pg-cn-node.is-bad a::after{border-color:rgba(var(--cr),.75)}
.pg-cn-node:last-child a::before,.pg-cn-node:last-child a::after{border-color:rgba(212,160,23,.5)}
}
.pg-cn-spl{position:absolute;top:-1px;width:2px;height:2px;pointer-events:none}
.pg-cn-spl::before,.pg-cn-spl::after{content:'';position:absolute;left:0;top:0;width:2px;height:2px;background:#C9D6FF;opacity:0;animation:pg-cn-spl 1.9s linear infinite}
.pg-cn-spl::after{animation-name:pg-cn-spr}
.pg-cn-spl:nth-of-type(2n)::before,.pg-cn-spl:nth-of-type(2n)::after{animation-duration:2.3s;animation-delay:.7s}
.pg-cn-node:nth-child(2) .pg-cn-spl::before,.pg-cn-node:nth-child(2) .pg-cn-spl::after{animation-delay:1.1s}
.pg-cn-node:nth-child(3) .pg-cn-spl::before,.pg-cn-node:nth-child(3) .pg-cn-spl::after{animation-delay:.35s}
.pg-cn-node:nth-child(4) .pg-cn-spl::before,.pg-cn-node:nth-child(4) .pg-cn-spl::after{animation-delay:1.5s}
.pg-cn-node:nth-child(5) .pg-cn-spl::before,.pg-cn-node:nth-child(5) .pg-cn-spl::after{animation-delay:.9s}
/* the error screen card (our own design; texts exactly as the page's table writes them) */
.pg-cn-err{position:absolute;z-index:3;left:0;bottom:calc(100% - var(--cz) + 14px);width:min(440px,100%);display:flex;flex-wrap:wrap;
align-items:center;gap:6px 14px;padding:11px 14px 10px;border-radius:12px;
background:linear-gradient(180deg,rgba(30,12,19,.95),rgba(15,8,13,.97));border:1px solid rgba(var(--cr),.55);color:#FFE6E9;text-decoration:none;
box-shadow:0 26px 50px -22px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.55),0 0 34px -10px rgba(var(--cr),.45);opacity:0;pointer-events:none}
.lp a.pg-cn-err{color:#FFE6E9;background-image:linear-gradient(180deg,rgba(30,12,19,.95),rgba(15,8,13,.97))}
.pg-cn-err::before{content:'';position:absolute;left:var(--sx,50%);top:100%;width:2px;height:15px;margin-left:-1px;background:repeating-linear-gradient(180deg,#FF8D98 0 3px,transparent 3px 5px);box-shadow:0 0 6px rgba(var(--cr),.8)}
.pg-cn-err::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;border-radius:12px 12px 0 0;background:linear-gradient(90deg,transparent,rgba(255,170,180,.7),transparent)}
.pg-cn-err.is-up{bottom:calc(100% - var(--cz) * .4644 + 22px)}
.pg-cn-err.is-up::before{height:22px}
.pg-cn-err.is-in{opacity:1;pointer-events:auto;animation:pg-cn-glitch .5s both}
.pg-cn-err.is-out{animation:pg-cn-errout .3s var(--lp-ease) both}
.pg-cn-err-k{flex:0 0 auto;max-width:100%;overflow:hidden;text-overflow:ellipsis;font:700 .62rem/1.2 'Rajdhani',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,176,184,.9);white-space:nowrap}
.pg-cn-err-k i{display:inline-block;margin:0 8px 1px 0;vertical-align:middle;width:7px;height:7px;background:var(--pg-cn-red);box-shadow:0 0 8px 1px rgba(var(--cr),.9)}
.pg-cn-err.is-in .pg-cn-err-k i{animation:pg-cn-blink .9s steps(2,start) infinite}
.pg-cn-err-h{margin-left:auto;font:400 .64rem/1.2 var(--pg-cn-mono);color:rgba(255,230,233,.5);white-space:nowrap}
.lp .pg-cn-err-m{flex:1 0 100%;display:block;padding:0;border:0;background:none;font:500 .86rem/1.42 var(--pg-cn-mono);color:#fff;overflow-wrap:anywhere;text-shadow:-1px 0 rgba(255,60,90,.5),1px 0 rgba(90,140,255,.45)}
.pg-cn-err-pl{flex:1 1 0;min-width:0;font-size:.74rem;line-height:1.3;color:rgba(255,230,233,.58)}
.pg-cn-err-pl[hidden]{display:block;visibility:hidden}
.pg-cn-err-go{flex:none;margin-left:auto;font:700 .74rem/1 'Rajdhani',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--lp-gold-hi);white-space:nowrap}
.pg-cn-err-go::after{content:' →'}
@media(hover:hover){.pg-cn-err:hover{border-color:rgba(var(--cr),.9)}.pg-cn-err:hover .pg-cn-err-go{color:#FFE28A}}

@media(min-width:1400px) and (min-height:720px){.pg-cn-route{--bs:80px;--is:64px;--nw:176px}.pg-cn-blk{border-radius:14px}}
@media(min-width:1600px) and (min-height:900px){
.pg-cn-route{--cz:146px;--bs:128px;--is:96px;--nw:240px;--tk:8px}
.pg-cn-blk{border-radius:16px}
.pg-cn-ring{inset:-12px;border-radius:25px}
.pg-cn-hop{font-size:.7rem;top:10px;left:calc(50% - var(--bs) / 2 + 11px)}
.pg-cn-led{top:10px;right:10px;width:7px;height:7px}
.pg-cn-pk{width:16px;height:16px;left:-8px;top:-8px}
.pg-cn-pk b::before{top:6px;width:120px}
.pg-cn-pk.is-probe{width:18px;height:18px;left:-9px;top:-9px}
.pg-cn-pk.is-probe b::before{top:7px;width:150px}
.pg-cn-cpk b{box-shadow:inset 3px 3px 0 rgba(255,255,255,.85),inset -3px -3px 0 rgba(48,70,170,.7),0 0 16px 3px rgba(var(--ca),.7)}
.pg-cn-err{width:min(500px,100%);padding:13px 17px 12px;gap:7px 16px}
.lp .pg-cn-err-m{font-size:1rem}
.pg-cn-err-k{font-size:.66rem}
.pg-cn-err-pl{font-size:.8rem}
.pg-cn-hero .lp-h1{font-size:3.85rem;margin-bottom:28px}
.pg-cn-hero .lp-lead{font-size:1.24rem}
.pg-cn-name{font-size:.9rem;letter-spacing:.17em}
.pg-cn-sub{font-size:.7rem;margin-top:-3px}
.pg-cn-node a{gap:12px}
}
@media(min-width:1100px) and (max-height:820px){
.pg-cn-top{margin-bottom:12px}
.pg-cn-hero .lp-h1{margin-bottom:16px}
.pg-cn-hero .lp-lead{margin-bottom:20px;font-size:1.1rem}
.pg-cn-route{height:calc(var(--cz) + var(--bs) + 74px)}
}

/* ── hero: tablet (one column, the route stays horizontal) */
@media(max-width:1099px){
.pg-cn-hero .lp-hero-in{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"top" "h1" "lead" "side" "act" "route"}
body[data-pg="connect"] .lp-hero--post .lp-hero-in{text-align:left}
.pg-cn-hero .lp-crumbs ol,.pg-cn-hero .lp-actions,body[data-pg="connect"] .lp-hero--post .lp-meta{justify-content:flex-start}
.pg-cn-hero .lp-lead{margin-left:0;margin-right:0}
.pg-cn-side{max-width:560px;margin:0 0 24px}
.pg-cn-route{--nw:128px;margin-top:30px}
}
/* tablets with the site's bottom bar (<=900px, 84px): the route ends above the bar */
@media(min-width:760px) and (max-width:900px){body[data-pg="connect"] .lp-hero--post{min-height:calc(100svh - 84px)}}
/* ── hero: phone — the route becomes a vertical traceroute ladder under the title */
@media(max-width:759px){
body[data-pg="connect"] .lp-hero--post{min-height:0;padding:88px 16px 30px}
body[data-pg="connect"] .lp-hero-bg img{object-position:57% 30%}
.pg-cn-rain{bottom:auto;height:calc(100svh + 60px)}
.pg-cn-hero .lp-hero-in{grid-template-areas:"top" "h1" "route" "lead" "side" "act"}
.pg-cn-top{display:grid;gap:10px;justify-items:start;margin-bottom:16px}
.pg-cn-top .lp-crumbs{max-width:100%;min-width:0}
.pg-cn-hero .lp-crumbs ol{flex-wrap:nowrap;overflow:hidden;font-size:.66rem;letter-spacing:.14em}
.pg-cn-hero .lp-crumbs li{white-space:nowrap;flex:none}
.pg-cn-hero .lp-crumbs li:last-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pg-cn-hero .lp-h1{font-size:1.875rem;line-height:1.08;margin-bottom:18px}
.pg-cn-hero .lp-lead{font-size:1.02rem;margin-bottom:22px}
.pg-cn-side{margin-bottom:22px}
.pg-cn-hero .lp-meta{gap:6px 14px;font-size:.8rem}
.pg-cn-route{--vert:1;--bs:38px;--is:32px;--rh:46px;--lh:28px;--ch:112px;display:block;height:auto;margin:2px 0 26px;padding:var(--lh) 0 calc(var(--ch) + 12px);align-self:auto}
/* the screen under the ladder = the phone's signal monitor (the static screen is drawn even without js) */
.pg-cn-route::after{content:'Sygnał';box-sizing:border-box;position:absolute;z-index:0;left:0;right:0;bottom:0;height:var(--ch);padding:10px 12px;border-radius:12px;border:1px solid rgba(var(--ca),.26);
font:400 .58rem/1 var(--pg-cn-mono);letter-spacing:.24em;text-transform:uppercase;color:rgba(191,208,255,.56);
background:linear-gradient(rgba(var(--ca),.26),rgba(var(--ca),.26)) 0 calc(100% - 52px)/100% 1px no-repeat,repeating-linear-gradient(90deg,rgba(var(--ca),.075) 0 1px,transparent 1px 30px),
repeating-linear-gradient(0deg,rgba(var(--ca),.06) 0 1px,transparent 1px 21px) 0 calc(100% - 51px),linear-gradient(180deg,#0B0E1E,#06070F)}
.pg-cn-route-k{position:absolute;left:0;top:0}
.pg-cn-nodes{position:relative;top:auto;display:block}
.pg-cn-node{width:auto;text-align:left}
.pg-cn-node a{grid-template-columns:22px 22px var(--bs) minmax(0,1fr);grid-template-areas:"hop . blk name" "hop . blk sub";align-content:center;justify-items:start;align-items:center;column-gap:0;row-gap:1px;height:var(--rh)}
.pg-cn-node a::before{content:'';position:absolute;left:35px;top:50%;width:9px;height:2px;margin-top:-1px;background:rgba(var(--ca),.38)}
.pg-cn-node.is-bad a::before{background:rgba(var(--cr),.7)}
.pg-cn-hop{position:static;grid-area:hop;font-size:.62rem}
.pg-cn-blk{grid-area:blk;border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 0 rgba(0,0,0,.45),0 0 0 4px rgba(8,8,13,.8)}
.pg-cn-blk::after{display:none}
.pg-cn-led{top:4px;right:4px;width:4px;height:4px}
.pg-cn-name{grid-area:name;margin-left:14px;font-size:.8rem;letter-spacing:.13em;align-self:end}
.pg-cn-node:not(:last-child) .pg-cn-name{grid-row:1/span 2;align-self:center}
.pg-cn-sub{grid-area:sub;margin:0 0 0 14px;align-self:start}
.pg-cn-ring{inset:-6px;border-radius:13px}
.pg-cn-track{left:31px;right:auto;top:calc(var(--lh) + var(--rh) / 2);width:4px;height:calc(var(--rh) * 4)}
.pg-cn-seg{--sheath:linear-gradient(90deg,#04050A,rgba(235,240,255,.3) 42%,transparent 62%,#04050A);left:0;top:calc(var(--i) * var(--rh));width:4px;height:var(--rh);border-radius:0}
.pg-cn-seg:nth-child(5){background:var(--sheath),linear-gradient(180deg,#4A66CC,#C99A1E)}
.pg-cn-seg b{left:1px;right:1px;top:-24px;bottom:0;height:auto;background:repeating-linear-gradient(180deg,rgba(228,236,255,.9) 0 3px,transparent 3px 12px);animation-name:pg-cn-flow-v}
.pg-cn-tail,.pg-cn-spot,.pg-cn-nz,.pg-cn-scope::before,.pg-cn-spl{display:none}
.pg-cn-pks{left:2px;top:0}
.pg-cn-js .pg-cn-scope{z-index:1;top:auto;bottom:0;height:var(--ch);--sbl:52px;--pg-cn-amp:32px;-webkit-mask:none;mask:none;background:none;counter-reset:pg-cn-hd}
.pg-cn-sp,.pg-cn-bsp{width:58px;left:-29px;--trl:70px}
.pg-cn-bsp{left:0;margin-left:-29px}
.pg-cn-drop,.pg-cn-drop.is-gold,.pg-cn-drop.is-bad{bottom:auto;top:calc(100% - var(--sbl) + 4px);height:5px;background:rgba(var(--ca),.6);counter-increment:pg-cn-hd}
.pg-cn-drop::after{content:counter(pg-cn-hd,decimal-leading-zero);position:absolute;left:-10px;top:8px;width:20px;text-align:center;font:400 .56rem/1 var(--pg-cn-mono);color:rgba(191,208,255,.6)}
.pg-cn-drop.is-gold{background:var(--lp-gold)}.pg-cn-drop.is-gold::after{color:rgba(246,207,87,.8)}
.pg-cn-drop.is-bad{background:var(--pg-cn-red)}.pg-cn-drop.is-bad::after{color:#FF9BA5}
.pg-cn-shint{display:block;position:absolute;left:12px;right:12px;bottom:10px;font:400 .68rem/1.2 'Chakra Petch',sans-serif;font-style:normal;text-align:center;color:var(--lp-faint)}
.pg-cn-route.is-brk .pg-cn-shint{opacity:0}
.pg-cn-pk b::before{right:auto;left:2px;top:auto;bottom:100%;width:4px;height:26px;background:linear-gradient(180deg,transparent,rgba(var(--ca),.55))}
.pg-cn-pk.is-probe b::before{left:3px;top:auto;width:4px;height:34px}
.pg-cn-pk.is-red b::before{left:2px;bottom:auto;top:100%;background:linear-gradient(0deg,transparent,rgba(var(--cr),.6))}
.pg-cn-err{left:0!important;right:0;bottom:0;width:auto;min-height:var(--ch);gap:5px;padding:11px 13px 9px}
.pg-cn-err::before{display:none}
.lp .pg-cn-err-m{font-size:.8rem}
.pg-cn-err-hn{display:none}
/* the honest note sits in the label row above the ladder: it stays visible while an error card is shown */
.pg-cn-note{position:absolute;z-index:1;right:0;top:-1px;font-size:.72rem;line-height:1;color:rgba(214,223,255,.78);text-shadow:0 1px 6px rgba(8,8,13,.9)}
.pg-cn-note .pg-cn-note-p,.pg-cn-note .pg-cn-note-t{display:none}
}

/* ── keyframes ── */

/* ══ BELOW THE HERO — one language: signal lines, nodes, consoles (blue = flowing, red = broken, gold = titanmc.pl) */
/* CSS loops pause while their block is off screen (lp-pg-connect.js adds .pg-cn-off) */
.pg-cn-off,.pg-cn-off *,.pg-cn-off *::before,.pg-cn-off *::after{animation-play-state:paused!important}
[data-pg=connect] .pg-cn-tv.lp-rv{transform-origin:50% 0;transition:opacity .3s linear,transform .7s cubic-bezier(.16,1,.3,1)}
.lp-rv-armed [data-pg=connect] .pg-cn-tv.lp-rv:not(.is-in){opacity:0;transform:scale3d(1,.04,1)}
.lp-rv-armed [data-pg=connect] #bledy .lp-tablebox.lp-rv:not(.is-in){opacity:1;transform:none}
[data-pg=connect] #tabela-bledow caption{transform-origin:50% 0;transition:opacity .3s linear,transform .6s cubic-bezier(.16,1,.3,1)}
.lp-rv-armed [data-pg=connect] #bledy .lp-tablebox:not(.is-in):not(.pg-cn-lit) #tabela-bledow caption{opacity:0;transform:scale3d(1,.06,1)}
.pg-cn-wait #tabela-bledow tbody tr{opacity:0}
.lp-rv-armed [data-pg=connect] .lp-step.lp-rv:not(.is-in){transform:translate3d(-26px,0,0)}
@media(max-width:1180px){.lp-rv-armed [data-pg=connect] .lp-step.lp-rv:not(.is-in){transform:translate3d(-12px,0,0)}}
[data-pg=connect] .lp-sec::before{background:linear-gradient(90deg,transparent,rgba(var(--ca),.42) 16%,rgba(var(--ca),.08) 50%,rgba(var(--ca),.42) 84%,transparent)}
[data-pg=connect] .lp-sec::after{top:-5px;width:10px;height:10px;margin-left:-5px;transform:none;border-radius:2px;background:#0E1326;border:1px solid rgba(var(--ca),.75);box-shadow:0 0 0 5px var(--lp-bg)}
[data-pg=connect] .lp-eyebrow{gap:12px;color:var(--pg-cn-blue-hi)}
[data-pg=connect] .lp-eyebrow b{display:grid;place-items:center;width:36px;height:36px;padding-top:3px;border-radius:9px;font:500 1.3rem/1 'Teko',sans-serif;color:var(--lp-gold-hi);
background:linear-gradient(180deg,#171B31,#0A0C16);border:1px solid rgba(var(--ca),.45);box-shadow:inset 1px 1px 0 rgba(255,255,255,.08),inset -1px -2px 0 rgba(0,0,0,.55)}
[data-pg=connect] .lp-eyebrow::after{max-width:220px;height:2px;background:repeating-linear-gradient(90deg,rgba(var(--ca),.7) 0 2px,transparent 2px 8px);-webkit-mask:linear-gradient(90deg,#000,transparent);mask:linear-gradient(90deg,#000,transparent)}
[data-pg=connect] .lp-article p code,[data-pg=connect] .lp-article li code,[data-pg=connect] .lp-article td code{border-radius:5px;background:rgba(var(--ca),.09);border-color:rgba(var(--ca),.26);color:#D6DFFF}
[data-pg=connect] .lp-list li::before{left:6px;top:.6em;width:8px;height:8px;transform:none;border-radius:2px;background:#0E1326;border:1px solid var(--lp-acc);box-sizing:border-box}
[data-pg=connect] .lp-note{border-radius:12px}
[data-pg=connect] .lp-note--warn{border-color:rgba(var(--cr),.38);background:linear-gradient(90deg,rgba(var(--cr),.12),rgba(var(--cr),.03) 70%);box-shadow:inset 3px 0 0 var(--pg-cn-red)}
[data-pg=connect] .lp-note--warn>i{color:var(--pg-cn-red)}
[data-pg=connect] .lp-pane{border-radius:16px;background:linear-gradient(180deg,rgba(14,17,32,.94),rgba(9,10,18,.96));border-color:rgba(var(--ca),.18)}
[data-pg=connect] .lp-pane h3 i{color:var(--lp-acc)}
[data-pg=connect] #refused-vs-timeout .lp-pane h3 i{color:var(--pg-cn-red)}
[data-pg=connect] .lp-pane--hl{border-color:rgba(212,160,23,.42);background:linear-gradient(180deg,rgba(36,28,9,.62),rgba(13,12,10,.9))}
[data-pg=connect] .lp-pane--hl h3 i{color:var(--lp-gold-hi)}

/* chapter rail: a vertical route, the packet stops at the chapter you read */
[data-pg=connect] .lp-toc-t{display:flex;align-items:center;gap:9px;color:var(--pg-cn-blue-hi)}
[data-pg=connect] .lp-toc-t::before{content:'';width:6px;height:6px;background:var(--lp-acc);box-shadow:0 0 0 3px rgba(var(--ca),.18)}
[data-pg=connect] .lp-toc ol{position:relative;border-left:0}
[data-pg=connect] .lp-toc ol::before{content:'';position:absolute;left:5px;top:18px;bottom:18px;width:2px;background:repeating-linear-gradient(180deg,rgba(var(--ca),.5) 0 2px,transparent 2px 7px)}
[data-pg=connect] .lp-toc a{margin-left:0;padding:8px 0 8px 26px;border-left:0}
[data-pg=connect] .lp-toc a::before{font:400 .62rem/1 var(--pg-cn-mono);letter-spacing:.06em;color:rgba(var(--ca),.75);margin-bottom:5px}
[data-pg=connect] .lp-toc a::after{content:'';position:absolute;left:1px;top:calc(50% - 5px);width:10px;height:10px;border-radius:2px;background:#0D1122;border:1px solid rgba(var(--ca),.5);transition:background-color .3s,border-color .3s}
[data-pg=connect] .lp-toc a.is-past::after{background:rgba(var(--ca),.5);border-color:var(--lp-acc)}
[data-pg=connect] .lp-toc a.is-on{color:#fff}
[data-pg=connect] .lp-toc a.is-on::before{color:var(--lp-gold-hi)}
.pg-cn-tocpk{position:absolute;left:-1px;top:-7px;width:14px;height:14px;opacity:0;pointer-events:none;transition:transform .6s var(--lp-ease),opacity .3s;
background:#DCE5FF;box-shadow:inset 2px 2px 0 #fff,inset -2px -2px 0 rgba(48,70,170,.7),0 0 14px 3px rgba(var(--ca),.8)}
.lp-toc.has-on .pg-cn-tocpk{opacity:1}
[data-pg=connect] .lp-toc-cta{position:relative;padding:14px 14px 14px 56px;border-radius:12px;border-color:rgba(212,160,23,.42);background:linear-gradient(180deg,rgba(42,32,8,.55),rgba(14,12,8,.85));text-align:left;cursor:pointer;transition:border-color .25s}
[data-pg=connect] .lp-toc-cta::before{content:'';position:absolute;left:14px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:7px;background:radial-gradient(circle,#F6CF57 0 3px,transparent 4px),linear-gradient(180deg,#2C2209,#130F05);border:1px solid rgba(212,160,23,.7);box-shadow:0 0 16px -2px rgba(246,207,87,.5)}
[data-pg=connect] .lp-toc-cta:hover{border-color:rgba(246,207,87,.75)}
[data-pg=connect] .lp-tocm{border-radius:12px;border-color:rgba(var(--ca),.3);background:rgba(10,12,22,.9)}
[data-pg=connect] .lp-tocm summary{color:var(--pg-cn-blue-hi)}
[data-pg=connect] .lp-tocm a::before{font:400 .72rem/1.9 var(--pg-cn-mono);color:var(--lp-acc)}

/* w skrócie: a console panel with the route in miniature */
[data-pg=connect] .lp-answer{border-radius:18px;background:linear-gradient(180deg,rgba(13,17,33,.97),rgba(8,9,17,.98)) padding-box,linear-gradient(140deg,rgba(var(--ca),.7),rgba(var(--ca),.12) 34%,rgba(255,255,255,.05) 62%,rgba(212,160,23,.5)) border-box}
[data-pg=connect] .lp-answer::before{border-radius:18px;background:radial-gradient(560px 220px at 0 0,rgba(var(--ca),.16),transparent 70%),repeating-linear-gradient(180deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px)}
[data-pg=connect] .lp-article .lp-answer{padding-top:0}
[data-pg=connect] .lp-article .lp-answer .lp-answer-k{position:relative;margin:0 -32px 22px;padding:17px 32px 16px;border-radius:17px 17px 0 0;border-bottom:1px solid rgba(var(--ca),.2);
background:linear-gradient(180deg,#141A37,#0B0E1F);color:var(--pg-cn-blue-hi)}
[data-pg=connect] .lp-answer-k i{color:var(--lp-gold-hi)}
[data-pg=connect] .lp-chips li{position:relative;padding-left:24px;border-radius:8px;background:rgba(var(--ca),.06);border-color:rgba(var(--ca),.22)}
[data-pg=connect] .lp-chips li::before{content:'';position:absolute;left:10px;top:calc(50% - 3px);width:6px;height:6px;background:var(--lp-acc)}
.pg-cn-mini{position:absolute;z-index:1;top:20px;right:32px;display:flex;gap:20px}
.pg-cn-mini::before{content:'';position:absolute;left:4px;right:4px;top:5px;height:2px;background:repeating-linear-gradient(90deg,rgba(var(--ca),.6) 0 2px,transparent 2px 6px)}
.pg-cn-mini i{position:relative;width:12px;height:12px;border-radius:2px;background:#10152A;border:1px solid rgba(var(--ca),.75)}
.pg-cn-mini i:nth-of-type(5){border-color:var(--lp-gold);background:rgba(212,160,23,.4);box-shadow:0 0 10px rgba(246,207,87,.45)}
.pg-cn-mini b{position:absolute;left:2px;top:2px;width:8px;height:8px;background:#E4EBFF;box-shadow:0 0 9px 2px rgba(var(--ca),.85);animation:pg-cn-mini 3.4s var(--lp-ease) infinite;transition:opacity .25s}
/* each message in the answer points at a place on the route: the mini route shows where (lp-pg-connect.js sets --k) */
.pg-cn-mini{--mp:32px}
.pg-cn-mini i{box-sizing:border-box;transition:opacity .3s}
.pg-cn-mini i::after{content:'';position:absolute;inset:-1px;border-radius:2px;background:#FF6B79;box-shadow:0 0 10px 2px rgba(var(--cr),.8);opacity:0;transition:opacity .2s}
.pg-cn-mini::after{content:'';position:absolute;top:5px;right:4px;left:calc(var(--k,0) * var(--mp) + 12px);height:2px;background:repeating-linear-gradient(90deg,rgba(var(--cr),.75) 0 2px,transparent 2px 6px);opacity:0;transition:opacity .3s}
.pg-cn-mini em{position:absolute;left:calc(var(--k,0) * var(--mp) - 5px);top:-5px;width:22px;height:22px;border:2px solid var(--pg-cn-red);border-radius:5px;opacity:0;pointer-events:none}
.pg-cn-mini.is-brk b{opacity:0}
.pg-cn-mini.is-brk::after{opacity:1}
.pg-cn-mini.is-brk em{animation:pg-cn-mring 1.3s cubic-bezier(.2,.8,.2,1) infinite}
.pg-cn-mini[data-k="2"] i:nth-of-type(3)::after,.pg-cn-mini[data-k="3"] i:nth-of-type(4)::after,.pg-cn-mini[data-k="4"] i:nth-of-type(5)::after{opacity:1}
.pg-cn-mini[data-k="2"] i:nth-of-type(n+4),.pg-cn-mini[data-k="3"] i:nth-of-type(n+5){opacity:.32}
.pg-cn-mini-l{position:absolute;right:calc(100% + 16px);top:-1px;font:400 .66rem/14px var(--pg-cn-mono);letter-spacing:.06em;white-space:nowrap;color:rgba(191,208,255,.62)}
.pg-cn-mini.is-brk .pg-cn-mini-l{color:#FF9BA5}
.pg-cn-tok{white-space:nowrap;position:relative;background:linear-gradient(90deg,rgba(var(--cr),.6) 50%,transparent 0) 0 100%/4px 1px repeat-x}
.pg-cn-tok::before{content:'';position:absolute;left:-4px;right:-4px;top:-1px;bottom:-1px;border-radius:5px;background:rgba(var(--cr),.13);box-shadow:inset 0 -2px 0 rgba(var(--cr),.85);opacity:0;transition:opacity .3s;pointer-events:none}
.pg-cn-tok.is-on::before{opacity:1}
.pg-cn-tok.is-on{color:#FFD9DD}

/* bledy: the table as a console — tabs, title bar, log lines */
[data-pg=connect] #bledy .lp-filters{position:relative;z-index:2;gap:4px;margin:28px 0 -1px;padding:0 0 0 1px}
[data-pg=connect] #bledy .lp-filter{display:inline-flex;align-items:center;gap:9px;padding:11px 14px 10px;border-radius:10px 10px 0 0;border:1px solid rgba(var(--ca),.18);border-bottom:0;
background:rgba(11,13,24,.92);font:400 .78rem/1 var(--pg-cn-mono);letter-spacing:.02em;text-transform:none;color:rgba(243,239,230,.56)}
[data-pg=connect] #bledy .lp-filter:hover{border-color:rgba(var(--ca),.45);color:#fff}
[data-pg=connect] #bledy .lp-filter[aria-pressed="true"]{background:#0A0D1A;border-color:rgba(var(--ca),.5);color:#fff;box-shadow:inset 0 2px 0 var(--lp-acc)}
[data-pg=connect] #bledy .lp-filter:focus-visible{outline:2px solid var(--pg-cn-blue-hi);outline-offset:2px}
.pg-cn-tab-n{min-width:20px;padding:3px 5px 2px;border-radius:4px;background:rgba(var(--ca),.14);font-size:.66rem;text-align:center;color:var(--pg-cn-blue-hi);transition:background-color .25s,color .25s}
[aria-pressed="true"]>.pg-cn-tab-n{background:var(--lp-acc);color:#070912}
[data-pg=connect] #bledy .lp-tablebox{margin-top:0}
[data-pg=connect] #bledy .lp-tablewrap{border-radius:0 14px 0 0;border-color:rgba(var(--ca),.5);border-bottom-width:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px),#0A0D1A}
[data-pg=connect] #bledy .lp-tablebox::before,[data-pg=connect] #bledy .lp-tablebox::after{border-radius:0;top:0;bottom:0}
[data-pg=connect] #tabela-bledow caption{position:relative;padding:12px 16px 11px 36px;border-bottom:1px solid rgba(var(--ca),.18);background:linear-gradient(180deg,#11152B,#0B0E1C);
font:400 .74rem/1.3 var(--pg-cn-mono);letter-spacing:.01em;text-transform:none;color:rgba(191,208,255,.78)}
[data-pg=connect] #tabela-bledow caption::before{content:'';position:absolute;left:16px;top:50%;width:8px;height:8px;margin-top:-4px;background:var(--pg-cn-red);box-shadow:0 0 8px rgba(var(--cr),.85)}
[data-pg=connect] #tabela-bledow th,[data-pg=connect] #tabela-bledow td{vertical-align:top}
[data-pg=connect] #tabela-bledow td code{word-break:normal;overflow-wrap:break-word}
@media(min-width:641px){[data-pg=connect] #tabela-bledow td:nth-child(2){min-width:270px}[data-pg=connect] #tabela-bledow td:nth-child(2) code{font-size:.74rem}}
[data-pg=connect] #tabela-bledow thead th{background:#0B0E1C;font:400 .66rem/1.2 var(--pg-cn-mono);letter-spacing:.14em;color:var(--lp-acc);border-bottom-color:rgba(var(--ca),.32)}
[data-pg=connect] #tabela-bledow tbody{counter-reset:pg-cn-ln}
[data-pg=connect] #tabela-bledow tbody tr{counter-increment:pg-cn-ln}
[data-pg=connect] #tabela-bledow tbody th{padding-left:54px;background:#0C0F1E;font:500 .84rem/1.4 var(--pg-cn-mono);color:#fff;transition:background-color .2s,box-shadow .2s}
[data-pg=connect] #tabela-bledow tbody th::before{content:counter(pg-cn-ln,decimal-leading-zero);position:absolute;left:13px;top:17px;font:400 .62rem/1 var(--pg-cn-mono);color:rgba(var(--ca),.5)}
[data-pg=connect] #tabela-bledow tbody th::after{content:'';position:absolute;left:35px;top:19px;width:7px;height:7px;background:var(--pg-cn-red)}
[data-pg=connect] #tabela-bledow tbody td{transition:background-color .2s}
@media(hover:hover){
[data-pg=connect] #tabela-bledow tbody tr:hover>td{background-color:rgba(var(--ca),.075)}
[data-pg=connect] #tabela-bledow tbody tr:hover>th{background:#141B37;box-shadow:inset 3px 0 0 var(--lp-acc)}
}
[data-pg=connect] #tabela-bledow tbody tr:focus-within>th{background:#141B37;box-shadow:inset 3px 0 0 var(--lp-acc)}
[data-pg=connect] .lp-table td a[href^="#krok"]{display:inline;padding:1px 5px;-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:4px;border:1px solid rgba(var(--ca),.42);background:rgba(var(--ca),.1);
font:400 .76rem/1.65 var(--pg-cn-mono);color:var(--pg-cn-blue-hi);text-decoration:none;white-space:nowrap;transition:border-color .2s,color .2s}
[data-pg=connect] .lp-table td a[href^="#krok"]::before{content:'→ ';color:var(--lp-acc)}
[data-pg=connect] .lp-table td a[href^="#krok"]:hover{border-color:var(--lp-gold);color:var(--lp-gold-hi)}
.pg-cn-con-ft{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;padding:10px 16px;border:1px solid rgba(var(--ca),.5);border-top:0;border-radius:0 0 14px 14px;
background:repeating-linear-gradient(90deg,rgba(var(--ca),.32) 0 4px,transparent 4px 8px) top/100% 1px no-repeat,#090B16;font:400 .72rem/1.3 var(--pg-cn-mono);color:rgba(191,208,255,.56)}
.pg-cn-con-ft b{font-weight:400;color:#fff}
.pg-cn-con-q i{display:inline-block;width:7px;height:13px;margin-right:9px;vertical-align:-2px;background:var(--lp-acc);animation:pg-cn-blink 1.1s steps(2,start) infinite}

/* rozwiązania: a route of stops; the "Tu jesteś" packet rides the line with the scroll */
.pg-cn-stops{position:relative}
[data-pg=connect] .lp-steps::before,[data-pg=connect] .lp-steps::after{left:25px;top:26px;bottom:auto;height:var(--pg-cn-h,calc(100% - 90px));border-radius:0}
[data-pg=connect] .lp-steps::before{background:repeating-linear-gradient(180deg,rgba(var(--ca),.45) 0 3px,transparent 3px 9px)}
[data-pg=connect] .lp-steps::after{content:none}
.pg-cn-fill{position:absolute;z-index:0;left:25px;top:26px;width:2px;height:0;transform-origin:50% 0;transform:scale3d(1,0,1);pointer-events:none;will-change:transform;
background:linear-gradient(180deg,var(--pg-cn-blue-hi),var(--lp-acc) 60%,rgba(var(--ca),.7));box-shadow:0 0 12px rgba(var(--ca),.65)}
[data-pg=connect] .lp-step::before{padding-top:4px;border-radius:13px;background:linear-gradient(180deg,#161A2E,#0A0C16);border:1px solid rgba(var(--ca),.32);color:rgba(243,239,230,.46);
box-shadow:inset 2px 2px 0 rgba(255,255,255,.06),inset -2px -3px 0 rgba(0,0,0,.5),0 0 0 6px var(--lp-bg);transition:color .35s,border-color .35s,box-shadow .35s}
[data-pg=connect] .lp-step.is-past::before{color:#fff;border-color:rgba(var(--ca),.85);background:linear-gradient(180deg,#1F2A5C,#0F1532)}
[data-pg=connect] .lp-step.is-cur::before{color:var(--lp-gold-hi);border-color:var(--lp-gold-hi);background:linear-gradient(180deg,#2A2108,#120E05);box-shadow:inset 2px 2px 0 rgba(255,255,255,.08),inset -2px -3px 0 rgba(0,0,0,.5),0 0 0 6px var(--lp-bg),0 0 26px -2px rgba(246,207,87,.55)}
[data-pg=connect] .lp-step[data-cn-grp]::after{content:attr(data-cn-grp);position:absolute;left:78px;top:-27px;padding-left:18px;font:400 .64rem/1 var(--pg-cn-mono);letter-spacing:.16em;text-transform:uppercase;
color:rgba(var(--ca),.95);background:linear-gradient(var(--lp-acc),var(--lp-acc)) 0 50%/12px 1px no-repeat}
[data-pg=connect] #krok-1[data-cn-grp]::after{top:-24px}
.pg-cn-hops{display:flex;align-items:center;gap:7px;margin:0 0 12px;font:400 .68rem/1 var(--pg-cn-mono);color:rgba(191,208,255,.6)}
.pg-cn-hops i{position:relative;flex:none;width:9px;height:9px;border-radius:2px;border:1px solid rgba(var(--ca),.5);background:#0E1224}
.pg-cn-hops i+i::before{content:'';position:absolute;right:calc(100% + 1px);top:3px;width:7px;height:1px;background:rgba(var(--ca),.45)}
.pg-cn-hops i:nth-child(5){border-color:rgba(212,160,23,.7)}
.pg-cn-hops[data-at="1"] i:nth-child(1),.pg-cn-hops[data-at="2"] i:nth-child(2),.pg-cn-hops[data-at="3"] i:nth-child(3),.pg-cn-hops[data-at="4"] i:nth-child(4),.pg-cn-hops[data-at="5"] i:nth-child(5){
background:var(--pg-cn-red);border-color:#FF9AA4}
.pg-cn-hops em{margin-left:5px;font-style:normal;letter-spacing:.05em;color:#FFB8BF}
.pg-cn-here{position:absolute;left:26px;top:0;z-index:0;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .4s;will-change:transform}
.pg-cn-stops.is-on .pg-cn-here{opacity:1}
.pg-cn-here b{position:absolute;left:-7px;top:-7px;width:14px;height:14px;background:#DCE5FF;box-shadow:inset 2px 2px 0 #fff,inset -2px -2px 0 rgba(48,70,170,.7),0 0 16px 4px rgba(var(--ca),.85)}
.pg-cn-here span{position:absolute;right:34px;top:-9px;width:66px;padding:5px 0 4px;border-radius:5px;background:#0B0F22;border:1px solid rgba(var(--ca),.7);text-align:center;white-space:nowrap;
font:400 .56rem/1 var(--pg-cn-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pg-cn-blue-hi);box-shadow:0 6px 16px -6px rgba(0,0,0,.9)}
.pg-cn-here span::after{content:'';position:absolute;left:100%;top:50%;width:27px;height:1px;margin-left:1px;background:repeating-linear-gradient(90deg,rgba(var(--ca),.85) 0 2px,transparent 2px 4px)}
@media(max-width:1179px){.pg-cn-here span{display:none}}
.pg-cn-stops.is-end .pg-cn-here b{background:#FFE7A0;box-shadow:inset 2px 2px 0 #fff,inset -2px -2px 0 rgba(150,110,10,.7),0 0 16px 4px rgba(246,207,87,.8)}
.pg-cn-stops.is-end .pg-cn-here span{border-color:rgba(246,207,87,.8);color:var(--lp-gold-hi)}
[data-pg=connect] .lp-cmd{position:relative;padding:9px 38px 9px 12px;border-radius:8px;border-color:rgba(var(--ca),.4);background:#05070F;color:#E4EAFF}
[data-pg=connect] .lp-cmd::before{content:'>';color:var(--lp-gold-hi)}
[data-pg=connect] .lp-cmd[data-copy^="ipconfig"]::before{content:'C:\\>'}
[data-pg=connect] .lp-cmd::after{content:'';position:absolute;right:12px;top:50%;width:13px;height:14px;margin-top:-7px;opacity:.7;transition:opacity .2s;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 14' shape-rendering='crispEdges'%3E%3Cpath fill='%23BFD0FF' d='M0 0h9v2H2v8H0zM4 4h9v10H4zm2 2v6h5V6z'/%3E%3C/svg%3E") center/13px 14px no-repeat}
[data-pg=connect] .lp-cmd:hover::after{opacity:1}
[data-pg=connect] #rozwiazania .lp-note{position:relative;margin-left:78px;border-style:dashed;border-color:rgba(var(--ca),.38);background:rgba(var(--ca),.05)}
[data-pg=connect] #rozwiazania .lp-note::before{content:'';position:absolute;right:calc(100% + 1px);top:50%;width:52px;height:2px;background:repeating-linear-gradient(90deg,rgba(var(--ca),.55) 0 3px,transparent 3px 7px)}

/* refused vs timed out: two lanes, same start */
.pg-cn-duo-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 0;font:400 .7rem/1 var(--pg-cn-mono);color:var(--lp-faint)}
.pg-cn-duo-k{display:inline-flex;align-items:center;gap:8px}
.pg-cn-duo-k i{width:6px;height:6px;background:var(--lp-acc)}
.pg-cn-replay{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 13px;border-radius:8px;border:1px solid rgba(var(--ca),.38);background:rgba(var(--ca),.08);
font:700 .72rem/1 'Rajdhani',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--pg-cn-blue-hi);cursor:pointer;transition:border-color .2s,background-color .2s,transform .15s}
.pg-cn-replay i{transition:transform .5s var(--lp-ease)}
.pg-cn-replay:hover{border-color:rgba(var(--ca),.75);background:rgba(var(--ca),.16)}
.pg-cn-replay:hover i{transform:rotate(-180deg)}
.pg-cn-replay:active{transform:scale(.96)}
.pg-cn-replay:focus-visible{outline:2px solid var(--pg-cn-blue-hi);outline-offset:3px}
/* one race block, two lanes with the same start: the error name and its timing on the left, PC → line → door */
.pg-cn-race{display:grid;margin:12px 0 18px;padding:6px 18px;border-radius:16px;border:1px solid rgba(var(--ca),.2);
background:radial-gradient(520px 150px at 45% 50%,rgba(var(--ca),.08),transparent 70%),repeating-linear-gradient(90deg,rgba(var(--ca),.045) 0 1px,transparent 1px 48px),#070912}
.pg-cn-duel{position:relative;display:grid;grid-template-columns:176px 68px minmax(0,1fr) 68px;grid-template-areas:"k pc dl end";align-items:center;height:104px}
.pg-cn-duel+.pg-cn-duel{border-top:1px dashed rgba(var(--ca),.18)}
.pg-cn-dk{grid-area:k;align-self:start;margin-top:30px;font:500 .84rem/1.2 var(--pg-cn-mono);color:#fff}
.pg-cn-dn{position:relative;z-index:1;display:grid;place-items:center;width:68px;height:68px;border-radius:14px;background:linear-gradient(180deg,#151829,#0A0B14);border:1px solid rgba(var(--ca),.4);
box-shadow:inset 2px 2px 0 rgba(255,255,255,.07),inset -2px -3px 0 rgba(0,0,0,.5),0 0 0 5px rgba(7,9,18,.9);transition:border-color .25s}
.pg-cn-dn--pc{grid-area:pc}.pg-cn-dn--end{grid-area:end}
.pg-cn-dn.is-hit{border-color:var(--pg-cn-red)}
.pg-cn-dn::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle,rgba(var(--cr),.5),rgba(var(--cr),.08) 70%);opacity:0;transition:opacity .2s}
.pg-cn-dn.is-hit::before{opacity:1}
.pg-cn-dic{display:block;width:40px;height:40px;image-rendering:pixelated}
.pg-cn-dn .pg-cn-dic{width:48px;height:48px}
.pg-cn-dl{grid-area:dl;position:relative;height:2px;margin:0 10px;background:repeating-linear-gradient(90deg,rgba(var(--ca),.6) 0 3px,transparent 3px 9px)}
[data-kind="timeout"] .pg-cn-dl{-webkit-mask:linear-gradient(90deg,#000 30%,transparent 78%);mask:linear-gradient(90deg,#000 30%,transparent 78%)}
[data-kind="timeout"] .pg-cn-dn--end{opacity:.42;border-style:dashed}
.pg-cn-dpk{position:absolute;left:0;top:-6px;width:14px;height:14px;opacity:0;background:#DCE5FF;box-shadow:inset 2px 2px 0 #fff,inset -2px -2px 0 rgba(48,70,170,.7),0 0 12px 3px rgba(var(--ca),.85)}
.pg-cn-dt{grid-area:k;align-self:end;margin-bottom:30px;display:flex;align-items:center;gap:7px;font:400 .72rem/1 var(--pg-cn-mono);color:#FFB8BF;transition:opacity .3s,transform .4s var(--lp-ease)}
.pg-cn-dt::before{content:'→';color:var(--pg-cn-red)}
.pg-cn-dt i{display:none}
.pg-cn-js .pg-cn-duel:not(.is-done) .pg-cn-dt{opacity:0;transform:translate3d(-6px,0,0)}
.pg-cn-dring{position:absolute;left:50%;top:50%;width:0;height:0;--rr:-43px}
.pg-cn-dring i{position:absolute;left:-2px;top:-2px;width:4px;height:4px;background:var(--pg-cn-blue-hi)}
.pg-cn-dring i:last-child{background:var(--pg-cn-red)}

/* io.netty: the message taken apart — the library name dims, the real hint glows */
.pg-cn-trace{position:relative;margin:26px 0 24px;border-radius:14px;border:1px solid rgba(var(--ca),.32);background:#070912;overflow:hidden}
.pg-cn-tr-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:11px 16px;border-bottom:1px solid rgba(var(--ca),.16);background:linear-gradient(180deg,#11152B,#0B0E1C);font:400 .68rem/1.2 var(--pg-cn-mono);color:rgba(191,208,255,.66)}
.pg-cn-tr-t{display:flex;align-items:center;gap:8px;margin-right:auto;color:#FFB8BF}
.pg-cn-tr-t i{width:7px;height:7px;background:var(--pg-cn-red);box-shadow:0 0 7px rgba(var(--cr),.85)}
.pg-cn-tr-lg{display:flex;align-items:center;gap:7px}
.pg-cn-tr-lg i{width:14px;height:8px;border-radius:2px}
.pg-cn-tr-lg .is-d{background:rgba(243,239,230,.2)}
.pg-cn-tr-lg .is-g{background:var(--lp-gold-hi)}
.pg-cn-tr-b{position:relative;padding:10px 0}
[data-pg=connect] .pg-cn-tr-l{position:relative;z-index:1;margin:0;max-width:none;padding:10px 20px 10px 46px;font:400 .88rem/1.5 var(--pg-cn-mono);color:rgba(243,239,230,.3);overflow-wrap:break-word;cursor:default}
.pg-cn-tr-l::before{content:'›';position:absolute;left:25px;color:rgba(var(--ca),.45);transition:color .3s}
.pg-cn-tr-d{color:rgba(243,239,230,.26);transition:color .3s}
.pg-cn-tr-l b{font-weight:400;color:rgba(246,207,87,.5);transition:color .3s}
.pg-cn-tr-l.is-on b{color:#FFE08A}
.pg-cn-tr-l.is-on::before{color:var(--lp-acc)}
.pg-cn-tr-l.is-on .pg-cn-tr-d{color:rgba(243,239,230,.2)}
.pg-cn-tr-scan{position:absolute;left:0;right:0;top:0;height:38px;pointer-events:none;opacity:0;transition:transform .6s var(--lp-ease),opacity .4s;
background:linear-gradient(90deg,rgba(var(--ca),.16),rgba(var(--ca),.05) 60%,transparent);box-shadow:inset 3px 0 0 var(--lp-acc)}
.pg-cn-trace.is-on .pg-cn-tr-scan{opacity:1}
[data-pg=connect] #io-netty>.lp-list li{padding:8px 12px 8px 30px;margin:0 0 6px;border-radius:8px;border:1px solid transparent;transition:border-color .25s,background-color .25s}
[data-pg=connect] #io-netty>.lp-list li::before{left:12px;top:1.15em}
[data-pg=connect] #io-netty>.lp-list li.is-on{border-color:rgba(var(--ca),.3);background:rgba(var(--ca),.06)}

/* konto: the session handshake as a sequence diagram — lifelines Ty / titanmc.pl / sesja, packets walk the messages in
   order (9 s loop, CSS on the compositor): premium = login, join, verification, confirmation; non-premium = commands */
.pg-cn-auth{position:relative;margin:30px 0 6px;padding:20px 22px 14px;border-radius:16px;border:1px solid rgba(var(--ca),.22);
background:radial-gradient(380px 200px at 50% 0,rgba(212,160,23,.07),transparent 70%),#080A14}
.pg-cn-sq-hd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 4px}
.pg-cn-sq-h{display:grid;justify-items:center;gap:3px;text-align:center}
.pg-cn-sq-ic{position:relative;display:grid;place-items:center;width:54px;height:54px;margin-bottom:5px;border-radius:13px;background:linear-gradient(180deg,#151829,#0A0B14);border:1px solid rgba(var(--ca),.4);
box-shadow:inset 2px 2px 0 rgba(255,255,255,.07),inset -2px -3px 0 rgba(0,0,0,.5),0 0 0 5px rgba(8,10,20,.95)}
.pg-cn-sq-ic .pg-cn-dic{width:38px;height:38px}
.pg-cn-sq-ic::after{content:'';position:absolute;inset:-1px;border-radius:inherit;border:2px solid var(--pg-cn-blue-hi);box-shadow:0 0 16px rgba(var(--ca),.6);opacity:0}
.pg-cn-sq-h b{font:500 .84rem/1.2 var(--pg-cn-mono);color:#fff}
.pg-cn-sq-h small{font:400 .62rem/1.2 var(--pg-cn-mono);color:rgba(191,208,255,.55)}
.pg-cn-sq-h.is-dst .pg-cn-sq-ic{border-color:rgba(212,160,23,.6);background:linear-gradient(180deg,#2A2108,#120E05)}
.pg-cn-sq-h.is-dst .pg-cn-sq-ic::after{border-color:var(--lp-gold-hi);box-shadow:0 0 20px rgba(246,207,87,.6)}
.pg-cn-sq-h.is-dst b{color:var(--lp-gold-hi)}
.pg-cn-sq-bd{position:relative;padding:8px 0 0;background:repeating-linear-gradient(180deg,rgba(var(--ca),.42) 0 3px,transparent 3px 8px) calc(100% / 6) 0/1px 100% no-repeat,
repeating-linear-gradient(180deg,rgba(212,160,23,.5) 0 3px,transparent 3px 8px) 50% 0/1px 100% no-repeat,repeating-linear-gradient(180deg,rgba(var(--ca),.42) 0 3px,transparent 3px 8px) calc(500% / 6) 0/1px 100% no-repeat}
.pg-cn-sq-fr{position:relative;margin:0 0 12px;padding:30px 0 6px}
.pg-cn-sq-fr::before{content:'';position:absolute;inset:0 -10px;border:1px dashed rgba(var(--ca),.26);border-radius:10px;pointer-events:none}
.pg-cn-sq-tag{position:absolute;left:-10px;top:0;padding:5px 16px 4px 10px;border-radius:10px 0 0 0;background:#10152B;border:1px solid rgba(var(--ca),.36);
clip-path:polygon(0 0,100% 0,100% 55%,calc(100% - 8px) 100%,0 100%);font:700 .64rem/1 'Rajdhani',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--pg-cn-blue-hi)}
.pg-cn-sq-fr.is-np .pg-cn-sq-tag{color:var(--lp-gold-hi);border-color:rgba(212,160,23,.4)}
.pg-cn-sq-m{position:relative;display:block;height:38px}
.pg-cn-sq-a{position:absolute;bottom:9px;height:2px;left:calc(100% / 6);right:50%;background:repeating-linear-gradient(90deg,rgba(var(--ca),.7) 0 3px,transparent 3px 7px)}
.pg-cn-sq-a::after{content:'';position:absolute;right:-1px;top:-4px;width:6px;height:10px;background:var(--pg-cn-blue-hi);clip-path:polygon(0 0,100% 50%,0 100%)}
[data-ab="13"] .pg-cn-sq-a{right:calc(100% / 6)}
[data-ab="23"] .pg-cn-sq-a,[data-ab="32"] .pg-cn-sq-a{left:50%;right:calc(100% / 6)}
[data-ab="32"] .pg-cn-sq-a{transform:scaleX(-1)}
.pg-cn-sq-m.is-ok .pg-cn-sq-a{background:repeating-linear-gradient(90deg,rgba(246,207,87,.75) 0 3px,transparent 3px 7px)}
.pg-cn-sq-m.is-ok .pg-cn-sq-a::after{background:var(--lp-gold-hi)}
.pg-cn-sq-m.is-opt .pg-cn-sq-a{opacity:.6}
.pg-cn-sq-a b{position:absolute;left:0;right:0;top:-6px;height:14px;overflow:hidden}
.pg-cn-sq-a b::before{content:'';position:absolute;inset:0;transform:translate3d(-100%,0,0);opacity:0;
background:linear-gradient(#E9EEFF,#E9EEFF) right 2px top 2px/10px 10px no-repeat,radial-gradient(closest-side,rgba(108,140,255,.95),transparent) right -4px center/26px 26px no-repeat;animation:pg-cn-sqm 9s linear infinite}
.pg-cn-sq-m.is-ok .pg-cn-sq-a b::before{background:linear-gradient(#FFE7A0,#FFE7A0) right 2px top 2px/10px 10px no-repeat,radial-gradient(closest-side,rgba(246,207,87,.95),transparent) right -4px center/26px 26px no-repeat}
.pg-cn-sq-l{position:absolute;bottom:15px;left:calc(100% / 6 + 10px);padding:0 4px;border-radius:3px;background:#080A14;white-space:nowrap;font:400 .74rem/1.25 var(--pg-cn-mono);color:#D6DFFF;opacity:.5;animation:pg-cn-sql 9s linear infinite}
.is-np .pg-cn-sq-m{height:48px}
.is-np .pg-cn-sq-a{right:calc(50% + 6px)}
[data-ab="23"] .pg-cn-sq-l{left:calc(50% + 10px)}
[data-ab="32"] .pg-cn-sq-l{left:auto;right:calc(100% / 6 + 10px);color:var(--lp-gold-hi)}
[data-pg=connect] .pg-cn-sq-l code{padding:0;border:0;background:none;font:inherit;color:#fff}
.pg-cn-sq-l small{display:block;margin-top:2px;font-size:.64rem;color:rgba(191,208,255,.6)}
.pg-cn-sq-act{position:absolute;left:50%;top:34px;bottom:10px;width:10px;margin-left:-5px;border-radius:2px;border:1px solid rgba(212,160,23,.6);background:linear-gradient(180deg,rgba(212,160,23,.32),rgba(212,160,23,.1))}
.pg-cn-sq-act b{position:absolute;left:16px;bottom:-1px;font:400 .62rem/1 var(--pg-cn-mono);letter-spacing:.06em;color:rgba(246,207,87,.8);white-space:nowrap}
.pg-cn-sq-m:nth-child(2) .pg-cn-sq-a b::before,.pg-cn-sq-m:nth-child(2) .pg-cn-sq-l{animation-delay:0s}
.pg-cn-sq-m:nth-child(3) .pg-cn-sq-a b::before,.pg-cn-sq-m:nth-child(3) .pg-cn-sq-l{animation-delay:1.05s}
.pg-cn-sq-m:nth-child(4) .pg-cn-sq-a b::before,.pg-cn-sq-m:nth-child(4) .pg-cn-sq-l{animation-delay:2.1s}
.pg-cn-sq-m:nth-child(5) .pg-cn-sq-a b::before,.pg-cn-sq-m:nth-child(5) .pg-cn-sq-l{animation-delay:3.15s}
.is-np .pg-cn-sq-m:nth-child(3) .pg-cn-sq-a b::before,.is-np .pg-cn-sq-m:nth-child(3) .pg-cn-sq-l{animation-delay:4.7s}
.is-np .pg-cn-sq-m:nth-child(4) .pg-cn-sq-a b::before,.is-np .pg-cn-sq-m:nth-child(4) .pg-cn-sq-l{animation-delay:5.75s}
.is-np .pg-cn-sq-m:nth-child(5) .pg-cn-sq-a b::before,.is-np .pg-cn-sq-m:nth-child(5) .pg-cn-sq-l{animation-delay:6.8s}
.pg-cn-sq-h.is-ses .pg-cn-sq-ic::after{animation:pg-cn-sqses 9s linear infinite}
.pg-cn-sq-h.is-dst .pg-cn-sq-ic::after{animation:pg-cn-sqdst 9s linear infinite}

/* status: the status panel before the start + facts as instruments */
.pg-cn-status{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"dial main" "ch ch";gap:18px 24px;align-items:center;margin:30px 0 0;padding:22px 24px 18px;border-radius:16px;
border:1px solid rgba(var(--ca),.26);background:radial-gradient(420px 170px at 0 0,rgba(var(--ca),.13),transparent 70%),#080A14}
.pg-cn-st-dial{grid-area:dial;position:relative;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle,#0E1326 0 58%,transparent 59%)}
.pg-cn-st-dial::before{content:'';position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(rgba(var(--ca),.75) 0 2deg,transparent 2deg 30deg);-webkit-mask:radial-gradient(closest-side,transparent 84%,#000 85%);mask:radial-gradient(closest-side,transparent 84%,#000 85%)}
.pg-cn-st-dial::after{content:'';position:absolute;inset:12px;border-radius:50%;border:1px solid rgba(var(--ca),.28)}
.pg-cn-st-hand{position:absolute;left:50%;top:8px;bottom:50%;width:2px;margin-left:-1px;transform-origin:50% 100%;background:linear-gradient(var(--lp-gold-hi),rgba(246,207,87,0));animation:pg-cn-spin 30s linear infinite}
.pg-cn-st-hand::before{content:'';position:absolute;left:-2px;top:-3px;width:6px;height:6px;background:var(--lp-gold-hi);box-shadow:0 0 8px rgba(246,207,87,.8)}
.pg-cn-st-dial b{position:relative;font:500 1.3rem/1 'Teko',sans-serif;letter-spacing:.04em;color:#fff}
.pg-cn-st-main{grid-area:main;display:grid;gap:7px;min-width:0}
.pg-cn-st-k{display:flex;align-items:center;gap:9px;font:400 .72rem/1 var(--pg-cn-mono);color:rgba(191,208,255,.72)}
.pg-cn-st-k i{width:8px;height:8px;background:var(--lp-gold);box-shadow:0 0 9px rgba(246,207,87,.75);animation:pg-cn-blink 1.8s steps(2,start) infinite}
.pg-cn-st-state{font:700 clamp(1.6rem,2.3vw,2.1rem)/1 'Rajdhani',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--lp-gold-hi)}
.pg-cn-st-cd{font:400 .84rem/1.45 var(--pg-cn-mono);color:rgba(243,239,230,.62)}
.pg-cn-st-cd [data-countdown]{color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.pg-cn-cd{white-space:nowrap}
[data-pg=connect] .lp-launch [data-countdown]{white-space:nowrap}
.pg-cn-st-ch{grid-area:ch;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:14px;border-top:1px dashed rgba(var(--ca),.22)}
.pg-cn-st-chk{margin-right:auto;font:400 .68rem/1 var(--pg-cn-mono);color:rgba(191,208,255,.62)}
.pg-cn-st-ch i{position:relative;width:24px;height:9px;border-radius:2px;background:rgba(var(--ca),.12);border:1px solid rgba(var(--ca),.32)}
.pg-cn-st-ch i:first-of-type{width:34px;border-color:rgba(212,160,23,.45)}
.pg-cn-st-ch i::after{content:'';position:absolute;inset:-1px;border-radius:inherit;background:var(--pg-cn-blue-hi);box-shadow:0 0 10px rgba(var(--ca),.9);opacity:0;animation:pg-cn-probe 30s linear infinite}
.pg-cn-st-ch i:nth-of-type(2)::after{animation-delay:.1s}.pg-cn-st-ch i:nth-of-type(3)::after{animation-delay:.2s}.pg-cn-st-ch i:nth-of-type(4)::after{animation-delay:.3s}
.pg-cn-st-ch i:nth-of-type(5)::after{animation-delay:.4s}.pg-cn-st-ch i:nth-of-type(6)::after{animation-delay:.5s}.pg-cn-st-ch i:nth-of-type(7)::after{animation-delay:.6s}
.pg-cn-st-ch i:nth-of-type(8)::after{animation-delay:.7s}.pg-cn-st-ch i:nth-of-type(9)::after{animation-delay:.8s}
[data-pg=connect] .lp-facts{margin-top:14px}
[data-pg=connect] .lp-fact{padding-top:48px;border-radius:14px;background:linear-gradient(180deg,rgba(14,17,32,.94),rgba(9,10,18,.96));border-color:rgba(var(--ca),.18)}
.pg-cn-gauge{position:absolute;left:18px;top:18px;display:flex;align-items:flex-end;gap:3px;height:18px}
.pg-cn-g-dial{width:18px;border-radius:50%;border:1px solid rgba(var(--ca),.7)}
.pg-cn-g-dial b{position:absolute;left:50%;top:2px;bottom:50%;width:2px;margin-left:-1px;transform-origin:50% 100%;background:var(--lp-gold-hi);animation:pg-cn-spin 30s linear infinite}
.pg-cn-g-modes{align-items:center}
.pg-cn-g-modes b{width:9px;height:9px;border-radius:2px;background:rgba(212,160,23,.5);border:1px solid var(--lp-gold)}
.pg-cn-g-tps{width:99px;height:12px;margin-top:3px;background:repeating-linear-gradient(90deg,rgba(var(--ca),.9) 0 3px,transparent 3px 5px)}
.pg-cn-g-ping b{width:4px;background:var(--lp-acc)}
.pg-cn-g-ping b:nth-child(1){height:6px}.pg-cn-g-ping b:nth-child(2){height:10px}.pg-cn-g-ping b:nth-child(3){height:14px}.pg-cn-g-ping b:nth-child(4){height:18px}

/* FAQ: questions as nodes on one line */
[data-pg=connect] .lp-faq{position:relative}
[data-pg=connect] .lp-faq::before{content:'';position:absolute;z-index:1;left:22px;top:26px;bottom:26px;width:2px;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(var(--ca),.6) 0 3px,transparent 3px 8px)}
[data-pg=connect] .lp-qa[open]::after{content:'';position:absolute;z-index:1;left:22px;top:26px;bottom:14px;width:2px;pointer-events:none;background:linear-gradient(180deg,var(--pg-cn-blue-hi),rgba(var(--ca),.85) 70%,transparent)}
[data-pg=connect] .lp-qa{position:relative;border-radius:12px;background:rgba(11,13,24,.94);border-color:rgba(var(--ca),.15)}
[data-pg=connect] .lp-qa[open]{border-color:rgba(var(--ca),.5);background:rgba(13,17,35,.96)}
[data-pg=connect] .lp-qa summary{position:relative;padding:17px 18px 17px 46px}
[data-pg=connect] .lp-qa summary::before{content:'';position:absolute;z-index:2;left:18px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:2px;border:1px solid rgba(var(--ca),.65);background:#0E1326;transition:background-color .25s,box-shadow .25s}
[data-pg=connect] .lp-qa[open] summary::before{background:var(--lp-acc);box-shadow:0 0 10px rgba(var(--ca),.85)}
[data-pg=connect] .lp-qa summary::after{border-radius:8px;border-color:rgba(var(--ca),.45);
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23BFD0FF' d='M7 3h2v10H7zM3 7h10v2H3z'/%3E%3C/svg%3E") center/12px no-repeat}
[data-pg=connect] .lp-qa[open] summary::after{transform:none;background-color:rgba(var(--ca),.16);border-color:rgba(var(--ca),.8);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23E4EBFF' d='M3 7h10v2H3z'/%3E%3C/svg%3E")}
[data-pg=connect] .lp-qa summary:focus-visible{outline:2px solid var(--pg-cn-blue-hi);outline-offset:-2px;border-radius:12px}
[data-pg=connect] .lp-qa-a{padding:0 22px 20px 46px}

/* sources, author, recommendation */
[data-pg=connect] .lp-sources{border-radius:12px;border-color:rgba(var(--ca),.26);background:rgba(8,10,20,.6)}
[data-pg=connect] .lp-sources b{color:var(--pg-cn-blue-hi)}
[data-pg=connect] .lp-sources ul{list-style:none;padding:0;counter-reset:pg-cn-src}
[data-pg=connect] .lp-sources li{position:relative;padding-left:30px;margin:0 0 3px;counter-increment:pg-cn-src}
[data-pg=connect] .lp-sources li::before{content:counter(pg-cn-src,decimal-leading-zero);position:absolute;left:0;top:.18em;font:400 .66rem/1.5 var(--pg-cn-mono);color:rgba(var(--ca),.75)}
[data-pg=connect] .lp-author{border-radius:16px;background:linear-gradient(180deg,rgba(14,17,32,.92),rgba(9,10,18,.95));border-color:rgba(var(--ca),.2)}
[data-pg=connect] .lp-author img{border-radius:12px;border-color:rgba(var(--ca),.5);box-shadow:0 0 0 4px rgba(8,8,13,.85),0 0 0 5px rgba(var(--ca),.28)}
[data-pg=connect] .lp-author-k{color:var(--pg-cn-blue-hi)}
/* the recommendation = the destination node: a gold block the signal wire runs into */
[data-pg=connect] .lp-reco{position:relative;border-radius:14px;border-color:rgba(212,160,23,.36);background:linear-gradient(90deg,rgba(212,160,23,.13),rgba(12,13,24,.92) 62%)}
[data-pg=connect] .lp-reco>i{position:relative;width:48px;height:48px;border-radius:12px;background:linear-gradient(180deg,#2A2108,#120E05);border:1px solid rgba(246,207,87,.62);box-shadow:inset 2px 2px 0 rgba(255,255,255,.08),inset -2px -3px 0 rgba(0,0,0,.5),0 0 0 5px rgba(8,8,13,.7)}
[data-pg=connect] .lp-reco>i::after{content:'';position:absolute;top:5px;right:5px;width:5px;height:5px;background:var(--lp-gold-hi);box-shadow:0 0 6px 1px rgba(246,207,87,.8)}
@media(min-width:641px){[data-pg=connect] .lp-reco::before{content:'';position:absolute;left:-1px;top:50%;width:21px;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,rgba(var(--ca),.75) 0 2px,transparent 2px 6px)}}

/* CTA: the packet arrives at the gold node, in the rain */
[data-pg=connect] .lp-cta-in{border-radius:22px;border-color:rgba(var(--ca),.3);
background:radial-gradient(520px 260px at 50% 0,rgba(212,160,23,.2),transparent 70%),radial-gradient(760px 380px at 50% 120%,rgba(var(--ca),.2),transparent 70%),linear-gradient(180deg,#0D1022,#07080F)}
.pg-cn-rain--cta{inset:-60px -10%}
.pg-cn-go .pg-cn-rain--cta{opacity:.5}
.pg-cn-arrive{position:relative;display:flex;align-items:center;gap:40px;width:max-content;margin:0 auto 28px}
.pg-cn-arrive::before{content:'';position:absolute;left:5px;right:26px;top:50%;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,rgba(var(--ca),.65) 0 2px,transparent 2px 7px)}
.pg-cn-arrive i{position:relative;width:12px;height:12px;border-radius:2px;background:#0E1326;border:1px solid rgba(var(--ca),.8)}
/* each hop lights as the packet passes it on its way to the gold node */
.pg-cn-arrive i::after{content:'';position:absolute;inset:-1px;border-radius:2px;background:var(--pg-cn-blue-hi);box-shadow:0 0 10px 1px rgba(var(--ca),.9);opacity:0;animation:pg-cn-hopl 3.4s linear infinite}
.pg-cn-arrive i:nth-child(1)::after{animation-delay:.3s}.pg-cn-arrive i:nth-child(2)::after{animation-delay:.74s}
.pg-cn-arrive i:nth-child(3)::after{animation-delay:1.01s}.pg-cn-arrive i:nth-child(4)::after{animation-delay:1.29s}
.pg-cn-arr-dst{position:relative;display:grid;place-items:center;width:62px;height:62px;border-radius:13px;background:linear-gradient(180deg,#2C2209,#120E05);border:1px solid rgba(212,160,23,.65);
box-shadow:0 0 0 6px rgba(13,16,34,.9),0 0 34px -4px rgba(246,207,87,.5)}
.pg-cn-arr-dst .pg-cn-dic{width:42px;height:42px}
.pg-cn-arr-dst::after{content:'';position:absolute;inset:-9px;border-radius:18px;border:2px solid var(--lp-gold-hi);opacity:0;animation:pg-cn-arrpulse 3.4s ease-out infinite}
.pg-cn-arrive b{position:absolute;left:0;top:50%;width:12px;height:12px;margin-top:-6px;opacity:0;background:#E4EBFF;box-shadow:0 0 10px 2px rgba(var(--ca),.85);animation:pg-cn-arr 3.4s cubic-bezier(.45,.05,.55,.95) infinite}
.pg-cn-arrive b::before{content:'';position:absolute;right:100%;top:4px;width:46px;height:4px;background:linear-gradient(90deg,transparent,rgba(var(--ca),.75))}
[data-pg=connect] .lp-cta .lp-ip{border-color:rgba(212,160,23,.5)}

/* related: the next hops — node squares on a dashed rail (a row of stops), number + arrow on the rail, text under it */
[data-pg=connect] .lp-links{counter-reset:pg-cn-hop;column-gap:0;row-gap:30px}
@media(min-width:1000px){[data-pg=connect] .lp-links{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:700px) and (max-width:999px){[data-pg=connect] .lp-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
[data-pg=connect] a.lp-link{position:relative;display:block;padding:34px 30px 4px 0;border:0;border-radius:0;counter-increment:pg-cn-hop;
background:repeating-linear-gradient(90deg,rgba(var(--ca),.5) 0 3px,transparent 3px 8px) 0 8px/100% 2px no-repeat;transition:none}
[data-pg=connect] .lp-link>i{position:absolute;left:0;top:2px;width:14px;height:14px;border-radius:3px;background:linear-gradient(rgba(var(--ca),.85),rgba(var(--ca),.85)) center/4px 4px no-repeat,#0D1122;border:1px solid rgba(var(--ca),.75);box-shadow:0 0 0 4px var(--lp-bg);transition:background-color .25s,border-color .25s,box-shadow .25s}
[data-pg=connect] .lp-link>i::before{content:none}
[data-pg=connect] .lp-link::before{content:counter(pg-cn-hop,decimal-leading-zero);position:absolute;left:22px;top:3px;padding:0 6px;background:var(--lp-bg);font:400 .66rem/1 var(--pg-cn-mono);letter-spacing:.06em;color:rgba(var(--ca),.85)}
[data-pg=connect] .lp-link::after{position:absolute;right:34px;top:0;padding:0 6px;background:var(--lp-bg);color:var(--lp-acc);line-height:18px}
[data-pg=connect] .lp-link b{color:#fff;transition:color .25s}
[data-pg=connect] .lp-link span{display:block}
@media(hover:hover){
[data-pg=connect] a.lp-link:hover{transform:none;background-color:transparent}
[data-pg=connect] .lp-link:hover>i{background:var(--lp-acc);border-color:var(--pg-cn-blue-hi);box-shadow:0 0 0 4px var(--lp-bg),0 0 14px 2px rgba(var(--ca),.8)}
[data-pg=connect] .lp-link:hover b{color:var(--pg-cn-blue-hi)}
}
[data-pg=connect] .lp-link:focus-visible>i{background:var(--lp-acc)}
@media(max-width:699px){
[data-pg=connect] .lp-links{row-gap:0}
[data-pg=connect] a.lp-link{padding:13px 34px 15px 36px;background:repeating-linear-gradient(180deg,rgba(var(--ca),.5) 0 3px,transparent 3px 8px) 6px 0/2px 100% no-repeat}
[data-pg=connect] .lp-link>i{top:18px;width:14px;height:14px}
[data-pg=connect] .lp-link::before{display:none}
[data-pg=connect] .lp-link::after{right:4px;top:calc(50% - 9px)}
}

/* ── sections on the phone ── */
@media(max-width:640px){
.pg-cn-mini{top:18px;right:20px;gap:12px;--mp:24px}
[data-pg=connect] .lp-article .lp-answer .lp-answer-k{margin:0 -20px 18px;padding:15px 20px 14px}
.pg-cn-mini-l{display:none}
[data-pg=connect] #bledy .lp-filters{gap:3px}
[data-pg=connect] #bledy .lp-filter{padding:9px 9px 8px;font-size:.68rem;gap:6px}
[data-pg=connect] #bledy .lp-filter:not([aria-pressed="true"]) .pg-cn-tab-n{display:none}
[data-pg=connect] #bledy .lp-tablewrap{padding:0 10px 2px;border:1px solid rgba(var(--ca),.5);border-bottom:0;border-radius:0 12px 0 0;background:#0A0D1A}
[data-pg=connect] #tabela-bledow caption{margin:0 -10px 12px;padding:12px 14px 11px 34px}
[data-pg=connect] .lp-table--stack tbody tr{border-radius:10px;border-color:rgba(var(--ca),.2);background:#0C0F1D}
[data-pg=connect] .lp-table--stack tbody th{position:relative;padding:12px 14px 11px 50px;background:#10142A;color:#fff;border-bottom-color:rgba(var(--ca),.2)}
[data-pg=connect] #tabela-bledow tbody th::before{top:15px}
[data-pg=connect] #tabela-bledow tbody th::after{left:33px;top:17px}
[data-pg=connect] .lp-table--stack tbody td[data-label]::before{font:400 .6rem/1.3 var(--pg-cn-mono);letter-spacing:.1em;color:rgba(var(--ca),.85)}
.pg-cn-con-ft{border-radius:0 0 12px 12px;font-size:.66rem}
[data-pg=connect] .lp-steps::before,[data-pg=connect] .lp-steps::after{left:21px;top:22px}
[data-pg=connect] .lp-step[data-cn-grp]::after{left:66px}
.pg-cn-here{left:22px}
.pg-cn-hops{flex-wrap:wrap;row-gap:6px}
[data-pg=connect] #rozwiazania .lp-note{margin-left:0}
[data-pg=connect] #rozwiazania .lp-note::before{display:none}
.pg-cn-race{padding:2px 12px}
.pg-cn-duel{grid-template-columns:52px minmax(0,1fr) 52px;grid-template-areas:"k k k" "pc dl end";height:auto;row-gap:10px;padding:13px 0 15px}
.pg-cn-dk{align-self:center;margin:0;font-size:.76rem}
.pg-cn-dt{justify-self:end;align-self:center;margin:0}
.pg-cn-dn{width:52px;height:52px;border-radius:12px}
.pg-cn-dn .pg-cn-dic{width:36px;height:36px}
.pg-cn-dring{--rr:-35px}
.pg-cn-fill{left:21px}
.pg-cn-auth{padding:16px 12px 8px}
.pg-cn-sq-ic{width:44px;height:44px}
.pg-cn-sq-ic .pg-cn-dic{width:30px;height:30px}
.pg-cn-sq-h b{font-size:.74rem}
.pg-cn-sq-h small{font-size:.56rem}
.pg-cn-sq-l{left:calc(100% / 6 + 6px);font-size:.64rem}
[data-ab="23"] .pg-cn-sq-l{left:calc(50% + 6px)}
[data-ab="32"] .pg-cn-sq-l{right:calc(100% / 6 + 6px)}
.pg-cn-status{grid-template-columns:auto minmax(0,1fr);gap:14px 16px;padding:18px 16px 16px}
.pg-cn-st-dial{width:76px;height:76px}
.pg-cn-st-dial::after{inset:10px}
.pg-cn-st-ch i{width:18px}
.pg-cn-st-ch i:first-of-type{width:26px}
.pg-cn-st-chk{flex-basis:100%;margin-bottom:4px}
[data-pg=connect] .lp-faq::before,[data-pg=connect] .lp-qa[open]::after{left:20px}
[data-pg=connect] .lp-qa summary{padding-left:42px}
[data-pg=connect] .lp-qa summary::before{left:16px}
[data-pg=connect] .lp-qa-a{padding-left:42px;padding-right:18px}
.pg-cn-arrive{gap:26px}
}


/* ── keyframes ── */



@keyframes pg-cn-flow-v{to{transform:translate3d(0,12px,0)}}
@keyframes pg-cn-fall-f{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,260px,0)}}
@keyframes pg-cn-fall-n{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,420px,0)}}
@keyframes pg-cn-flow{to{transform:translate3d(12px,0,0)}}
@keyframes pg-cn-blink{to{opacity:0}}
@keyframes pg-cn-beacon{0%,55%{opacity:1}56%,100%{opacity:.18}}
@keyframes pg-cn-glitch{
0%{opacity:0;transform:translate3d(-12px,3px,0) skewX(-12deg) scaleY(.4);animation-timing-function:steps(1,end)}
10%{opacity:1;transform:translate3d(9px,-2px,0) skewX(8deg) scaleY(1.06);animation-timing-function:steps(1,end)}
20%{opacity:.35;transform:translate3d(-6px,0,0) skewX(-5deg);animation-timing-function:steps(1,end)}
30%{opacity:1;transform:translate3d(4px,1px,0) skewX(2deg);animation-timing-function:steps(1,end)}
40%{opacity:.7;transform:translate3d(-2px,0,0);animation-timing-function:steps(1,end)}
50%{opacity:1;transform:translate3d(1px,0,0)}
100%{opacity:1;transform:none}}
@keyframes pg-cn-errout{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(0,-6px,0)}}
@keyframes pg-cn-mini{0%{transform:translate3d(0,0,0);opacity:0}8%{opacity:1}64%{transform:translate3d(128px,0,0);opacity:1}70%,100%{transform:translate3d(128px,0,0);opacity:0}}
@keyframes pg-cn-probe{0%{opacity:0}1%{opacity:.9}4%,100%{opacity:0}}
@keyframes pg-cn-spin{to{transform:rotate(360deg)}}
@keyframes pg-cn-arr{0%{transform:translate3d(0,0,0);opacity:0}6%{opacity:1}60%{transform:translate3d(226px,0,0);opacity:1}63%,100%{transform:translate3d(226px,0,0);opacity:0}}
@keyframes pg-cn-arrpulse{0%,59%{opacity:0;transform:scale(.82)}61%{opacity:.95;transform:scale(.82)}92%,100%{opacity:0;transform:scale(1.5)}}
@keyframes pg-cn-jit{0%{transform:scaleY(1)}33%{transform:scaleY(-.7)}66%{transform:scaleY(.45)}}
@keyframes pg-cn-mring{0%{transform:scale(.6);opacity:.95}70%,100%{transform:scale(1.6);opacity:0}}
@keyframes pg-cn-sqm{0%{transform:translate3d(-100%,0,0);opacity:1}8.6%{transform:translate3d(0,0,0);opacity:1}10.5%{transform:translate3d(0,0,0);opacity:0}10.6%,100%{transform:translate3d(-100%,0,0);opacity:0}}
@keyframes pg-cn-sql{0%,12%{opacity:1}17%,100%{opacity:.5}}
@keyframes pg-cn-sqses{0%,8%{opacity:0}9%{opacity:1}15%,31%{opacity:0}32%{opacity:1}38%,100%{opacity:0}}
@keyframes pg-cn-sqdst{0%,20%{opacity:0}21%{opacity:.7}27%,43%{opacity:0}44%{opacity:1}54%,61%{opacity:0}62%{opacity:.8}70%,73%{opacity:0}74%{opacity:1}84%,100%{opacity:0}}
@keyframes pg-cn-spl{0%,100%{transform:translate3d(0,0,0);opacity:0}3%{opacity:.95}14%{transform:translate3d(-6px,-8px,0);opacity:.8}24%{transform:translate3d(-10px,-1px,0);opacity:0}}
@keyframes pg-cn-spr{0%,100%{transform:translate3d(0,0,0);opacity:0}3%{opacity:.85}12%{transform:translate3d(5px,-6px,0);opacity:.7}21%{transform:translate3d(8px,0,0);opacity:0}}
@keyframes pg-cn-hopl{0%{opacity:1}14%,100%{opacity:0}}
/* phone travel distances: these must come AFTER the global keyframes (the last @keyframes of a name wins) */
@media(max-width:640px){
@keyframes pg-cn-mini{0%{transform:translate3d(0,0,0);opacity:0}8%{opacity:1}64%{transform:translate3d(96px,0,0);opacity:1}70%,100%{transform:translate3d(96px,0,0);opacity:0}}
@keyframes pg-cn-arr{0%{transform:translate3d(0,0,0);opacity:0}6%{opacity:1}60%{transform:translate3d(166px,0,0);opacity:1}63%,100%{transform:translate3d(166px,0,0);opacity:0}}
}