/* Экран подхода на всё окно — по прототипу владельца
   «freq-trainer-prototype.html» (24.09.2026). На нём идут все тренажёры;
   у «Баланса» свой экран со своими фазами, но та же рама.

   Каркас здесь пустой: вопрос, материал, рабочая зона, второй вопрос,
   транспорт и кнопки переезжают в него из разметки общего экрана
   (src/screen-tr.js, TX_MOVE), поэтому ниже стоят и стили для
   переехавших частей. Сверху шапка: «Закрыть», тренажёр с уровнем,
   счётчик замера, «?» и нить прогресса. Исход читается свечением от
   нижней кромки окна, вспышкой рамки графика и цветом заголовка; слова
   исхода — в модалке «Разбор». Цели дня и калибровки здесь нет. */

body[data-view="tr"] .rail, body[data-view="tr"] .topbar { display: none }
body[data-view="tr"] { overflow: hidden }
#v-tr.on {
  position: fixed; left: 0; right: 0; top: 0; z-index: 50; overflow: hidden;
  height: var(--vh, 100dvh);
  display: flex; flex-direction: column; background: var(--bg);
  padding: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
/* Фон — два пятна, как на остальных новых экранах. Исход подкрашивает
   первое: зелёным — попадание, латунью — «почти», терракотой — промах. */
