:root {
    --page: #F5F8FE; --card: #FFFFFF; --ink: #0D1424; --muted: #626E85;
    --line: #E4EAF5; --field: #F2F5FC; --blue: #3E7BFA; --violet: #8B5CF6;
    --glass: rgba(245,248,254,.82);
  }
  html[data-theme="dark"] {
    --page: #080B12; --card: #111826; --ink: #E9EEF8; --muted: #8E9CB5;
    --line: #1E2735; --field: #161F30; --blue: #6EA0FF; --violet: #A78BFA;
    --glass: rgba(8,11,18,.82);
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--page); color: var(--ink);
         font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
         -webkit-font-smoothing: antialiased; transition: background .25s, color .25s; }
  .wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem 5rem; }

  .top { position: sticky; top: 0; z-index: 20; background: var(--glass);
         backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
  .top-in { max-width: 46rem; margin: 0 auto; padding: .7rem 1.25rem;
            display: flex; align-items: center; gap: .6rem; }
  .logo { display: flex; align-items: center; gap: .55rem; text-decoration: none;
          color: inherit; }
  .logo img { width: 30px; height: 30px; display: block; }
  .logo b { font-size: .95rem; font-weight: 800; letter-spacing: .18em; }
  .tools { display: flex; align-items: center; gap: .45rem;
           margin-inline-start: auto; }
  select { font: inherit; font-size: .85rem; padding: .35rem .55rem;
           color: var(--ink); background: var(--card);
           border: 1px solid var(--line); border-radius: .6rem; }
  .icon { width: 2.2rem; height: 2.2rem; border-radius: .7rem; cursor: pointer;
          border: 1px solid var(--line); background: var(--card); color: var(--ink);
          display: grid; place-items: center; padding: 0; text-decoration: none; }
  .icon svg { width: 1.1rem; height: 1.1rem; }
  .icon.close { background: var(--ink); color: var(--page); border-color: var(--ink); }
  html[data-theme="light"] .icon .moon { display: block; }
  html[data-theme="light"] .icon .sun { display: none; }
  html[data-theme="dark"] .icon .moon { display: none; }
  html[data-theme="dark"] .icon .sun { display: block; }

  h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.15;
       letter-spacing: -.03em; margin: 2.5rem 0 .35rem; }
  h2 { font-size: 1.08rem; margin: 2.2rem 0 .5rem; display: flex; gap: .65rem;
       align-items: baseline; letter-spacing: -.015em; }
  .n { flex: none; width: 1.7rem; height: 1.7rem; border-radius: .55rem;
       background: var(--field); color: var(--blue); font-size: .8rem;
       font-weight: 800; display: inline-flex; align-items: center;
       justify-content: center; }
  .meta { color: var(--muted); font-size: .875rem; margin: 0 0 1.6rem; }
  .intro { background: var(--card); border: 1px solid var(--line);
           border-radius: 1rem; padding: 1.1rem 1.2rem; }
  .intro p:first-child { margin-top: 0; }
  .intro p:last-child { margin-bottom: 0; }
  section p { margin: .5rem 0 0; }
  .contact { margin-top: 2.5rem; padding-top: 1.25rem;
             border-top: 1px solid var(--line); color: var(--muted); }
  a { color: var(--blue); }

  /* Bez JavaScriptu widać wszystkie języki — z nim tylko wybrany. */
  html.js .doc { display: none; }
  html.js .doc.on { display: block; }
  html:not(.js) .doc + .doc { margin-top: 3rem; padding-top: 2rem;
                              border-top: 4px solid var(--line); }
  html:not(.js) .langpick, html:not(.js) .icon.theme { display: none; }