/* Общая таблица стилей разделов siberia-ai.ru.
   Единственный источник: этот файл. Сборка раскладывает его в
   <раздел>/s.css каждого раздела и проверяет, что копии совпали.

   Почему файл один. До 21.09.2026 копий было три, правились руками, и
   instrumenty/s.css с transkribator/s.css были байт в байт одинаковы, а
   nejroset/s.css отставал на 27 правил. Правка в одной копии молча не
   доезжала до двух других. Разбор в seo/СВЕДЕНИЕ-СТИЛЕЙ-2026-09-21.md.

   Слияние проверено сравнением снимков всех страниц до и после: страницы,
   которые не должны были измениться, не изменились ни на точку. */

:root{
  /* «полярная ночь» - темная тема основная, светлая «наст» ниже */
  --bg:#0A1118; --bg-soft:#121B26; --fg:#F2F7FB; --muted:#8FA3B5;
  --line:#1F2C3A; --accent:#4E9CF5; --ok:#3DDCC8; --warn:#F2C14E;
  --code-bg:#0C141C; --term-bg:#060C12; --term-fg:#D7E3EE;
  --sev-crit:#FF7A6B; --sev-high:#F59E63; --sev-med:#F2C14E; --sev-low:#8FA3B5;
  --a1:#3DDCC8; --a2:#4E9CF5; --a3:#9B7BF5;
  --grad:linear-gradient(100deg,#3DDCC8 0%,#4E9CF5 52%,#9B7BF5 100%);
  }
  @media (prefers-color-scheme: light){
    :root{
    --bg:#F5F8FA; --bg-soft:#FFFFFF; --fg:#0E1B26; --muted:#546A7B;
    --line:#DCE5EC; --accent:#2A72D4; --ok:#12A594; --warn:#A2721A;
    --code-bg:#0E1B26; --term-bg:#0E1B26; --term-fg:#E6EDF3;
    --sev-crit:#C6402F; --sev-high:#B15A16; --sev-med:#A2721A; --sev-low:#546A7B;
    --a1:#12A594; --a2:#2A72D4; --a3:#7A56D6;
    --grad:linear-gradient(100deg,#12A594 0%,#2A72D4 52%,#7A56D6 100%);
    }
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--fg);
    font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased}
  code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace}
  .wrap{max-width:1012px;margin:0 auto;padding:0 24px}
  a{color:var(--accent);text-decoration:none}
  a:hover{text-decoration:underline}

  header{background:var(--bg-soft)}
  header .wrap{display:flex;align-items:center;gap:16px;min-height:86px;padding-top:16px;padding-bottom:16px}
  .brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px;color:var(--fg)}
  .brand svg{flex:0 0 auto}
  header nav{margin-left:auto;display:flex;gap:20px;font-size:14px}
  header nav a{color:var(--muted)}
  header nav a:hover{color:var(--fg);text-decoration:none}

  .hero{padding:64px 0 8px}
  .eyebrow{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
  h1{font-size:44px;line-height:1.12;letter-spacing:-.8px;margin:0 0 18px;font-weight:700}
  h1 .em{color:var(--accent)}
  .tagline{font-size:19px;color:var(--muted);max-width:64ch;margin:0 0 26px}
  .badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
  .badge{display:inline-flex;align-items:center;font-size:12px;line-height:1;border:1px solid var(--line);
    border-radius:2em;padding:5px 11px;color:var(--muted);background:var(--bg)}
  .badge b{color:var(--fg);font-weight:600;margin-left:5px}
  .cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 56px}
  .btn{display:inline-block;border:1px solid var(--line);border-radius:6px;padding:9px 18px;font-size:14px;font-weight:600;
    background:var(--bg-soft);color:var(--fg)}
  .btn:hover{text-decoration:none;border-color:var(--muted)}
  .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
  .btn-primary:hover{filter:brightness(1.08);text-decoration:none}

  section{padding:56px 0}

  h2{font-size:26px;letter-spacing:-.3px;margin:0 0 8px;font-weight:650}
  .sub{color:var(--muted);margin:0 0 28px;max-width:70ch}
  h3{font-size:16px;margin:0 0 6px;font-weight:650}
  p{margin:0 0 14px}
  .muted{color:var(--muted)}
  .small{font-size:14px}

  .grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
  .card{border:1px solid var(--line);border-radius:8px;padding:18px 20px;background:var(--bg)}
  .card p{margin:0;color:var(--muted);font-size:14.5px}
  .card .n{font-size:12px;color:var(--muted);font-family:ui-monospace,monospace;margin-bottom:10px}

  .prod{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .prod .card{display:flex;flex-direction:column}
  .status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;margin-bottom:12px}
  .dot{width:8px;height:8px;border-radius:50%;display:inline-block}
  .s-ok{color:var(--ok)} .s-ok .dot{background:var(--ok)}
  .s-wip{color:var(--warn)} .s-wip .dot{background:var(--warn)}
  .lvl{font-family:ui-monospace,monospace;font-size:12px;color:var(--muted)}

  pre{background:var(--code-bg);border:1px solid var(--line);border-radius:8px;padding:14px 16px;
    overflow-x:auto;font-size:13.5px;line-height:1.5;margin:0 0 16px}
  pre.term{background:var(--term-bg);color:var(--term-fg);border-color:#30363d}
  pre .c{color:var(--muted)}
  pre.term .p{color:#3fb950}
  pre.term .crit{color:var(--sev-crit)} pre.term .high{color:var(--sev-high)}
  pre.term .med{color:var(--sev-med)} pre.term .low{color:var(--sev-low)}
  .filename{font-family:ui-monospace,monospace;font-size:12px;color:var(--muted);
    border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;padding:7px 14px;background:var(--bg-soft);display:inline-block}
  .filename + pre{border-radius:0 8px 8px;margin-top:0}

  table{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 14px}
  th,td{text-align:left;padding:11px 14px;border:1px solid var(--line);vertical-align:top}
  th{background:var(--bg-soft);font-weight:600}
  .scroll{overflow-x:auto}

  ul.tight{margin:0 0 14px;padding-left:22px} ul.tight li{margin-bottom:5px}

  .note{border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:0 6px 6px 0;
    padding:14px 18px;background:var(--bg-soft);margin:0 0 16px}
  .note b{color:var(--fg)}

  .kv{display:grid;grid-template-columns:max-content 1fr;gap:8px 28px;font-size:14.5px}
  .kv dt{color:var(--muted)} .kv dd{margin:0}

  footer{padding:36px 0 56px;color:var(--muted);font-size:13.5px;background:var(--bg-soft)}
  footer p{margin:0 0 8px}

  @media (max-width:720px){
    h1{font-size:32px} .tagline{font-size:17px} header nav{display:none}
    .kv{grid-template-columns:1fr;gap:2px 0} .kv dt{margin-top:10px}
  }

  .form{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 8px}
  .form input[type=url]{flex:1 1 340px;min-width:0;padding:10px 12px;font:15px/1.4 ui-monospace,monospace;
    border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg)}
  .form input[type=url]:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
  .form button{border:1px solid var(--line);border-radius:6px;padding:10px 22px;font-size:15px;font-weight:600;
    background:var(--accent);color:#fff;border-color:var(--accent);cursor:pointer}
  .form button:disabled{opacity:.55;cursor:default}
  .hint{font-size:13.5px;color:var(--muted);margin:0 0 26px}
  .score{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 4px}
  .score b{font:600 44px/1 ui-monospace,monospace;letter-spacing:-1px}
  .meta{font-size:13.5px;color:var(--muted);font-family:ui-monospace,monospace}
  .sev{display:inline-block;min-width:74px;font:600 11.5px/1 ui-monospace,monospace;letter-spacing:.04em;
    padding:5px 8px;border-radius:4px;text-align:center;color:#fff}
  .sev-CRITICAL{background:var(--sev-crit)} .sev-HIGH{background:var(--sev-high)}
  .sev-MEDIUM{background:var(--sev-med)} .sev-LOW{background:var(--sev-low)}
  .sev-INFO{background:var(--muted)}
  .finding{border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin:0 0 10px;background:var(--bg)}
  .finding h4{margin:8px 0 6px;font-size:15.5px}
  .finding p{margin:0 0 6px;font-size:14.5px;color:var(--muted)}
  .finding .code{font-family:ui-monospace,monospace;font-size:12.5px;color:var(--muted)}
  .totals{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
  .err{border-left:3px solid var(--sev-crit);padding:10px 14px;background:var(--bg-soft);font-size:14.5px}
  #out{margin-top:26px}
/* effects-20260824 */
  .hero{position:relative;overflow:hidden}
  .hero .wrap{position:relative;z-index:1}
  .hero::before,.hero::after{content:"";position:absolute;pointer-events:none;
    border-radius:50%;filter:blur(70px);opacity:.5}
  .hero::before{width:520px;height:520px;left:-120px;top:-220px;
    background:radial-gradient(circle,var(--accent) 0%,transparent 70%);
    animation:drift-a 18s ease-in-out infinite alternate}
  .hero::after{width:460px;height:460px;right:-140px;bottom:-260px;
    background:radial-gradient(circle,#39c0ed 0%,transparent 70%);
    animation:drift-b 22s ease-in-out infinite alternate}
  @keyframes drift-a{to{transform:translate3d(70px,50px,0) scale(1.12)}}
  @keyframes drift-b{to{transform:translate3d(-60px,-40px,0) scale(1.08)}}

  .reveal{opacity:0;transform:translateY(14px);
    transition:opacity .5s ease,transform .5s ease}
  .reveal.in{opacity:1;transform:none}

  .card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
  .card:hover{transform:translateY(-3px);border-color:var(--accent);
    box-shadow:0 10px 26px rgba(0,0,0,.10)}

  .probe{margin-top:22px;max-width:640px}
  .probe form{display:flex;gap:8px;flex-wrap:wrap}
  .probe input{flex:1 1 280px;min-width:0;padding:11px 14px;font:inherit;
    color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:8px}
  .probe input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
  .probe .hint{margin:8px 0 0;font-size:13px;color:var(--muted)}
  .probe-out{margin-top:16px;display:none;gap:18px;align-items:center;flex-wrap:wrap;
    padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft)}
  .probe-out.on{display:flex}
  .ring{flex:0 0 auto;position:relative;width:104px;height:104px}
  .ring svg{transform:rotate(-90deg)}
  .ring circle{fill:none;stroke-width:9}
  .ring .bg{stroke:var(--line)}
  .ring .fg{stroke:var(--accent);stroke-linecap:round;
    stroke-dasharray:302;stroke-dashoffset:302;transition:stroke-dashoffset 1.1s ease}
  .ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:26px;font-weight:700}
  .probe-body{flex:1 1 260px;min-width:0}
  .probe-body h4{margin:0 0 6px;font-size:15px}
  .probe-body p{margin:0 0 8px;font-size:14px;color:var(--muted)}
  .probe-list{margin:0;padding-left:18px;font-size:14px}
  .probe-list li{margin:2px 0}

  @media (prefers-reduced-motion: reduce){
    .hero::before,.hero::after{animation:none}
    .reveal{opacity:1;transform:none;transition:none}
    .card{transition:none}
    .ring .fg{transition:none}
  }

  
/* единый язык с главной: сияние, скругления, кнопки-пилюли */
body::before,body::after{
  content:""; position:fixed; z-index:-1; pointer-events:none;
  width:52vw; height:52vw; max-width:700px; max-height:700px; border-radius:50%;
  filter:blur(90px); opacity:.18;
}
body::before{top:-16vw; right:-10vw; background:radial-gradient(circle,var(--a1),transparent 66%)}
body::after{top:40vw; left:-16vw; background:radial-gradient(circle,var(--a3),transparent 66%)}
@media (prefers-reduced-motion: reduce){body::before,body::after{display:none}}
.btn,.button,a.cta,button{border-radius:999px}

/* подвал: две колонки, реквизиты слева, статус справа */
.foot{display:grid; grid-template-columns:1fr auto; gap:34px; align-items:start}
.foot p{margin:0 0 6px}
.foot .foot-co{color:var(--fg); font-size:15px; margin-bottom:12px}
.foot-nav{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:16px}
.foot-nav a{font-size:14px}
.foot-sk{text-align:right; max-width:280px}
.foot-sk img{height:34px; width:auto; display:inline-block; margin-bottom:10px}
.foot-sk p{font-size:13px; color:var(--muted-2, var(--muted)); line-height:1.5}
@media (max-width:760px){
  .foot{grid-template-columns:1fr; gap:24px}
  .foot-sk{text-align:left}
}

/* форма проверки - как на главной: поле-пилюля и градиентная кнопка */
.form input{flex:1 1 260px; min-width:0; padding:13px 18px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg); color:var(--fg);
  font-size:16px; font-family:inherit}
.form input:focus{outline:2px solid var(--a2); outline-offset:1px; border-color:transparent}
.form button{border:0; border-radius:999px; padding:14px 28px; font-size:16px; font-weight:600;
  background:var(--grad); color:#04121E; cursor:pointer;
  box-shadow:0 8px 26px rgba(78,156,245,.28);
  transition:transform .15s ease, box-shadow .15s ease}
.form button:hover{transform:translateY(-1px); box-shadow:0 12px 34px rgba(78,156,245,.38)}
@media (prefers-color-scheme: light){.form button{color:#fff}}

/* Раздел расшифровки: поле выбора файла. Остальное наследуется со страницы проверки сайта. */
.form input[type=file]{flex:1 1 320px;min-width:0;padding:13px 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg-soft);color:var(--fg);font:inherit;cursor:pointer}
.form input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;border:0;
  border-radius:9px;background:var(--line);color:var(--fg);font:inherit;font-weight:600;cursor:pointer}
.form input[type=file]:hover{border-color:var(--accent)}
.form input[type=file]::file-selector-button:hover{background:var(--accent);color:#fff}
main h3{margin-top:18px}
main section ul{line-height:1.7}
.note.ok{border-left:3px solid var(--ok);padding:10px 14px;background:var(--bg-soft)}
.note.err{border-left:3px solid var(--sev-crit);padding:10px 14px;background:var(--bg-soft)}
.note p{margin:8px 0 0}
.note a{margin-right:4px}
.form .golosa{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14.5px;
  flex:1 1 100%;margin-top:-4px}
.form .golosa input{flex:0 0 auto;width:17px;height:17px;min-width:0;margin:0;
  accent-color:var(--accent)}
.form .golosa{justify-content:flex-start}
.zapis-ryad{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.zapis-ryad button{padding:12px 18px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg-soft);color:var(--fg);font:inherit;font-weight:600;cursor:pointer}
.zapis-ryad button:hover{border-color:var(--accent)}
.zapis-ryad button.pishet{border-color:var(--sev-crit);color:var(--sev-crit)}
#tablo{color:var(--muted);font-size:14.5px}
.instrument{margin:0 0 14px}
.instrument textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg-soft);color:var(--fg);font-family:inherit;font-size:15px;line-height:1.5;resize:vertical;margin:0 0 10px}
.instrument textarea:focus{outline:none;border-color:var(--accent)}
.instrument table{width:100%;border-collapse:collapse;margin:0 0 6px}
.instrument td{padding:7px 10px;border-bottom:1px solid var(--line);font-size:15px}
.instrument td:nth-child(2){text-align:right;white-space:nowrap}
.instrument td.muted{color:var(--muted);font-size:13.5px;text-align:right}
.instrument .zapis-ryad{margin:0 0 10px}

/* Атрибут hidden должен скрывать всегда. Браузер ставит display:none служебным
   стилем, а любое авторское правило с display его перебивает: строка выбора
   микрофона с display:flex осталась видимой с пустым списком внутри.
   Поймано глазами на снимке, автоматикой такое не ловится. */
[hidden]{display:none !important}

/* Выключенная форма должна выглядеть выключенной. На снимках кнопка «Расшифровать»
   осталась яркой и градиентной, как рабочая, хотя нажать ее нельзя. Человек тянется
   к ней, ничего не происходит, и он решает, что сломан сайт, а не что сервис еще
   не подключен. Автоматика такого не ловит: disabled в разметке стоял правильно. */
.form button[disabled]{background:var(--bg-soft); color:var(--muted); box-shadow:none;
  cursor:not-allowed; border:1px solid var(--line)}
.form button[disabled]:hover{transform:none; box-shadow:none}
.form input[disabled]{opacity:.55; cursor:not-allowed}
.form[aria-disabled="true"]{opacity:.85}

/* ==== Оформление разделов, 18.09.2026 =====================================
   Две задачи. Первая: заголовок прижат к шапке. Измерено до правки: зазор
   между низом шапки и верхом H1 на всех страницах разделов ровно 0 пикселей,
   тогда как на корневых страницах он 76. Вторая: поля, списки и кнопки
   инструментов остались в виде, каком их рисует браузер, и на фоне остального
   оформления выглядят чужими.

   Все ниже собрано из токенов существующей системы: цвета только переменными,
   скругление рабочих элементов 12 пикселей как у кнопок ряда, переходы
   0,15 секунды как у кнопки формы. Новых цветов и новых радиусов не вводится. */

/* Воздух под шапкой. Полсотни с небольшим против нуля: меньше выглядит
   случайностью, больше отрывает заголовок от страницы. */
main.wrap{padding-top:56px}
@media (max-width:720px){main.wrap{padding-top:32px}}

/* Инструмент это рабочая область, а не набор элементов, разбросанных по тексту.
   Рамка и подложка отделяют его от читаемой части страницы. */
.instrument{border:1px solid var(--line);border-radius:16px;padding:20px;
  background:var(--bg-soft);margin:0 0 20px}
.instrument > :last-child{margin-bottom:0}
.instrument .hint{margin:10px 0 0}

/* Ряд управления: элементы одной высоты и с общим ритмом. */
.zapis-ryad{align-items:center}
.zapis-ryad .golosa{display:inline-flex;align-items:center;gap:8px;
  color:var(--muted);font-size:14.5px}

/* Поле выбора файла. Браузер рисует в нем свою надпись «Choose File»
   и «No file chosen», и средствами оформления ее не поменять. Поэтому поле
   растянуто прозрачным поверх собственной подписи: надпись браузера не видна,
   а поле остается тем же элементом и остается доступным с клавиатуры.
   Пунктирная рамка это привычный знак «сюда кладут файл». Когда файл выбран,
   рамка становится сплошной и меняет цвет: состояние видно, не читая текста. */
.fajl{position:relative;display:inline-flex;align-items:center;
  justify-content:center;flex:1 1 300px;min-width:0;padding:12px 18px;
  border-radius:12px;border:1px dashed var(--line);background:var(--bg);
  color:var(--fg);font-size:14.5px;font-weight:600;cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.fajl input[type=file]{position:absolute;inset:0;width:100%;height:100%;
  margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.fajl span{pointer-events:none;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:100%}
.fajl:hover{border-color:var(--accent);background:var(--bg-soft)}
.fajl:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.fajl.est{border-style:solid;border-color:var(--ok);color:var(--ok)}

/* Поля времени и чисел: те же рамка и скругление, что у всего остального. */
.zapis-ryad input[type=text],.zapis-ryad input[type=number]{padding:10px 14px;
  border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--fg);
  font:inherit;font-size:15px;transition:border-color .15s ease}
.zapis-ryad input[type=text]:hover,.zapis-ryad input[type=number]:hover{border-color:var(--accent)}

/* Список выбора. Стрелка нарисована в самом правиле, потому что в фоновую
   картинку переменную цвета не подставить: для светлой темы правило ниже. */
.zapis-ryad select,.instrument select{appearance:none;-webkit-appearance:none;
  padding:10px 36px 10px 14px;border-radius:12px;border:1px solid var(--line);
  background-color:var(--bg);color:var(--fg);font:inherit;font-size:15px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238FA3B5' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:11px;
  transition:border-color .15s ease}
.zapis-ryad select:hover,.instrument select:hover{border-color:var(--accent)}
@media (prefers-color-scheme: light){
  .zapis-ryad select,.instrument select{
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23546A7B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
}

/* Кнопки ряда. Главное действие на странице должно быть видно сразу: до правки
   кнопка «Перевести» выглядела ровно как «Скопировать» и как выключенная.
   Главной считается кнопка с идентификатором, оканчивающимся на -knopka:
   так названы главные действия во всех инструментах. Класс glavnaya оставлен
   для тех, что появятся позже. */
.zapis-ryad button{transition:transform .15s ease,box-shadow .15s ease,
  border-color .15s ease,background-color .15s ease}
.zapis-ryad button:active{transform:translateY(0)}
.zapis-ryad button[id$="-knopka"],.zapis-ryad button.glavnaya{
  background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 6px 18px rgba(78,156,245,.24)}
.zapis-ryad button[id$="-knopka"]:hover,.zapis-ryad button.glavnaya:hover{
  transform:translateY(-1px);box-shadow:0 10px 24px rgba(78,156,245,.34);
  border-color:var(--accent)}

/* Выключенная кнопка обязана выглядеть выключенной. Это уже ловилось снимком
   на форме расшифровки: яркая кнопка, которую нельзя нажать, читается как
   сломанный сайт. Правило повторено здесь, потому что кнопки ряда живут
   вне блока .form и те правила на них не распространяются. */
.zapis-ryad button[disabled],.zapis-ryad button[disabled]:hover{
  background:var(--bg-soft);color:var(--muted);border:1px solid var(--line);
  box-shadow:none;transform:none;cursor:not-allowed}

/* Ссылка на готовый файл. До правки это была обычная синяя строчка среди кнопок,
   и найти ее после долгого ожидания было нечем. */
.zapis-ryad a[download]{display:inline-flex;align-items:center;gap:8px;
  padding:12px 18px;border-radius:12px;border:1px solid var(--ok);
  color:var(--ok);background:var(--bg);font-weight:600;
  transition:background-color .15s ease,color .15s ease}
.zapis-ryad a[download]::before{content:"\2193";font-weight:700}
.zapis-ryad a[download]:hover{background:var(--ok);color:var(--bg);text-decoration:none}

/* Полоса хода работы. Браузерная выглядит по-своему в каждом браузере. */
.instrument progress{appearance:none;-webkit-appearance:none;width:100%;height:8px;
  border:0;border-radius:999px;background:var(--line);overflow:hidden;margin:0 0 12px}
.instrument progress::-webkit-progress-bar{background:var(--line);border-radius:999px}
.instrument progress::-webkit-progress-value{background:var(--grad);border-radius:999px}
.instrument progress::-moz-progress-bar{background:var(--grad);border-radius:999px}

/* Текстовые поля. Убранная обводка фокуса это потеря доступности: человек,
   работающий с клавиатуры, перестает понимать, где он находится. Возвращена. */
.instrument textarea{transition:border-color .15s ease}
.instrument textarea:hover{border-color:var(--accent)}
.instrument textarea:focus{outline:2px solid var(--accent);outline-offset:1px;
  border-color:transparent}
/* Поле результата отличается от поля ввода подложкой: иначе они одинаковые,
   и непонятно, куда вставлять, а откуда забирать. */
.instrument textarea[id$="-vyhod"],.instrument textarea[id$="-itog"]{background:var(--bg)}

/* Видимый фокус на всем, что можно нажать. */
.instrument :focus-visible,.zapis-ryad :focus-visible{outline:2px solid var(--accent);
  outline-offset:2px}

/* Проигрыватели результата: те же скругления, что у остального. */
.instrument audio,.instrument video{border-radius:12px;width:100%;margin:0 0 4px}

@media (max-width:720px){
  /* На телефоне ряд управления встает столбцом, и элементы во всю ширину
     удобнее, чем вразнобой. */
  .zapis-ryad{gap:12px}
  .zapis-ryad button,.zapis-ryad a[download],.zapis-ryad .fajl{width:100%;
    justify-content:center;text-align:center}
  /* Подпись и список рядом занимают всю ширину: иначе подпись переносится
     на две строки, а список жмется. Поймано на снимке узкого экрана. */
  .zapis-ryad .golosa{width:100%;gap:10px}
  .zapis-ryad .golosa select{flex:1 1 auto;width:auto;text-align:left}
  .zapis-ryad > select{width:100%;text-align:left}
  .instrument{padding:16px;border-radius:14px}
}

@media (prefers-reduced-motion: reduce){
  .zapis-ryad button,.zapis-ryad a[download],.zapis-ryad input,.zapis-ryad select,
  .instrument textarea{transition:none}
  .zapis-ryad button[id$="-knopka"]:hover,.zapis-ryad button.glavnaya:hover{transform:none}
}

/* Выключенная форма расшифровки: поле должно выглядеть выключенным так же
   отчетливо, как кнопка рядом. */
.form[aria-disabled="true"] .fajl{opacity:.55;cursor:not-allowed;border-style:dashed}
.form[aria-disabled="true"] .fajl:hover{border-color:var(--line);background:var(--bg)}
.form[aria-disabled="true"] .fajl input[type=file]{cursor:not-allowed}

/* Видимый фокус на ссылках и кнопках вне инструментов: своей обводки у них
   не было, а браузерная теряется на цветном фоне. */
main a:focus-visible,header a:focus-visible,footer a:focus-visible,
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ==== Частые вопросы: раскрывающиеся ==== */
/* На родных details и summary, без скриптов: ответы остаются в разметке
   и видны поисковику, а разметка FAQPage продолжает соответствовать странице. */
.vopros{border:1px solid var(--line);border-radius:12px;background:var(--bg-soft);
  margin:0 0 8px;overflow:hidden}
.vopros summary{list-style:none;cursor:pointer;padding:14px 46px 14px 18px;
  position:relative;transition:background-color .15s ease}
.vopros summary::-webkit-details-marker{display:none}
.vopros summary:hover{background:var(--bg)}
.vopros summary h3{margin:0;font-size:16px;font-weight:650;display:inline}
/* Знак раскрытия рисуется правилом, а не картинкой: одна точка вёрстки
   вместо файла, который надо грузить и который может не дойти. */
.vopros summary::after{content:"";position:absolute;right:20px;top:50%;
  width:9px;height:9px;margin-top:-6px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg);
  transition:transform .18s ease}
.vopros[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.vopros[open] summary{background:var(--bg)}
.vopros p{margin:0;padding:0 18px 16px;color:var(--muted)}
.vopros summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (prefers-reduced-motion: reduce){
  .vopros summary,.vopros summary::after{transition:none}
}

/* ==== Пояснительные схемы ==== */
/* Рисуются разметкой прямо в странице: ни одного лишнего запроса, цвета
   из переменных оформления, при увеличении не рассыпаются. */
.shema{margin:22px 0;border:1px solid var(--line);border-radius:14px;
  padding:16px 16px 10px;background:var(--bg-soft)}
.shema svg{display:block;width:100%;height:auto}
.shema figcaption{margin-top:10px;font-size:13px;color:var(--muted);text-align:center}
@media (max-width:720px){
  .shema{padding:12px 10px 8px;border-radius:12px}
  .shema figcaption{font-size:12.5px}
}

/* ==== Справочные таблицы ==== */
.tablica{margin:22px 0;overflow-x:auto;border:1px solid var(--line);
  border-radius:14px;background:var(--bg-soft)}
.tablica table{width:100%;border-collapse:collapse;font-size:14.5px;margin:0}
.tablica caption{caption-side:top;text-align:left;padding:14px 16px 10px;
  font-weight:650;font-size:15px;color:var(--fg)}
.tablica th,.tablica td{border:0;border-top:1px solid var(--line);
  padding:11px 16px;text-align:left;vertical-align:top}
.tablica thead th{background:transparent;color:var(--muted);font-weight:600;
  font-size:13px;white-space:nowrap}
.tablica tbody tr{transition:background-color .12s ease}
.tablica tbody tr:hover{background:var(--bg)}
@media (max-width:720px){
  .tablica table{font-size:13.5px}
  .tablica th,.tablica td{padding:9px 12px}
}

/* ==== Кнопка образца ==== */
/* Отличается от главной кнопки намеренно: это не действие над вашим файлом,
   а предложение посмотреть, как всё работает, когда файла под рукой нет. */
.obrazec{border:1px dashed var(--line);background:transparent;color:var(--muted);
  border-radius:12px;padding:11px 16px;font:inherit;font-size:14px;cursor:pointer;
  transition:border-color .15s ease,color .15s ease}
.obrazec:hover{border-color:var(--a1);color:var(--a1);border-style:solid}
.obrazec[disabled]{opacity:.6;cursor:default}

/* ==== Проверка записи ==== */
.proverka-zapisi{margin:10px 0 0}
.proverka-zapisi table{width:100%;border-collapse:collapse;font-size:14.5px}
.proverka-zapisi td{padding:9px 0;border-bottom:1px solid var(--line)}
.proverka-zapisi td:first-child{color:var(--muted)}
.proverka-zapisi td:last-child{text-align:right;padding-right:2px}
.proverka-zapisi tr:last-child td{border-bottom:0}

/* ==== Список выбранных документов ==== */
.spisok-fajlov{list-style:none;margin:10px 0 0;padding:0;counter-reset:n}
.spisok-fajlov li{display:flex;align-items:center;gap:8px;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:14.5px;counter-increment:n}
.spisok-fajlov li::before{content:counter(n);color:var(--muted);
  min-width:18px;text-align:right}
.spisok-fajlov li:last-child{border-bottom:0}
.spisok-fajlov .imya-fajla{flex:1;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.spisok-fajlov .melkaya{min-width:34px;padding:4px 8px;font-size:15px;
  line-height:1.1;border-radius:8px}

/* ==== Что лежит в коде ==== */
.itog-koda{width:100%;box-sizing:border-box;margin:6px 0 10px;padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--bg-soft);
  color:var(--fg);font-family:inherit;font-size:15px;line-height:1.5;resize:vertical}

/* ==== Где я сейчас ==== */
nav a[aria-current="page"]{color:var(--fg);font-weight:600;border-bottom:2px solid var(--accent);padding-bottom:2px}

/* ==== Где вы находитесь ==== */
.kroshki{font-size:14px;color:var(--muted);margin:0 0 6px;display:flex;
  flex-wrap:wrap;gap:6px;align-items:center}
.kroshki a{color:var(--muted)}
.kroshki a:hover{color:var(--accent)}
.kroshki span[aria-hidden]{opacity:.5}

/* ==== Поиск по инструментам ==== */
.poisk{margin:18px 0 6px}
.poisk input[type=search]{width:100%;box-sizing:border-box;padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--bg-soft);
  color:var(--fg);font-family:inherit;font-size:16px}
.poisk input[type=search]:focus{outline:2px solid var(--accent);outline-offset:1px}
.poisk .hint{margin:8px 0 0}


/* --- Перечень инструментов на головной раздела, 21.09.2026 ---------------
   Было: маркированный список из 55 строк «ссылка - пояснение», без единого
   правила оформления (класса .gruppa в этом файле не существовало).
   Стало: сетка карточек и полоса переходов по группам с числами.
   Разметка h2.gruppa + ul.gruppa-spisok + li сохранена целиком: на неё
   опирается поиск в i.js, и менять её значило бы сломать поиск молча.
   Образец взят из библиотеки дизайн-референсов (folk, каталог шаблонов):
   группы с числами, лёгкие карточки «название плюс пояснение». */

.polosa-grupp{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 28px}
.polosa-grupp a{display:inline-flex;align-items:baseline;gap:6px;
  padding:6px 12px;border:1px solid var(--line);border-radius:999px;
  font-size:14px;text-decoration:none;color:var(--fg);background:var(--bg)}
.polosa-grupp a:hover{border-color:var(--accent);color:var(--accent)}
.polosa-grupp a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.polosa-grupp b{font-weight:600;color:var(--muted);font-size:12.5px}

h2.gruppa{font-size:20px;margin:34px 0 14px;display:flex;align-items:baseline;gap:10px}
h2.gruppa .skolko{font-size:13px;font-weight:500;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:1px 9px}

/* Ширина колонки 260 точек выбрана по самому длинному названию: оно должно
   вставать в две строки, а не в четыре. */
ul.gruppa-spisok{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
ul.gruppa-spisok>li{border:1px solid var(--line);border-radius:8px;
  padding:14px 16px;background:var(--bg);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
ul.gruppa-spisok>li:hover{transform:translateY(-2px);border-color:var(--accent);
  box-shadow:0 10px 26px rgba(0,0,0,.10)}
/* Название цветом основного текста, а не ссылки: пятьдесят пять синих
   заголовков подряд читаются хуже, цвет перестаёт что-либо выделять. */
ul.gruppa-spisok>li>a{display:block;font-weight:600;font-size:15.5px;
  color:var(--fg);text-decoration:none;margin-bottom:5px}
ul.gruppa-spisok>li:hover>a{color:var(--accent);text-decoration:underline}
ul.gruppa-spisok>li>a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pojasnenie{display:block;color:var(--muted);font-size:13.5px;line-height:1.45}

/* Отфильтрованный поиском пункт должен исчезать из сетки целиком, иначе на
   его месте остаётся дыра. */
ul.gruppa-spisok>li[hidden]{display:none}

/* Во время поиска числа групп и полоса переходов прячутся: они посчитаны по
   полному перечню и при отфильтрованном списке начинают врать. Подпись,
   разошедшаяся с содержимым, хуже отсутствующей. */
body.idet-poisk .polosa-grupp,
body.idet-poisk h2.gruppa .skolko{display:none}

@media (prefers-reduced-motion:reduce){ul.gruppa-spisok>li{transition:none}}

/* На узком экране полоса ложится в двенадцать строк и занимает экран целиком:
   первый инструмент уезжает за третий разворот. Проверено снимком на 390
   точках, на глаз такое не ловится. */
@media (max-width:560px){
  ul.gruppa-spisok{grid-template-columns:1fr}
  .polosa-grupp{flex-wrap:nowrap;overflow-x:auto;gap:6px;
    margin:14px -16px 22px;padding:2px 16px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .polosa-grupp::-webkit-scrollbar{display:none}
  .polosa-grupp a{white-space:nowrap;flex:0 0 auto}
}
/* --- Пустое состояние страниц расшифровки, 21.09.2026 ------------------------
   Три находки со снимка, все три про вид, не про тексты.

   1. Кнопка образца оформлена в этом же файле нарочно тихой («отличается от
      главной кнопки намеренно»), но правило `.zapis-ryad button` весомее по
      разбору и перебивало её: на странице она выходила самой заметной вещью,
      белой и полужирной, заметнее собственного главного действия. Замысел в
      коде был, а на экране был обратный ему результат.
   2. У выключенной формы поле помечено пунктиром и приглушено, а кнопка рядом
      осталась обычной бледной «пилюлей», то есть ровно тем, чем на этом сайте
      выглядят рабочие второстепенные кнопки. Половина формы говорила «нельзя»,
      половина «можно».
   3. Из двух живых действий ни одно не было главным. Образец из библиотеки
      (steep, экран «Get started»): одно действие ведущее, второе рядом тише.

   Ни один текст не тронут: правится только оформление. */

/* 1 и 3. Возврат тихого вида кнопке образца. Разбор 0,2,0 против 0,1,1, поэтому
   правило перебивает `.zapis-ryad button` и не требует !important. */
.r-transkribator .zapis-ryad .obrazec{
  border:1px dashed var(--line);background:transparent;color:var(--muted);
  font-weight:500}
.r-transkribator .zapis-ryad .obrazec:hover{border-color:var(--a1);color:var(--a1);border-style:solid}

/* 3. Ведущее действие блока это выбор своей записи. Пунктир остаётся: он здесь
   означает «поле пустое», а не «нельзя». Ведущим поле делает цвет рамки и
   подписи, а не сплошная заливка: заливать поле приёма файла сплошным цветом
   значит перестать быть похожим на поле приёма файла. */
.r-transkribator .instrument .zapis-ryad .fajl{border-color:var(--accent);color:var(--accent)}
.r-transkribator .instrument .zapis-ryad .fajl:hover{background:var(--bg-soft)}
.r-transkribator .instrument .zapis-ryad .fajl.est{border-color:var(--ok);color:var(--ok)}

/* 2. Выключенная кнопка получает тот же язык, что и выключенное поле рядом:
   пунктир, приглушённый цвет, курсор запрета. Иначе форма наполовину выглядит
   рабочей. */
.r-transkribator .form[aria-disabled="true"] button[disabled],
.r-transkribator .form[aria-disabled="true"] button[disabled]:hover{
  background:transparent;border:1px dashed var(--line);color:var(--muted);
  font-weight:500;box-shadow:none;cursor:not-allowed;opacity:.75;transform:none}

/* Поле запроса словами. Пришло из копии раздела генерации, где рядом стояла
   записка: «при выкладке генерации правило переносится в общий файл, а копия
   убирается». Файл теперь общий, значит перенос сделан. */
.r-nejroset .form textarea{flex:1 1 100%;width:100%;min-width:0;padding:13px 16px;border-radius:14px;
  border:1px solid var(--line);background:var(--bg);color:var(--fg);
  font:16px/1.5 inherit;resize:vertical}
.r-nejroset .form textarea:focus{outline:2px solid var(--a2); outline-offset:1px; border-color:transparent}

/* ОГРАНИЧЕНИЕ ПО РАЗДЕЛАМ. Правила выше, помеченные `.r-transkribator` и
   `.r-nejroset`, задумывались для одного раздела. В общем файле без такой
   пометки они доставали до чужих страниц: сведение стилей 21.09.2026 без них
   изменило 41 страницу инструментов, где у формы есть своя главная кнопка и
   синее поле файла начинало с ней спорить. Поймано сверкой снимков всех
   страниц до и после, поштучно. Метку ставит сборка в `<body class="r-...">`. */