/* SnowTec — общий слой сайта (26.09.2026).
   Подключается ПОСЛЕ инлайнового <style> каждой страницы, поэтому при равной
   специфичности побеждает он. Цвета не задаёт: берёт переменные страницы
   (--accent, --ink, --line, --muted, --panel), так что у каждой страницы остаётся
   своя палитра, а поведение и отделка одинаковые.

   Зачем он нужен. Страницы сайта — рукописный HTML, и у каждой своя копия базовых
   стилей; одна и та же правка раньше означала 18 правок. Здесь то, что должно быть
   одинаковым везде:
     1. доступность — цели касания 44 px, видимый фокус, контраст подсказок в полях;
     2. отделка — сплошные заливки вместо градиентных, одно возвышение у блока
        (рамка ИЛИ тень), без цветной полосы слева у плашек;
     3. движение — один выезд первого экрана, обратная связь на наведении, появление
        блоков один раз; всё под prefers-reduced-motion;
     4. типографика — длина строки в журнале версий и во вступлениях.
   Библиотек нет: CSS и assets/site.js. Без скрипта всё видно сразу. */

:root{--ease:cubic-bezier(.16,1,.3,1)}
:where(img){height:auto}          /* height в разметке — против сдвигов вёрстки, не для растяжения */
html{scroll-padding-top:12px}

/* ---- 1. доступность ---- */
::placeholder{color:#8f9ba8;opacity:1}   /* было #757575: 4.0:1 на тёмном поле, теперь около 6:1 */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.prod:focus-visible{outline-offset:8px}
.lang button{position:relative}
.lang button::after{content:"";position:absolute;inset:-9px -7px -9px -11px}   /* зона нажатия больше значка; справа не выходит за окно */
.brand{position:relative}
.brand::before{content:"";position:absolute;inset:-9px -6px}   /* зона нажатия 44 px без изменения высоты шапки */
.peq-buy{position:relative}
.peq-buy::before{content:"";position:absolute;inset:-14px -8px}
footer a{position:relative}
footer a::before{content:"";position:absolute;inset:-13px -4px}
@media (pointer:coarse),(max-width:900px){
  body.peqa .navlinks a.plink{min-height:44px;display:inline-flex;align-items:center}
}
/* строка меню на узком экране прокручивается; пока есть куда — справа затухание */
.navlinks.more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}

/* ---- 2. отделка: сплошные заливки, одно возвышение ---- */
body.peqa .btn-primary,body.peqa .btn-amber{background-image:none;background-color:var(--accent);box-shadow:none}
body.peqa .btn-amber{background-color:#ee8a35}
body.peqa .btn-primary:hover{box-shadow:none}
body.peqa .badge{background-image:none;background-color:var(--accent)}
body.peqa .card.hl{background-image:none;background-color:var(--panel);box-shadow:none}
body.peqa .band{background-image:none}
body.peqa .gal-feat,body.peqa .pgal figure{box-shadow:none}   /* рамка ИЛИ тень: у карточек-картинок рамка, у панелей (.shot, .peq-shot) тень */
body.peqa .tubemodel,body.peqa table.m th{letter-spacing:.03em}
body.peqa .ptag{font-size:12.5px;letter-spacing:.03em;text-transform:none}   /* 40 знаков заглавными читаются плохо */

/* ---- 4. длина строки ---- */
.log,.log li,.log p{max-width:62ch}
.log{margin-inline:auto}                 /* «История изменений» — колонка по центру, не слева (правило 20.10.2026) */
#changelog h2{text-align:center}         /* заголовок ленты по центру на всех страницах */
.lead{max-width:62ch}

/* ---- 3. движение ---- */
.prod{transition:border-color .2s,box-shadow .2s}
body.peqa .pshot{transition:border-color .2s}
.prod .pshot img{transition:transform .7s var(--ease)}
body.peqa .prod .btn::after{display:inline-block;transition:transform .25s var(--ease)}
.btn,.peq-dl,.peq-buy{transition-property:opacity,filter,border-color,background-color,color,transform}
.btn:active,.peq-dl:active{transform:translateY(1px)}
.navlinks a.plink{transition:color .15s}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .prod:hover .pshot img{transform:scale(1.03)}
  body.peqa .prod:hover .btn::after{transform:translateX(4px)}
}
.prod:focus-visible .pshot img{transform:scale(1.03)}

