/* «Клацни» — стили сайта. Направление «Настроечная таблица» (design/DESIGN.md).
   Правило бренда: цвета разделов только поодиночке, никогда пять подряд. */

@font-face{font-family:"Onest";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/onest-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/onest-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/onest-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/onest-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/onest-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/onest-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/onest-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/onest-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/unbounded-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/unbounded-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2212}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0400-045F}

:root{
  --ink:#1a1c24; --ink-2:#4b5060; --ink-3:#6b7080; --paper:#f3f5f2; --card:#fff; --line:#d9dcd6; --line-2:#e8ebe5;
  --dev:#2f5bea; --dev-bg:#e7edfd; --dev-a:#1e40af;
  --aud:#f04e5a; --aud-bg:#fde8ea; --aud-a:#b3202c;
  --pho:#f5b731; --pho-bg:#fdf3da; --pho-a:#8a5a00;
  --vid:#16a9c8; --vid-bg:#ddf3f8; --vid-a:#0b6378;
  --pdf:#2e9e5b; --pdf-bg:#dff2e6; --pdf-a:#1b6339;
  --neu:#1a1c24; --neu-bg:#eceee9; --neu-a:#1a1c24;
  --ok:#1f9d55; --warn:#b45309; --err:#c0262d;
  --disp:"Unbounded",system-ui,sans-serif; --sans:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --wrap:1360px; --read:720px; --r:16px; --r-sm:10px; --r-xs:6px;
  /* переменные инструментов (tools/src/core/core.css) */
  --t-bg:var(--card); --t-surface:var(--paper); --t-border:var(--line); --t-text:var(--ink); --t-muted:var(--ink-3); --t-accent:var(--dev); --t-accent-text:#fff; --t-radius:var(--r); --t-font:var(--sans); --t-mono:var(--mono); --t-ok:var(--ok); --t-warn:var(--warn); --t-err:var(--err);
}
/* тёмная тема — по кнопке в шапке (site.js, data-theme на <html>) */
:root[data-theme=dark]{
  --ink:#e8eaf0; --ink-2:#b4b9c6; --ink-3:#8d93a1; --paper:#15171d; --card:#1d2028; --line:#333744; --line-2:#272a33;
  --dev-bg:#1b2645; --aud-bg:#3a1d22; --pho-bg:#3a3018; --vid-bg:#13323a; --pdf-bg:#16321f; --neu:#e8eaf0; --neu-bg:#262a33; --neu-a:#e8eaf0;
  --dev-a:#8fa8ff; --aud-a:#ff9aa2; --pho-a:#f5c75a; --vid-a:#6fd3e8; --pdf-a:#7fd6a2;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 var(--sans);min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1 0 auto;width:100%}
a{color:var(--dev-a)} a:hover{text-decoration-thickness:2px}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit}
:focus-visible{outline:3px solid var(--dev);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Шапка */
.hdr{background:var(--card);border-bottom:2px solid var(--ink);position:sticky;top:0;z-index:30}
.hdr__in{display:flex;align-items:center;gap:22px;height:66px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:700 21px var(--disp);letter-spacing:-.01em;flex:none}
.key{position:relative;display:grid;place-items:center;width:34px;height:34px;border:2px solid var(--ink);border-radius:9px;background:var(--card);font:700 17px var(--disp);color:var(--ink);box-shadow:0 3px 0 var(--ink);transform:translateY(-2px);transition:transform .12s,box-shadow .12s}
.key::after{content:"";position:absolute;left:6px;right:6px;bottom:4px;height:3px;border-radius:2px;background:var(--dev)}
.logo:hover .key{transform:translateY(0);box-shadow:0 1px 0 var(--ink)}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.sec{display:inline-flex;align-items:center;gap:7px;color:var(--ink);text-decoration:none;font:600 15px var(--sans);padding:6px 12px;border-radius:999px;border:2px solid transparent;white-space:nowrap}
.sec::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--ink);background:var(--c,var(--neu-bg))}
.sec:hover,.sec[aria-current]{border-color:var(--ink);background:var(--paper)}
.more{position:relative}
.more>button{background:none;cursor:pointer}
.more__list{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:240px;background:var(--card);border:2px solid var(--ink);border-radius:var(--r);padding:8px;box-shadow:4px 4px 0 var(--ink)}
.more.is-open .more__list{display:grid}
.more__list a{color:var(--ink);text-decoration:none;padding:8px 10px;border-radius:var(--r-sm);font-weight:500}
.more__list a:hover{background:var(--paper)}
.find{position:relative;flex:0 1 300px}
.find input{width:100%;height:40px;border:2px solid var(--ink);border-radius:var(--r-sm);background:var(--card);color:var(--ink);padding:0 12px 0 38px}
.find svg{position:absolute;left:11px;top:11px;width:18px;height:18px;color:var(--ink-3)}
.find__res{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--card);border:2px solid var(--ink);border-radius:var(--r-sm);padding:6px;max-height:60vh;overflow:auto;z-index:40}
.find__res.is-open{display:grid}
.find__res a{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;padding:8px;border-radius:var(--r-xs)}
.find__res a:hover,.find__res a.is-active{background:var(--paper)}
.find__res small{color:var(--ink-3);margin-left:auto;font-size:13px}
.theme-btn{flex:none;display:grid;place-items:center;width:40px;height:40px;border:2px solid var(--ink);border-radius:var(--r-sm);background:var(--card);color:var(--ink);cursor:pointer;padding:0}.theme-btn svg{width:20px;height:20px}.theme-btn .i-sun,:root[data-theme=dark] .theme-btn .i-moon{display:none}:root[data-theme=dark] .theme-btn .i-sun{display:block}
.menu-btn{display:none;margin-left:auto;border:2px solid var(--ink);background:var(--card);color:var(--ink);border-radius:var(--r-sm);height:40px;padding:0 12px;font-weight:600;cursor:pointer}

