/* СОВА-ЗНАЕТ. Один файл на весь сайт: кэшируется между страницами.
   Дизайн-система описана в brand/brand.md — значения менять там же и здесь,
   а не по месту в разметке. */

/* ШРИФТЫ: НАЧАЛО — блок переписывается site/tools/fonts_fetch.py */
/* --- шрифты ----------------------------------------------------------------
   Раздаются со своего домена, а не из Google Fonts. Причина юридическая:
   каждый запрос к fonts.googleapis.com и fonts.gstatic.com отдаёт IP-адрес
   и версию браузера посетителя серверам Google LLC в США, а Роскомнадзор и
   судебная практика относят IP к персональным данным. Для сайта, рассчитанного
   на российского читателя, это трансграничная передача — со всеми
   обязанностями по ст. 12 152-ФЗ, которых мы на себя не брали. Побочно: на один
   внешний домен меньше в критическом пути и никакой зависимости от Google.

   Файлы готовит `site/tools/fonts_fetch.py`, и там же объяснено, почему их
   пришлось пересобирать, а не класть как есть: Google отдаёт варьируемый шрифт
   целиком и по отдельной копии на каждое начертание. Три «разных» Literata
   оказались одним и тем же файлом, а ось оптического размера стоила половины
   его веса. После схлопывания копий и закрепления оси — 202 КБ на двенадцати
   файлах вместо 362 КБ на тридцати двух.

   Начертание одно на семейство: это варьируемый шрифт, и `font-weight` задаёт
   диапазон, а не значение. Разбиение по unicode-range оставлено — страница на
   русском не тянет латинское расширение.
   Все три семейства под SIL OFL 1.1, самостоятельная раздача разрешена. */

@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/GolosText-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/GolosText-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/GolosText-latin.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: 'Golos Text';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/GolosText-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/JetBrainsMono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/JetBrainsMono-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/JetBrainsMono-latin.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: 400 500;
  font-display: swap;
  src: url('/fonts/JetBrainsMono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/Literata-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/Literata-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/Literata-latin.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: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/Literata-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ШРИФТЫ: КОНЕЦ */

:root {
  --paper: #FAFAF6;
  --sheet: #FFFFFF;
  --tint: #F0F2EB;
  --ink: #191B18;
  --muted: #676C64;
  --rule: #E0E2DC;
  --hair: #ECEEE8;

  /* Хвоя означает «сюда можно нажать». Больше ничего. */
  --action: #1F5B4E;
  --action-line: #A8C4BC;
  --action-soft: #EFF5F2;
  --action-focus: #BEDCD2;
  --dot: #2E8B6F;

  /* Янтарь означает «это объяснение». Кликабельным не бывает. */
  --amber: #B87514;
  --amber-soft: #FBF0DC;
  --amber-line: #EFDCBB;
  --amber-head: #8A570D;
  --amber-text: #5A4726;

  /* Золото — только заливка звёзд в блоке оценки. Единственное исключение
     из правила двух цветов, оно записано в brand/brand.md. */
  --gold: #E8A317;

  --field: #D5D9CF;
  --dim: #414640;
  --radius: 10px;
  --radius-sm: 8px;
  --col: 660px;
  --wrap: 940px;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Golos Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Тёмной темы нет намеренно: утверждён пастельно-белый макет, а автоматическая
   тёмная показывала бы пользователям с тёмной системой другой дизайн.
   Палитра для неё описана в brand/brand.md и включается отдельным решением. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.62 var(--sans);
  font-synthesis-weight: none;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.011em; }
h1 { font-size: 34px; line-height: 1.18; margin: 10px 0 7px; }
h2 { font-size: 22px; line-height: 1.3; margin: 26px 0 9px; }
h3 { font-size: 18px; margin: 20px 0 7px; }
p { margin: 0 0 12px; text-wrap: pretty; }
a { color: var(--action); text-decoration: none; border-bottom: 1px solid var(--action-line); }
a:hover { border-bottom-color: var(--action); }
ol, ul { padding-left: 22px; }
li { margin-bottom: 5px; }
strong { font-weight: 600; }
code { font-family: var(--mono); font-size: 0.92em; background: var(--tint); padding: 1px 5px; border-radius: 5px; }

/* --- шапка и подвал --- */
.site-header { border-bottom: 1px solid var(--rule); background: var(--sheet); }
.site-header .inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 30px;
  height: 56px; display: flex; align-items: center; gap: 24px;
  /* Точка отсчёта для выпадающего меню на узком экране: там оно растягивается
     во всю ширину шапки, а не висит от левого края кнопки (см. медиазапрос). */
  position: relative;
}
/* Знак: заглавным нужен трекинг, «О» — отдельная картинка на базовой линии. */
.mark {
  display: inline-flex; align-items: baseline; gap: 0;
  font-family: var(--serif); font-weight: 700; font-size: 17px;
  letter-spacing: 0.055em; white-space: nowrap; color: var(--ink);
  border-bottom: 0; flex-shrink: 0;
}
.mark:hover { border-bottom: 0; }
.mark svg { display: block; margin-right: 0.055em; }
.mark .ring { fill: none; stroke: var(--ink); }
.mark .pupil { fill: var(--dot); }

