.klucz{padding-block:32px 24px;display:grid;gap:16px;max-width:760px}
.klucz h1{margin:0;font-size:clamp(30px,6vw,44px);line-height:1.1}
.klucz h2{margin:24px 0 0;font-size:clamp(24px,4vw,30px);line-height:1.2}
.klucz p{margin:0}
.klucz ul,.klucz ol{margin:0;padding-left:1.3em;display:grid;gap:8px}
.klucz .kroki{counter-reset:krok;list-style:none;padding:0}
.klucz .kroki li{counter-increment:krok;position:relative;padding-left:40px;min-height:28px}
.klucz .kroki li::before{content:counter(krok);position:absolute;left:0;top:0;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface);box-shadow:0 3px 6px -2px rgba(0,0,0,.3);font:700 15px/1 var(--font)}
.klucz code{padding:1px 6px;background:rgba(0,0,0,.06);border-radius:5px;overflow-wrap:anywhere;font-size:.92em}
.klucz-box{display:flex;gap:8px;flex-wrap:wrap}
.klucz-box input{flex:1 1 280px;min-width:0;padding:10px 12px;border:1px solid rgba(0,0,0,.25);border-radius:8px;font:inherit;background:#fff}
.klucz form{display:grid;gap:12px;justify-items:start}
.klucz .pulapka{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.klucz button{cursor:pointer;font:inherit}
.klucz details{border:1px solid rgba(0,0,0,.15);border-radius:12px;padding:12px 16px;background:rgba(255,255,255,.45);display:grid;gap:10px}
.klucz details+details{margin-top:-4px}
.klucz summary{cursor:pointer;font-weight:700}
.klucz details[open]>summary{margin-bottom:6px}
.klucz .fragment{display:grid;gap:8px;justify-items:start}
.klucz .fragment pre{margin:0;max-width:100%;overflow-x:auto;padding:10px 12px;background:rgba(0,0,0,.06);border-radius:8px;font-size:.88em;line-height:1.45}
.klucz .fragment pre code{padding:0;background:none;white-space:pre;overflow-wrap:normal}
.klucz table{border-collapse:collapse;width:100%;font-size:.95em}
.klucz th,.klucz td{text-align:left;vertical-align:top;padding:8px 10px;border-bottom:1px solid rgba(0,0,0,.12)}
.klucz th{font-weight:700;border-bottom-color:rgba(0,0,0,.3)}
.klucz td:first-child{white-space:nowrap}
@media (max-width:560px){
.klucz table,.klucz tbody,.klucz tr,.klucz td{display:block}
.klucz thead{display:none}
.klucz tr{padding:8px 0;border-bottom:1px solid rgba(0,0,0,.12)}
.klucz td{padding:2px 0;border:0}
.klucz td:first-child{white-space:normal;font-weight:700}
}