/* Крошки и заголовки */
.crumbs{font-size:14px;color:var(--ink-3);padding:18px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.crumbs li+li::before{content:"→";margin-right:6px;color:var(--ink-3)}
.crumbs a{color:var(--ink-2);text-decoration:none} .crumbs a:hover{text-decoration:underline}
.h1{font:700 clamp(26px,3.4vw,38px)/1.15 var(--disp);letter-spacing:-.015em;margin:10px 0 8px}
.section-page .h1{margin-bottom:20px}.section-page .content{margin-top:28px}
.lead{color:var(--ink-2);margin:0 0 20px;max-width:640px}

/* Наклейки (иконки инструментов) */
.st{flex:none;width:44px;height:44px;border:2px solid var(--ink);border-radius:12px;display:grid;place-items:center;color:var(--ink);background:var(--c,var(--neu-bg))}
.st svg{width:24px;height:24px}
/* иконка: белая на тёмных заливках, чёрная на светлых (жёлтый, голубой) — для контраста */
.st--dev{--c:var(--dev);color:#fff}.st--aud{--c:var(--aud);color:#fff}.st--pho{--c:var(--pho);color:#1a1c24}.st--vid{--c:var(--vid);color:#1a1c24}.st--pdf{--c:var(--pdf);color:#fff}.st--neu{--c:var(--neu);color:var(--card)}
.c-dev{--c:var(--dev)}.c-aud{--c:var(--aud)}.c-pho{--c:var(--pho)}.c-vid{--c:var(--vid)}.c-pdf{--c:var(--pdf)}.c-neu{--c:var(--neu)}

/* Главная */
.top{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;padding:40px 0 30px;align-items:start}
.top h1{font:700 clamp(30px,4vw,46px)/1.1 var(--disp);letter-spacing:-.015em;margin:0 0 14px}
.bigfind{display:flex;gap:8px;background:var(--card);border:2px solid var(--ink);border-radius:var(--r-sm);padding:6px;position:relative}
.bigfind input{flex:1;border:0;outline:none;background:transparent;color:var(--ink);font-weight:500;padding:10px 12px;min-width:0}
.bigfind button{border:2px solid var(--ink);background:var(--ink);color:var(--card);font-weight:600;border-radius:8px;padding:0 18px;cursor:pointer}
.eg{margin-top:12px;font-size:15px;color:var(--ink-3)} .eg a{color:var(--ink-2);margin-right:12px}
.box{background:var(--card);border:2px solid var(--ink);border-radius:var(--r);padding:18px}
.box h2{font:600 15px var(--sans);color:var(--ink-3);margin:0 0 10px}
.row{display:flex;align-items:center;gap:14px;padding:10px 8px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none}
.row:hover{background:var(--paper)}
.row b{display:block;font-weight:600;line-height:1.25}.row b+span{display:block;font-size:14px;color:var(--ink-3)}
.cat{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:10px 0 40px}
.col{background:var(--card);border:2px solid var(--ink);border-radius:var(--r);padding:6px 10px 12px;align-self:start}
.col__h{display:flex;align-items:center;justify-content:space-between;padding:12px 8px 8px;border-bottom:2px dashed var(--line);margin-bottom:6px}
.col__h h2{font:700 18px var(--disp);margin:0;display:flex;align-items:center;gap:10px}
.col__h h2 a{color:var(--ink);text-decoration:none}
.col__h h2 i{width:14px;height:14px;border:2px solid var(--ink);border-radius:4px;background:var(--c)}
.col__h>a{font-size:14px;color:var(--ink-3)}
.big{display:flex;gap:14px;align-items:center;padding:12px 8px;color:var(--ink);text-decoration:none;border-radius:12px}
.big .st{width:54px;height:54px;border-radius:14px;transform:rotate(-3deg);transition:transform .2s}
.big:nth-of-type(2n) .st{transform:rotate(2deg)}
.big:hover .st{transform:rotate(0) scale(1.06)}
.big b{font-weight:700;display:block;line-height:1.2}.big b+span{display:block;font-size:14px;color:var(--ink-3)}
.soon{font-size:13px;color:var(--ink-3);padding:6px 8px 2px}

/* Раздел */
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin:10px 0 30px}
.list .row{background:var(--card);border:2px solid var(--ink);border-radius:var(--r)}
.list .row:hover{box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}
.subhead{font:700 20px var(--disp);margin:30px 0 4px}

/* Страница инструмента */
.tool-wrap{background:var(--card);border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;margin:6px 0 18px}
.tool-wrap__bar{height:6px;background:var(--c,var(--dev))}
.tool-wrap .tool{border:0;border-radius:0}
.tool-root:not([data-mounted]){min-height:var(--h-d,240px)}
@media (max-width:600px){.tool-root:not([data-mounted]){min-height:var(--h-m,280px)}}
.tool-wrap .tool-private{display:none} /* на сайте это говорит строка доверия ниже */
.tool-wrap__trust{display:flex;gap:8px;align-items:center;padding:12px 20px;border-top:2px dashed var(--line);font-size:14px;color:var(--ink-2)}
.tool-wrap__trust svg{flex:none;width:18px;height:18px}
.tool-soon{padding:28px 20px;color:var(--ink-2)}
.next{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 22px}
.next b{font-weight:600;margin-right:4px}
.chip{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--ink);border-radius:999px;padding:5px 12px;color:var(--ink);text-decoration:none;font-weight:500;background:var(--card)}
.chip::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c,var(--neu))}
.chip:hover{background:var(--paper)}
.ad{display:grid;place-items:center;min-height:250px;margin:36px 0;background:var(--card);border:2px solid var(--line);border-radius:var(--r);color:var(--ink-3);font-size:13px}
.ad[data-empty]::before{content:"Реклама"}
.prose .ad{margin:28px 0;max-width:var(--read)}
.ad-floor{display:none}
@media (max-width:600px){.ad{min-height:300px}.ad-floor{display:grid;place-items:center;position:fixed;left:0;right:0;bottom:0;height:64px;background:var(--card);border-top:2px solid var(--line);color:var(--ink-3);font-size:12px;z-index:25}body:has(.ad-floor){padding-bottom:64px}}

