/* Как читается главная (2026-11-09). Жалоба: в прежнем виде читать было легче, в «Спектре» приходится вчитываться.
   Замер обоих видов показал: размеры и жирность текста в них одинаковые — порядок держался на цвете. Оранжевые
   метки разделов, цветная кнопка и пятна ауры были местами, куда глаз падает первым. «Спектр» убрал цвет из
   интерфейса, и всё стало одного белого и одного серого. Заголовки Unbounded были сжаты на 4–4,5 %: пробел между
   словами стал не шире промежутка между буквами, «Песенник для» читалось одним словом.

   Система — четыре правила. Подключается последним стилем (.claude/patches/readable_patch.py).
   1. Опорные слова: в сером пояснении 1–2 фразы-ответа горят белым и полужирным (.kw, ставит readable.js).
      Прочитал только их — понял блок. Не больше трети текста, иначе выделение перестаёт работать.
   2. Метка раздела — цвет ноты: кружок и надпись тоном одной из 12 нот (--kc). Это точка входа в блок, как
      оранжевые метки прежнего вида, но цвет по-прежнему только из нот. Шаги минуса — до, ми, соль.
   3. Заголовки Unbounded — с родной разрядкой: буквы не налезают, между словами виден пробел. Заголовки разделов
      главной одним видом: глаз узнаёт начало блока по форме.
   4. Текст крупнее на ступень (14→15, 15→16, 16→17), строка не длиннее ~65 знаков; по-русски предлог
      не висит в конце строки (readable.js).
   Правила 2–4 — только в «Спектре»; опорные слова работают в обоих видах. */

/* ---------- 1. опорные слова (оба вида) ---------- */
.kw { font-weight: 600; color: var(--text); }
.kw-one { white-space: nowrap; }

/* ---------- 2. метка раздела цветом ноты ---------- */
html.spectrum .vb-kicker,
html.spectrum .vr-kicker {
  display: flex; align-items: center; gap: 9px; width: fit-content; margin-bottom: 12px;
  font-size: 12.5px; letter-spacing: .07em;
  color: color-mix(in oklab, var(--kc) 55%, var(--text));
}
html.spectrum .vb-kicker::before,
html.spectrum .vr-kicker::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--kc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kc) 24%, transparent);
}
html.spectrum .vb-kicker { --kc: #46a758; } /* фа */
html.spectrum .vr-kicker { --kc: #7d5bd6; } /* ля */

/* шаги бесплатного минуса: номер — нота аккорда до-ми-соль, как метка ноты под слогом */
html.spectrum .free-steps li:nth-child(1) { --kc: #e5484d; --ki: #ffffff; }
html.spectrum .free-steps li:nth-child(2) { --kc: #e9c400; --ki: #0A0A0D; }
html.spectrum .free-steps li:nth-child(3) { --kc: #2f8fd8; --ki: #ffffff; }
html.spectrum .free-step-n { background: var(--kc, var(--glass-2)); color: var(--ki, var(--text)); font-weight: 700; }

/* ---------- 3. заголовки ---------- */
html.spectrum h1 { letter-spacing: -.02em; word-spacing: .04em; }
html.spectrum .hero h1 { letter-spacing: -.025em; word-spacing: .05em; line-height: 1.04; }
html.spectrum .song-head h1 { letter-spacing: -.02em; }
html.spectrum .vb h2,
html.spectrum .vr-title,
html.spectrum .pitch h2,
html.spectrum #view:has(> .hero) .section-title {
  font-family: var(--display); font-weight: 500; letter-spacing: -.012em; word-spacing: .05em; line-height: 1.18;
  text-wrap: balance;
}
html.spectrum .vb h2 { margin-bottom: 10px; font-size: 30px; }
html.spectrum .vr-title { margin-bottom: 12px; font-size: 24px; }
html.spectrum .pitch h2 { margin-bottom: 8px; font-size: 24px; }
html.spectrum #view:has(> .hero) .section-title { font-size: 22px; }
html.spectrum .free-steps b { font-size: 16px; letter-spacing: -.005em; }
html.spectrum .vb-card h3 { margin-bottom: 8px; font-size: 18px; }

/* ---------- 4. текст на ступень крупнее, строка не длиннее ~65 знаков ---------- */
html.spectrum .hero > .sub { max-width: 620px; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
html.spectrum .hero:has(> .sp-aside) > .sub { max-width: 600px; }
html.spectrum .free-steps p { margin-top: 4px; font-size: 14px; line-height: 1.45; text-wrap: pretty; }
html.spectrum .vb-top { max-width: 680px; }
html.spectrum .vb-lead { font-size: 16px; line-height: 1.55; }
html.spectrum .vb-card p,
html.spectrum .vr-say { font-size: 15px; line-height: 1.55; text-wrap: pretty; }
html.spectrum .vb-foot { font-size: 14px; color: var(--muted); }
html.spectrum .pitch p { font-size: 16px; line-height: 1.5; }

/* меню: подписи под значками были 10,5 px — на ступень крупнее, чтобы не всматриваться */
@media (min-width: 1101px) {
  html.spectrum .sidebar nav a,
  html.spectrum .side-login { font-size: 11.5px; }
}

/* телефон: заголовки разделов и текст — прежних размеров, иначе экран занят одним блоком */
@media (max-width: 560px) {
  /* с родной разрядкой заголовок шире: на 360–375 px он уходил в четыре строки */
  html.spectrum .hero h1 { font-size: clamp(30px, 8.4vw, 34px); }
  html.spectrum .vb h2 { font-size: 24px; }
  html.spectrum .vr-title, html.spectrum .pitch h2 { font-size: 21px; }
  html.spectrum .hero > .sub { font-size: 16px; }
  html.spectrum .vb-card p, html.spectrum .vr-say { font-size: 14.5px; }
}