@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/instrument-serif-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/instrument-serif-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Rubik;src:url(/assets/fonts/rubik-wght.woff2) format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url(/assets/fonts/dm-mono-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --papier:#f6f3ee;--blatt:#fffdf9;--tinte:#1c1b2e;--grau:#5d5a74;--nebel:#e7e4f2;
  --kobalt:#2f3fb8;--kobalt-tief:#1f2a80;--tomate:#d9482b;--pistazie:#a8c686;--ocker:#e3a93a;
  --linie:#d9d4e6;--serif:"Instrument Serif",Georgia,serif;--sans:Rubik,"Segoe UI",Arial,sans-serif;--mono:"DM Mono",Consolas,monospace;
  --breite:74rem
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--papier);-webkit-text-size-adjust:100%}
body{margin:0;font:400 1.0625rem/1.72 var(--sans);color:var(--tinte);background:var(--papier)}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--kobalt);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--tomate)}
:focus-visible{outline:3px solid var(--ocker);outline-offset:2px}
.pomin{position:absolute;left:-999px;top:0;background:var(--tinte);color:#fff;padding:.5rem 1rem;z-index:9}
.pomin:focus{left:1rem}

/* Adressleiste */
.pasek{background:var(--tinte);color:#c9c6dd;font:.8rem/1 var(--mono);padding:.55rem 1rem}
.pasek div{max-width:var(--breite);margin:0 auto;display:flex;gap:.6rem;align-items:center;overflow:hidden;white-space:nowrap}
.pasek i{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--tomate);box-shadow:1rem 0 0 var(--ocker),2rem 0 0 var(--pistazie);margin-right:2.2rem;flex:none}
.pasek span{overflow:hidden;text-overflow:ellipsis}
.pasek b{color:#fff;font-weight:400}

/* Kopf */
.naglowek{background:var(--blatt);border-bottom:2px solid var(--tinte)}
.naglowek>div{max-width:var(--breite);margin:0 auto;padding:.9rem 1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 2rem}
.znak{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--tinte)}
.znak svg{width:2.4rem;height:2.4rem}
.znak strong{font:italic 400 1.9rem/1 var(--serif);letter-spacing:-.01em}
.znak strong em{font-style:normal;color:var(--tomate)}
.znak small{display:block;font:.72rem/1.2 var(--mono);color:var(--grau);letter-spacing:.02em}
.nawigacja ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem}
.nawigacja a{display:block;padding:.35rem .75rem;border-radius:.4rem;text-decoration:none;color:var(--tinte);font-weight:500;font-size:.95rem}
.nawigacja a:hover{background:var(--nebel);color:var(--tinte)}
.nawigacja a[aria-current]{background:var(--tinte);color:#fff}

.tresc{max-width:var(--breite);margin:0 auto;padding:0 1rem}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12;letter-spacing:-.005em}
h1{font-size:clamp(2.3rem,5.4vw,3.9rem);margin:.2em 0 .35em}
h2{font-size:clamp(1.65rem,3vw,2.2rem);margin:2.2em 0 .5em}
h3{font-size:1.45rem;margin:1.2em 0 .3em}
.okruszki{font:.8rem var(--mono);color:var(--grau);padding:1.4rem 0 0}
.okruszki a{color:var(--grau)}
.okruszki ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem}
.okruszki li+li::before{content:"/";margin-right:.3rem;color:var(--linie)}

