/* Open Radio — wspólny szkielet Blueprint (wyciąg z open-radio-install.html, 2026-07-21).
   Używa go open-radio-stacje.php; strony statyczne mają własne kopie inline. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/SpaceGrotesk-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/SpaceGrotesk-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/IBMPlexSans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/IBMPlexSans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/IBMPlexMono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/IBMPlexMono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/IBMPlexMono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/IBMPlexMono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/IBMPlexMono-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/IBMPlexMono-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF}

:root{
  --bg:#0a0e13; --bg-2:#0d1219; --panel:rgba(125,165,210,0.035);
  --ink:#eaf0f7; --dim:#8a97a8; --faint:#56616f;
  --line:rgba(125,165,210,0.16); --line-2:rgba(125,165,210,0.32);
  --cyan:#3db8f5; --cyan-deep:#0ea5e9; --glow:rgba(61,184,245,0.30);
  --amber:#f5a524; --green:#34d399; --rose:#fb7185;
  --disp:'Space Grotesk',sans-serif; --body:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --wrap:1180px;
}
[data-theme="light"]{color-scheme:light;
  --bg:#f4f6f9; --bg-2:#e9edf3; --panel:#ffffff;
  --ink:#16202c; --dim:#48586d; --faint:#8494a6;
  --line:rgba(16,42,74,.15); --line-2:rgba(16,42,74,.30);
  --cyan:#0b7dc0; --cyan-deep:#096aa5; --glow:rgba(11,125,192,.16);
  --amber:#b45309; --green:#047857; --rose:#be123c}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--body);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100vw}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--cyan);color:#04121c}
[data-theme="light"] ::selection{background:var(--cyan);color:#fff}
.paper{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(120% 120% at 70% 0%,#000 55%,transparent 100%);mask-image:radial-gradient(120% 120% at 70% 0%,#000 55%,transparent 100%);opacity:.5}
.glowfield{position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(700px 480px at 78% -4%,var(--glow),transparent 70%)}
.wrap{width:min(94vw,var(--wrap));margin:0 auto}
.sec{padding:clamp(40px,6vw,72px) 0;position:relative;scroll-margin-top:56px}
.top{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(10,14,19,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
[data-theme="light"] .top{background:rgba(244,246,249,.78)}
.top-in{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;white-space:nowrap}
@media (max-width:640px){.brand .b2{display:none}.brand{font-size:.95rem}}
.brand .mk{width:30px;height:30px;border:1px solid var(--cyan);color:var(--cyan);display:grid;place-items:center;font-family:var(--mono);font-size:12px;position:relative;flex:none}
.brand .mk::before,.brand .mk::after{content:"";position:absolute;width:5px;height:5px;border:1px solid var(--cyan)}
.brand .mk::before{top:-3px;left:-3px;border-right:0;border-bottom:0}
.brand .mk::after{bottom:-3px;right:-3px;border-left:0;border-top:0}
.brand .dot{color:var(--cyan)}
.top-r{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--faint)}
.top-r a.site{color:var(--dim);border:1px solid var(--line);padding:6px 11px;transition:.2s}
.top-r a.site:hover{color:var(--cyan);border-color:var(--cyan)}
/* topbar mobile 2026-07-21: etykiety bez lamania, skrocony powrot zamiast samej strzalki */
.top-r a.site{white-space:nowrap}
.top-r .bs{display:none}
@media (max-width:560px){.top-r{gap:8px}.top-r a.site{padding:6px 8px;letter-spacing:.04em}.top-r .bk{display:none}.top-r .bs{display:inline}}
@media (max-width:356px){.top-r{gap:6px}.top-r a.site{padding:6px 7px;font-size:10px;letter-spacing:.03em}.brand{font-size:.88rem}}
.theme-tgl{min-width:33px;padding:5px 9px;border:1px solid var(--line);background:transparent;color:var(--faint);cursor:pointer;display:grid;place-items:center;transition:color .2s,border-color .2s}
.theme-tgl:hover{color:var(--cyan);border-color:var(--cyan)}
.theme-tgl svg{width:15px;height:15px;display:block}
.theme-tgl .i-moon{display:none}
[data-theme="light"] .theme-tgl .i-sun{display:none}
[data-theme="light"] .theme-tgl .i-moon{display:block}
.lbl{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);display:inline-flex;align-items:center;gap:9px}
.lbl::before{content:"";width:22px;height:1px;background:var(--cyan);opacity:.7}
.lbl .n{color:var(--faint)}
.head{max-width:70ch}
.head h1{font-family:var(--disp);font-weight:700;font-size:clamp(2rem,4.6vw,3.2rem);letter-spacing:-.03em;line-height:1.05;margin-top:14px}
.head h1 .c{color:var(--cyan)}
.head h2{font-family:var(--disp);font-weight:700;font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.02em;line-height:1.1;margin-top:14px}
.head p{color:var(--dim);margin-top:12px}
.head .rule{height:1px;background:var(--line-2);margin-top:22px;position:relative}
.head .rule::after{content:"";position:absolute;right:0;top:-3px;width:1px;height:7px;background:var(--cyan)}
.btn{font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:13px 20px;border:1px solid var(--line-2);background:transparent;color:var(--ink);display:inline-flex;align-items:center;gap:10px;cursor:pointer;transition:.2s;position:relative}
.btn .ar{color:var(--cyan)}
.btn:hover{border-color:var(--cyan);background:rgba(61,184,245,.07)}
[data-theme="light"] .btn:hover{background:rgba(11,125,192,.07)}
.btn.primary{background:var(--cyan);color:#04121c;border-color:var(--cyan);font-weight:600}
.btn.primary .ar{color:#04121c}
[data-theme="light"] .btn.primary{color:#fff}
[data-theme="light"] .btn.primary .ar{color:#fff}
.btn.disabled{opacity:.45;border-style:dashed;cursor:not-allowed;pointer-events:none}
.btn-corners::before,.btn-corners::after{content:"";position:absolute;width:6px;height:6px;border:1px solid currentColor;opacity:.6}
.btn-corners::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.btn-corners::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.strip{margin-top:24px;border:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;font-family:var(--mono);font-size:11.5px}
.strip .cap{padding:10px 14px;color:var(--cyan);letter-spacing:.1em;border-right:1px solid var(--line);white-space:nowrap}
.strip .st{padding:10px 14px;color:var(--dim);border-right:1px solid var(--line);letter-spacing:.03em}
.strip .st:last-child{border-right:0}
.strip .st b{color:var(--ink);font-weight:600}
.proc{position:relative;border:1px solid var(--line-2);background:linear-gradient(180deg,var(--bg-2),var(--bg));overflow:hidden;margin-top:28px;box-shadow:0 36px 90px -45px rgba(0,0,0,.85),0 0 60px -30px var(--glow)}
[data-theme="light"] .proc{box-shadow:0 24px 60px -40px rgba(16,42,74,.35)}
.proc::before,.proc::after{content:"";position:absolute;width:12px;height:12px;border:1.5px solid var(--cyan);z-index:3;pointer-events:none}
.proc::before{top:8px;left:8px;border-right:0;border-bottom:0}
.proc::after{bottom:8px;right:8px;border-left:0;border-top:0}
.proc svg{display:block;width:100%;height:auto}
.dline{stroke:var(--line-2);stroke-width:1.2;fill:none}
.dcyan{stroke:var(--cyan);stroke-width:1.2;fill:none}
.dfill{fill:var(--bg-2)}
.dtxt{fill:var(--dim);font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em}
.dtxt.c{fill:var(--cyan)}
.dtxt.f{fill:var(--faint);font-size:9px}
.pflow{fill:none;stroke:var(--cyan);stroke-width:1.4;stroke-dasharray:5 9;animation:flow 1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-14}}
.steps{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,2vw,20px);margin-top:32px}
.step{border:1px solid var(--line-2);background:var(--panel);padding:22px 22px 20px;position:relative}
.step .pn{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--faint);text-transform:uppercase;margin-bottom:10px}
.step .pn .tg{color:var(--cyan);border:1px solid rgba(61,184,245,.4);padding:2px 8px}
.step h3{font-family:var(--disp);font-weight:700;font-size:1.2rem;letter-spacing:-.01em}
.step p{color:var(--dim);font-size:.95rem;margin-top:8px}
.step p b{color:var(--ink);font-weight:600}
.step a.lnk{color:var(--cyan);border-bottom:1px solid rgba(61,184,245,.35)}
.step code{font-family:var(--mono);font-size:.87em;color:var(--cyan);background:rgba(61,184,245,.08);padding:1px 5px;border:1px solid rgba(61,184,245,.18)}
[data-theme="light"] .step code{background:rgba(11,125,192,.07);border-color:rgba(11,125,192,.25)}
.os-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,2vw,20px);margin-top:14px}
.os{border:1px solid var(--line-2);background:var(--bg-2);padding:18px;min-width:0}
.step{min-width:0}
.os h4{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);display:flex;align-items:center;gap:8px}
.os ol{margin:12px 0 0 18px;color:var(--dim);font-size:.93rem;display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
.os ol li{min-width:0}
.os ol li::marker{color:var(--cyan);font-family:var(--mono)}
.term{margin-top:8px;background:#0a0e13;border:1px solid var(--line-2);padding:10px 12px;font-family:var(--mono);font-size:12px;color:#7dd3a8;overflow-x:auto;white-space:pre}
[data-theme="light"] .term{background:#10202e;color:#8fe0b8}
.rec-t{margin-top:28px;border:1px solid var(--line-2)}
.rec-r{display:grid;grid-template-columns:1fr 24px 1.35fr;border-bottom:1px solid var(--line);align-items:center}
.rec-r:last-child{border-bottom:0}
.rec-r .aw{padding:14px 16px;font-family:var(--mono);font-size:12px;color:var(--rose);letter-spacing:.03em}
.rec-r .arw{color:var(--faint);font-family:var(--mono);font-size:12px;text-align:center}
.rec-r .re{padding:14px 16px;color:var(--dim);font-size:.93rem;border-left:1px solid var(--line)}
.rec-r .re b{color:var(--green);font-family:var(--mono);font-weight:500;font-size:.88em}
.note{margin-top:26px;border:1px solid var(--line);border-left:2px solid var(--amber);padding:16px 18px;color:var(--dim);font-size:.93rem;background:var(--panel)}
.note b{color:var(--ink)}
.foot{border-top:1px solid var(--line);margin-top:clamp(36px,5vw,60px)}
.foot-in{padding:30px 0;display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:.05em}
.foot-in a{color:var(--dim);border-bottom:1px solid var(--line-2);transition:.2s}
.foot-in a:hover{color:var(--cyan);border-color:var(--cyan)}
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
/* MOTION: linijka-progres, radar-ping, burst, celownik (port ze strony głównej) */
.sruler{position:fixed;left:0;top:0;bottom:0;width:2px;z-index:60;pointer-events:none;background:repeating-linear-gradient(180deg,var(--line) 0 5px,transparent 5px 11px)}
.sruler i{position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(var(--cyan-deep),var(--cyan));box-shadow:0 0 10px var(--glow);transform:scaleY(0);transform-origin:top;will-change:transform}
.ping{position:fixed;width:16px;height:16px;margin:-8px 0 0 -8px;border:1.5px solid var(--cyan);border-radius:50%;pointer-events:none;z-index:70;animation:pingOut .55s ease-out forwards}
.ping::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--cyan);opacity:.5}
@keyframes pingOut{from{opacity:.9;transform:scale(.35)}to{opacity:0;transform:scale(3.4)}}
.btn:active{transform:scale(.97)}
.proc.burst .pflow{animation-duration:.3s}
.proc.burst{box-shadow:0 36px 90px -45px rgba(0,0,0,.85),0 0 80px -24px var(--glow)}
.cross{position:fixed;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s}
.cross.on{opacity:1}
.cross .v,.cross .h{position:absolute}
.cross .v{width:1px;top:0;bottom:0;background:linear-gradient(var(--cyan),transparent);opacity:.32}
.cross .h{height:1px;left:0;right:0;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.22}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.pflow{animation:none}.sruler{display:none}}
@media (max-width:760px){.os-grid{grid-template-columns:1fr}.rec-r{grid-template-columns:1fr}.rec-r .arw{display:none}.rec-r .re{border-left:0;border-top:1px dashed var(--line);padding-top:10px}}
