@font-face{font-family:"Amatic SC";font-weight:700;font-display:swap;src:url(/f/amatic-700.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Amatic SC";font-weight:700;font-display:swap;src:url(/f/amatic-700-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Neucha";font-display:swap;src:url(/f/neucha.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Neucha";font-display:swap;src:url(/f/neucha-lat.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Shantell Sans";font-weight:300 800;font-display:swap;src:url(/f/shantell.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
:root{--bg:#1c2120;--chalk:#ecebe4;--dim:#cfd6d1;--y:#f0c25a;--b:#a9daf3;--g:#a6dd9a;--o:#ee7d45;--p:#f5b3c4;
--hd:"Amatic SC",cursive;--tx:"Neucha","Comic Sans MS",cursive;--hw:"Shantell Sans",cursive;
--rough:255px 15px 225px 15px/15px 225px 15px 255px}
*{box-sizing:border-box}html,body{margin:0;overflow-x:hidden;max-width:100%}
body{background:var(--bg);color:var(--chalk);font:19px/1.7 var(--tx);
background-image:radial-gradient(ellipse 70% 9% at 30% 18%,rgba(255,255,255,.06),transparent 70%),radial-gradient(ellipse 60% 8% at 75% 55%,rgba(255,255,255,.05),transparent 70%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:100% 1100px,100% 1100px,300px 300px;background-repeat:repeat-y,repeat-y,repeat}
@media(max-width:760px){body{background-color:#1d3329}}
a{color:var(--y)}
.chk{-webkit-mask-image:url(/grain.png);mask-image:url(/grain.png);-webkit-mask-size:256px;mask-size:256px}
h1,h2,h3,h4{font-family:var(--hd);font-weight:700;letter-spacing:.8px;line-height:1.05;-webkit-mask-image:url(/grain.png);mask-image:url(/grain.png);-webkit-mask-size:256px;mask-size:256px;padding-bottom:4px}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.btn{display:inline-block;font:700 26px/1 var(--hd);letter-spacing:1px;color:var(--y);border:3px solid var(--y);border-radius:var(--rough);padding:10px 22px 8px;text-decoration:none;background:transparent;cursor:pointer;transition:background .15s ease-out}
.btn:hover{background:rgba(240,194,90,.14)}
/* шапка */
.top .wrap{display:flex;align-items:center;gap:22px;padding-top:16px;padding-bottom:12px;border-bottom:2px dashed rgba(236,235,228,.15)}
.logo{font:700 38px/1 var(--hd);letter-spacing:.8px;color:var(--chalk);text-decoration:none;white-space:nowrap}.logo b{color:var(--y)}
.nav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap;font:700 23px var(--hd);letter-spacing:.5px}
.nav a{color:var(--chalk);text-decoration:none}.nav a:hover,.nav a.on{color:var(--y)}
.top .btn{font-size:22px;padding:7px 14px 5px}
@media(max-width:980px){.nav{display:none}.top .btn{margin-left:auto}}
/* шапка статьи */
.post-head .wrap{max-width:860px;padding-top:26px}
.crumbs{font-size:15px;color:var(--dim);margin:0 0 6px}.crumbs a{color:var(--dim)}
.kicker{font:20px var(--hw);color:var(--b);margin:0}
.post-head h1{font-size:clamp(46px,6.4vw,78px);margin:6px 0 10px}
.meta{display:flex;gap:10px;color:var(--dim);font-size:15px}
/* тело статьи */
.article{max-width:860px;margin:0 auto;padding:10px 22px 30px}
.article h2{font-size:clamp(38px,4.6vw,54px);margin:46px 0 14px}
.article h3{font-size:34px;margin:30px 0 10px;color:var(--b)}
.article p{margin:0 0 16px}
.article ul,.article ol{padding-left:24px;margin:0 0 18px}.article li{margin:6px 0}
.article strong,.article b{color:#fff}
.article em{color:var(--y);font-style:normal}
.lede{font-size:22px;line-height:1.6;border-left:4px solid var(--y);padding-left:18px;margin:6px 0 26px!important}
.ktk{border:2px solid rgba(236,235,228,.6);border-radius:var(--rough);padding:16px 22px 10px;margin:0 0 26px}
.ktk .t,.tldr .t,.deffn .term{font:700 28px/1 var(--hd);letter-spacing:.6px;color:var(--y);margin:0 0 8px}
.ktk ul{margin:0}.ktk.cols ul{columns:2;column-gap:30px}
@media(max-width:600px){.ktk.cols ul{columns:1}}
.tldr{border:3px dashed rgba(240,194,90,.7);border-radius:14px 30px 18px 26px;padding:16px 22px;margin:0 0 26px}
.tldr p:last-child{margin:0}
.deffn{border-left:4px solid var(--b);padding:6px 18px;margin:22px 0}
.deffn .term{color:var(--b)}
.pullq{margin:30px 0;padding:6px 0 6px 22px;border-left:4px solid var(--p);font:700 36px/1.15 var(--hd);letter-spacing:.5px;color:var(--chalk)}
.pullq.center{border:0;text-align:center;padding:10px 20px;color:var(--y)}
.pullq cite{display:block;font:15px var(--tx);color:var(--dim);margin-top:8px;letter-spacing:0}
/* таблицы */
.tscroll{overflow-x:auto;margin:20px 0}.tscroll .dtable{min-width:560px;margin:0}
.dtable{width:100%;border-collapse:collapse;margin:20px 0;font-size:17px}
.dtable caption{text-align:left;font:700 28px/1.05 var(--hd);letter-spacing:.5px;color:var(--b);padding-bottom:8px;caption-side:top}
.dtable th{font:700 24px/1.1 var(--hd);letter-spacing:.5px;text-align:left;padding:8px 10px;border-bottom:3px solid rgba(236,235,228,.7);color:var(--y)}
.dtable td{padding:9px 10px;border-bottom:1px dashed rgba(236,235,228,.3);vertical-align:top}
.dtable tr td:first-child{color:#fff}
/* сценарии */
.scen{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}
.scen .s{border:2px solid rgba(236,235,228,.55);border-radius:var(--rough);padding:16px 18px}
.scen .s:nth-child(2){border-color:rgba(169,218,243,.7)}.scen .s:nth-child(3){border-color:rgba(240,194,90,.7)}.scen .s:nth-child(4){border-color:rgba(245,179,196,.7)}
.scen .pick{display:inline-block;font:15px var(--hw);color:var(--g);margin-bottom:2px}
.scen h4{margin:0 0 6px;font-size:30px}.scen p{margin:0;font-size:17px;color:var(--dim)}
@media(max-width:600px){.scen{grid-template-columns:1fr}}
/* метрики */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}.stats.two{grid-template-columns:1fr 1fr}.stats.four{grid-template-columns:repeat(4,1fr)}
.stat{border-left:3px dashed rgba(236,235,228,.35);padding:2px 0 2px 14px}
.stat b{display:block;font:700 48px/1 var(--hd);color:var(--y);letter-spacing:.5px;-webkit-mask-image:url(/grain.png);mask-image:url(/grain.png)}
.stat span{font-size:15px;color:var(--dim);line-height:1.35;display:block}
@media(max-width:600px){.stats,.stats.four{grid-template-columns:1fr 1fr}}
/* бары */
.bars{list-style:none;padding:0!important;margin:22px 0}
.bars li{margin:12px 0}
.bars .bl{display:flex;justify-content:space-between;gap:12px;font-size:17px}.bars .pct{color:var(--y);white-space:nowrap}
.bars .track{height:14px;border:2px solid rgba(236,235,228,.45);border-radius:3px 9px 4px 8px;margin-top:4px;overflow:hidden}
.bars .fill{display:block;height:100%;background:repeating-linear-gradient(-35deg,rgba(166,221,154,.85) 0 4px,rgba(166,221,154,.35) 4px 7px)}
.bars .fill.hi{background:repeating-linear-gradient(-35deg,rgba(238,125,69,.9) 0 4px,rgba(238,125,69,.35) 4px 7px)}
.bars .fill.med{background:repeating-linear-gradient(-35deg,rgba(240,194,90,.9) 0 4px,rgba(240,194,90,.35) 4px 7px)}
.bars .fill.lo{background:repeating-linear-gradient(-35deg,rgba(169,218,243,.9) 0 4px,rgba(169,218,243,.35) 4px 7px)}
/* шаги */
.steps{margin:22px 0;border-left:3px dashed rgba(240,194,90,.6);padding-left:20px}
.step{margin:0 0 16px}.step b{display:block;font:700 28px/1.1 var(--hd);letter-spacing:.5px;color:var(--y)}
.diag{list-style:none;padding:0!important;counter-reset:d;margin:22px 0}
.diag li{counter-increment:d;position:relative;padding-left:66px;margin:0 0 20px}
.diag li:before{content:counter(d);position:absolute;left:0;top:0;width:48px;height:48px;border:3px solid var(--y);border-radius:52% 48% 45% 55%/50% 55% 45% 50%;font:700 30px/42px var(--hd);text-align:center;color:var(--y)}
.diag h4{margin:0 0 4px;font-size:30px}.diag p{margin:0}
.check{list-style:none;padding:0!important;margin:20px 0}
.check li{position:relative;padding-left:38px;margin:10px 0}
.check li:before{content:"";position:absolute;left:2px;top:5px;width:20px;height:20px;border:2px solid var(--g);border-radius:3px 6px 2px 5px}
.check li:after{content:"";position:absolute;left:8px;top:7px;width:8px;height:13px;border:solid var(--g);border-width:0 3px 3px 0;transform:rotate(40deg)}
/* медиа */
.article figure{margin:28px 0}
.article figure img{width:100%;height:auto;display:block;border-radius:6px 14px 8px 12px;border:2px solid rgba(236,235,228,.25)}
.article figcaption{font-size:15px;color:var(--dim);margin-top:8px}
.ig svg{width:100%;height:auto;display:block}
.ig{border:2px dashed rgba(236,235,228,.3);border-radius:var(--rough);padding:14px}
/* перелинковка */
.related-h{font:700 34px var(--hd);letter-spacing:.6px;margin:40px 0 10px!important;-webkit-mask-image:url(/grain.png);mask-image:url(/grain.png)}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.related a{display:block;border:2px solid rgba(236,235,228,.5);border-radius:var(--rough);padding:14px 16px;color:var(--chalk);text-decoration:none;font-size:17px;line-height:1.35}
.related a:hover{border-color:var(--y);color:var(--y)}
@media(max-width:700px){.related{grid-template-columns:1fr}}
/* вопросы */
.qa{border:2px dashed rgba(169,218,243,.5);border-radius:10px;padding:10px 16px;margin:18px 0}
.qa summary{cursor:pointer;font:700 26px var(--hd);letter-spacing:.5px;color:var(--b)}
.qa p{margin:8px 0 0}
.faq{margin:40px 0 10px}
.faq details{padding:10px 0 10px 38px;position:relative;border-bottom:1px dashed rgba(236,235,228,.25)}
.faq details:before{content:"?";position:absolute;left:4px;top:6px;font:700 36px/1 var(--hd);color:var(--p)}
.faq summary{cursor:pointer;font:700 28px/1.15 var(--hd);letter-spacing:.5px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq details[open] summary{color:var(--y)}
.faq p{margin:8px 0 2px;color:var(--dim)}
.post-cta{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:3px solid rgba(240,194,90,.75);border-radius:var(--rough);padding:20px 24px;margin:34px 0}
.post-cta h3{margin:0 0 4px;color:var(--y)}.post-cta p{margin:0;color:var(--dim)}
/* консультация */
.consult .wrap{max-width:860px}
.consult-box{border:2px solid rgba(236,235,228,.6);border-radius:20px 255px 15px 225px/225px 15px 255px 15px;padding:22px 26px;margin:10px 0 40px}
.consult-box h3{margin:0 0 6px;font-size:40px;color:var(--b)}
.consult-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:10px}
.consult-mail{color:var(--y)}
.consult-form{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.consult-form input{flex:1;min-width:220px;background:transparent;border:0;border-bottom:2px solid rgba(236,235,228,.6);color:var(--chalk);font:20px var(--tx);padding:8px 2px}
.consult-note{font-size:13px;color:var(--dim)}.consult-err{color:var(--o)}.consult-ok{color:var(--g);font-weight:700}
/* разделы и хаб */
.sec-head .wrap{max-width:1000px;padding-top:26px}
.sec-head h1{font-size:clamp(44px,6vw,74px);margin:6px 0 12px}
.sec-intro{max-width:820px;color:var(--dim)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin:26px 0 40px}
.card{display:block;border:2px solid rgba(236,235,228,.55);border-radius:var(--rough);overflow:hidden;color:var(--chalk);text-decoration:none}
.card:hover{border-color:var(--y)}
.card img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover}
.card .cb{padding:12px 16px 16px}
.card h3{margin:0 0 6px;font-size:30px;color:var(--chalk)}
.card p{margin:0;font-size:16px;color:var(--dim);line-height:1.45}
.card .tag{font:14px var(--hw);color:var(--b)}
.secs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin:20px 0 40px}
.secbox{border:2px solid rgba(236,235,228,.5);border-radius:var(--rough);padding:16px 20px}
.secbox h2{margin:0 0 6px;font-size:38px}.secbox h2 a{color:var(--chalk);text-decoration:none}.secbox h2 a:hover{color:var(--y)}
.secbox p{margin:0 0 8px;color:var(--dim);font-size:16px}
.secbox ul{margin:0;padding-left:20px;font-size:16px}
footer{border-top:2px dashed rgba(236,235,228,.15);padding:24px 0 40px;color:#8fa59a;font-size:15px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:#b9c7bf}
.fab-consult{position:fixed;right:16px;bottom:16px;background:#1c2120;font-size:22px;padding:8px 16px 6px;z-index:20}
@media(min-width:1100px){.fab-consult{display:none}}
.bars .lbl{color:var(--chalk)}

/* BASE_CSS (art_common) */

.qbox{border:2px solid rgba(240,180,60,.75);border-radius:14px 30px 18px 26px;padding:20px 22px;margin:0 0 28px;display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.qbox .big{font:700 58px/.9 var(--hd);color:var(--y);white-space:nowrap}
.qbox .qt{flex:1;min-width:230px}
.qbox h2{margin:0 0 6px;font:700 26px/1 var(--hd);letter-spacing:1px;color:var(--b)}
.qbox p{margin:0}
.qbox.warn{border-color:rgba(238,125,69,.8)}.qbox.warn .big{color:var(--o)}
.tool{border:2px dashed rgba(236,235,228,.45);border-radius:20px 255px 15px 225px/225px 15px 255px 15px;padding:22px;margin:26px 0}
.tool h3{margin:0 0 4px}
.tool .hint{margin:0 0 16px;color:var(--dim);font-size:16px}
.tool .row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:14px 0}
.tool label{font:700 24px var(--hd);letter-spacing:.5px;min-width:150px}
.tool input[type=range]{flex:1;min-width:180px;accent-color:var(--y)}
.tool input[type=number],.tool select{background:transparent;color:var(--chalk);border:0;border-bottom:2px solid rgba(236,235,228,.6);font:20px var(--tx);padding:6px 2px}
.tool select option{background:#1c2120}
.readout{font:700 34px var(--hd);color:var(--y)}
.stab{width:100%;border-collapse:collapse;margin:14px 0;font-size:17px}
.stab caption{text-align:left;font:700 26px var(--hd);letter-spacing:.5px;color:var(--b);padding-bottom:6px}
.stab td{border-bottom:1px dashed rgba(236,235,228,.3);padding:9px 10px;vertical-align:top}
.stab td:first-child{color:var(--dim);width:42%}
.sidebyside{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px 0}
.sidebyside .col{border:2px solid rgba(236,235,228,.6);border-radius:255px 15px 225px 15px/15px 225px 15px 255px;padding:16px 20px}
.sidebyside .col:nth-child(2){border-color:rgba(240,180,60,.7)}
.sidebyside .col h4{margin:0 0 8px;font:700 28px/1.05 var(--hd);letter-spacing:.5px}
.sidebyside .col ul,.sidebyside .col ol{margin:0;padding-left:20px}.sidebyside .col li{margin:6px 0}
.callout{border-left:4px solid var(--b);padding:12px 18px;margin:22px 0;background:rgba(255,255,255,.03)}
.callout.warn{border-left-color:var(--o)}.callout.tip{border-left-color:var(--g)}
.callout .h{margin:0 0 4px;font:700 26px var(--hd);letter-spacing:.5px}
.callout.warn .h{color:var(--o)}.callout.tip .h{color:var(--g)}.callout.note .h{color:var(--b)}
.callout p{margin:0 0 6px}.callout p:last-child{margin:0}
@media(max-width:600px){.sidebyside{grid-template-columns:1fr}.qbox .big{font-size:46px}.stab td:first-child{width:auto}}