:root{
  --bg:#F2F4F0; --surface:#FFFFFF; --paper:#FBFCF8; --ink:#16201C; --ink-2:#47534D; --ink-3:#5F6B64;
  --moss:#2D4A3D; --moss-soft:#E1E9E2; --line:#CDD5CD; --line-2:#AEBAB1;
  --sun:#E3A912; --sun-ink:#6E5000; --sun-soft:#FBF0CC; --venom:#9E3A17; --venom-soft:#F7E3D9;
  --sky-soft:#E3E9EF; --focus:#1F5FD1; --scrim:rgba(14,20,17,.55);
  --f-ui:"Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-read:"Literata", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --fs:1; color-scheme:light;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1512; --surface:#151D19; --paper:#18221D; --ink:#E4EAE5; --ink-2:#B3BEB7; --ink-3:#9AA69F;
    --moss:#9CC6B0; --moss-soft:#1E2B25; --line:#2B3731; --line-2:#3F4D45;
    --sun:#F0BB2B; --sun-ink:#F0BB2B; --sun-soft:#2A2412; --venom:#F29873; --venom-soft:#2E1C15;
    --sky-soft:#1B232B; --focus:#7FB0FF; --scrim:rgba(0,0,0,.66); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1512; --surface:#151D19; --paper:#18221D; --ink:#E4EAE5; --ink-2:#B3BEB7; --ink-3:#9AA69F;
  --moss:#9CC6B0; --moss-soft:#1E2B25; --line:#2B3731; --line-2:#3F4D45;
  --sun:#F0BB2B; --sun-ink:#F0BB2B; --sun-soft:#2A2412; --venom:#F29873; --venom-soft:#2E1C15;
  --sky-soft:#1B232B; --focus:#7FB0FF; --scrim:rgba(0,0,0,.66); color-scheme:dark;
}
:root[data-contrast="high"]{ --ink-2:var(--ink); --ink-3:var(--ink); --line:var(--ink-3); --line-2:var(--ink); }
:root[data-fs="s"]{--fs:.92} :root[data-fs="l"]{--fs:1.14} :root[data-fs="xl"]{--fs:1.3}
:root[data-underline="on"] a{ text-decoration:underline !important; text-underline-offset:3px }
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none !important}
html{font-size:calc(100% * var(--fs)); height:100%; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px); -webkit-text-size-adjust:100%}
body{margin:0; min-height:100%; background:var(--bg); color:var(--ink); font:400 1rem/1.55 var(--f-ui); -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:41; background:var(--bg)}
img,svg{max-width:100%}
a{color:inherit; text-decoration-color:color-mix(in srgb, currentColor 35%, transparent); text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:3px}
.wrap{max-width:1240px; margin:0 auto; padding:0 clamp(16px,4vw,40px)}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:12px; top:-60px; background:var(--ink); color:var(--bg); padding:10px 14px; z-index:100; border-radius:6px}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 8px)}
.la{font-family:var(--f-read); font-style:italic; font-weight:500}
.la .up,.la .la{font-style:normal}
.prose i.la,.lead i.la,.rows i.la{font-weight:inherit}
.todo{background:var(--sun-soft); color:var(--sun-ink); border-radius:3px; padding:0 .3em; font-style:normal; font-family:var(--f-ui); font-size:.92em}

/* pasek wersji testowej */
.testbar{background:var(--sun-soft); color:var(--ink); border-bottom:1px solid var(--line); font-size:.86rem}
.testbar .wrap{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; padding-top:8px; padding-bottom:8px}
.testbar p{margin:0; flex:1 1 320px}
.testbar label{display:inline-flex; gap:6px; align-items:center}
.testbar button,.testbar a.btn-s{background:transparent; border:1px solid var(--ink-3); border-radius:6px; padding:3px 10px; font-size:.84rem; text-decoration:none}
:root[data-test="off"] .testbar,:root[data-test="off"] .urlnote{display:none}
.urlnote{font-size:.78rem; color:var(--ink-3); margin:6px 0 0}
.urlnote code{font-size:.95em}

/* nagłówek */
.hdr{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; background:var(--bg); border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex; align-items:center; gap:20px; min-height:64px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.logo svg{width:34px; height:34px; color:var(--ink)}
.logo b{display:block; font:800 1.22rem/1 var(--f-ui); letter-spacing:-.02em}
.logo small{display:block; font-size:.72rem; color:var(--ink-3); margin-top:3px}
.nav{display:flex; gap:2px; margin-left:8px; flex:1; min-width:0}
.nav a{padding:8px 10px; border-radius:6px; text-decoration:none; font-weight:500; font-size:.95rem; white-space:nowrap}
.nav a:hover{background:var(--moss-soft)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--sun)}
.tools{display:flex; gap:6px; align-items:center; margin-left:auto}
.ibtn{display:inline-flex; align-items:center; gap:8px; background:transparent; border:1px solid var(--line-2); border-radius:8px; height:38px; padding:0 10px; font-size:.9rem}
.ibtn:hover{border-color:var(--ink-3)}
.ibtn svg{width:18px; height:18px}
.kbd{font-size:.72rem; border:1px solid var(--line-2); border-radius:4px; padding:1px 5px; color:var(--ink-3)}
.burger{display:none}
@media (max-width:1060px){ .nav{display:none} .burger{display:inline-flex} .search-label{display:none} }
.drawer{position:fixed; inset:0; z-index:70; display:none}
.drawer.open{display:block}
.drawer .scrim{position:absolute; inset:0; background:var(--scrim)}
.drawer nav{position:absolute; top:0; right:0; bottom:0; width:min(340px,88vw); background:var(--surface); padding:calc(env(safe-area-inset-top,0px) + 18px) 20px calc(env(safe-area-inset-bottom,0px) + 18px); overflow:auto; display:flex; flex-direction:column; gap:2px}
.drawer nav a{padding:12px 6px; border-bottom:1px solid var(--line); text-decoration:none; font-weight:500}
.drawer nav .grp{font-size:.8rem; color:var(--ink-3); margin:18px 6px 4px}