/* Меню разделов. Разделы стоят за одной кнопкой, а не строкой ссылок: строка
   переносилась на вторую линию уже на четвёртом разделе, и шапка меняла
   высоту от страницы к странице. Кнопка не растёт вместе со списком.

   Кнопка набрана цветом текста, а не хвоёй: шапка — навигация, а по правилу
   дизайн-системы цветом набирается только ссылка внутри текста. Хвоя тут
   появляется при наведении и в открытом состоянии — там, где она означает
   «нажато». */
.site-nav { display: flex; }
.menu { position: relative; }
.menu > summary {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 6px 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm);
  font: 500 14.5px var(--sans); color: var(--ink); background: var(--paper);
  cursor: pointer; list-style: none; user-select: none;
}
.menu > summary::-webkit-details-marker { display: none; }
/* Тот же шеврон, что у частых вопросов: повёрнутая кавычка вместо картинки. */
.menu > summary::after {
  content: "›"; display: inline-block; color: var(--muted);
  transform: rotate(90deg); transition: transform .12s;
}
.menu[open] > summary::after { transform: rotate(-90deg); }
.menu > summary:hover { color: var(--action); border-color: var(--action-line); }
.menu > summary:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 1px; }
.menu[open] > summary {
  color: var(--action); border-color: var(--action-line); background: var(--action-soft);
}
.menu-panel {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0;
  min-width: 340px; max-width: min(420px, calc(100vw - 36px));
  padding: 6px; background: var(--sheet);
  border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(25, 27, 24, .11);
}
.menu-title { margin: 8px 10px 6px; }
.menu-list { display: flex; flex-direction: column; }
.menu-list a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--ink); border-bottom: 0;
}
.menu-list a:hover { background: var(--tint); color: var(--action); }
/* Раздел, в котором читатель сейчас находится. Янтарь здесь — тот же знак
   «вы тут», что стоял под ссылкой раздела в прежней шапке. */
.menu-list a.active { box-shadow: inset 2px 0 0 var(--amber); }
.menu-name { font-weight: 500; font-size: 15px; }
.menu-count { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.menu-note {
  grid-column: 1 / -1; font-size: 12.5px; line-height: 1.45; color: var(--muted);
}
.menu-all {
  display: block; margin-top: 4px; padding: 9px 10px;
  border-top: 1px solid var(--hair); border-bottom: 0;
  color: var(--muted); font-size: 13px;
}
.menu-all:hover { color: var(--action); }
.privacy {
  margin-left: auto; display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--muted); white-space: nowrap;
}
.site-footer {
  margin-top: 40px; border-top: 1px solid var(--rule);
  padding: 20px 0 36px; color: var(--muted); font-size: 13.5px;
}
.site-footer .inner { max-width: var(--wrap); margin: 0 auto; padding: 0 30px; }
.site-footer a { color: var(--muted); border-bottom: 0; }
.site-footer a:hover { color: var(--ink); }
.foot-nav { display: flex; gap: 8px 20px; flex-wrap: wrap; margin-bottom: 12px; }
.foot-line { display: flex; gap: 10px 22px; flex-wrap: wrap; margin: 0 0 10px; }
.foot-owner { margin-left: auto; }
/* Оговорка о точности. Мельче остального и без выделения: она обязана быть
   на каждой странице, но не обязана спорить с содержанием за внимание. */
