:root{--bg:#f5f6fb;--card:#fff;--tx:#1b1f33;--mu:#5b6178;--ac:#4f46e5;--ac2:#3730a3;--li:#e4e6f0;--soft:#eef0fd;--warn:#fff6e5;--wb:#f59e0b;--r:14px}
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:17px/1.65 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;overflow-wrap:break-word}
a{color:var(--ac)}a:hover{color:var(--ac2)}
img{max-width:100%;height:auto}
.wrap{max-width:1140px;margin:0 auto;padding:0 16px}
/* шапка (не закреплённая) */
.hd{background:#fff;border-bottom:1px solid var(--li)}
.hd-in{display:flex;align-items:center;gap:14px 20px;min-height:66px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tx)}
.logo-m{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;font-weight:800;font-size:19px}
.logo-t{font-weight:800;font-size:20px;line-height:1.1}
.logo-t small{display:block;font-weight:500;font-size:12.5px;color:var(--mu);margin-top:2px}
.sr{margin-left:auto;position:relative;flex:0 1 320px;min-width:0}
.sr input{width:100%;font:inherit;font-size:15px;padding:9px 14px;border:1px solid var(--li);border-radius:10px;background:var(--bg)}
.sr input:focus{outline:2px solid var(--ac);background:#fff}
.sr-r{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--li);border-radius:12px;box-shadow:0 12px 30px rgba(20,20,60,.15);max-height:70vh;overflow:auto;display:none}
.sr-r.on{display:block}
.sr-r a{display:block;padding:9px 14px;text-decoration:none;color:var(--tx);font-size:15px;line-height:1.35;border-bottom:1px solid var(--li)}
.sr-r a:hover,.sr-r a.cur{background:var(--soft)}
.sr-r small{display:block;color:var(--mu);font-size:12.5px}
.sr-r .none{padding:10px 14px;color:var(--mu);font-size:14px}
.mn{background:#fff;border-bottom:1px solid var(--li)}
.mn-in{display:flex;flex-wrap:wrap;gap:2px 18px;padding-top:6px;padding-bottom:6px;font-size:15px}
.mn a{color:var(--tx);text-decoration:none;padding:3px 0;border-bottom:2px solid transparent;white-space:nowrap}
.mn a:hover,.mn a.on{border-color:var(--ac);color:var(--ac)}
/* крошки */
.bc{font-size:14px;color:var(--mu);margin:18px 0 6px}
.bc a{color:var(--mu)}.bc i{font-style:normal;margin:0 4px;color:#a0a5bb}
/* статья */
main{padding-bottom:40px}
.art{background:var(--card);border-radius:var(--r);padding:28px 40px 34px;margin:10px 0 26px;box-shadow:0 1px 3px rgba(20,20,60,.06)}
.art h1,main>h1{font-size:34px;line-height:1.22;margin:0 0 10px;letter-spacing:-.3px}
.meta{font-size:14px;color:var(--mu);margin-bottom:16px}
.lead{font-size:18.5px;color:#262b44;max-width:780px}
.lead p{margin:0 0 12px}
.answer{max-width:780px;margin:6px 0 16px;padding:14px 18px;border-radius:12px;background:var(--soft);border:1px solid #d6d9fb}
.answer b{display:block;color:var(--ac2);margin-bottom:4px;font-size:15px;text-transform:uppercase;letter-spacing:.4px}
.answer ol{margin:4px 0 0;padding-left:22px}.answer p{margin:0}
.ab{max-width:780px}
.ab h2{font-size:26px;line-height:1.3;margin:36px 0 12px;scroll-margin-top:12px}
.ab h3{font-size:21px;line-height:1.35;margin:26px 0 10px}
.ab p{margin:0 0 14px}
.ab ul,.ab ol{padding-left:24px;margin:0 0 16px}
.ab li{margin:0 0 6px}
.ab blockquote{margin:18px 0;padding:14px 18px;border-left:4px solid var(--ac);background:var(--soft);border-radius:0 10px 10px 0}
.ab blockquote.warn{border-color:var(--wb);background:var(--warn)}
.ab blockquote p:last-child{margin:0}
.ab code{background:#f0f1f7;padding:1px 6px;border-radius:5px;font-size:.92em;word-break:break-word}
/* шаги с отметками */
.ab ol.steps{list-style:none;padding:0;counter-reset:st}
.ab ol.steps>li{counter-increment:st;position:relative;padding:10px 12px 10px 58px;margin:0 0 8px;border:1px solid var(--li);border-radius:12px;background:#fff;min-height:48px}
.ab ol.steps>li:before{content:counter(st);position:absolute;left:12px;top:9px;width:30px;height:30px;border-radius:50%;background:var(--ac);color:#fff;font-weight:700;font-size:15px;line-height:30px;text-align:center}
.ab ol.steps>li.done{background:#f0fdf4;border-color:#bbf7d0}
.ab ol.steps>li.done:before{content:"\2713";background:#16a34a}
.st-b{display:inline-block;margin-left:8px;padding:1px 9px;border:1px solid var(--li);border-radius:8px;background:#fff;font-size:13px;color:var(--mu);cursor:pointer;vertical-align:middle;font-family:inherit}
li.done .st-b{color:#16a34a;border-color:#bbf7d0}
/* вкладки по платформам */
.pf{margin:16px 0 18px;border:1px solid var(--li);border-radius:12px;overflow:hidden}
.pf-t{display:flex;flex-wrap:wrap;background:var(--soft);border-bottom:1px solid var(--li)}
.pf-t button{flex:1 1 auto;font:inherit;font-size:15px;font-weight:600;padding:11px 14px;border:0;background:transparent;color:var(--mu);cursor:pointer;min-height:44px}
.pf-t button.on{background:#fff;color:var(--ac);box-shadow:inset 0 -3px 0 var(--ac)}
.pf>div:not(.pf-t){padding:14px 16px 4px}
.pf.js>div:not(.pf-t):not(.on){display:none}
.pf:not(.js)>div:not(.pf-t):before{content:attr(data-l);display:block;font-weight:700;margin-bottom:6px}
/* кнопка на официальный ресурс */
.go{display:inline-block;padding:11px 20px;border-radius:10px;background:var(--ac);color:#fff!important;font-weight:700;text-decoration:none;font-size:15.5px}
.go:after{content:" \2197"}
.go:hover{background:var(--ac2)}
/* таблицы: прокрутка внутри блока */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 18px;border:1px solid var(--li);border-radius:10px;max-width:100%}
.tw table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px;line-height:1.45}
.tw th{background:var(--soft);text-align:left;font-weight:700}
.tw th,.tw td{padding:9px 12px;border-bottom:1px solid var(--li);vertical-align:top}
.tw tr:last-child td{border-bottom:0}
/* картинки */
.fig{margin:22px auto;max-width:min(100%,640px);text-align:center}
.fig img{display:block;width:auto;max-width:100%;height:auto;margin:0 auto;border-radius:10px;border:1px solid var(--li);cursor:zoom-in}
.fig figcaption{font-size:14px;color:var(--mu);margin-top:8px;line-height:1.45}
.lb{position:fixed;inset:0;z-index:50;background:rgba(10,10,30,.88);display:flex;align-items:center;justify-content:center;padding:12px;cursor:zoom-out}
.lb img{max-width:100%;max-height:100%;border-radius:8px;background:#fff}
/* содержание */
.toc{background:var(--soft);border-radius:12px;padding:14px 20px;margin:18px 0 8px;max-width:780px}
.toc-t{font-weight:700;margin-bottom:6px}
.toc ol{margin:0;padding-left:22px;columns:2;column-gap:32px;font-size:15.5px}
.toc li{margin:0 0 4px;break-inside:avoid}
/* FAQ */
.faq{max-width:780px;margin-top:30px}
.faq h2{font-size:26px;margin:0 0 12px}
.faq details{border:1px solid var(--li);border-radius:10px;margin:0 0 10px;background:#fff}
.faq summary{cursor:pointer;padding:12px 16px;font-weight:700;list-style:none;position:relative;padding-right:40px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:16px;top:9px;font-size:22px;color:var(--ac)}
.faq details[open] summary:after{content:"\2212"}
.faq details p{margin:0;padding:0 16px 14px}
/* блок инструментов в статье */
.tl{max-width:780px;margin:26px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tl a{display:block;padding:12px 14px;border-radius:12px;background:var(--soft);text-decoration:none;color:var(--tx);font-weight:600;font-size:15px;line-height:1.35}
.tl a small{display:block;font-weight:400;color:var(--mu);font-size:13px}
.tl a:hover{background:#e3e6fc}
/* карточки */
.sec-h,.rel-h{font-size:26px;margin:30px 0 14px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{display:flex;flex-direction:column;background:#fff;border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--tx);box-shadow:0 1px 3px rgba(20,20,60,.07);transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,20,60,.1);color:var(--tx)}
.card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:var(--soft)}
.card-b{display:flex;flex-direction:column;gap:6px;padding:14px 16px 18px}
.card-c{font-size:12.5px;color:var(--ac);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.card-t{font-weight:700;font-size:18px;line-height:1.3}
.card-d{font-size:14.5px;color:var(--mu);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* главная */
.hero{background:linear-gradient(135deg,#4338ca,#7c3aed);color:#fff;border-radius:18px;padding:38px 44px;margin:22px 0 10px}
.hero h1{font-size:38px;line-height:1.18;margin:0 0 12px;color:#fff}
.hero p{font-size:18.5px;max-width:760px;margin:0 0 20px;opacity:.95}
.hero-l{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-block;padding:11px 20px;border-radius:10px;background:#fff;color:var(--ac2);font-weight:700;text-decoration:none;font-size:15.5px}
.btn-o{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75)}
.btn:hover{opacity:.92;color:var(--ac2)}.btn-o:hover{color:#fff}
.tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0 6px}
.tools a{display:block;background:#fff;border-radius:var(--r);padding:16px 18px;text-decoration:none;color:var(--tx);box-shadow:0 1px 3px rgba(20,20,60,.07)}
.tools a b{display:block;font-size:17px;margin-bottom:4px;color:var(--ac2)}
.tools a span{font-size:14px;color:var(--mu);line-height:1.4}
.tools a:hover{box-shadow:0 8px 20px rgba(20,20,60,.1)}
.hsecs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px}
.hsec{background:#fff;border-radius:var(--r);padding:20px 22px}
.hsec h2{font-size:21px;margin:0 0 6px}.hsec h2 a{color:var(--tx);text-decoration:none}
.hsec p{color:var(--mu);font-size:14.5px;margin:0 0 10px}
.hl{margin:0;padding-left:20px;font-size:15px}.hl li{margin:0 0 5px}
.cat-d{color:var(--mu);font-size:18px;max-width:780px;margin:0 0 22px}
/* подвал */
.ft{background:#171a33;color:#c8cbe0;margin-top:20px}
.ft-in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px;padding-top:34px;padding-bottom:20px;font-size:15px}
.ft a{color:#c8cbe0;text-decoration:none}.ft a:hover{color:#fff;text-decoration:underline}
.ft ul{list-style:none;margin:0;padding:0}.ft li{margin:0 0 7px}
.ft-logo{font-weight:800;font-size:20px;color:#fff;margin-bottom:8px}
.ft-h{font-weight:700;color:#fff;margin-bottom:10px}
.ft-c{border-top:1px solid #2b2f52;padding-top:14px;padding-bottom:22px;font-size:13.5px;color:#9195b5}
@media (max-width:1024px){
.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.tools{grid-template-columns:repeat(2,minmax(0,1fr))}
.hsecs{grid-template-columns:repeat(2,minmax(0,1fr))}
.art{padding:24px 26px 28px}
}
@media (max-width:700px){
body{font-size:16.5px}
.sr{flex:1 1 100%;margin-left:0}
.mn-in{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:0 16px;scrollbar-width:none}
.art{padding:18px 16px 22px;border-radius:12px}
.art h1,main>h1{font-size:26px}
.lead{font-size:17px}
.ab h2,.faq h2{font-size:22px;margin-top:28px}
.ab h3{font-size:19px}
.ab ol.steps>li{padding-left:50px}
.toc ol{columns:1}
.cards,.hsecs,.tl{grid-template-columns:minmax(0,1fr)}
.tools{grid-template-columns:minmax(0,1fr)}
.hero{padding:26px 20px;border-radius:14px}
.hero h1{font-size:27px}
.hero p{font-size:16.5px}
.ft-in{grid-template-columns:1fr;gap:18px}
.sec-h,.rel-h{font-size:22px}
}