/* popover dostępności */
.pop{position:absolute; right:clamp(16px,4vw,40px); top:62px; width:min(320px,92vw); background:var(--surface); border:1px solid var(--line-2); border-radius:10px; padding:16px; box-shadow:0 18px 40px -18px rgba(0,0,0,.35); z-index:45}
.pop h2{font:700 1rem/1.2 var(--f-ui); margin:0 0 12px}
.pop .row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line)}
.seg{display:inline-flex; border:1px solid var(--line-2); border-radius:8px; overflow:hidden}
.seg button{border:0; background:transparent; padding:6px 10px; font-size:.86rem}
.seg button[aria-pressed="true"],.seg a[aria-current="true"]{background:var(--ink); color:var(--bg)}
.seg a{display:inline-block; padding:6px 10px; font-size:.86rem; text-decoration:none; color:var(--ink)}
.sw{appearance:none; width:40px; height:22px; border-radius:22px; background:var(--line-2); position:relative; cursor:pointer; flex:none}
.sw::after{content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--surface); transition:left .15s}
.sw:checked{background:var(--moss)} .sw:checked::after{left:21px}

/* postęp czytania: nić stabilimentum */
.progress{position:fixed; top:env(safe-area-inset-top,0px); left:0; height:6px; width:calc(var(--p,0) * 100%); z-index:42; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cpath d='M0 5 L3 1 L6 5 L9 1 L12 5' fill='none' stroke='%23E3A912' stroke-width='1.7'/%3E%3C/svg%3E") repeat-x left center / 12px 6px}

/* hero */
.hero{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(24px,5vw,72px); align-items:center; padding:clamp(28px,6vw,84px) 0 clamp(24px,4vw,48px)}
.hero h1{font:800 clamp(2.3rem,5vw,4.2rem)/1.02 var(--f-ui); letter-spacing:-.028em; margin:0 0 .35em; max-width:17ch}
.hero .lead{font:400 clamp(1.08rem,1.6vw,1.28rem)/1.55 var(--f-read); color:var(--ink-2); max-width:46ch; margin:0 0 26px}
.hsearch{display:flex; gap:0; max-width:560px; border:2px solid var(--ink); border-radius:12px; background:var(--surface); overflow:hidden}
.hsearch input{flex:1; min-width:0; border:0; background:transparent; padding:14px 16px; font:400 1.02rem var(--f-ui); color:var(--ink)}
.hsearch input:focus{outline:none}
.hsearch:focus-within{outline:3px solid var(--focus); outline-offset:2px}
.hsearch button{border:0; background:var(--ink); color:var(--bg); padding:0 20px; font-weight:700}
.quick{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; align-items:center; font-size:.9rem; color:var(--ink-3)}
.quick a{border:1px solid var(--line-2); border-radius:999px; padding:5px 12px; text-decoration:none; color:var(--ink); background:var(--surface)}
.quick a:hover{border-color:var(--ink)}
.web{width:100%; max-width:540px; justify-self:center; aspect-ratio:1; color:var(--ink-3)}
.web .rad{stroke:currentColor; stroke-width:.7; opacity:.55; stroke-dasharray:1; stroke-dashoffset:1; animation:draw .7s ease-out forwards}
.web .spiral{stroke:currentColor; stroke-width:.85; fill:none; opacity:.8; stroke-dasharray:1; stroke-dashoffset:1; animation:draw 2.6s cubic-bezier(.55,.1,.3,1) .55s forwards}
.web .stab{stroke:var(--sun); stroke-width:2.6; fill:none; stroke-linejoin:round; opacity:0; animation:fade .5s ease-out 2.9s forwards}
.web .dew{fill:var(--bg); stroke:currentColor; stroke-width:.6; opacity:0; animation:fade .6s ease-out 3.1s forwards}
.web .spider{opacity:0; animation:fade .6s ease-out 2.7s forwards; color:var(--ink)}
@keyframes draw{to{stroke-dashoffset:0}} @keyframes fade{to{opacity:1}}
.families{font:italic 400 .98rem/1.6 var(--f-read); color:var(--ink-3); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:10px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (max-width:900px){ .hero{grid-template-columns:1fr} .web{max-width:300px; order:-1; justify-self:start} }

/* sekcje */
.sec{padding-top:clamp(36px,5vw,64px); padding-bottom:clamp(36px,5vw,64px)}
.sec-h{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap}
.sec-h h2{font:800 clamp(1.5rem,2.6vw,2.1rem)/1.1 var(--f-ui); letter-spacing:-.018em; margin:0}
.sec-h p{margin:0; color:var(--ink-2); max-width:60ch}
.more{font-weight:700; white-space:nowrap}

/* stan po wyszukaniu w domu: pasek trzech miejsc */
.found{display:grid; grid-template-columns:auto repeat(3,minmax(0,1fr)); border:1px solid var(--line-2); border-radius:12px; overflow:hidden; background:var(--surface)}
.found > div{padding:20px 22px; font:700 1.15rem/1.25 var(--f-ui); background:var(--moss); color:var(--bg); display:flex; align-items:center}
:root[data-theme="dark"] .found > div{color:#0F1512}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .found > div{color:#0F1512} }
.found a{padding:18px 20px; border-left:1px solid var(--line); text-decoration:none; display:grid; gap:4px}
.found a b{font-size:1.02rem} .found a span{color:var(--ink-2); font-size:.9rem}
.found a:hover{background:var(--moss-soft)}
@media (max-width:820px){ .found{grid-template-columns:1fr} .found a{border-left:0; border-top:1px solid var(--line)} }

/* etykieta okazu (specimen label) */
.grid-lab{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px}
.spec{display:grid; grid-template-rows:auto 1fr; text-decoration:none; color:inherit}
.spec:hover .lab{border-color:var(--ink-3)}
.spec:hover figure{filter:saturate(1.1)}
.lab{position:relative; background:var(--paper); border:1px solid var(--line-2); border-radius:2px; padding:13px 15px 12px; display:grid; gap:6px; align-content:start}
.lab::before{content:""; position:absolute; top:11px; right:12px; width:7px; height:7px; border-radius:50%; border:1.5px solid var(--line-2)}
.lab .fam{font:500 .78rem/1.2 var(--f-ui); color:var(--ink-3)}
.lab .la{font-size:1.28rem; line-height:1.15; padding-right:14px}
.lab .pl{font:600 .92rem/1.3 var(--f-ui); margin-top:-2px}
.lab dl{display:grid; grid-template-columns:auto 1fr; gap:2px 10px; font-size:.8rem; border-top:1px dashed var(--line-2); padding-top:8px; margin:4px 0 0}
.lab dt{color:var(--ink-3)} .lab dd{margin:0}
.ph{position:relative; margin:0; aspect-ratio:4/3; background:var(--moss-soft); border:1px solid var(--line-2); border-bottom:0; border-radius:2px 2px 0 0; overflow:hidden; display:grid; place-items:center; color:var(--moss)}
.ph.g-skakuny{background:var(--sun-soft); color:var(--sun-ink)}
.ph.g-inne{background:var(--sky-soft); color:var(--ink-2)}
.ph.g-art{background:var(--surface); color:var(--ink-3)}
.ph > svg{width:58%; height:auto; opacity:.9}
.ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .3s}
.ph img.ok{opacity:1}

/* lista wierszy (indeks artykułów) */
.rows{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.rows li{border-bottom:1px solid var(--line)}
.rows a{display:grid; grid-template-columns:120px minmax(0,1fr); gap:6px 24px; padding:16px 4px; text-decoration:none}
.rows a:hover{background:var(--surface)}
.rows time,.rows .tk{font-size:.85rem; color:var(--ink-3); font-variant-numeric:tabular-nums; padding-top:3px}
.rows b{font:700 1.12rem/1.3 var(--f-ui); display:block}
.rows p{max-width:72ch; margin:4px 0 0; color:var(--ink-2); font:400 .98rem/1.5 var(--f-read); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.rows .k{font-size:.8rem; color:var(--ink-3); display:block; margin-top:6px}
@media (max-width:620px){ .rows a{grid-template-columns:1fr} }

/* grupy */
.bands{display:grid; gap:0; border-top:2px solid var(--ink)}
.band{display:grid; grid-template-columns:120px minmax(0,1fr) auto; gap:24px; align-items:center; padding:22px 0; border-bottom:1px solid var(--line); text-decoration:none}
.band svg{width:96px; height:96px; color:var(--moss)}
.band h3{font:800 1.5rem/1.1 var(--f-ui); margin:0 0 4px; letter-spacing:-.015em}
.band p{margin:0; color:var(--ink-2); max-width:64ch}
.band .fam2{font:italic 400 1rem var(--f-read); color:var(--ink-3)}
.band:hover h3{text-decoration:underline; text-underline-offset:4px}
@media (max-width:620px){ .band{grid-template-columns:64px 1fr} .band svg{width:60px;height:60px} .band .go{display:none} }

/* kroki hodowli (sekwencja) */
.steps{counter-reset:s; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:0; border-top:1px solid var(--line)}
.steps li{counter-increment:s; padding:18px 18px 18px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:44px 1fr; gap:4px 10px}
.steps li::before{content:counter(s); grid-row:span 2; font:800 1.6rem/1 var(--f-ui); color:var(--sun-ink)}
.steps b{font-weight:700} .steps span{color:var(--ink-2); font-size:.94rem}

/* reklama */
.ad{margin:28px 0; display:grid; gap:4px; font-family:var(--f-ui)}
.ad-k{font-size:.72rem; color:var(--ink-3)}
.ad-box{min-height:var(--h,250px); border:1px dashed var(--line-2); border-radius:4px; display:grid; place-items:center; text-align:center; color:var(--ink-3); font-size:.85rem; padding:12px;
  background:repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in srgb, var(--line) 45%, transparent) 11px 12px)}
.ad-box small{display:block; font-size:.76rem}
:root[data-ads="off"] .ad{display:none}

/* okruszki */
.crumbs{font-size:.86rem; color:var(--ink-3); padding-top:18px}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px}
.crumbs li:not(:last-child)::after{content:"›"; margin-left:6px; color:var(--line-2)}
.crumbs a{color:var(--ink-2)}

/* strona wpisu */
.ehead{padding:18px 0 26px; border-bottom:1px solid var(--line); margin-bottom:30px}
.ehead h1{margin:8px 0 12px; font:800 clamp(2rem,4.6vw,3.5rem)/1.04 var(--f-ui); letter-spacing:-.025em; max-width:22ch}
.ehead h1 .la{display:block; font-weight:400; font-size:.82em; letter-spacing:-.01em; margin-top:.12em; color:var(--ink-2)}
.ehead h1.only-la{font-family:var(--f-read); font-style:italic; font-weight:500; letter-spacing:-.015em}
.ehead .lead{font:400 clamp(1.08rem,1.6vw,1.25rem)/1.6 var(--f-read); color:var(--ink-2); max-width:62ch; margin:0}
.emeta{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.88rem; color:var(--ink-3); margin-top:14px}
.emeta a{color:var(--ink-2)}
.art{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(28px,4vw,60px); align-items:start}
.art aside{position:sticky; top:calc(env(safe-area-inset-top,0px) + 84px); display:grid; gap:18px}
@media (max-width:980px){ .art{grid-template-columns:1fr} .art aside{position:static; order:-1} .art aside .ad,.art aside .toc{display:none} }
.hero-fig{aspect-ratio:16/8; border-bottom:1px solid var(--line-2); border-radius:3px; margin-bottom:28px}
.hero-fig > svg{width:30%}
.prose{font:400 1.125rem/1.74 var(--f-read); max-width:68ch}
.prose h2{font:700 clamp(1.35rem,2.2vw,1.65rem)/1.22 var(--f-ui); letter-spacing:-.012em; margin:2.1em 0 .6em}
.prose h3{font:700 1.15rem/1.3 var(--f-ui); margin:1.6em 0 .4em}
.prose p{margin:0 0 1.05em; hyphens:auto}
.prose ul,.prose ol{padding-left:1.25em; margin:0 0 1.2em}
.prose li{margin:.3em 0}
.prose li::marker{color:var(--sun-ink)}
.prose strong{font-weight:600}
.callout{border-left:4px solid var(--sun); background:var(--sun-soft); padding:14px 18px; border-radius:0 6px 6px 0; margin:1.4em 0; font:400 1rem/1.6 var(--f-ui)}
.callout.warn{border-color:var(--venom); background:var(--venom-soft)}
.callout b{display:block; margin-bottom:4px}
.callout p{margin:.3em 0 0}
.planned{border:1px dashed var(--line-2); border-radius:6px; padding:16px 18px; font:400 .98rem/1.6 var(--f-ui); color:var(--ink-2); background:var(--surface)}
.planned ol{margin:.4em 0 0; padding-left:1.2em}
.metr{background:var(--paper); border:1px solid var(--line-2); border-radius:2px; padding:16px 18px; position:relative}
.metr::before{content:""; position:absolute; top:14px; right:14px; width:8px; height:8px; border-radius:50%; border:1.5px solid var(--line-2)}
.metr h2{font:700 .95rem/1.2 var(--f-ui); margin:0 0 4px}
.metr .la{font-size:1.35rem; display:block; margin-bottom:10px}
.metr dl{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; font-size:.88rem; border-top:1px dashed var(--line-2); padding-top:10px}
.metr dt{color:var(--ink-3)} .metr dd{margin:0}
.metr .params{margin-top:12px; border-top:1px dashed var(--line-2); padding-top:10px}
.metr .params h3{font:700 .85rem var(--f-ui); margin:0 0 6px}
.toc{border-top:2px solid var(--ink); padding-top:12px}
.toc h2{font:700 .95rem var(--f-ui); margin:0 0 6px}
.toc ol{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.toc button{background:none; border:0; padding:5px 0 5px 12px; text-align:left; width:100%; font-size:.9rem; color:var(--ink-2); border-left:2px solid var(--line)}
.toc button.on{border-left-color:var(--sun); color:var(--ink); font-weight:600}
.etags{display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 0; padding:0; list-style:none}
.etags a{font-size:.85rem; border:1px solid var(--line-2); border-radius:999px; padding:4px 11px; text-decoration:none}
.share{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:22px 0 0; font-size:.88rem; color:var(--ink-3)}
.share a,.share button{border:1px solid var(--line-2); background:transparent; border-radius:6px; padding:5px 10px; text-decoration:none; font-size:.85rem; color:var(--ink)}
.pn{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:34px 0 0; border-top:1px solid var(--line); padding-top:18px}
.pn a{text-decoration:none; display:grid; gap:2px} .pn a:last-child{text-align:right}
.pn small{color:var(--ink-3)} .pn b{font-weight:700}
.dtable{width:100%; border-collapse:collapse; font:400 .95rem/1.45 var(--f-ui); margin:0 0 1.4em}
.dtable th,.dtable td{border-bottom:1px solid var(--line); padding:9px 10px 9px 0; text-align:left; vertical-align:top}
.dtable th{font-weight:700; color:var(--ink-2); font-size:.85rem}
.tblw{overflow-x:auto; -webkit-overflow-scrolling:touch}
details.faq{border-bottom:1px solid var(--line); padding:12px 0; font:400 1rem/1.6 var(--f-ui)}
details.faq summary{font-weight:700; cursor:pointer}
details.faq p{margin:.6em 0 0}
.tool{border:1px solid var(--line-2); border-radius:8px; padding:16px 18px; background:var(--surface); font:400 1rem/1.5 var(--f-ui); margin:1.2em 0 1.6em}
.tool h3{margin:0 0 10px; font-size:1rem}
.tool output{display:block; margin-top:12px; font-size:1.05rem}
.tool output b{font-size:1.25rem}

/* atlas: filtry, tabela */
.facets{display:flex; flex-wrap:wrap; gap:16px 28px; padding:16px 0 18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:20px}
.facet{border:0; margin:0; padding:0; min-width:0}
.facet legend{font-size:.8rem; color:var(--ink-3); margin-bottom:6px; padding:0}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{border:1px solid var(--line-2); background:var(--surface); border-radius:999px; padding:5px 12px; font-size:.88rem}
.chip[aria-pressed="true"],.chip[aria-current="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.chip[disabled],.chip[aria-disabled="true"]{opacity:.45; cursor:default}
a.chip{text-decoration:none; color:var(--ink)}
.chip .n{font-size:.78rem; opacity:.7; margin-left:4px}
.listbar{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px}
.listbar p{margin:0; color:var(--ink-2)}
.atbl{width:100%; border-collapse:collapse; font-size:.92rem; min-width:760px}
.atbl th{text-align:left; font-size:.8rem; color:var(--ink-3); font-weight:500; border-bottom:2px solid var(--ink); padding:8px 12px 8px 0}
.atbl td{border-bottom:1px solid var(--line); padding:10px 12px 10px 0; vertical-align:top}
.atbl td:first-child a{font-family:var(--f-read); font-style:italic; font-size:1.05rem}
.intro{max-width:70ch; font:400 1.08rem/1.65 var(--f-read); color:var(--ink-2); margin:0 0 18px}
.ph1{font:800 clamp(2rem,4.2vw,3.1rem)/1.06 var(--f-ui); letter-spacing:-.024em; margin:10px 0 12px}
.empty{border:1px dashed var(--line-2); border-radius:8px; padding:26px; text-align:center; color:var(--ink-2)}

/* rozpoznaj */
.wiz{display:grid; gap:26px; max-width:860px}
.wiz fieldset{border:0; padding:0; margin:0}
.wiz legend{font:700 1.2rem var(--f-ui); margin-bottom:10px; padding:0}
.opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px}
.opt{border:1.5px solid var(--line-2); border-radius:10px; padding:14px 16px; text-decoration:none; background:var(--surface); display:grid; gap:2px}
.opt b{font-size:1rem} .opt span{font-size:.86rem; color:var(--ink-2)}
.opt[aria-current="true"]{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); background:var(--moss-soft)}

/* A-Z, słownik */
.letters{display:flex; flex-wrap:wrap; gap:4px; margin:0 0 22px; position:sticky; top:calc(env(safe-area-inset-top,0px) + 65px); background:var(--bg); padding:10px 0; z-index:5; border-bottom:1px solid var(--line)}
.letters button{width:34px; height:34px; border:1px solid var(--line-2); background:var(--surface); border-radius:6px; font-weight:700}
.letters button[disabled]{opacity:.35}
.az h2{font:800 2rem/1 var(--f-ui); margin:26px 0 8px; color:var(--sun-ink)}
.az ul{list-style:none; margin:0; padding:0; columns:3 260px; column-gap:32px}
.az li{break-inside:avoid; padding:5px 0; border-bottom:1px solid var(--line)}
.az li a{text-decoration:none} .az li a .la{font-size:1.06rem} .az li small{display:block; color:var(--ink-3)}
.gloss{display:grid; gap:0; max-width:820px; margin:0}
.gloss > div{display:grid; grid-template-columns:220px 1fr; gap:6px 24px; padding:16px 0; border-bottom:1px solid var(--line)}
.gloss dt{font:700 1.06rem/1.3 var(--f-ui)} .gloss dd{margin:0; font:400 1.02rem/1.6 var(--f-read); color:var(--ink-2)}
@media (max-width:620px){ .gloss > div{grid-template-columns:1fr} }
.cloud h2{font:700 1.15rem var(--f-ui); margin:26px 0 10px}
.cloud ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.cloud a{border:1px solid var(--line-2); border-radius:999px; padding:6px 13px; text-decoration:none; background:var(--surface)}
.notes h2{font:800 1.4rem var(--f-ui); margin:34px 0 10px}
.notes p,.notes li{max-width:78ch}
.form{display:grid; gap:14px; max-width:560px}
.form label{display:grid; gap:4px; font-size:.92rem; font-weight:500}
.form input,.form select,.form textarea{font:inherit; padding:10px 12px; border:1px solid var(--line-2); border-radius:8px; background:var(--surface); color:var(--ink)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--ink); color:var(--bg); border:0; border-radius:8px; padding:11px 18px; font-weight:700; text-decoration:none}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--ink-3)}