.foot-note {
  margin: 0; padding-top: 10px; border-top: 1px solid var(--hair);
  font-size: 11.5px; line-height: 1.5; color: #8A8F86; max-width: 720px;
}

/* --- сетка страницы: колонка чтения и правая колонка --- */
.page {
  max-width: var(--wrap); margin: 0 auto; padding: 18px 30px 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 40px;
  align-items: start;
}
/* Страницы без правой колонки — служебные и главная. Без этого сетка
   держала бы пустой столбец в 220 пикселей и уводила текст от центра. */
.page-solo { grid-template-columns: minmax(0, 1fr); }
.col { max-width: var(--col); min-width: 0; }
.rail { position: sticky; top: 18px; }
.rail-title { margin-bottom: 8px; }

.lead { color: var(--muted); font-size: 16.5px; line-height: 1.55; margin: 0 0 18px; }

/* надзаголовок */
.eyebrow {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}

/* --- хлебные крошки --- */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 0 0 12px; font-size: 12.5px; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 7px; color: var(--rule); }
.crumbs a { color: var(--muted); border-bottom: 0; }
.crumbs a:hover { color: var(--action); }

/* --- ответ: посчитан на сборке, виден без JavaScript --- */
.answer {
  background: var(--sheet); border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: hidden; margin: 0 0 20px;
}
.answer-main { padding: 16px 20px 15px; }
.answer .big {
  font-family: var(--serif); font-size: 34px; line-height: 1.1;
  margin: 8px 0 0; word-break: break-word;
}
.answer .big .sep { color: var(--rule); }
.answer-note { margin: 8px 0 0; font-size: 14.5px; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hair); }
.stats > div { padding: 10px 14px; border-right: 1px solid var(--hair); }
.stats > div:last-child { border-right: 0; }
.stats b { display: block; font-size: 18px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stats .word { font-size: 15.5px; }

/* --- инструмент --- */
.tool {
  background: var(--tint); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 14px 16px 13px; margin: 0 0 24px;
}
.tool > label {
  display: block; margin-bottom: 7px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.tool textarea, .tool input[type="text"] {
  width: 100%; font: 16.5px/1.5 var(--sans); color: var(--ink);
  background: var(--sheet); border: 1px solid var(--field);
  border-radius: var(--radius-sm); padding: 10px 12px; resize: vertical;
}
.tool textarea { min-height: 84px; }
.tool textarea:focus, .tool input:focus, .tool select:focus {
  outline: 2px solid var(--action-focus); outline-offset: 0;
  border-color: var(--action);
}
.tool-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.tool-row > label { font-size: 13.5px; color: var(--muted); }
.tool-row > label.check { display: inline-flex; align-items: center; gap: 6px; }
.tool-row input[type="text"], .tool-row input[type="time"] {
  font: 15px var(--sans); color: var(--ink); background: var(--sheet);
  border: 1px solid var(--field); border-radius: var(--radius-sm); padding: 8px 10px;
  max-width: 150px;
}
.tool-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--action); }
.tool select {
  font: 15px var(--sans); color: var(--ink); background: var(--sheet);
  border: 1px solid var(--field); border-radius: var(--radius-sm); padding: 8px 10px;
}
button, .btn {
  font: 500 14.5px var(--sans); cursor: pointer;
  border: 1px solid var(--action); background: var(--action); color: var(--sheet);
  border-radius: var(--radius-sm); padding: 10px 18px;
}
button.secondary { background: transparent; color: var(--action); border-color: var(--action-line); }
button:hover { filter: brightness(1.08); }
.out {
  margin-top: 10px; background: var(--sheet); border: 1px solid var(--hair);
  border-radius: var(--radius-sm); padding: 11px 13px; min-height: 46px;
  font-family: var(--mono); font-size: 16px; word-break: break-word; white-space: pre-wrap;
}
.out:empty::before { content: "Результат появится здесь"; color: var(--muted); font-family: var(--sans); font-size: 15px; }
.hint { font-size: 13px; color: var(--muted); }
.copied { color: var(--action); font-size: 13px; }