:is(#v-tr, #v-mix)::before, :is(#v-tr, #v-mix)::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(110px); opacity: .34; transition: background .8s, opacity .8s }
:is(#v-tr, #v-mix)::before { width: 760px; height: 760px; top: -380px; left: -60px; background: radial-gradient(circle, var(--amb-1), transparent 68%); animation: amb-1 32s ease-in-out infinite }
:is(#v-tr, #v-mix)::after { width: 560px; height: 560px; bottom: -300px; right: -140px; background: radial-gradient(circle, var(--amb-2), transparent 68%); animation: amb-2 38s ease-in-out infinite }
:is(#v-tr, #v-mix).is-ok::before { background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 68%); opacity: .5 }
:is(#v-tr, #v-mix).is-near::before { background: radial-gradient(circle, color-mix(in srgb, var(--brass) 30%, transparent), transparent 68%) }
:is(#v-tr, #v-mix).is-bad::before { background: radial-gradient(circle, color-mix(in srgb, var(--bad) 30%, transparent), transparent 68%) }
:is(#v-tr, #v-mix) > * { position: relative; z-index: 1 }

/* ── Свечение исхода: вспышка от нижней кромки и кольцо от центра,
      потом медленный спад до тихого остаточного уровня. ── */
:is(#v-tr, #v-mix) { --tx-gl: var(--brass) }
:is(#v-tr, #v-mix).is-ok { --tx-gl: var(--accent) }
:is(#v-tr, #v-mix).is-bad { --tx-gl: var(--bad) }
:is(#v-tr, #v-mix) > .tx-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; overflow: hidden }
.tx-glow::after { content: ''; position: absolute; left: 50%; top: 46%; width: 120vmax; height: 120vmax; border-radius: 50%; opacity: 0;
  transform: translate(-50%, -50%) scale(.2); background: radial-gradient(circle, color-mix(in srgb, var(--tx-gl) 30%, transparent), color-mix(in srgb, var(--tx-gl) 7%, transparent) 38%, transparent 62%) }
:is(#v-tr, #v-mix).is-ok > .tx-glow, :is(#v-tr, #v-mix).is-near > .tx-glow, :is(#v-tr, #v-mix).is-bad > .tx-glow { animation: tx-flash 2.6s var(--ease-bounce) forwards }
:is(#v-tr, #v-mix).is-ok .tx-glow::after, :is(#v-tr, #v-mix).is-near .tx-glow::after, :is(#v-tr, #v-mix).is-bad .tx-glow::after { animation: tx-ring 1.15s cubic-bezier(.22, .9, .3, 1) forwards }
@keyframes tx-flash { 0% { opacity: 0 } 9% { opacity: 1 } 28% { opacity: .92 } 100% { opacity: .26 } }
@keyframes tx-ring { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.18) } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1) } }

/* ── Шапка ── */
.tx-hd { flex: none; padding: 14px 22px 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 95%, transparent), color-mix(in srgb, var(--bg) 60%, transparent) 72%, transparent) }
.tx-top { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 16px }
:is(#v-tr, #v-mix) .tx-ico { width: 40px; height: 40px; border-radius: 14px; transition: color .22s, border-color .22s, background .22s }
.tx-hdt { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px }
.tx-hdt h1 { margin: 0; min-width: 0; font-size: 17px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.tx-pill { flex: none; display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--r-pill); white-space: nowrap;
  font: 700 9.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); background: var(--brass-wash); border: 1px solid var(--brass-edge) }
.tx-meas { flex: none; display: flex; align-items: center; gap: 11px }
.tx-mt { text-align: right; line-height: 1.25 }
.tx-mt b { display: block; font: 700 12.5px var(--font-mono); letter-spacing: -.01em }
.tx-mt span { font: 600 8.5px var(--font-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted-3) }
.tx-pips { display: flex; gap: 4px }
.tx-pips:empty { display: none }
.tx-pips i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); transition: .3s var(--ease-bounce) }
.tx-pips i.done { background: var(--brass); box-shadow: 0 0 8px color-mix(in srgb, var(--brass) 40%, transparent) }
/* Нить прогресса. Пока идёт первый замер — латунная: значение
   предварительное; потом зелёная и ведёт к следующему уровню. */
.tx-bar { position: relative; max-width: 1120px; height: 2px; margin: 12px auto 0; border-radius: 2px; background: var(--panel-3); overflow: hidden }
.tx-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; transition: width .6s var(--ease-bounce);
  background: linear-gradient(90deg, #0E6B33, var(--accent)); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent) }
.tx-bar.pending i { background: linear-gradient(90deg, var(--brass), #F0D98A); box-shadow: 0 0 10px color-mix(in srgb, var(--brass) 40%, transparent) }
:is(#v-tr, #v-mix).is-ok .tx-bar i, :is(#v-tr, #v-mix).is-near .tx-bar i, :is(#v-tr, #v-mix).is-bad .tx-bar i { animation: tx-thread 2.4s var(--ease-bounce) forwards }
@keyframes tx-thread { 0% { box-shadow: 0 0 26px var(--tx-gl) } 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--tx-gl) 40%, transparent) } }

/* ── Поле ── */
.tx-field { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column }
/* Нижняя заливка исхода — часть той же вспышки. */
.tx-field::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56vh; pointer-events: none; opacity: 0; z-index: 0 }
.tx-field.is-ok::after, .tx-field.is-near::after, .tx-field.is-bad::after {
  background: radial-gradient(120% 100% at 50% 132%, color-mix(in srgb, var(--tx-gl) 55%, transparent), color-mix(in srgb, var(--tx-gl) 18%, transparent) 38%, transparent 72%);
  animation: tx-flash 2.6s var(--ease-bounce) forwards }

.tx-scroll { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; padding: 22px 22px 10px }
.tx-col { max-width: 960px; min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center }
.tx-kicker { margin-bottom: 8px; text-align: center; font: 600 9.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-3) }
.tx-kicker:empty { display: none }
/* Переключатель режимов — один на «Компрессию»: у остальных он скрыт.
   По её прототипу: пилюля на стекле, выбранный режим — зелёный, закрытый
   — с замком, по нажатию объясняет, когда откроется. */
#v-tr .seg { align-self: center; margin: 0 0 14px; gap: 6px; padding: 5px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 80%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px) }
#v-tr .seg .mode { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; font-size: 13px; font-weight: 600; color: var(--muted);
  transition: color .24s, background .24s, box-shadow .24s }
#v-tr .seg .mode.on { color: var(--on-accent); background: var(--accent) linear-gradient(135deg, #2AE06D, var(--accent) 62%, #0E6B33);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 26%, transparent), inset 0 1px 0 rgba(255, 255, 255, .28) }
#v-tr .seg .mode.locked { color: var(--muted-3); cursor: pointer }
#v-tr .seg .mode svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
@media (max-width: 640px) { #v-tr .seg .mode { padding: 8px 13px; font-size: 12.5px; gap: 6px } }

/* ── Вопрос ── */
#v-tr .tr-ask { max-width: 640px; margin: 0 auto 18px; text-align: center }
#v-tr .tr-ask h3 { margin: 0 0 9px; font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -.04em; transition: color .3s }
#v-tr .tr-ask h3 u { text-decoration: none; font: 700 24px var(--font-mono); letter-spacing: -.03em; color: var(--muted); white-space: nowrap }
.tx-field.is-ok .tr-ask h3 { color: var(--accent-ink) }
.tx-field.is-near .tr-ask h3 { color: var(--brass) }
.tx-field.is-bad .tr-ask h3 { color: var(--bad-ink) }
#v-tr .tr-ask p { max-width: 640px; margin: 0 auto; font-size: 14px; line-height: 1.6; color: var(--muted) }
#v-tr .tr-ask p b { color: var(--text); font-weight: 600 }

/* ── Материал ── */
/* Материала больше десятка — лента одной строкой с прокруткой и
   затуханием у края, как на телефоне: в три строки чипы оттесняли
   график вниз. Пока помещается — стоит по центру. */
#v-tr .srcrow { justify-content: center; align-items: center; margin: 0 0 18px; padding: 0; border: 0; gap: 8px; min-width: 0 }
#v-tr .srcrow-lbl { margin-right: 2px; font: 600 9px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-3) }
#v-tr .src-list { gap: 8px; flex: 0 1 auto; min-width: 0; padding: 3px 2px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent) }
#v-tr .src-list .chip { min-height: 0; padding: 8px 15px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-2) 60%, transparent); color: var(--muted); font-size: 12.5px; font-weight: 600;
  transition: transform .24s var(--ease-bounce), color .24s, border-color .24s, background .24s }
@media (hover: hover) { #v-tr .src-list .chip:hover { color: var(--text); border-color: var(--line-2); transform: translateY(-2px) } }
#v-tr .src-list .chip[aria-pressed="true"], #v-tr .src-list .chip.is-on { color: var(--accent-ink); border-color: var(--accent-edge);
  background: linear-gradient(140deg, var(--accent-wash-2), var(--accent-wash)) }
#v-tr .src-list .chip--add { border-style: dashed; color: var(--muted-3) }

/* ── «Как пользоваться» ── */
#v-tr .tut { position: relative; width: 100%; max-width: 960px; margin: 0 auto 16px; padding: 15px 18px 15px 47px; border-radius: 24px;
  border: 1px solid var(--accent-edge); background: linear-gradient(140deg, var(--accent-wash), color-mix(in srgb, var(--panel) 60%, transparent));
  font-size: 13px; line-height: 1.65; color: var(--muted) }
#v-tr .tut::before { content: ''; position: absolute; left: 18px; top: 17px; width: 17px; height: 17px; background: var(--accent-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8v.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8v.5'/%3E%3C/svg%3E") center / contain no-repeat }

/* ── Рабочая зона — стеклянная карточка. Рамка вспыхивает цветом исхода. ── */
#v-tr .zone { flex: none; width: 100%; max-width: 960px; margin: 0 auto; padding: 0; overflow: hidden; border-radius: 24px;
  border: 1px solid var(--glass-edge); background: linear-gradient(170deg, color-mix(in srgb, var(--panel) 80%, transparent), color-mix(in srgb, var(--bg) 92%, transparent));
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--glass-shadow); transition: border-color .4s, box-shadow .4s }
#v-tr .zone::after { display: none }
.tx-field.is-ok .zone { border-color: var(--accent-edge) }
.tx-field.is-near .zone { border-color: var(--brass-edge) }
.tx-field.is-bad .zone { border-color: var(--bad-edge) }
.tx-field.is-ok .zone, .tx-field.is-near .zone, .tx-field.is-bad .zone { animation: tx-plot 2.4s var(--ease-bounce) forwards }
@keyframes tx-plot {
  0% { box-shadow: var(--glass-shadow), 0 0 0 3px color-mix(in srgb, var(--tx-gl) 32%, transparent), 0 0 64px color-mix(in srgb, var(--tx-gl) 36%, transparent) }
  100% { box-shadow: var(--glass-shadow), 0 0 0 0 transparent, 0 0 26px color-mix(in srgb, var(--tx-gl) 9%, transparent) }
}
#v-tr .zone-head { justify-content: flex-start; margin: 0; padding: 15px 18px 0 }
#v-tr .zone-head:has(.zone-meta:empty) { display: none }
#v-tr .zone-meta { font: 600 9.5px var(--font-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted-3) }
/* «Уровень» (прототип владельца): шапка карточки отделена линией, слева —
   какой вариант звучит и волна, которая движется со звуком, справа —
   допуск пилюлей. */