/* stopka */
.ftr{margin-top:clamp(48px,7vw,96px); background:var(--moss); color:#EEF3EF; padding:46px 0 calc(28px + 64px)}
:root[data-theme="dark"] .ftr{background:#0B100D; color:var(--ink)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ftr{background:#0B100D; color:var(--ink)} }
.ftr .cols{display:grid; grid-template-columns:1.3fr repeat(4,1fr); gap:28px}
.ftr h2{font:700 .95rem var(--f-ui); margin:0 0 10px; opacity:.85}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:.93rem}
.ftr a{color:inherit} .ftr button{background:none; border:0; padding:0; text-decoration:underline; text-underline-offset:3px; font-size:.93rem}
.ftr .logo svg{color:currentColor}
.ftr .bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; border-top:1px solid rgba(255,255,255,.18); margin-top:34px; padding-top:16px; font-size:.84rem; opacity:.85}
@media (min-width:901px){ .ftr{padding-bottom:28px} }
@media (max-width:900px){ .ftr .cols{grid-template-columns:1fr 1fr} .ftr .cols > :first-child{grid-column:1/-1} }

/* dolny pasek na telefonie */
.mbar{display:none}
@media (max-width:900px){
  .mbar{display:grid; grid-template-columns:repeat(3,1fr); position:fixed; left:0; right:0; bottom:0; z-index:39; background:var(--surface); border-top:1px solid var(--line-2); padding-bottom:env(safe-area-inset-bottom,0px)}
  .mbar a,.mbar button{display:grid; place-items:center; gap:2px; padding:9px 4px; font-size:.76rem; background:none; border:0; text-decoration:none}
  .mbar svg{width:20px; height:20px}
}

