:root{
    --bg:        #14161a;
    --bg-alt:    #1b1e23;
    --fg:        #d4d7dd;
    --fg-dim:    #868d99;
    --accent:    #7fb0ff;
    --accent-2:  #f2a65a;
    --rule:      #2c3038;
    --code-bg:   #0e1013;
  }
  *{ box-sizing:border-box; }
  html{ background:var(--bg); }
  body{
    margin:0;
    background:var(--bg);
    color:var(--fg);
    font-family: "Liberation Mono","DejaVu Sans Mono",Consolas,Menlo,monospace;
    font-size:15px;
    line-height:1.6;
  }
  a{ color:var(--accent); text-decoration:none; }
  a:hover{ text-decoration:underline; color:#fff; }

  .wrap{
    max-width:780px;
    margin:0 auto;
    padding:2.5rem 1.25rem 4rem;
  }

  header.top{
    display:flex;
    align-items:baseline;
    gap:.75rem;
    flex-wrap:wrap;
    border-bottom:1px solid var(--rule);
    padding-bottom:1rem;
    margin-bottom:1.75rem;
  }
  header.top .logo{
    font-weight:bold;
    font-size:1.05rem;
    color:var(--fg);
  }
  header.top .logo span{ color:var(--accent); }
  header.top nav{
    margin-left:auto;
    display:flex;
    gap:1rem;
    font-size:.85rem;
    flex-wrap:wrap;
  }
  header.top nav a{ color:var(--fg-dim); }
  header.top nav a:hover{ color:var(--accent); }

  h1{
    font-size:1.4rem;
    margin:0 0 .35rem;
    letter-spacing:-.01em;
    line-height:1.4;
  }
  .tagline{
    color:var(--fg-dim);
    margin:0 0 1.75rem;
  }

  .ascii-logo{
    background:var(--code-bg);
    border:1px solid var(--rule);
    border-radius:3px;
    padding:1.1rem 1rem;
    overflow-x:auto;
    color:var(--accent);
    font-size:.78rem;
    line-height:1.3;
    margin:0 0 1.75rem;
    text-align:center;
  }
  
  .pomarancz {
    color: #f2a65a; /* pomarańczowy */
  }

  h1.zielony{
    font-size:.95rem;
    color:#4caf50; /* zielony */
    margin:1.5rem 0 .6rem;
  }
  
  h2{
    font-size:1.05rem;
    color:var(--fg);
    border-bottom:1px solid var(--rule);
    padding-bottom:.35rem;
    margin:2.25rem 0 1rem;
  }
  h2::before{
    color:var(--fg-dim);
  }

  h2.niebieski{
    font-size:.95rem;
    color:#007bff;  /* niebieski */
    margin:1.5rem 0 .6rem;
  }

  h2.czerwony{
    font-size:.95rem;
    color:#ff3b3b; /* czerwony */
    margin:1.5rem 0 .6rem;
  }

  h2.fioletowy{
    font-size:.95rem;
    color:#9b59b6; /* fioletowy */
    margin:1.5rem 0 .6rem;
  }

  h2.zielony{
    font-size:.95rem;
    color:#4caf50; /* zielony */
    margin:1.5rem 0 .6rem;
  }

  h3.pomarancz{
    font-size:.95rem;
    color:var(--accent-2); /* pomarańczowy */
    margin:1.5rem 0 .6rem;
  }
  
  p{ margin:0 0 1rem; }

  pre{
    background:var(--code-bg);
    border:1px solid var(--rule);
    border-radius:3px;
    padding:.9rem 1rem;
    overflow-x:auto;
    font-size:.85rem;
    line-height:1.55;
    margin:0 0 1.25rem;
  }
  code{
    background:var(--code-bg);
    border:1px solid var(--rule);
    border-radius:3px;
    padding:.05rem .35rem;
    font-size:.85em;
  }
  pre code{ background:none; border:none; padding:0; }

  .cmt{ color:var(--fg-dim); }

  ul, ol{ margin:0 0 1.25rem; padding-left:1.4rem; }
  li{ margin-bottom:.5rem; }
  li strong{ color:var(--fg); }

  blockquote{
    background:var(--bg-alt);
    border-left:3px solid var(--accent);
    border-radius:3px;
    margin:0 0 1.25rem;
    padding:.9rem 1.1rem;
    color:var(--fg);
  }
  blockquote em{ color:var(--fg-dim); font-style:italic; }

  .example-box{
    background:var(--bg-alt);
    border:1px solid var(--rule);
    border-left:3px solid var(--accent);
    border-radius:3px;
    padding:.9rem 1.1rem;
    margin:0 0 1rem;
  }
  .example-box .label{
    color:var(--fg-dim);
    font-size:.8rem;
    margin-bottom:.35rem;
  }

  dl{ margin:0 0 1.25rem; }
  dt{ color:var(--accent); margin-top:.9rem; font-weight:bold; }
  dt code{ color:var(--accent); background:none; border:none; padding:0; }
  dd{ margin:.3rem 0 0 1.4rem; color:var(--fg); }

  address{
    font-style:normal;
    color:var(--fg-dim);
    line-height:1.7;
  }
  address a{ color:var(--accent); }

  footer{
    border-top:1px solid var(--rule);
    margin-top:2.5rem;
    padding-top:1.25rem;
    color:var(--fg-dim);
    font-size:.8rem;
  }
  footer a{ color:var(--fg-dim); }
  footer a:hover{ color:var(--accent); }

  ::selection{ background:#2a3f5c; }