:root{--bg:#eef3f8;--card:#fff;--tx:#14202b;--mut:#66778a;--ac:#03a9f4;--ac-d:#0288d1;--br:#dde6ef;--sh:0 1px 2px rgba(20,32,43,.06),0 8px 24px rgba(20,32,43,.06);color-scheme:light dark}
@media(prefers-color-scheme:dark){:root{--bg:#0e1620;--card:#15202b;--tx:#e6eef6;--mut:#8ea1b4;--ac:#38bdf8;--ac-d:#7dd3fc;--br:#243443;--sh:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25)}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--ac-d);text-decoration:none}a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
img{max-width:100%;height:auto}

/* пошук */
.sf{position:relative;display:flex;align-items:center;background:var(--card);border:1px solid var(--br);border-radius:999px;box-shadow:var(--sh);padding:4px 4px 4px 16px;width:100%;transition:border-color .15s,box-shadow .15s}
.sf:focus-within{border-color:var(--ac);box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 18%,transparent)}
.si{width:20px;height:20px;fill:var(--mut);flex:none}
.sf input{flex:1;min-width:0;border:0;background:none;color:inherit;font:inherit;font-size:1.05rem;padding:12px;outline:none}
.sf input::-webkit-search-cancel-button{display:none}
.sf button{border:0;background:var(--ac);color:#fff;font:inherit;font-weight:600;padding:10px 20px;border-radius:999px;cursor:pointer}
.sf button:hover{background:var(--ac-d)}
.sg{position:absolute;left:0;right:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;background:var(--card);border:1px solid var(--br);border-radius:18px;box-shadow:var(--sh);z-index:20;text-align:left}
.sg a{display:block;padding:10px 14px;border-radius:12px;color:var(--tx)}
.sg a:hover{background:var(--bg);text-decoration:none}

/* головна */
.hero{width:100%;max-width:980px;margin:0 auto;padding:clamp(40px,12vh,120px) 16px 48px;text-align:center}
.logo{display:inline-flex;align-items:center;gap:14px;color:var(--tx);}
.logo:hover{text-decoration:none}
.logo h1{margin:0;font-size:clamp(2.6rem,8vw,4rem);line-height:1;letter-spacing:-.03em;font-weight:800}
.sub{margin:14px 0 28px;color:var(--mut)}
.hero .sf{max-width:640px;margin:0 auto;padding-top:6px;padding-bottom:6px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;margin-top:48px;text-align:left}
.card{background:var(--card);border:1px solid var(--br);border-radius:18px;padding:18px 18px 10px;box-shadow:var(--sh)}
.card[hidden]{display:none}
.card h2{margin:0 0 6px;font-size:1rem}
.card ol{list-style:none;margin:0;padding:0}
.card li+li{border-top:1px solid var(--br)}
.card a{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:9px 0;color:var(--tx)}
.card a:hover{text-decoration:none;color:var(--ac-d)}
.card small{color:var(--mut);white-space:nowrap}
.empty{color:var(--mut);margin:32px auto;max-width:480px}
.grid .empty{grid-column:1/-1}

/* внутрішні сторінки */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--br)}
.top .sf{max-width:560px;box-shadow:none}
.top .sf input{padding:8px}
.top .sf button{padding:8px 16px}
.brand img{display:block;border-radius:10px}
.back{margin-left:auto;font-weight:600;white-space:nowrap}
.wrap{width:100%;max-width:1300px;margin:0 auto;padding:24px 16px 48px;flex:1}
.rh{font-size:1.3rem;margin:8px 0 20px}
.res{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.res a{display:block;background:var(--card);border:1px solid var(--br);border-radius:16px;padding:14px 18px;color:var(--tx)}
.res a:hover{text-decoration:none;border-color:var(--ac)}
.res h2{margin:0 0 4px;font-size:1.1rem;color:var(--ac-d)}
.res p{margin:0;color:var(--mut);font-size:.95rem}
mark{background:color-mix(in srgb,var(--ac) 25%,transparent);color:inherit;border-radius:3px;padding:0 2px}

/* стаття */
.art{background:var(--card);border:1px solid var(--br);border-radius:20px;padding:clamp(18px,4vw,40px);box-shadow:var(--sh)}
.art h1{margin:0;font-size:clamp(1.7rem,5vw,2.4rem);line-height:1.2;letter-spacing:-.02em;overflow-wrap:anywhere}
.meta{color:var(--mut);font-size:.9rem;margin:6px 0 20px}
.body{font-size:1.05rem;line-height:1.75;overflow-wrap:break-word}
.body p{margin:0 0 1em}
.body h2,.body h3,.body h4{line-height:1.3;margin:1.8em 0 .6em;scroll-margin-top:80px}
.body h2{font-size:1.45rem;padding-bottom:.25em;border-bottom:1px solid var(--br)}
.body h3{font-size:1.2rem}
.body ul,.body ol{padding-left:1.4em;margin:0 0 1em}
.body li{margin:.25em 0}
.body .mw-heading{display:block}
.body sup{font-size:.72em;line-height:0}
.body .hatnote{color:var(--mut);font-style:italic;font-size:.95rem;margin-bottom:1em}
.body blockquote{margin:1em 0;padding:.2em 1em;border-left:3px solid var(--ac);color:var(--mut)}
.body .tw{overflow-x:auto;margin:1em 0;-webkit-overflow-scrolling:touch}
.body table{border-collapse:collapse;font-size:.92rem}
.body th,.body td{border:1px solid var(--br);padding:6px 10px;vertical-align:top}
.body th{background:var(--bg)}
.body table[class*=infobox],.body table[class*=infocard]{float:right;width:min(320px,100%);margin:0 0 1em 1.4em;background:var(--bg);border-radius:12px;overflow:hidden}
.body table[class*=infobox] td,.body table[class*=infobox] th,.body table[class*=infocard] td,.body table[class*=infocard] th{border:0;border-bottom:1px solid var(--br);font-size:.88rem}
.body figure{margin:1em 0}
.body figure[typeof*=Thumb],.body .tright{float:right;max-width:300px;margin:.3em 0 1em 1.4em}
.body figure img{border-radius:10px}
.body figcaption,.body .thumbcaption{font-size:.85rem;color:var(--mut);margin-top:6px}
.body .reflist,.body .references{font-size:.9rem}
.body .gallery{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.body h2{clear:both}
.src{clear:both;margin:32px 0 0;padding-top:16px;border-top:1px solid var(--br);color:var(--mut);font-size:.9rem}
.ft{text-align:center;color:var(--mut);font-size:.85rem;padding:20px 16px calc(24px + env(safe-area-inset-bottom))}
.mw-halign-center{display:grid;justify-content:center}
.mw-halign-center figcaption{text-align:center}
@media(max-width:640px){
  .body table[class*=infobox],.body table[class*=infocard],.body figure[typeof*=Thumb],.body .tright{float:none;width:100%;max-width:100%;margin:1em 0;display:block;overflow-x:auto}
  .back{display:none}
  .sf button{padding:10px 14px}
  .art{border-radius:16px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}