/* szukajka Ctrl+K */
.cmdk{position:fixed; inset:0; z-index:80; display:none}
.cmdk.open{display:block}
.cmdk .scrim{position:absolute; inset:0; background:var(--scrim)}
.cmdk .panel{position:relative; margin:calc(env(safe-area-inset-top,0px) + 9vh) auto 0; width:min(680px,94vw); background:var(--surface); border-radius:12px; border:1px solid var(--line-2); box-shadow:0 30px 60px -20px rgba(0,0,0,.45); overflow:hidden}
.cmdk input{width:100%; border:0; border-bottom:1px solid var(--line); background:transparent; padding:18px 20px; font:400 1.15rem var(--f-ui); color:var(--ink)}
.cmdk input:focus{outline:none}
.cmdk ul{list-style:none; margin:0; padding:6px; max-height:min(60vh,520px); overflow:auto}
.cmdk li a{display:grid; grid-template-columns:1fr auto; gap:2px 14px; padding:10px 12px; border-radius:8px; text-decoration:none}
.cmdk li a small{color:var(--ink-3); grid-column:1} .cmdk li a em.t{grid-row:1/3; grid-column:2; align-self:center; font-style:normal; font-size:.76rem; color:var(--ink-3)}
.cmdk li.act a,.cmdk li a:hover{background:var(--moss-soft)}
.cmdk .hint{font-size:.8rem; color:var(--ink-3); padding:10px 16px; border-top:1px solid var(--line)}
mark{background:var(--sun-soft); color:inherit; border-radius:2px}