#v-tr .zone-head:has(.zone-src) { padding: 14px 18px; border-bottom: 1px solid color-mix(in srgb, var(--text) 5%, transparent) }
#v-tr .zone-meta:has(.zone-src) { flex: 1; display: flex; align-items: center; gap: 9px }
.zone-src { display: inline-flex; align-items: center; gap: 9px }
.zone-wv { display: inline-flex; align-items: center; gap: 2px; height: 14px }
.zone-wv i { width: 2px; height: 26%; border-radius: 2px; background: var(--line-2); transition: height .18s linear }
#v-tr.is-playing .zone-wv i { background: linear-gradient(180deg, var(--lime), var(--accent)); animation: tx-eq .9s ease-in-out infinite }
#v-tr.is-playing .zone-wv i:nth-child(3n+2) { animation-delay: .17s }
#v-tr.is-playing .zone-wv i:nth-child(3n) { animation-delay: .34s }
#v-tr.is-playing .zone-wv i:nth-child(4n) { animation-duration: .7s }
.zone-tol { margin-left: auto; padding: 6px 12px; border-radius: var(--r-pill); white-space: nowrap;
  font: 700 10px var(--font-mono); letter-spacing: 0; text-transform: none; color: var(--brass); background: var(--brass-wash); border: 1px solid var(--brass-edge) }
#v-tr #zoneLbl { display: none }
#v-tr .zone-body { padding: 0 }
/* Холст: сверху строка подписей, ниже график с пилюлей частоты. */
#v-tr .canvas-wrap { padding-top: 42px; background: transparent; border: 0; border-radius: 0 }
#v-tr canvas { height: min(330px, 38vh); cursor: crosshair }
#v-tr .cv-tag { top: 16px; left: 18px; font: 600 9.5px var(--font-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted-3) }
#v-tr .cv-tag.r { left: auto; right: 18px; font: italic 600 12px var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--accent-ink) }
/* После ответа и в «Как пользоваться» левая подпись — пилюлей: это уже
   не пояснение, а сама полоса. */
.tx-field.is-ok #cvTag, .tx-field.is-near #cvTag, .tx-field.is-bad #cvTag, .tx-field.is-explore #cvTag {
  top: 11px; padding: 6px 12px; border-radius: var(--r-pill); font: 700 11px var(--font-mono); letter-spacing: 0; text-transform: none;
  color: var(--text); background: color-mix(in srgb, var(--bg) 72%, transparent); border: 1px solid var(--line) }
.tx-field.is-near #cvTag, .tx-field.is-bad #cvTag { color: var(--brass); border-color: var(--brass-edge); background: var(--brass-wash) }
.tx-field.is-ok #cvTag { color: var(--accent-ink); border-color: var(--accent-edge); background: var(--accent-wash) }
/* «Подъём / Срез» на графике «Частот»: у линии выбора, «Подъём» сверху,
   «Срез» снизу. Выбранное — латунью (ответ дан, но не проверен), после
   ответа — зелёным верное и терракотой свой промах. */
.eq-dir { position: absolute; inset: 0; z-index: 3; pointer-events: none }
.eq-dir-b { position: absolute; transform: translateX(-50%); pointer-events: auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 15px 0 11px; border-radius: var(--r-pill); border: 1px solid var(--line-2); white-space: nowrap; cursor: pointer;
  background: color-mix(in srgb, var(--panel-2) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--text); font: 600 13px var(--font-ui); box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  transition: background .2s, border-color .2s, color .2s, opacity .2s }
