/* Terminal Synapsy: identyfikacja CG (czern, kosc sloniowa, jedna czerwien; czerwony pas jako motyw) */
:root {
  --bg:#050505; --fg:#ece6d8; --dim:#a29d92; --line:#2a2723;
  --red:#e3121b; --redtxt:#ff5a5f;
  --title:"Arial Black","Archivo Black","Helvetica Neue",Arial,sans-serif;
  --ui:Inter,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
}
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; color:var(--fg); font:15px/1.6 var(--ui); min-height:100vh; }
::selection { background:var(--red); color:#fff; }
main { position:relative; max-width:min(720px,56vw); margin:0 0 0 5vw; padding:28px 0 48px; }

/* tlo: panel z grafika po prawej (desktop) / pas u gory (telefon); tekst nigdy nie wchodzi na obraz */
body::before { content:""; position:fixed; z-index:-1; top:0; right:0; bottom:0; width:44vw; background:url(/bg.webp) right center/cover no-repeat; -webkit-mask-image:linear-gradient(to right,transparent,#000 38%); mask-image:linear-gradient(to right,transparent,#000 38%); pointer-events:none; }

h1 { font:900 clamp(30px,4.2vw,50px)/1.05 var(--title); letter-spacing:-.01em; text-transform:uppercase; color:var(--fg); margin:0 0 18px; }
h1::after { content:""; display:block; width:112px; height:7px; margin-top:12px; background:var(--red); border-radius:3px 1px 4px 2px; transform:rotate(-1.2deg); }
h2 { font:700 13px var(--ui); letter-spacing:.14em; color:var(--redtxt); margin:28px 0 6px; text-transform:uppercase; }
.sub { color:var(--dim); font-size:12px; letter-spacing:.16em; text-transform:uppercase; margin:0 0 22px; }
.note { color:var(--dim); font-size:13px; line-height:1.55; margin:0 0 16px; }
a { color:var(--redtxt); }
a:hover { color:#fff; }

/* rozmowa: glos maszyny = mono; czerwony pas po lewej, gdy kanal otwarty */
#log { font-family:var(--mono); font-size:15px; min-height:96px; padding:2px 0 2px 16px; border-left:4px solid var(--red); }
#log:empty { border-left-color:transparent; }
.turn { margin:0 0 22px; }
.q { color:var(--dim); }
.q::before { content:"> "; color:var(--redtxt); font-weight:700; }
.l { margin:2px 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.l a { word-break:break-all; }
.count { color:var(--redtxt); font-size:22px; letter-spacing:.2em; }

form { display:flex; gap:10px; margin-top:14px; }
input[type=text] { flex:1; min-width:0; background:#0c0c0c; color:var(--fg); border:1.5px solid #3b3732; border-radius:4px; padding:11px 14px; font:15px var(--mono); }
input[type=text]::placeholder { color:#777268; }
input[type=text]:focus { outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(227,18,27,.28); }
button { background:transparent; color:var(--fg); border:1.5px solid var(--red); border-radius:4px; padding:11px 20px; font:700 13px var(--ui); letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }
button:hover:not(:disabled), button:focus-visible { background:var(--red); color:#fff; outline:none; }
button:disabled { opacity:.4; cursor:default; }
#ts { margin:12px 0; min-height:65px; }
#status { color:var(--dim); font-size:12px; margin-top:10px; }
.foot { color:var(--dim); font-size:12px; margin-top:22px; border-top:1px solid var(--line); padding-top:12px; }
.page p { margin:0 0 12px; max-width:62ch; }
.page .lead { font-size:17px; line-height:1.55; color:var(--fg); margin-bottom:8px; }
.page ul { margin:0 0 14px; padding:0 0 0 18px; max-width:62ch; }
.page li { margin:0 0 7px; padding-left:4px; }
.page li::marker { color:var(--red); }
.page .sign { margin-top:26px; padding-top:14px; border-top:1px solid var(--line); color:var(--dim); font:700 12px var(--ui); letter-spacing:.14em; text-transform:uppercase; }
.page .back { display:inline-block; margin-bottom:18px; font-size:12px; }

/* pasek informacji */
.info { margin:0 0 18px; }
.info summary { display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; list-style:none; padding:11px 14px; border:1.5px solid var(--red); border-radius:4px; background:rgba(227,18,27,.10); color:var(--fg); font:700 12px var(--ui); letter-spacing:.08em; text-transform:uppercase; }
.info summary::-webkit-details-marker { display:none; }
.info summary:hover { background:rgba(227,18,27,.20); }
.info summary:focus-visible { outline:2px solid var(--fg); outline-offset:2px; }
.info .arr { width:9px; height:9px; border-right:2px solid var(--redtxt); border-bottom:2px solid var(--redtxt); transform:rotate(-45deg); transition:transform .15s ease; flex:none; margin-right:4px; }
.info[open] .arr { transform:rotate(45deg); }
.info .note { margin:12px 2px 0; }

.sitenav { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:14px; font:600 11px var(--ui); letter-spacing:.1em; text-transform:uppercase; }
.sitenav a { color:var(--dim); text-decoration:none; padding:2px 0; border-bottom:1.5px solid transparent; }
.sitenav a:hover, .sitenav a:focus-visible { color:var(--fg); border-bottom-color:var(--red); outline:none; }
@media (prefers-reduced-motion: reduce) { .info .arr { transition:none; } }

@media (max-width:860px) {
  body::before { position:absolute; right:0; left:0; width:auto; height:24vh; bottom:auto; background-size:230% auto; background-position:92% 0; -webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent); mask-image:linear-gradient(to bottom,#000 40%,transparent); }
  main { max-width:760px; margin:0 auto; padding:calc(20vh) 16px 40px; }
  h1 { font-size:clamp(28px,8vw,40px); }
  #log { padding-left:12px; }
}