.content{display:grid;grid-template-columns:minmax(0,var(--read)) 1fr;gap:48px}
.content>*{min-width:0}.prose{overflow-wrap:break-word}
.prose h2{font:700 24px/1.25 var(--sans);margin:34px 0 12px}
.prose h3{font:600 19px var(--sans);margin:22px 0 8px}
.prose p,.prose li{max-width:var(--read)}
.prose ul,.prose ol{padding-left:22px}.prose li{margin:6px 0}
.prose b,.prose strong{font-weight:600}
.updated{margin-top:28px;color:var(--ink-3);font-size:14px}
.prose table{width:100%;max-width:var(--read);border-collapse:collapse;margin:16px 0;font-size:15px;display:block;overflow-x:auto}
.prose th,.prose td{border:2px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
.prose thead th{background:var(--card);font-weight:600}
.steps{counter-reset:s;list-style:none;padding:0!important;display:grid;gap:10px}
.steps li{counter-increment:s;position:relative;padding:12px 14px 12px 54px;background:var(--card);border:2px solid var(--line);border-radius:var(--r-sm);margin:0!important}
.steps li::before{content:counter(s);position:absolute;left:14px;top:11px;width:26px;height:26px;border:2px solid var(--ink);border-radius:8px;background:var(--dev-bg);display:grid;place-items:center;font:500 13px var(--mono)}
.note{background:var(--dev-bg);border:2px solid var(--ink);border-radius:var(--r-sm);padding:12px 16px}
.faq{display:grid;gap:8px}
.faq details{background:var(--card);border:2px solid var(--line);border-radius:var(--r-sm);padding:0 16px}
.faq details[open]{border-color:var(--ink)}
.faq summary{cursor:pointer;list-style:none;padding:14px 28px 14px 0;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:11px;font:500 20px var(--mono);color:var(--ink-3)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 14px}
.side{display:grid;gap:20px;align-content:start}.side .ad{min-height:600px;position:sticky;top:90px;margin:0}
.toc{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:16px}
.toc__t{font:600 14px var(--sans);color:var(--ink-3);margin:0 0 8px}
.toc ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:15px}
.toc a{color:var(--ink-2);text-decoration:none}.toc a:hover{color:var(--ink);text-decoration:underline}
.related{margin:40px 0}
.related h2{font:700 22px var(--disp);margin:0 0 14px}