.eq-dir-b svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
@media (hover: hover) { .eq-dir-b:not(:disabled):not(.on):hover { border-color: var(--brass-edge); color: var(--brass) } }
@media (pointer: coarse) { .eq-dir-b { min-height: 42px; padding: 0 17px 0 13px; font-size: 14px } }
.eq-dir-b.on { color: var(--on-brass); border-color: transparent; background: var(--brass) linear-gradient(145deg, #F5EBC6, var(--brass));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brass) 30%, transparent) }
.eq-dir-b.ok { color: var(--on-accent); border-color: transparent; background: var(--accent) linear-gradient(145deg, var(--lime), var(--accent)) }
.eq-dir-b.bad { color: var(--bad-ink); border-color: var(--bad-edge); background: color-mix(in srgb, var(--panel-2) 88%, var(--bad)) }
.eq-dir-b.dim { opacity: .4 }
.eq-dir-b:disabled { cursor: default }
.eq-dir-b:focus-visible { outline: 2px solid var(--solid-focus); outline-offset: 2px }
/* Приборы остальных тренажёров — внутри той же карточки, с полями. */
#v-tr #zoneHost { padding: 14px 18px 18px }
#v-tr #zoneHost > * { max-width: 440px; margin-left: auto; margin-right: auto }
/* Корреляциметр — широкая шкала, ему теснота вредит. */
/* Ось «Уровня» — на всю ширину карточки, с полями прототипа. Карточка
   по высоте содержимого, как в прототипе: общая высота слота (340 px, под
   холст «Частот») оставляла над осью и под ней пустые полосы. */
#v-tr #zoneHost:has(> .axw) { min-height: 0 }
#v-tr #zoneHost > .axw { max-width: 100%; padding: 12px 16px 6px }
@media (max-width: 640px) { #v-tr #zoneHost > .axw { padding: 10px 4px 4px } }
#v-tr .zone-extra { padding: 0 18px 18px }
/* «Компрессия» (прототип владельца, 25.09.2026): слева ручка, справа
   колонка карточек 320 px — кривая передачи до ответа, огибающие и метр
   подавления после. Уже 900 px — одной колонкой, карточки под ручкой. */
#v-tr .zone-body:has(> #zoneHost > .dial) { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; padding: 20px }
#v-tr #zoneHost:has(> .dial) { min-height: 0; padding: 0 }
#v-tr #zoneHost > .dial { max-width: none }
#v-tr .zone-body:has(> #zoneHost > .dial) > .zone-extra { padding: 0; gap: 12px; align-content: start }
@media (max-width: 900px) { #v-tr .zone-body:has(> #zoneHost > .dial) { grid-template-columns: minmax(0, 1fr) } }
@media (max-width: 640px) { #v-tr .zone-body:has(> #zoneHost > .dial) { padding: 16px 12px } }
.cc { min-width: 0; padding: 14px; border-radius: 24px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 50%, transparent) }
.cc.is-acc { border-color: var(--accent-edge); background: linear-gradient(160deg, var(--accent-wash), color-mix(in srgb, var(--bg) 60%, transparent) 62%);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 10%, transparent) }
.cc-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px }
.cc-h b { font: 600 8.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-3) }
.cc-h span { font: 700 11px var(--font-mono); color: var(--muted); text-align: right }
.cc-h span.is-ok { color: var(--accent-ink) }
.cc-h span.is-br { color: var(--brass) }
.cc svg { display: block; width: 100%; height: auto }
.cc-note { margin: 10px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted-3) }
.cc-note b { color: var(--muted); font-weight: 600 }
.cc-bg { fill: color-mix(in srgb, var(--bg) 50%, transparent) }
.cc-grid, .cc-mid { stroke: var(--panel-3); stroke-width: 1 }
.cc-diag { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 3 }
.cc-line { fill: none; stroke: url(#ccCurve); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round }
.cc-knee { fill: var(--bg); stroke: var(--accent); stroke-width: 2 }
.cc-drop { stroke: var(--brass); stroke-width: 1.6; stroke-dasharray: 2 2 }
.cc-drop-t { fill: var(--brass); font: 8px var(--font-mono) }
.cc-a { fill: color-mix(in srgb, var(--muted-3) 80%, var(--text)) }
.cc-keep { fill: url(#ccKeep) }
.cc-cut { fill: url(#ccCut) }
.cc-thr { stroke: var(--brass); stroke-width: 1; stroke-dasharray: 4 3; opacity: .7 }
.cc-gr { fill: var(--brass); opacity: .85 }
.cc-grz { stroke: var(--line-2); stroke-width: 1 }
.cc-lgd { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px }
.cc-lg { display: inline-flex; align-items: center; gap: 6px; font: 600 9.5px var(--font-mono); letter-spacing: .04em; color: var(--muted-3) }
.cc-sw { width: 9px; height: 9px; flex: none; border-radius: 3px }
.cc-sw.cut { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--brass) 85%, transparent) 0 2px, color-mix(in srgb, var(--brass) 25%, transparent) 2px 4px) }
.cc-sw.now { background: linear-gradient(180deg, var(--lime), var(--accent)) }
.cc-sw.thr { height: 2px; border-radius: 2px; background: var(--brass) }
/* Три ручки «Подбери настройки» — под прибором, по центру поля. */
#v-tr .mknobs { width: 100%; max-width: 440px; margin: 14px auto 0; padding: 0 }
#v-tr #tDir.ask2 { max-width: 380px; margin: 16px auto 0 }
/* Пустой слот вариантов ответа (у тренажёров с рабочей зоной он пуст
   всегда) место не занимает: он съедал под карточкой почти 40 px. */
#v-tr #tOpts:empty { display: none }

/* ── Нижняя панель ── */
.tx-act { position: relative; z-index: 2; flex: none; padding: 16px 22px 22px; display: grid; gap: 14px; justify-items: center;
  background: linear-gradient(0deg, color-mix(in srgb, var(--bg) 96%, transparent) 55%, transparent) }
.tx-ctl { width: 100%; max-width: 660px }
#v-tr .transport { justify-content: center; gap: 10px; padding: 0; border: 0 }
#v-tr .play { width: 54px; height: 54px; border-radius: 19px; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text);
  transition: transform .24s var(--ease-bounce), border-color .24s, color .24s, background .24s }
@media (hover: hover) { #v-tr .play:hover { border-color: var(--accent-edge); color: var(--accent-ink); transform: scale(1.05) } }
#v-tr .play.on { background: var(--accent) linear-gradient(145deg, var(--lime), var(--accent)); color: var(--on-accent); border-color: transparent;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 32%, transparent) }
/* A/Б — крупный сегмент; активный вариант — зелёный с бликом. X не
   подсвечивается никогда: это выдало бы ответ. */
#v-tr .ab { flex: 1 1 260px; min-width: 200px; gap: 6px; padding: 6px; border-radius: 22px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 85%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px) }
#v-tr .ab button { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 11px; height: 52px; padding: 0;
  border: 1px solid transparent; border-radius: 17px; background: color-mix(in srgb, var(--panel-2) 55%, transparent); color: var(--muted);
  transition: background .26s var(--ease-bounce), color .26s, border-color .26s, box-shadow .26s }
@media (hover: hover) { #v-tr .ab button:not(.on):hover { color: var(--text); background: var(--panel-3); border-color: var(--line-2) } }
#v-tr .ab .lt { font: 700 19px/1 var(--font-mono); letter-spacing: -.02em }
/* Подписи вариантов — у «Компрессии»: «как было» и «сжато». */
#v-tr .ab .ab-w { font-size: 12.5px; font-weight: 600; white-space: nowrap }
.ab-w:empty { display: none }
#v-tr .ab button.on, #v-tr .ab button.on.b { color: var(--on-accent); border-color: transparent;
  background: var(--accent) linear-gradient(135deg, #2AE06D, var(--accent) 58%, #0E6B33);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3) }
#v-tr .ab button.on::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: translateX(-100%); animation: tx-shine 2.8s var(--ease-bounce) infinite }
#v-tr .ab #abX.on { color: var(--text); background: var(--panel-3); border-color: var(--line-2); box-shadow: none }
#v-tr .ab #abX.on::after { display: none }
@keyframes tx-shine { 0% { transform: translateX(-100%) } 55%, 100% { transform: translateX(200%) } }
.ab .wv { display: none }
#v-tr .ab .wv { display: flex; align-items: center; gap: 2.5px; height: 17px; flex: none }
#v-tr .ab .wv i { width: 2.5px; height: 30%; border-radius: 2px; background: currentColor; opacity: .45 }
/* Волна движется только на активном варианте и только пока идёт звук. */
#v-tr.is-playing .ab button.on:not(#abX) .wv i { opacity: 1; animation: tx-eq .9s ease-in-out infinite }
#v-tr.is-playing .ab button.on .wv i:nth-child(2) { animation-delay: .13s }
#v-tr.is-playing .ab button.on .wv i:nth-child(3) { animation-delay: .26s }
#v-tr.is-playing .ab button.on .wv i:nth-child(4) { animation-delay: .39s }
@keyframes tx-eq { 0%, 100% { height: 26% } 50% { height: 100% } }
/* «Выровнять и сравнить» — по прототипу «Уровня»: той же высоты, что A/Б,
   со значком; включена — зелёная. На телефоне уходит отдельной строкой
   под A/Б (решение владельца: функция нужна и там). */
#v-tr :is(#alignBtn, #monoBtn.is-lg, #soloBtn) { flex: none; min-height: 0; height: 54px; padding: 0 18px; gap: 8px; border-radius: 19px; white-space: nowrap;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 80%, transparent); color: var(--muted); font-size: 13px; font-weight: 600;
  transition: color .24s, border-color .24s, background .24s }
#v-tr :is(#alignBtn, #monoBtn.is-lg, #soloBtn).hidden { display: none }
#v-tr :is(#alignBtn, #monoBtn.is-lg, #soloBtn) .tx-bi { width: 15px; height: 15px; stroke-width: 2.2 }
@media (hover: hover) { #v-tr :is(#alignBtn, #monoBtn.is-lg, #soloBtn):hover { color: var(--text); border-color: var(--line-2) } }
#v-tr :is(#alignBtn, #monoBtn.is-lg, #soloBtn).is-on { color: var(--accent-ink); border-color: var(--accent-edge); background: var(--accent-wash) }
@media (max-width: 640px) { #v-tr :is(#alignBtn, #monoBtn.is-lg, #soloBtn) { flex: 1 1 100%; height: 46px; justify-content: center } }
/* «Компрессия» и «Панорама» в невысоком окне (ноутбук, браузер с панелями — у владельца
   1223×683): поля, заголовок и док плотнее, чтобы ручка и атака были видны
   без прокрутки (правка владельца, 25.09.2026). Телефон не трогаем. */
@media (min-width: 641px) and (max-height: 870px) {
  #v-tr:has(.dial, .arc, .dcy, .hrm, .gon) .tx-scroll { padding-top: 8px }
  #v-tr:has(.dial, .arc, .dcy, .hrm, .gon) .tr-ask { margin-bottom: 10px }
  #v-tr:has(.dial, .arc, .dcy, .hrm, .gon) .tr-ask h3 { margin-bottom: 4px; font-size: 27px }
  #v-tr:has(.dial, .arc, .dcy, .hrm, .gon) .tr-ask h3 u { font-size: 19px }
  #v-tr:has(.dial, .arc, .dcy, .hrm, .gon) .tr-ask p { font-size: 13.5px; line-height: 1.5 }
  #v-tr:has(.dial, .arc, .dcy, .hrm, .gon) .seg { margin-bottom: 8px }
  #v-tr:has(.dial, .arc, .dcy, .hrm, .gon) .seg .mode { padding-top: 7px; padding-bottom: 7px }
  #v-tr:has(.dial, .arc, .dcy, .hrm, .gon) .srcrow { margin-bottom: 10px }
  #v-tr:has(.dial, .arc, .dcy, .hrm, .gon) .zone-head:has(.zone-src) { padding-top: 9px; padding-bottom: 9px }
  #v-tr:has(.dial) .zone-body:has(> #zoneHost > .dial) { padding: 12px 20px }
  #v-tr:has(.dial) .dial-scale { margin-bottom: 6px }
  #v-tr:has(.dial, .arc, .dcy, .hrm, .gon) .tx-act { padding: 10px 22px 12px; gap: 8px }
  #v-tr:has(.dial, .arc, .dcy, .hrm, .gon) .play { width: 48px; height: 48px }
  #v-tr:has(.dial, .arc, .dcy, .hrm, .gon) .ab button { height: 46px }
  #v-tr:has(.dial, .arc, .dcy, .hrm, .gon) .tx-act .btn { min-height: 44px; padding-top: 11px; padding-bottom: 11px }
}
/* «Панорама» (прототип владельца, 26.09.2026): карточка тянется на всю
   оставшуюся высоту, дуга сжимается по ней — страница не прокручивается
   ни при какой высоте окна. После ответа справа колонка карточек 250 px;
   на телефоне её нет, как в прототипе: подробности — в «Разборе». В
   совсем низком окне уходят подзаголовок вопроса и лента материала. */
#v-tr:has(.arc, .dcy, .hrm, .gon) .tx-col { height: 100% }
#v-tr:has(.arc, .dcy, .hrm, .gon) .zone { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column }
#v-tr:has(.arc, .dcy, .hrm, .gon) .zone-body { flex: 1; min-height: 0 }
#v-tr #zoneHost:has(> :is(.arc, .dcy, .hrm, .gon)) { flex: 1; min-height: 0; align-items: stretch; padding: clamp(10px, 1.8vh, 22px) 26px clamp(10px, 1.6vh, 20px) }
#v-tr #zoneHost > :is(.arc, .dcy, .hrm, .gon) { max-width: none }
#v-tr .zone-body.has-extra:has(> #zoneHost > :is(.arc, .dcy, .hrm, .gon)) { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 18px }
#v-tr .zone-body:has(> #zoneHost > :is(.arc, .dcy, .hrm, .gon)) > .zone-extra { min-height: 0; overflow-y: auto; align-content: start; gap: 12px; padding: clamp(10px, 1.8vh, 22px) 22px 16px 0 }
@media (max-width: 760px) {
  #v-tr .zone-body.has-extra:has(> #zoneHost > :is(.arc, .dcy, .hrm, .gon)) { grid-template-columns: minmax(0, 1fr) }
  #v-tr .zone-body:has(> #zoneHost > :is(.arc, .dcy, .hrm, .gon)) > .zone-extra { display: none }
  #v-tr #zoneHost:has(> :is(.arc, .dcy, .hrm, .gon)) { padding: 14px 14px 12px }
}
@media (max-height: 620px) { #v-tr:has(.arc, .dcy, .hrm, .gon) .tr-ask p, #v-tr:has(.arc, .dcy, .hrm, .gon) .srcrow { display: none } }
/* Карточки разбора «Панорамы»: баланс каналов и ширина источника. */
.pn-ch { display: flex; align-items: center; gap: 9px; margin-bottom: 7px }
.pn-ch em { width: 12px; flex: none; font: normal 700 10px var(--font-mono); color: var(--muted-3) }
.pn-ch i { flex: 1; height: 7px; border-radius: var(--r-pill); background: var(--panel-3); overflow: hidden }
.pn-ch i b { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent), var(--lime)) }
.pn-ch > b { width: 52px; text-align: right; font: 700 10.5px var(--font-mono); color: var(--muted) }
.pn-wid { position: relative; height: 26px; margin-top: 4px }
.pn-wid::before { content: ''; position: absolute; left: 0; right: 0; top: 12px; height: 5px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 50%, transparent), color-mix(in srgb, var(--brass) 35%, transparent)) }
.pn-wid i { position: absolute; top: 14px; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--lime); box-shadow: 0 0 12px color-mix(in srgb, var(--lime) 50%, transparent) }
.pn-wlb { display: flex; justify-content: space-between; margin-top: 2px; font: 600 9.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-3) }
/* Карточки разбора «Пространства»: измерено в Б и из чего сделана глубина. */
.rv-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px dashed color-mix(in srgb, var(--text) 5%, transparent) }
.rv-kv:last-of-type { border-bottom: 0 }
.rv-kv em { font-style: normal; font-size: 11.5px; color: var(--muted-3) }
.rv-kv b { font: 700 12px var(--font-mono); color: var(--text) }
.rv-kv b.is-ok { color: var(--accent-ink) }
.rv-kv b.is-br { color: var(--brass) }
.rv-split { display: flex; height: 8px; margin: 2px 0 7px; overflow: hidden; border-radius: var(--r-pill); background: var(--panel-3) }
.rv-split i { display: block; height: 100% }
.rv-split .e { background: linear-gradient(90deg, var(--lime), var(--accent)) }
.rv-split .t { background: linear-gradient(90deg, color-mix(in srgb, var(--brass) 75%, transparent), color-mix(in srgb, var(--brass) 35%, transparent)) }
.rv-splb { display: flex; justify-content: space-between; font: 600 9.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-3) }
/* «Фаза и моно»: потеря по полосам, худшая — терракотой. */
.pl-bd { display: flex; align-items: center; gap: 9px; margin-bottom: 8px }
.pl-bd em { width: 60px; flex: none; font-style: normal; font-size: 11px; color: var(--muted-3) }
.pl-bd span { position: relative; flex: 1; height: 8px; overflow: hidden; border-radius: var(--r-pill); background: var(--panel-3) }
.pl-bd span i { position: absolute; right: 0; top: 0; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 35%, transparent), var(--accent)) }
.pl-bd b { width: 58px; flex: none; text-align: right; font: 700 11px var(--font-mono); color: var(--muted) }
.pl-bd.is-worst span i { background: linear-gradient(90deg, color-mix(in srgb, var(--bad) 45%, transparent), var(--bad-ink)) }
.pl-bd.is-worst b { color: var(--bad-ink) }
/* «Сатурация»: чётные — зелёным, нечётные — серым, как в спектре. */
.rv-split .o { background: linear-gradient(90deg, var(--muted-3), color-mix(in srgb, var(--muted-3) 55%, transparent)) }
.cc-sat { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round }
.cc-sat-l { font: 600 9.5px var(--font-mono); fill: var(--muted-3) }
.cc-sat-l.is-g { fill: var(--accent-ink) }
/* Метр подавления в доке — по прототипу «Компрессии»: подпись и число
   строкой, под ними полоса, растущая справа налево. На телефоне — своей
   строкой под А/Б. */