/* --- блок «Сова знает»: единственное место бренда внутри текста --- */
.owl {
  background: var(--amber-soft); border: 1px solid var(--amber-line);
  border-radius: var(--radius); padding: 13px 15px;
  display: flex; gap: 11px; align-items: flex-start; margin: 18px 0;
}
.owl svg { flex-shrink: 0; margin-top: 2px; }
.owl .ring, .owl .pupil { fill: var(--amber); }
.owl .ring { fill: none; stroke: var(--amber); }
.owl p { margin: 0; font-size: 15px; line-height: 1.58; color: var(--amber-text); }
.owl b { color: var(--amber-head); font-weight: 600; }

/* --- таблицы --- */
.table-scroll { overflow-x: auto; margin: 14px 0 18px; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; padding: 7px 12px 7px 0; border-bottom: 1px solid var(--hair); }
thead th { border-bottom: 1.5px solid var(--ink); font-weight: 600; padding-bottom: 6px; }
tbody th { font-weight: 600; }
td:last-child, th:last-child { padding-right: 0; }
.letters td { font-family: var(--mono); font-size: 13.5px; }
.letters tbody th { font-family: var(--sans); }
td { color: var(--dim); }

/* сводная таблица «во всех стандартах» внутри инструмента */
[data-all-out] th { width: 42%; font-weight: 600; color: var(--ink); }
[data-all-out] td { font-family: var(--mono); font-size: 14px; }

/* --- карточки и чипы --- */
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); padding: 0; margin: 14px 0 18px; list-style: none; }
.cards li { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); padding: 13px 15px; margin: 0; }
.cards a { font-family: var(--serif); font-weight: 600; font-size: 16.5px; color: var(--ink); border-bottom: 0; }
.cards a:hover { color: var(--action); }
.cards p { margin: 5px 0 0; font-size: 13.5px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 12px 0 18px; list-style: none; }
.chips li { margin: 0; }
.chips a {
  display: inline-block; background: var(--sheet); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); padding: 6px 12px; font-size: 14.5px; color: var(--ink);
}
.chips a:hover { border-color: var(--action); color: var(--action); }

/* --- ударение и рифма --- */
/* Выбор ударного слога: словаря на всякое слово не бывает, и вместо догадки
   инструмент предлагает нажать нужный слог. Кнопки — действие, поэтому хвоя. */
.pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.pick:empty { display: none; }
.pick .hint { margin-right: 2px; }
.pick-btn {
  background: var(--sheet); color: var(--action); border: 1px solid var(--action-line);
  border-radius: var(--radius-sm); padding: 5px 11px; font-size: 15px;
  font-family: var(--serif); width: auto;
}
.pick-btn[aria-pressed="true"] { background: var(--action); color: var(--sheet); border-color: var(--action); }

/* Список рифм — это ответ, а не навигация: набирается текстом, а ссылкой
   становятся только те слова, у которых есть своя страница. */
.wordlist { font-family: var(--serif); font-size: 17px; line-height: 1.75; margin: 6px 0 16px; }
h3.sub { font-family: var(--sans); font-size: 14px; color: var(--muted); margin: 14px 0 2px; font-weight: 500; }