/* Startseite */
.otwarcie{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center;padding:3rem 0 2.5rem}
.otwarcie h1 em{color:var(--kobalt)}
.otwarcie p{font-size:1.2rem;color:#35334b;max-width:36rem}
.przyciski{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.przycisk{display:inline-block;padding:.75rem 1.25rem;border-radius:2rem;background:var(--tomate);color:#fff;text-decoration:none;font-weight:600;border:2px solid var(--tomate)}
.przycisk:hover{background:var(--tinte);border-color:var(--tinte);color:#fff}
.przycisk.jasny{background:transparent;color:var(--tinte);border-color:var(--tinte)}
.przycisk.jasny:hover{background:var(--tinte);color:#fff}
.otwarcie figure{margin:0}
.otwarcie figure svg{border-radius:1rem;border:2px solid var(--tinte);box-shadow:.6rem .6rem 0 var(--kobalt)}

.etykieta{font:.78rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tomate);margin:0 0 .4rem}
.plan{background:var(--blatt);border:2px solid var(--tinte);border-radius:1rem;padding:2rem 1.5rem;margin:1rem 0 3rem}
.plan h2{margin:0 0 .3rem}
.plan>p{margin:0 0 1.5rem;color:var(--grau)}
.plan ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:.8rem;position:relative}
.plan ol::before{content:"";position:absolute;left:1.5rem;right:1.5rem;top:1.45rem;border-top:2px dashed var(--linie)}
.plan li{position:relative;text-align:center}
.plan li a{display:block;text-decoration:none;color:var(--tinte);font-size:.93rem;line-height:1.35}
.plan li b{display:grid;place-items:center;width:3rem;height:3rem;margin:0 auto .55rem;border-radius:50%;background:var(--blatt);border:2px solid var(--tinte);font:1.1rem var(--mono);position:relative}
.plan li a:hover b{background:var(--tomate);border-color:var(--tomate);color:#fff}

.dzialy{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1rem 0 3rem}
.dzial{background:var(--blatt);border:2px solid var(--tinte);border-radius:.3rem 1rem 1rem 1rem;padding:1.3rem 1.2rem 1.1rem;position:relative;margin-top:1.1rem}
.dzial::before{content:attr(data-nr);position:absolute;top:-1.15rem;left:-2px;padding:.1rem .8rem;font:.78rem/1.7 var(--mono);background:var(--kolor,var(--kobalt));color:#fff;border:2px solid var(--tinte);border-bottom:0;border-radius:.4rem .4rem 0 0}
.dzial h3{margin:0 0 .4rem}
.dzial h3 a{color:var(--tinte);text-decoration:none}
.dzial p{font-size:.95rem;color:var(--grau);margin:0 0 .8rem}
.dzial ul{list-style:none;margin:0;padding:0;font-size:.92rem}
.dzial li{padding:.25rem 0;border-top:1px solid var(--nebel)}
.dzial li a{text-decoration:none}

.dla-kogo{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:1rem 0 3rem}
.dla-kogo a{display:block;text-decoration:none;color:var(--tinte);background:var(--blatt);border-radius:1rem;overflow:hidden;border:2px solid var(--tinte)}
.dla-kogo img{aspect-ratio:4/3;object-fit:cover;width:100%;border-bottom:2px solid var(--tinte)}
.dla-kogo span{display:block;padding:1rem 1.1rem 1.2rem}
.dla-kogo strong{display:block;font:400 1.55rem/1.15 var(--serif);margin-bottom:.3rem}
.dla-kogo a:hover strong{color:var(--tomate)}

.pas{background:var(--kobalt);color:#fff;border-radius:1rem;padding:2rem 1.6rem;margin:0 0 3rem;display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center}
.pas h2{margin:0 0 .4rem;color:#fff}
.pas p{margin:0;color:#dcdff7}
.pas ul{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.pas li a{display:block;padding:.2rem .7rem;border:1px solid #8c95e0;border-radius:2rem;color:#fff;text-decoration:none;font:.82rem var(--mono)}
.pas li a:hover{background:#fff;color:var(--kobalt)}
.pas .przycisk{background:var(--ocker);border-color:var(--ocker);color:var(--tinte)}

.pytania{max-width:48rem;margin:0 0 3rem}
.pytania details{border-bottom:1px solid var(--linie);padding:.9rem 0}
.pytania summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.pytania summary::-webkit-details-marker{display:none}
.pytania summary::after{content:"+";font:1.3rem/1 var(--mono);color:var(--tomate)}
.pytania details[open] summary::after{content:"–"}
.pytania details p{margin:.6rem 0 0;color:#35334b}
.wstep{max-width:46rem}
.wstep p{font-size:1.08rem}

/* Artikel */
.artykul{display:grid;grid-template-columns:minmax(0,1fr) 17rem;gap:3rem;padding:1rem 0 3rem}
.naglowek-art{max-width:46rem}
.chip{display:inline-block;font:.78rem var(--mono);text-transform:uppercase;letter-spacing:.07em;padding:.2rem .7rem;border-radius:2rem;background:var(--kolor,var(--kobalt));color:#fff;text-decoration:none}
.chip:hover{color:#fff;background:var(--tinte)}
.meta{font:.82rem var(--mono);color:var(--grau);margin:0 0 1.2rem}
.lead{font:italic 400 1.5rem/1.4 var(--serif);color:#35334b;margin:0 0 1.5rem}
.rycina{margin:1.6rem 0 2rem}
.rycina svg,.rycina img{border-radius:.8rem;border:2px solid var(--tinte);width:100%}
.rycina figcaption{font-size:.85rem;color:var(--grau);margin-top:.5rem;padding-left:.8rem;border-left:3px solid var(--ocker)}
.rycina figcaption a{color:var(--grau)}
.proza{max-width:46rem;counter-reset:h2}
.proza h2{counter-increment:h2;display:flex;gap:.8rem;align-items:baseline}
.proza h2::before{content:counter(h2,decimal-leading-zero);font:.95rem var(--mono);color:var(--tomate);flex:none;transform:translateY(-.2em)}
.proza h2.bez::before{content:none}
.proza ul,.proza ol{padding-left:1.3rem}
.proza li{margin:.3rem 0}
.proza li::marker{color:var(--kobalt)}
.uwaga{background:var(--blatt);border:2px solid var(--tinte);border-left:.6rem solid var(--pistazie);border-radius:0 .8rem .8rem 0;padding:1rem 1.2rem;margin:1.6rem 0}
.uwaga.ostrzezenie{border-left-color:var(--tomate)}
.uwaga p{margin:0}
.kontrola{list-style:none;padding:1.2rem 1.3rem!important;margin:1rem 0 0;background:var(--nebel);border-radius:.8rem}
.kontrola li{position:relative;padding-left:2rem;margin:.45rem 0}
.kontrola li::before{content:"";position:absolute;left:0;top:.28rem;width:1.1rem;height:1.1rem;border:2px solid var(--tinte);border-radius:.25rem;background:var(--blatt)}
.kontrola li::after{content:"";position:absolute;left:.36rem;top:.42rem;width:.35rem;height:.65rem;border:solid var(--tomate);border-width:0 3px 3px 0;transform:rotate(45deg)}
.boczny{position:sticky;top:1rem;align-self:start;font-size:.93rem}
.boczny section{background:var(--blatt);border:2px solid var(--tinte);border-radius:.8rem;padding:1rem 1.1rem;margin-bottom:1rem}
.boczny h2{font:.78rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--tomate);margin:0 0 .6rem}
.boczny ol,.boczny ul{margin:0;padding-left:1.1rem}
.boczny li{margin:.25rem 0}
.boczny li a{text-decoration:none;color:var(--tinte)}
.boczny li a:hover{color:var(--tomate)}
.boczny [aria-current]{font-weight:600;color:var(--kobalt)}
.kartkowanie{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:3rem 0 0;max-width:46rem}
.kartkowanie a{display:block;padding:1rem 1.1rem;background:var(--blatt);border:2px solid var(--tinte);border-radius:.8rem;text-decoration:none;color:var(--tinte)}
.kartkowanie a:hover{box-shadow:.35rem .35rem 0 var(--tomate)}
.kartkowanie small{display:block;font:.75rem var(--mono);color:var(--grau);text-transform:uppercase;letter-spacing:.06em}
.kartkowanie [rel=next]{text-align:right}
.powiazane{margin:3rem 0;border-top:2px solid var(--tinte);padding-top:1rem}
.powiazane h2{margin:.2rem 0 1rem}
.karty{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.karty a{display:block;height:100%;padding:1.1rem;background:var(--blatt);border:2px solid var(--tinte);border-radius:.8rem;text-decoration:none;color:var(--tinte)}
.karty strong{display:block;font:400 1.35rem/1.2 var(--serif);margin-bottom:.35rem}
.karty span{font-size:.92rem;color:var(--grau)}
.karty a:hover strong{color:var(--tomate)}

/* Rubrikseite */
.rubryka{padding:1rem 0 3rem}
.rubryka ol{list-style:none;margin:2rem 0 0;padding:0;max-width:52rem;counter-reset:r}
.rubryka li{counter-increment:r;display:grid;grid-template-columns:3.2rem 1fr;gap:1rem;padding:1.1rem 0;border-top:1px solid var(--linie)}
.rubryka li::before{content:counter(r,decimal-leading-zero);font:1.1rem var(--mono);color:var(--kolor,var(--kobalt));padding-top:.3rem}
.rubryka li a{font:400 1.6rem/1.2 var(--serif);text-decoration:none;color:var(--tinte)}
.rubryka li a:hover{color:var(--tomate)}
.rubryka li p{margin:.25rem 0 0;color:var(--grau)}

/* Glossar */
.abc{display:flex;flex-wrap:wrap;gap:.3rem;margin:1.5rem 0;padding:0;list-style:none}
.abc a{display:grid;place-items:center;width:2.3rem;height:2.3rem;border:2px solid var(--tinte);border-radius:.4rem;text-decoration:none;font:1rem var(--mono);color:var(--tinte);background:var(--blatt)}
.abc a:hover{background:var(--tinte);color:#fff}
.slownik{max-width:50rem;margin:0 0 3rem}
.slownik h2{font-size:2.4rem;color:var(--tomate);border-bottom:2px solid var(--tinte);margin:1.6em 0 .4em;padding-bottom:.1em}
.slownik dl{margin:0}
.slownik dt{font-weight:600;font-size:1.1rem;margin-top:1rem;scroll-margin-top:1rem}
.slownik dd{margin:.2rem 0 0;color:#35334b}
.slownik dd a{font-size:.9rem;font-family:var(--mono)}

/* Memory */
.gra{margin:1.5rem 0 1rem}
.gra-stan{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;font:.9rem var(--mono);margin-bottom:1rem}
.gra-stan button{font:inherit;padding:.45rem 1rem;border-radius:2rem;border:2px solid var(--tinte);background:var(--blatt);cursor:pointer}
.gra-stan button:hover{background:var(--tinte);color:#fff}
.plansza{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.6rem}
.kafel{aspect-ratio:1/1.05;border:2px solid var(--tinte);border-radius:.7rem;background:var(--kobalt);color:#fff;font:600 .9rem/1.25 var(--sans);padding:.4rem;cursor:pointer;display:grid;place-items:center;text-align:center;transition:transform .15s;min-width:0;overflow-wrap:anywhere;hyphens:auto}
.kafel:hover{transform:translateY(-2px)}
.kafel span{visibility:hidden}
.kafel::before{content:"?";font:2rem var(--serif);grid-area:1/1}
.kafel.odkryty,.kafel.para{background:var(--blatt);color:var(--tinte)}
.kafel.odkryty span,.kafel.para span{visibility:visible;grid-area:1/1}
.kafel.odkryty::before,.kafel.para::before{content:none}
.kafel.para{background:var(--pistazie);cursor:default}
.kafel.def{font-weight:400;font-size:.8rem}
.gra-koniec{font-weight:600;color:var(--kobalt)}
.pary{max-width:40rem;border-collapse:collapse;margin:1rem 0 3rem;width:100%}
.pary th,.pary td{text-align:left;border-bottom:1px solid var(--linie);padding:.45rem .6rem}
.pary th{font:.78rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--grau)}

.prosty{max-width:46rem;padding:1rem 0 3rem}
.prosty h2{font-size:1.6rem}

/* Fuß */
.stopka{background:var(--tinte);color:#c9c6dd;margin-top:2rem;border-top:.5rem solid var(--kobalt);font-size:.93rem}
.stopka>div{max-width:var(--breite);margin:0 auto;padding:2.5rem 1rem 1.5rem;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.stopka strong{font:italic 400 1.7rem/1 var(--serif);color:#fff}
.stopka strong em{font-style:normal;color:var(--tomate)}
.stopka h2{font:.75rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ocker);margin:0 0 .6rem}
.stopka ul{list-style:none;margin:0;padding:0}
.stopka li{margin:.3rem 0}
.stopka a{color:#fff;text-decoration:none}
.stopka a:hover{color:var(--ocker)}
.stopka p{margin:.6rem 0 0}
.stopka .dol{grid-column:1/-1;border-top:1px solid #3a3852;padding-top:1rem;font:.78rem var(--mono);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem}

@media (max-width:980px){
  .artykul{grid-template-columns:1fr;gap:1rem}
  .boczny{position:static}
  .boczny .spis{display:none}
  .dzialy{grid-template-columns:1fr 1fr}
  .plan ol{grid-template-columns:repeat(4,1fr);row-gap:1.4rem}
  .plan ol::before{display:none}
}
@media (max-width:720px){
  .otwarcie{grid-template-columns:1fr;padding-top:1.5rem;gap:1.5rem}
  .dla-kogo,.dzialy{grid-template-columns:1fr}
  .plan ol{grid-template-columns:1fr 1fr}
  .plan li{text-align:left}
  .plan li a{display:flex;gap:.7rem;align-items:center}
  .plan li b{margin:0;flex:none;width:2.5rem;height:2.5rem}
  .pas{grid-template-columns:1fr}
  .plansza{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kafel{font-size:.78rem}.kafel.def{font-size:.7rem}
  .kartkowanie{grid-template-columns:1fr}
  .kartkowanie [rel=next]{text-align:left}
  .stopka>div{grid-template-columns:1fr}
  .naglowek>div{flex-direction:column;align-items:flex-start}
  .nawigacja a{padding:.3rem .55rem;font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}