#v-tr .meterbox { flex: none; width: 130px; display: grid; grid-template-columns: 1fr auto; gap: 5px;
  font: 600 9px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-3) }
#v-tr .meterbox.hidden { display: none }
#v-tr #meterLbl { grid-area: 1 / 1 }
#v-tr #meterVal { grid-area: 1 / 2; letter-spacing: 0 }
#v-tr .meterbox .meter { grid-area: 2 / 1 / 3 / 3; position: relative; width: auto; height: 8px; border-radius: var(--r-pill); background: var(--panel-2) }
#v-tr .meterbox .meter i { position: absolute; top: 0; right: 0; bottom: 0; width: 0; border-radius: var(--r-pill);
  background: linear-gradient(270deg, var(--brass), #F0D98A); transition: width .12s linear }
@media (max-width: 640px) { #v-tr .meterbox { flex: 1 1 100%; width: auto } }

.tx-btns { display: flex; align-items: center; justify-content: center; gap: 11px; flex-wrap: wrap; width: 100%; max-width: 660px }
.tx-extra { display: flex; gap: 11px }
/* Кнопки в одну строку по центру: «Пропустить» слева от главного
   действия, а «Закончить подход» ушёл в крестик наверху. */
#v-tr .tr-acts { display: flex; align-items: center; justify-content: center; gap: 11px; margin: 0; padding: 0 }
#v-tr .acts-row { order: -1 }
#v-tr .tx-act .btn { min-height: 50px; padding: 14px 30px; border-radius: var(--r-pill); font-size: 14.5px; font-weight: 600; gap: 9px;
  transition: transform .24s var(--ease-bounce), box-shadow .24s, background .24s, border-color .24s, color .24s }
#v-tr .tx-act .btn--ghost, #v-tr .tx-act .btn--quiet { border-color: var(--line); background: color-mix(in srgb, var(--panel-2) 75%, transparent); color: var(--text) }
@media (hover: hover) { #v-tr .tx-act .btn--ghost:hover, #v-tr .tx-act .btn--quiet:hover { border-color: var(--line-2); background: var(--panel-3); transform: translateY(-2px) } }
#v-tr .tx-act .btn--primary:not(:disabled), #v-tr .tx-act .btn--solid { min-width: 200px; border-color: transparent; color: var(--on-accent);
  background: var(--accent) linear-gradient(135deg, #2AE06D, var(--accent) 62%, #0E6B33);
  box-shadow: 0 16px 38px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25) }
@media (hover: hover) { #v-tr .tx-act .btn--primary:not(:disabled):hover, #v-tr .tx-act .btn--solid:hover { transform: translateY(-2px) } }
#v-tr .tx-act .btn--primary:disabled { min-width: 200px; background: var(--panel-2); border-color: var(--line); color: var(--muted); box-shadow: none }
#v-tr .tx-act .btn:focus-visible { outline: 2px solid var(--solid-focus); outline-offset: 2px }
.tx-bi { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round }
.tx-bi.is-fill { fill: currentColor; stroke: none }

@media (max-width: 700px) {
  #v-tr .tr-ask h3 { font-size: 25px }
  #v-tr .tr-ask h3 u { font-size: 18px }
  #v-tr canvas { height: min(250px, 32vh) }
}
@media (max-width: 640px) {
  .tx-hd { padding: 10px 12px 0 }
  .tx-top { gap: 10px }
  .tx-hdt { gap: 8px }
  .tx-scroll { padding: 14px 12px 6px }
  #v-tr .srcrow .srcrow-lbl { display: none }
  #v-tr .srcrow { justify-content: flex-start }
  .tx-act { padding: 12px 12px 14px; gap: 12px }
  .tx-btns, #v-tr .tr-acts { width: 100% }
  #v-tr .tx-act .btn { flex: 1 1 0; min-width: 0; padding: 13px 14px }
  #v-tr .tx-act .btn--primary:not(:disabled), #v-tr .tx-act .btn--solid, #v-tr .tx-act .btn--primary:disabled { min-width: 0 }
}
@media (max-width: 560px) { .tx-mt { display: none } }

/* Мини-график в обучении: та же сетка полос, что на экране. В окне
   обучения — шире, как в прототипе. */
.mdl--tour .txd { max-width: 440px }
.txd { display: block; width: 100%; height: auto; max-width: 320px; margin: 0 auto }
.txd-grid { stroke: var(--line); stroke-width: 1 }
.txd-mid { stroke: var(--line-2); stroke-width: 1 }
.txd-lbl { fill: var(--muted-3); font-family: var(--font-mono); font-size: 8px }
.txd-band { fill: var(--brass-wash); stroke: var(--brass-edge); stroke-width: 1; stroke-dasharray: 3 3 }
.txd-band.is-ok { fill: var(--accent-wash); stroke: var(--accent-edge-2) }
.txd-pick { stroke: var(--brass); stroke-width: 1.5 }
.txd-curve { fill: none; stroke: var(--accent-ink); stroke-width: 2 }
.txd-tgt { stroke: var(--accent-ink); stroke-width: 1.5 }
.txd-flat { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 4 4 }
.txd-arc { fill: none; stroke: var(--line-2); stroke-width: 2 }
.txd-head { fill: var(--panel-3); stroke: var(--line-2); stroke-width: 1 }
.txd-dot { fill: var(--brass) }
.txd-dot.is-ok { fill: var(--accent-ink) }

/* Ось «Уровня» в обучении — уменьшенная копия рабочей: те же цвета,
   метка, пилюля, допуск и пунктир промаха. */
.txa-wrap { width: 100%; max-width: 440px }
.txa-ends { display: flex; justify-content: space-between; margin-bottom: 12px; font: 600 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-3) }
.txa { position: relative; height: 56px; margin: 0 8px }
.txa > * { position: absolute }
.txa-ln { left: 0; right: 0; top: 36px; height: 2px; border-radius: 2px; background: var(--line-2) }
.txa-z { left: 50%; top: 24px; bottom: 6px; width: 1px; background: var(--line-2) }
.txa-fill { top: 35px; height: 4px; border-radius: 9px; background: linear-gradient(90deg, var(--accent-deep), var(--lime)) }
.txa-mk { top: 37px; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid var(--bg);
  background: var(--brass) linear-gradient(180deg, #F5EBC6, var(--brass)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brass) 14%, transparent) }
.txa-mk.is-mine { width: 14px; height: 14px; background: var(--brass); box-shadow: none }
.txa-mk.is-tgt { background: var(--accent) linear-gradient(180deg, var(--lime), var(--accent)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent) }
.txa-bub { top: 0; transform: translateX(-50%); padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; font: 700 11px/14px var(--font-mono);
  color: var(--on-brass); background: var(--brass) linear-gradient(145deg, #F5EBC6, var(--brass)) }
.txa-bub.is-zero { color: #141A17; background: #DCE3DE linear-gradient(145deg, #F2F6F0, #C9D3CC) }
.txa-bub.is-tgt { color: var(--on-accent); background: var(--accent) linear-gradient(145deg, var(--lime), var(--accent)) }
.txa-tol { top: 28px; height: 18px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent) }
.txa-gap { top: 36px; height: 2px; background: repeating-linear-gradient(90deg, var(--bad) 0 4px, transparent 4px 8px) }
.txa-lock { left: 0; right: 0; top: 20px; height: 34px; display: grid; place-items: center; border-radius: 12px; border: 1px dashed var(--line-2);
  background: repeating-linear-gradient(115deg, color-mix(in srgb, var(--brass) 7%, transparent) 0 7px, transparent 7px 14px);
  font: 600 11px var(--font-mono); color: var(--muted-3) }

/* Окно закрытого режима — по прототипу «Компрессии». */
.lock-head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; padding-right: 44px }
.lock-ico { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 16px; color: var(--brass);
  background: var(--brass-wash); border: 1px solid var(--brass-edge) }
.lock-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
.mdl--lock .lock-head .mdl-t { margin: 0 0 3px; font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.025em; color: var(--text) }
.lock-sub { font: 700 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brass) }
.lock-lv { margin: 0 0 16px }
.lock-steps { display: flex; gap: 5px; margin-bottom: 8px }
.lock-steps i { flex: 1; height: 5px; border-radius: var(--r-pill); background: var(--panel-3) }
.lock-steps i.dn { background: linear-gradient(90deg, #0E6B33, var(--accent)) }
.lock-steps i.now { background: linear-gradient(90deg, var(--accent), var(--lime)); box-shadow: 0 0 12px color-mix(in srgb, var(--lime) 35%, transparent) }
.lock-lv span { font: 600 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-3) }
.mdl--lock .lock-ok { width: 100%; margin-top: 4px }

/* «Компрессия» в обучении: маленькая ручка, огибающие и шкала ориентиров. */
.txm { display: block; width: 78px; height: 78px }
.txm-track { fill: none; stroke: var(--panel-3); stroke-width: 13; stroke-linecap: round }
.txm-arc { fill: none; stroke: var(--accent); stroke-width: 13; stroke-linecap: round }
.txm-arc.is-tgt { stroke: var(--lime) }
.txm-well { fill: var(--bg); stroke: var(--panel-3) }
.txm-hand { stroke: var(--text); stroke-width: 5; stroke-linecap: round }
.txm-hand.is-off { stroke: var(--line-2) }
.txw { display: block; width: 120px; height: 40px }
.txw-a { fill: var(--muted-3) }
.txw-b { fill: var(--accent) }
.txs { width: 100%; max-width: 440px }
.txs-bar { display: flex; height: 34px; overflow: hidden; border-radius: 12px; border: 1px solid var(--line) }
.txs-bar i, .txs-lbl span { display: block }
.txs-bar .a, .txs-lbl .a { flex: 2 }
.txs-bar .b, .txs-lbl .b { flex: 3 }
.txs-bar .c, .txs-lbl .c { flex: 3 }
.txs-bar .a { background: color-mix(in srgb, var(--muted) 12%, transparent) }
.txs-bar .b { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--lime) 25%, transparent)) }
.txs-bar .c { background: color-mix(in srgb, var(--brass) 18%, transparent) }
.txs-lbl { display: flex; margin-top: 8px; font: 600 10px var(--font-mono); color: var(--muted-3) }
.txs-lbl .b { color: var(--accent-ink) }
.txs-lbl .c { color: var(--brass); text-align: right }

/* Дуга «Панорамы» в обучении — по прототипу. */
.txp { width: 100% }
.txp-l { display: flex; justify-content: space-between; margin-bottom: 14px; font: 600 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-3) }
.txp-svg { display: block; width: 100%; height: clamp(150px, 26vh, 230px); overflow: visible }
.txp-arc { fill: none; stroke: var(--line); stroke-width: 3; stroke-linecap: round }
.txp-tick { stroke: var(--panel-3); stroke-width: 1.5; stroke-linecap: round }
.txp-tick.mid { stroke: var(--line-2); stroke-width: 2 }
.txp-tol { fill: color-mix(in srgb, var(--accent) 9%, transparent); stroke: color-mix(in srgb, var(--accent) 28%, transparent); stroke-dasharray: 5 5 }
.txp-ray { stroke: color-mix(in srgb, var(--brass) 85%, transparent); stroke-width: 2; stroke-linecap: round }
.txp-ray.is-tgt { stroke: var(--accent); stroke-width: 2.5 }
.txp-dot { fill: var(--brass); stroke: var(--bg); stroke-width: 2 }
.txp-dot.is-tgt { fill: var(--accent) }
.txp-head { fill: color-mix(in srgb, var(--panel) 95%, transparent); stroke: var(--line-2); stroke-width: 2 }
.txp-head-dot { fill: var(--muted-3) }
.txp-lbl { font: 600 11px var(--font-mono); fill: var(--muted-3) }
.txp-lbl.c { fill: var(--muted) }
.txp-hid { font: 600 13px var(--font-mono); fill: var(--muted-3) }