/* --- частые вопросы --- */
.faq { margin-top: 24px; }
.faq-item { border-bottom: 1px solid var(--hair); padding: 11px 0; }
.faq-item:first-of-type { border-top: 1px solid var(--hair); }
.faq-item summary { cursor: pointer; font-weight: 500; font-size: 16px; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "›"; display: inline-block; width: 16px; color: var(--muted); transition: transform .12s; }
.faq-item[open] summary::before { transform: rotate(90deg); }
.faq-answer { margin: 7px 0 2px 16px; font-size: 15.5px; line-height: 1.58; }
.faq-answer p:last-child { margin-bottom: 0; }

/* --- проверка устройства (раздел /proverka/) --------------------------------
   Здесь нет ответа, посчитанного на сборке: ответ — это железо читателя.
   Поэтому панель начинается не с поля ввода, а с кнопки: разрешение
   спрашивается только по нажатию, никогда при загрузке страницы.

   Цвет: хвоя остаётся только на кнопках и ссылках. Результат проверки —
   уровень микрофона, нажатая клавиша, отклонённый стик — набирается
   основным цветом текста, а не зеленью: это не «сюда можно нажать»,
   это ответ. */
.probe {
  background: var(--tint); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 14px 16px 13px; margin: 0 0 22px;
}
.probe-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.probe-head .hint { flex: 1 1 200px; }
.probe-copy { margin-left: auto; font-size: 13px; padding: 8px 12px; }
.probe-stage:empty { display: none; }
.probe-stage { margin-top: 12px; }
.probe-live {
  margin: 11px 0 0; font-size: 15.5px; line-height: 1.5; min-height: 1.5em;
}
.probe-live:empty::before {
  content: "Проверка ещё не запускалась"; color: var(--muted); font-size: 15px;
}
.probe-live b { font-weight: 600; }
.probe-live .fail { color: var(--amber-head); font-weight: 600; }
.probe-note { margin: 9px 0 0; }
.probe-off { margin: 11px 0 0; font-size: 14.5px; color: var(--muted); }

/* Экран показаний: белый лист внутри панели, моноширинные цифры. */
.readout {
  background: var(--sheet); border: 1px solid var(--hair);
  border-radius: var(--radius-sm); padding: 11px 13px;
}
.readout dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; }
.readout dt { color: var(--muted); font-size: 13.5px; }
.readout dd { margin: 0; font-family: var(--mono); font-size: 14.5px; font-variant-numeric: tabular-nums; }

/* Полоска уровня: заливка — цвет текста. Зелёная полоска читалась бы как
   кнопка, а красная означала бы «плохо», чего мы не знаем. */