/* cookies */
.cookie{position:fixed; left:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); width:min(520px,calc(100vw - 32px)); background:var(--surface); border:1px solid var(--line-2); border-radius:12px; padding:18px; z-index:60; box-shadow:0 20px 50px -20px rgba(0,0,0,.4); font-size:.92rem}
@media (max-width:900px){ .cookie{bottom:calc(72px + env(safe-area-inset-bottom,0px))} }
.cookie h2{font:700 1.05rem var(--f-ui); margin:0 0 6px}
.cookie p{margin:0 0 12px; color:var(--ink-2)}
.cookie .acts{display:flex; flex-wrap:wrap; gap:8px}
.cookie .opts2{display:grid; gap:8px; margin:0 0 12px; padding:10px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.cookie .opts2 label{display:flex; justify-content:space-between; gap:10px; align-items:center}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(90px + env(safe-area-inset-bottom,0px)); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:8px; z-index:90; font-size:.9rem}

/* ===== 1.1 PRO ===== */
.specw{position:relative; display:grid}
.specw > .spec{height:100%}
.cmp-t{position:absolute; top:8px; left:8px; z-index:2; display:inline-flex; gap:6px; align-items:center; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); border-radius:999px; font-size:.78rem; padding:3px 10px 3px 7px}
.cmp-t::before{content:""; width:12px; height:12px; border:1.5px solid currentColor; border-radius:3px; box-sizing:border-box}
.cmp-t[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.cmp-t[aria-pressed="true"]::before{background:var(--sun); border-color:var(--sun)}
.tray{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:55; background:var(--surface); border:1px solid var(--line-2); border-radius:12px; padding:10px 12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; max-width:min(980px,calc(100vw - 32px)); box-shadow:0 20px 50px -20px rgba(0,0,0,.4)}
.tray .tt{font-size:.88rem; margin-right:4px}
.tray .tc{display:inline-flex; gap:6px; align-items:center; border:1px solid var(--line-2); border-radius:999px; padding:2px 3px 2px 10px; font-size:.9rem}
.tray .tc button{border:0; background:var(--moss-soft); border-radius:50%; width:24px; height:24px; line-height:1}
.tray .hint2{font-size:.84rem; color:var(--ink-3)}
@media (max-width:900px){ .tray{left:8px; right:8px; bottom:calc(66px + env(safe-area-inset-bottom,0px))} }
.btn.sm{padding:7px 12px; font-size:.86rem; border-radius:7px}
.btn.ghost[aria-pressed="true"]{background:var(--sun-soft); border-color:var(--sun-ink); color:var(--ink)}
.btn.danger{color:var(--venom); border-color:var(--venom)}
.linkbtn{background:none; border:0; padding:0; color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; font-size:.84rem}
.badge{min-width:18px; height:18px; border-radius:9px; background:var(--sun); color:#16201C; font-size:.7rem; font-weight:800; display:inline-grid; place-items:center; padding:0 5px}
.eact{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.kmap{display:block; width:100%; max-width:330px; height:auto}
.kmap .kt rect{fill:var(--moss-soft); stroke:var(--line-2); stroke-width:1}
.kmap .kt text{font:600 11px var(--f-ui); fill:var(--ink-2)}
.kmap .kt text.n{font-weight:800; font-size:13px; fill:var(--ink)}
.kmap .kt.on rect{fill:var(--sun); stroke:var(--sun-ink)}
.kmap .kt.on text{fill:#16201C}
.kmap .kt.off{opacity:.38}
.kmap a{cursor:pointer}
.kmap a:hover rect{stroke:var(--ink); stroke-width:1.5}
.kmap a:focus{outline:none}
.kmap a:focus-visible rect{stroke:var(--focus); stroke-width:3}
.fmap-in{margin-top:12px; max-width:330px}
.hod-label{display:none}
@media (min-width:1440px){ .hod-label{display:inline} }
@media (max-width:1399px){ .search-label{display:none} }
.nav{overflow:hidden}
.metr-map{margin-top:12px; border-top:1px dashed var(--line-2); padding-top:10px}
.nss{max-width:860px; margin:0 0 22px}
.nss caption{text-align:left; font:700 1.05rem var(--f-ui); padding-bottom:6px}
.nss th[scope="row"]{color:var(--ink-3); font-weight:500; width:150px}
.sotd{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:end; padding-top:clamp(28px,4vw,52px); padding-bottom:clamp(28px,4vw,52px); background:linear-gradient(var(--line),var(--line)) center bottom / calc(100% - 2 * clamp(16px,4vw,40px)) 1px no-repeat}
.sotd-k{font:500 .92rem var(--f-ui); color:var(--ink-3); margin:0 0 6px}
.sotd .big{display:block; font:italic 500 clamp(2.5rem,7.4vw,6.4rem)/.96 var(--f-read); letter-spacing:-.025em; text-decoration:none; color:var(--ink); overflow-wrap:anywhere}
.sotd .big:hover{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:8px}
.sotd-pl{font:700 1.15rem var(--f-ui); margin:.5em 0 0}
.sotd-lead{font:400 1.08rem/1.6 var(--f-read); color:var(--ink-2); max-width:58ch; margin:.6em 0 .8em}
.sotd-side dl{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:.88rem; margin:12px 0 0}
.sotd-side dt{color:var(--ink-3)} .sotd-side dd{margin:0}
@media (max-width:820px){ .sotd{grid-template-columns:1fr} }
.recent{padding-top:0; padding-bottom:8px}
.recent h2{font:700 .95rem var(--f-ui); color:var(--ink-3); margin:0 0 8px}
.recent ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.recent a{display:inline-block; border:1px solid var(--line-2); border-radius:999px; padding:5px 13px; text-decoration:none; background:var(--surface)}
.promo{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px 28px; margin-top:26px; padding:20px 22px; border:1.5px solid var(--ink); border-radius:12px; background:var(--surface)}
.promo b{font-size:1.15rem} .promo p{margin:4px 0 0; color:var(--ink-2); max-width:62ch}
.term{font:inherit; color:inherit; background:none; border:0; padding:0; border-bottom:1.5px dotted var(--sun-ink); cursor:help; text-align:inherit}
.term[aria-expanded="true"]{background:var(--sun-soft)}
.tpop{position:absolute; z-index:66; width:min(330px,90vw); background:var(--surface); border:1px solid var(--line-2); border-radius:10px; padding:12px 14px; box-shadow:0 18px 40px -16px rgba(0,0,0,.4); font:400 .92rem/1.5 var(--f-ui)}
.tpop p{margin:6px 0 8px; color:var(--ink-2)}
.fix{font-size:.9rem; color:var(--ink-2); margin:18px 0 0}
.abox{margin-top:28px; padding:16px 18px; border:1px solid var(--line); border-radius:8px; background:var(--surface); font-size:.94rem}
.abox h2{font:700 1rem var(--f-ui); margin:0 0 6px} .abox p{margin:.3em 0}
.cmpsug{font-size:.92rem; color:var(--ink-2); margin:-8px 0 16px}
.cmp-ctl{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.cmp-ctl select{font:inherit; padding:7px 10px; border:1px solid var(--line-2); border-radius:7px; background:var(--surface); color:var(--ink); max-width:300px}
.ctbl{min-width:640px}
.ctbl thead th{vertical-align:bottom; border-bottom:2px solid var(--ink)}
.ctbl .cth{display:block; font-size:1.3rem; line-height:1.15; text-decoration:none; margin-bottom:4px}
.ctbl th[scope="row"]{color:var(--ink-3); font-weight:500; width:170px; padding-left:10px}
.ctbl tr.diff th[scope="row"]{box-shadow:inset 3px 0 0 var(--sun); color:var(--ink)}
.ctbl td .kmap{max-width:220px}
.ctbl.only-diff tr.same{display:none}
.hform{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px 16px; align-items:end; background:var(--surface); border:1px solid var(--line-2); border-radius:12px; padding:18px 20px; margin-top:6px}
.hform h2{grid-column:1/-1; font:800 1.2rem var(--f-ui); margin:0}
.hform label,.pmore label{display:grid; gap:4px; font-size:.88rem; font-weight:500}
.hform input,.hform select,.pmore input,.pmore select,textarea{font:inherit; padding:9px 11px; border:1px solid var(--line-2); border-radius:8px; background:var(--bg); color:var(--ink)}
.hform p{grid-column:1/-1; margin:0}
.pets{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px}
.pet{background:var(--paper); border:1px solid var(--line-2); border-radius:2px; padding:16px 18px; position:relative}
.pet::before{content:""; position:absolute; top:14px; right:14px; width:8px; height:8px; border-radius:50%; border:1.5px solid var(--line-2)}
.pet-h{display:flex; gap:10px; align-items:center; padding-right:18px}
.pet h3{font:800 1.3rem var(--f-ui); margin:0}
.pet-sp{margin:2px 0 10px; font-size:1.1rem} .pet-sp a{text-decoration:none}
.pet dl{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:.86rem; margin:0; border-top:1px dashed var(--line-2); padding-top:8px}
.pet dt{color:var(--ink-3)} .pet dd{margin:0}
.st-line{font-size:.9rem; color:var(--ink-2); margin:12px 0 0}
.st{display:inline-block; padding:2px 10px; border-radius:999px; font-size:.8rem; font-weight:700; margin-right:4px; color:var(--ink)}
.st.due{background:var(--sun); color:#16201C} .st.wait{background:var(--moss-soft)} .st.rest,.st.over{background:var(--venom-soft); color:var(--venom)}
.pact{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.pmore{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line-2); align-items:end}
.plog{list-style:none; margin:12px 0 0; padding:8px 0 0; border-top:1px dashed var(--line-2); font-size:.84rem; color:var(--ink-2); display:grid; gap:2px}
.plog time{color:var(--ink-3); margin-right:6px}
.srow{display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px}
.smap{columns:3 260px; column-gap:36px}
.smap section{break-inside:avoid; margin-bottom:24px}
.smap h2{font:800 1.1rem var(--f-ui); margin:0 0 8px}
.smap ul{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.h2s{font:800 1.35rem var(--f-ui); margin:34px 0 12px}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0; border-top:2px solid var(--ink); border-bottom:1px solid var(--line)}
.kpis div{padding:16px 18px 16px 0} .kpis b{display:block; font:800 2rem/1 var(--f-ui)} .kpis span{color:var(--ink-2); font-size:.9rem}
.bar{display:inline-block; vertical-align:middle; width:min(220px,60%); height:8px; background:var(--line); border-radius:4px; overflow:hidden; margin-right:8px}
.bar i{display:block; height:100%; background:var(--moss)}
.sw-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px}
.swatch{border:1px solid var(--line-2); border-radius:6px; overflow:hidden; font-size:.82rem; background:var(--surface)}
.swatch i{display:block; height:64px; border-bottom:1px solid var(--line)} .swatch div{padding:8px 10px}
.logos{display:flex; flex-wrap:wrap; gap:14px}
.logos > div{display:flex; align-items:center; gap:10px; padding:18px 22px; border-radius:8px; font:800 1.4rem var(--f-ui)}
.logos svg{width:40px; height:40px}
.lg1{background:#F2F4F0; color:#16201C; border:1px solid var(--line-2)} .lg2{background:#2D4A3D; color:#EEF3EF}
.comps{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; align-items:start}
.vers li{margin:.4em 0}
@media (max-width:900px){ .mbar{grid-template-columns:repeat(4,1fr)} }
@media print{ .noprint,.tray,.tpop,.eact,.cmp-t{display:none!important} .pets{display:block} .pet{break-inside:avoid; margin-bottom:12px} }
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001s!important; animation-delay:0s!important; transition:none!important} }
:root[data-motion="reduce"] *,:root[data-motion="reduce"] *::before{animation-duration:.001s!important; animation-delay:0s!important; transition:none!important}
@media print{ .hdr,.testbar,.ftr,.mbar,.ad,.art aside,.share,.cookie,.progress{display:none!important} .art{display:block} body{background:#fff; color:#000} }

/* ===================== WordPress ===================== */
.admin-bar .hdr{top:calc(32px + env(safe-area-inset-top,0px))}
.admin-bar .progress{top:32px}
@media screen and (max-width:782px){ .admin-bar .hdr{top:calc(46px + env(safe-area-inset-top,0px))} .admin-bar .progress{top:46px} }
@media screen and (max-width:600px){ .admin-bar .hdr{top:env(safe-area-inset-top,0px)} }
.screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.hp{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden}
.prose img,.prose video,.prose iframe{max-width:100%; height:auto; border-radius:3px}
.prose figure{margin:1.4em 0} .prose figcaption,.wp-caption-text,.wp-element-caption{font:400 .86rem/1.4 var(--f-ui); color:var(--ink-3); margin-top:6px}
.prose .alignleft{float:left; margin:.3em 1.4em 1em 0; max-width:50%} .prose .alignright{float:right; margin:.3em 0 1em 1.4em; max-width:50%}
.prose .aligncenter{display:block; margin-left:auto; margin-right:auto}
.prose table,.prose .wp-block-table table{width:100%; border-collapse:collapse; font:400 .95rem/1.45 var(--f-ui); margin:0 0 1.4em; display:block; overflow-x:auto}
.prose th,.prose td{border-bottom:1px solid var(--line); padding:9px 10px 9px 0; text-align:left; vertical-align:top}
.prose blockquote{margin:1.4em 0; padding:4px 0 4px 18px; border-left:3px solid var(--sun); color:var(--ink-2)}
.prose a{color:var(--moss)} :root[data-theme="dark"] .prose a{color:var(--moss)}
.prose h2[id],.prose h3[id]{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 90px)}
.prose::after{content:""; display:table; clear:both}
.atlas-grid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr))}
.pager{margin:28px 0 0}
.pager ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.pager a,.pager span{display:inline-grid; place-items:center; min-width:40px; height:40px; padding:0 12px; border:1px solid var(--line-2); border-radius:8px; text-decoration:none; background:var(--surface)}
.pager .current{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.pager .dots{border:0; background:none}
.tool-page{max-width:1100px}
.tool-page > p:first-child{font:400 1.08rem/1.65 var(--f-read); color:var(--ink-2); max-width:70ch}
.comments{margin-top:36px; border-top:1px solid var(--line); padding-top:20px; max-width:68ch}
.comments h2{font:800 1.3rem var(--f-ui)}
.comment-list{list-style:none; padding:0} .comment-list li{border-bottom:1px solid var(--line); padding:12px 0}
.comment-form label{display:block; font-weight:500; margin-top:10px} .comment-form input:not([type=checkbox]),.comment-form textarea{width:100%; font:inherit; padding:9px 11px; border:1px solid var(--line-2); border-radius:8px; background:var(--surface); color:var(--ink)}
.comment-form .submit{margin-top:12px; background:var(--ink); color:var(--bg); border:0; border-radius:8px; padding:11px 18px; font-weight:700}
.abox ul{margin:.3em 0 0; padding-left:1.2em}
.cloud .n{font-size:.78rem; color:var(--ink-3); margin-left:2px}