/* Поле затухания в обучении — по прототипу. */
.txy-svg, .txh-svg { display: block; width: 100%; height: clamp(140px, 24vh, 200px); overflow: visible }
/* Гониометр в обучении «Фазы». */
.txg-frame { fill: color-mix(in srgb, var(--bg) 50%, transparent); stroke: var(--line); stroke-width: 1.4 }
.txg-ax { stroke: var(--panel-3); stroke-width: 1 }
.txg-ax.is-dash { stroke-dasharray: 3 6 }
.txg-dot.is-ok { fill: var(--accent) } .txg-dot.is-lime { fill: var(--lime) } .txg-dot.is-bad { fill: var(--bad-ink) } .txg-dot.is-br { fill: var(--brass) }
.txg-cap { font: 700 11px var(--font-mono); fill: var(--muted) }
.txg-br { font: 700 11px var(--font-mono); fill: var(--brass) }
.txg-g { font: 700 11px var(--font-mono); fill: var(--accent-ink) }
.txg-lbl { font: 600 11px var(--font-mono); fill: var(--muted) }
.txg-bad { font: 600 11px var(--font-mono); fill: var(--bad-ink) }
.txg-wave { fill: none; stroke: var(--muted-3); stroke-width: 1.8 }
.txg-sum { fill: none; stroke-width: 2.4 }
.txg-sum.is-bad { stroke: var(--bad-ink) }
.txg-bar { fill: var(--panel-3) }
.txg-fill { fill: var(--accent); opacity: .8 }
.txg-fill.is-bad { fill: var(--bad-ink); opacity: 1 }
/* Спектр гармоник в обучении «Сатурации». */
.txh-axis { stroke: var(--line); stroke-width: 1.5 }
.txh-fund { fill: url(#thFund) }
.txh-bar.is-even { fill: url(#thEven) }
.txh-bar.is-odd { fill: url(#thOdd) }
.txh-ghost { fill: none; stroke: color-mix(in srgb, var(--brass) 90%, transparent); stroke-width: 2; stroke-dasharray: 6 4 }
.txh-tol { fill: color-mix(in srgb, var(--accent) 7%, transparent); stroke: color-mix(in srgb, var(--accent) 22%, transparent); stroke-dasharray: 5 5 }
.txh-zl { stroke: var(--panel-3); stroke-dasharray: 3 6 }
.txh-level { stroke: color-mix(in srgb, var(--brass) 30%, transparent); stroke-dasharray: 2 6 }
.txh-knob { fill: var(--brass); stroke: var(--bg); stroke-width: 2 }
.txh-lbl { font: 600 10px var(--font-mono); fill: var(--muted-3) }
.txh-br { font: 700 12px var(--font-mono); fill: var(--brass) }
.txh-g { font: 700 12px var(--font-mono); fill: var(--accent-ink) }
.txh-hid { font: 600 13px var(--font-mono); fill: var(--muted-3) }
.txh-ev { font: 700 11px var(--font-mono); fill: var(--accent-ink) }
.txh-od { font: 700 11px var(--font-mono); fill: var(--muted) }
.txy-floor { stroke: var(--line); stroke-width: 1.5 }
.txy-hit { stroke: var(--line-2); stroke-width: 3; stroke-linecap: round }
.txy-fill { fill: color-mix(in srgb, var(--brass) 22%, transparent) }
.txy-gfill { fill: color-mix(in srgb, var(--accent) 20%, transparent) }
.txy-mine { fill: none; stroke: var(--brass); stroke-width: 2.5; stroke-linejoin: round }
.txy-mine.is-dash { stroke-width: 2; stroke-dasharray: 7 5 }
.txy-real { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round }
.txy-level { stroke: color-mix(in srgb, var(--brass) 30%, transparent); stroke-dasharray: 2 6 }
.txy-knob { fill: var(--brass); stroke: var(--bg); stroke-width: 2 }
.txy-tol { fill: color-mix(in srgb, var(--accent) 7%, transparent); stroke: color-mix(in srgb, var(--accent) 22%, transparent); stroke-dasharray: 5 5 }
.txy-z0 { fill: color-mix(in srgb, var(--muted-3) 10%, transparent) }
.txy-z1 { fill: color-mix(in srgb, var(--accent) 10%, transparent) }
.txy-z2 { fill: color-mix(in srgb, var(--brass) 8%, transparent) }
.txy-zt0, .txy-zt1, .txy-zt2 { font: 700 10px var(--font-mono) }
.txy-zt0 { fill: var(--muted-3) } .txy-zt1 { fill: var(--accent-ink) } .txy-zt2 { fill: var(--brass) }
.txy-lbl { font: 600 11px var(--font-mono); fill: var(--muted) }
.txy-br { font: 700 12px var(--font-mono); fill: var(--brass) }
.txy-g { font: 700 12px var(--font-mono); fill: var(--accent-ink) }
.txy-hid { font: 600 13px var(--font-mono); fill: var(--muted-3) }

/* Ручка в обучении — та же, что в рабочей зоне, только с подписью. */
.txk { display: flex; gap: 22px; justify-content: center; align-items: flex-end }
.txk-one { margin: 0; display: grid; justify-items: center; gap: 6px }
.txk-one figcaption { font-size: 11px; color: var(--muted-2) }
.txk-one.is-ok figcaption { color: var(--accent-ink) }

/* Без движения исход остаётся различимым: цвет заголовка, рамка графика
   и неподвижное свечение снизу. */
@media (prefers-reduced-motion: reduce) {
  :is(#v-tr, #v-mix)::before, :is(#v-tr, #v-mix)::after, :is(#v-tr, #v-mix) .tx-glow, .tx-glow::after, .tx-bar i, #v-tr .zone,
  #v-tr .ab button.on::after, #v-tr .ab .wv i { animation: none !important }
  .tx-field.is-ok::after, .tx-field.is-near::after, .tx-field.is-bad::after { animation: none; opacity: .26 }
  .tx-bar i, #v-tr .zone { transition: none }
}