.meter {
  height: 12px; border-radius: 6px; background: var(--rule);
  overflow: hidden; margin: 9px 0 4px;
}
.meter > i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .05s linear; }
.meter-peak { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Легенда исходов и «если не работает»: содержательная часть страницы,
   видна без единого клика. */
.states, .troubles, .limits { margin-top: 24px; }
.state, .trouble { border-top: 1px solid var(--hair); padding: 11px 0; }
.state:last-child, .trouble:last-child { border-bottom: 1px solid var(--hair); }
.state b, .trouble b { display: block; font-weight: 600; font-size: 16px; margin-bottom: 3px; }
.state p, .trouble p { margin: 0; font-size: 15.5px; line-height: 1.58; color: var(--dim); }
.limits ul { margin: 12px 0 0; }
.limits li { color: var(--dim); }

/* Раскладка клавиатуры и кнопки геймпада. Клавиши здесь не кликаются —
   их нажимают на настоящем устройстве, — поэтому нажатая заливается
   цветом текста, а не хвоей. */
.keys { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.keys-row { display: flex; gap: 4px; }
.key {
  flex: 0 0 auto; min-width: 30px; height: 34px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sheet); border: 1px solid var(--field);
  border-radius: 6px; font-size: 11.5px; line-height: 1.1; text-align: center;
  color: var(--dim); white-space: nowrap; overflow: hidden;
}
.key[data-hit="now"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.key[data-hit="done"] { background: var(--action-soft); border-color: var(--action-line); color: var(--ink); }
.keys-scroll { overflow-x: auto; padding-bottom: 4px; }
.keys-scroll .keys { min-width: 640px; }

/* Кружки кнопок геймпада и полоски осей. */
.pads { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pad-btn {
  min-width: 46px; padding: 5px 9px; border-radius: 6px; font-size: 12.5px;
  background: var(--sheet); border: 1px solid var(--field); color: var(--dim); text-align: center;
}
.pad-btn[data-hit="now"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pad-btn[data-hit="done"] { background: var(--action-soft); border-color: var(--action-line); color: var(--ink); }
.sticks { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.stick { text-align: center; font-size: 12.5px; color: var(--muted); }
.stick-box {
  width: 108px; height: 108px; border: 1px solid var(--field); border-radius: 50%;
  background: var(--sheet); position: relative; margin-bottom: 5px;
}
.stick-box i { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); left: 50%; top: 50%; margin: -5.5px 0 0 -5.5px; }
.stick-box u { position: absolute; border: 1px dashed var(--action-line); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* Поле для проверки мыши: тут ловятся клики, колесо и движение. */
.padarea {
  background: var(--sheet); border: 1px dashed var(--field); border-radius: var(--radius-sm);
  min-height: 130px; display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--muted); font-size: 14.5px; padding: 14px;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.padarea b { color: var(--ink); }

/* Поле набора для теста скорости печати. Набранное правильно — обычный
   текст, ошибка — подчёркивание янтарём (это объяснение, не действие). */
.typing {
  background: var(--sheet); border: 1px solid var(--hair); border-radius: var(--radius-sm);
  padding: 13px 15px; font-family: var(--serif); font-size: 19px; line-height: 1.7;
}
.typing s { text-decoration: none; color: var(--muted); }
.typing i { font-style: normal; border-bottom: 2px solid var(--ink); }
.typing u { text-decoration: none; background: var(--amber-soft); border-bottom: 2px solid var(--amber); }
.typing-input { position: absolute; left: -9999px; opacity: 0; }

/* Полноэкранная проверка экрана: битые пиксели, засветы, цвета.
   Здесь цвет — это и есть инструмент, а не оформление. */
.screen {
  position: fixed; inset: 0; z-index: 50; display: none;
  align-items: center; justify-content: center; cursor: pointer;
}
.screen[data-on] { display: flex; }
/* Кнопка выхода из полноэкранной проверки. Видна всегда и поверх всего:
   на телефоне это единственный способ выйти — клавиши Esc там нет, а
   Safari на iPhone не открывает полноэкранный режим для элемента вовсе. */
.screen-quit {
  position: fixed; top: 14px; right: 14px; z-index: 2;
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff; border: 1px solid rgba(255, 255, 255, .45);
  font: 20px/1 var(--sans); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.screen-quit:hover { background: rgba(0, 0, 0, .78); filter: none; }
.screen-quit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.screen-tip {
  font: 14px/1.5 var(--sans); background: rgba(0, 0, 0, .62); color: #fff;
  padding: 9px 14px; border-radius: var(--radius-sm); max-width: 460px; text-align: center;
}
.screen[data-tip="off"] .screen-tip { opacity: 0; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.swatch {
  width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--field);
  padding: 0; cursor: pointer;
}
.swatch[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Кнопка-фишка: занимает по содержимому и переносится в сетку. Нужна там,
   где кнопок много и они равнозначны, — опорные частоты, длительности,
   пресеты. Обычная кнопка на узком экране растягивается на всю ширину, и
   десять таких превращают панель в вертикальную стопку. */
.chip-btn { padding: 7px 12px; font-size: 13.5px; }
.chips-row { gap: 6px; }

/* --- реклама --- */
.ad { margin: 0 0 22px; min-height: 1px; }
.ad-rail { min-height: 300px; }
.nowrap { white-space: nowrap; }

/* --- обратная связь ---------------------------------------------------------
   Две вещи: «Сообщить об ошибке» сбоку от инструмента и оценка звёздами внизу
   страницы. Оба блока служебные, поэтому набираются тише содержания и не
   двигают вёрстку: формы появляются только по нажатию. */

.bugbox { margin-top: 26px; }
.rail .bugbox { padding-top: 18px; border-top: 1px solid var(--hair); }
/* Список «Рядом» убран, и кнопка обычно первая в колонке: черта сверху
   висела бы отдельной линией ни от чего. */
.rail .bugbox:first-child { padding-top: 0; border-top: 0; }
.bug-open { width: 100%; font-size: 13.5px; padding: 8px 12px; }
.bug-form { margin-top: 10px; }
.bug-form label, .rate-form label {
  display: block; margin-bottom: 6px; font-size: 13.5px; color: var(--dim);
}
.bug-form textarea, .rate-form textarea {
  width: 100%; font: 15px/1.5 var(--sans); color: var(--ink);
  background: var(--sheet); border: 1px solid var(--field);
  border-radius: var(--radius-sm); padding: 9px 11px; resize: vertical;
}
.bug-form textarea:focus, .rate-form textarea:focus {
  outline: 2px solid var(--action-focus); outline-offset: 0; border-color: var(--action);
}
.bug-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.bug-row button { font-size: 13.5px; padding: 8px 14px; }
.bug-fine { margin: 9px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.bug-thanks { margin: 0; font-size: 13.5px; color: var(--action); }

/* Оценка. Звёзды — единственное место на сайте, где янтарь означает не
   «объяснение», а заполнение: гнутая пятиконечная звезда золотого цвета
   читается всеми и одинаково, и менять её на хвою значило бы объяснять
   читателю нашу дизайн-систему вместо того, чтобы дать ему нажать. */
.rate {
  margin-top: 32px; padding: 16px 18px 15px;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius);
}
.rate-q { margin: 0 0 8px; font-size: 15.5px; color: var(--dim); }
.stars { display: flex; gap: 2px; }
.star {
  background: none; border: 0; padding: 4px; cursor: pointer; line-height: 0;
  border-radius: 6px; width: auto;
}
.star svg { width: 30px; height: 30px; fill: var(--rule); transition: fill .08s linear; }
.star:hover { filter: none; }
.star.on svg { fill: var(--gold); }
.star:focus-visible { outline: 2px solid var(--action-focus); outline-offset: 0; }
[data-stars][aria-disabled="true"] .star { cursor: default; }
.rate-form { margin-top: 12px; }
.rate-thanks { margin: 10px 0 0; font-size: 15px; color: var(--action); font-weight: 500; }

@media (max-width: 900px) {
  .page { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rail { position: static; margin-top: 26px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  h1 { font-size: 27px; }
  h2 { font-size: 20px; }
  .page, .site-header .inner, .site-footer .inner { padding-left: 18px; padding-right: 18px; }
  /* Шапка на узком экране остаётся одной строкой: переносить больше нечего,
     разделы уехали в меню. */
  .site-header .inner { height: 52px; gap: 14px; }
  /* Панель шире остатка строки справа от кнопки, поэтому на узком экране она
     считается не от кнопки, а от шапки, и занимает всю её ширину. */
  .menu { position: static; }
  .menu-panel { left: 18px; right: 18px; width: auto; min-width: 0; max-width: none; }
  .foot-owner { margin-left: 0; }
  .answer .big { font-size: 28px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div:nth-child(2n) { border-right: 0; }
  .stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--hair); }
  button { width: 100%; }
  .tool-row > button { flex-grow: 1; }
  .bug-row button { width: auto; flex: 1 1 auto; }
  .chip-btn { width: auto; flex: 0 0 auto; }
  .probe-copy { margin-left: 0; }
  .screen-quit { width: 52px; height: 52px; }
  .star { padding: 6px; }
  .star svg { width: 34px; height: 34px; }
}