@media (prefers-reduced-motion:no-preference){
  /* первый экран: линейка выезжает слева, дальше текст и прибор по очереди */
  @keyframes st-rise{from{opacity:0;transform:translateY(12px)}}
  @keyframes st-rule{from{transform:scaleX(0)}}
  .peq-hero .peq-eyebrow::after{transform-origin:left;animation:st-rule 1s var(--ease) .1s backwards}
  .peq-hero h1,.peq-hero .peq-lede,.peq-hero .peq-sub,.peq-hero .peq-cta,.peq-hero .peq-metawrap{
    animation:st-rise .7s var(--ease) backwards}
  .peq-hero h1{animation-delay:.08s}
  .peq-hero .peq-lede{animation-delay:.16s}
  .peq-hero .peq-sub{animation-delay:.24s}
  .peq-hero .peq-cta{animation-delay:.32s}
  .peq-hero .peq-metawrap{animation-delay:.4s}
  .peq-hero .peq-shot,.peq-hero .hero-shot{animation:st-rise .9s var(--ease) .2s backwards}
  /* блоки ниже первого экрана появляются один раз; класс ставит site.js */
  .js .rv{opacity:0;transform:translateY(14px);
    transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--rvd,0ms)}
  .js .rv.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---- единый шлюз скачивания (download-gate.js) ---- */
.dlg-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(0,0,0,.66)}
.dlg-overlay[hidden]{display:none}
.dlg{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 40px);overflow:auto;
  background:var(--panel,#15181d);color:var(--ink,#eef1f4);border:1px solid var(--line,#2a2f37);
  border-radius:14px;padding:26px 24px 22px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.dlg-x{position:absolute;top:7px;right:8px;width:44px;height:44px;border:0;background:none;
  color:var(--muted,#9aa4b0);font-size:26px;line-height:1;cursor:pointer;border-radius:8px}
.dlg-x:hover{color:var(--ink,#eef1f4)}
.dlg-h{margin:0 28px 6px 0;font-size:22px;line-height:1.2}
.dlg-sub{margin:0 0 16px;color:var(--muted,#9aa4b0);font-size:14px;line-height:1.45}
.dlg-os{display:flex;gap:10px;margin:0 0 16px}
.dlg-osb{flex:1;display:flex;flex-direction:column;gap:3px;min-height:60px;padding:11px 12px;cursor:pointer;
  text-align:left;background:var(--bg,#0e1013);color:var(--ink,#eef1f4);
  border:1px solid var(--line,#2a2f37);border-radius:10px;transition:border-color .15s,background .15s}
.dlg-osb b{font-size:15px}
.dlg-osb span{font-size:11.5px;color:var(--muted,#9aa4b0);letter-spacing:.01em}
.dlg-osb:hover{border-color:var(--muted,#9aa4b0)}
.dlg-osb[aria-pressed="true"]{border-color:var(--accent,#e8a33d);background:color-mix(in srgb,var(--accent,#e8a33d) 12%,var(--bg,#0e1013))}
.dlg-lab{display:block;font-size:13px;color:var(--muted,#9aa4b0);margin:0 0 6px}
.dlg-in{width:100%;box-sizing:border-box;padding:12px 13px;font-size:16px;
  background:var(--bg,#0e1013);color:var(--ink,#eef1f4);border:1px solid var(--line,#2a2f37);border-radius:10px}
.dlg-in:focus-visible{outline:2px solid var(--accent,#e8a33d);outline-offset:1px;border-color:var(--accent,#e8a33d)}
.dlg-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.dlg-ag{display:flex;gap:9px;align-items:flex-start;margin:14px 0 2px;font-size:12.5px;line-height:1.4;color:var(--muted,#9aa4b0)}
.dlg-ag input{margin-top:2px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--accent,#e8a33d)}
.dlg-ag a{color:var(--accent,#e8a33d)}
.dlg-go{width:100%;margin-top:14px;padding:13px;font-size:16px}
.dlg-msg{margin-top:10px;font-size:13.5px;min-height:18px;line-height:1.4}
.dlg-msg.bad{color:#ff7a7a}
.dlg-ok{text-align:center;padding:8px 0 2px}
.dlg-ok[hidden]{display:none}
.dlg-okico{width:48px;height:48px;margin:4px auto 12px;border-radius:50%;
  background:color-mix(in srgb,var(--accent,#e8a33d) 18%,transparent);
  color:var(--accent,#e8a33d);font-size:26px;line-height:48px}
.dlg-ok p{margin:0 0 16px;font-size:15px;line-height:1.5}
@media (max-width:420px){.dlg-os{flex-direction:column}.dlg-h{font-size:20px}}