/* Подвал */
.ftr{margin-top:56px;border-top:2px solid var(--ink);background:var(--card);font-size:15px}
.ftr__in{display:grid;grid-template-columns:1.3fr repeat(5,1fr);gap:28px;padding-top:32px;padding-bottom:32px}
.ftr h2{font:700 15px var(--sans);margin:0 0 10px;display:flex;align-items:center;gap:8px}
.ftr h2 a{color:var(--ink);text-decoration:none}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ftr a{color:var(--ink-2);text-decoration:none}.ftr a:hover{color:var(--ink);text-decoration:underline}
.ftr p{color:var(--ink-3);margin:12px 0}
.ftr__bottom{border-top:2px solid var(--line);padding-top:14px;padding-bottom:14px;color:var(--ink-3);font-size:14px}

/* Адаптив */
@media (max-width:1100px){.find{flex-basis:200px}.nav .sec{padding:6px 8px}.hdr__in{gap:14px}.cat{grid-template-columns:1fr 1fr}.content{grid-template-columns:1fr}.side{display:none}.ftr__in{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:860px){
  .hdr__in{gap:12px}.nav{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--card);border-bottom:2px solid var(--ink);padding:10px 16px 16px}
  .nav.is-open{display:flex}.nav .sec span{display:inline}.nav .sec{padding:10px 12px}
  .more__list{position:static;box-shadow:none;border:0;padding:0 0 0 18px;display:grid}.more>button{display:none}
  .menu-btn{display:inline-flex;align-items:center}.find{flex:1}.top{grid-template-columns:1fr;padding-top:24px}
}
@media (max-width:600px){.theme-btn{margin-left:auto}.menu-btn{margin-left:0}.wrap{padding:0 16px}.cat{grid-template-columns:1fr}.top .box{display:none}.h1{font-size:25px}.ftr__in{grid-template-columns:1fr 1fr;padding-top:24px;padding-bottom:24px}.find{display:none}.hdr__in{justify-content:space-between}}