/* «Баланс» — экран на всё окно. По прототипу владельца
   «balance-prototype.html» (24.09.2026), на токенах приложения.

   Шапка, фон и свечение исхода — общие с экраном подхода (screen-tr.css).
   Ниже вопрос и пульт: карточка на канал с фейдером и индикатором, под
   каналами — линейка ошибки после ответа и строка-подсказка. Внизу —
   воспроизведение, A/Б после ответа и одно главное действие. */

body[data-view="mix"] .rail, body[data-view="mix"] .topbar { display: none }
body[data-view="mix"] { overflow: hidden }
#v-mix.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);
}
#v-mix .qz-icon:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px }

/* ── Поле ── */
.mx-field { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column }
/* Нижняя заливка исхода — часть вспышки, как на экране подхода. */
.mx-field::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56vh; pointer-events: none; opacity: 0; z-index: 0 }
.mx-field.is-ok::after, .mx-field.is-near::after, .mx-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 }
.mx-scroll { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; padding: 22px 22px 10px }
.mx-col { max-width: 760px; min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; text-align: center }
.mx-kicker { margin-bottom: 8px; font: 600 9.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-3) }
.mx-ask { margin: 0 0 9px; font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -.04em; transition: color .3s }
.mx-ask u { text-decoration: none; font: 700 24px var(--font-mono); letter-spacing: -.03em; color: var(--muted); white-space: nowrap }
.mx-field.is-ok .mx-ask { color: var(--accent-ink) }
.mx-field.is-near .mx-ask { color: var(--brass) }
.mx-field.is-bad .mx-ask { color: var(--bad-ink) }
.mx-hint { margin: 0 auto 18px; max-width: 600px; font-size: 14px; line-height: 1.6; color: var(--muted) }
.mx-hint b { color: var(--text); font-weight: 600 }
.mx-host { display: grid; place-items: center }

/* ── Пульт ── */
.mixz { position: relative; width: 100%; max-width: 760px; overflow: hidden; border-radius: 30px; text-align: left;
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
  background: linear-gradient(170deg, color-mix(in srgb, var(--panel) 82%, transparent), color-mix(in srgb, var(--bg) 94%, transparent));
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transition: border-color .4s }
.mx-field.is-ok .mixz { border-color: var(--accent-edge) }
.mx-field.is-near .mixz { border-color: var(--brass-edge) }
.mx-field.is-bad .mixz { border-color: var(--bad-edge) }
.mx-field.is-ok .mixz, .mx-field.is-near .mixz, .mx-field.is-bad .mixz { animation: tx-plot 2.4s var(--ease-bounce) forwards }
.mixz-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--glass-edge) }
.mixz-src { display: flex; align-items: center; gap: 9px; font: 600 10px var(--font-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted-3) }
/* Волна источника идёт за общим уровнем микса. */
.mixz-srcw { display: flex; align-items: center; gap: 2px; height: 14px }
.mixz-srcw i { width: 2px; height: 26%; border-radius: 2px; background: var(--line-2); transition: height .18s linear }
#v-mix.is-playing .mixz-srcw i { background: linear-gradient(180deg, var(--lime), var(--accent)) }

/* Каналы */
.mixv-row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 14px; padding: 22px 22px 8px }
.mixv { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 14px 12px 13px; border-radius: 24px;
  border: 1px solid var(--line); background: linear-gradient(165deg, color-mix(in srgb, var(--panel-2) 55%, transparent), color-mix(in srgb, var(--bg) 60%, transparent));
  transition: border-color .28s, background .28s, box-shadow .28s }
/* Выбранный канал — тот, у которого фокус: мышь, палец или Tab. */
.mixz.is-fix .mixv:focus-within { border-color: var(--accent-edge); background: linear-gradient(165deg, var(--accent-wash), color-mix(in srgb, var(--bg) 70%, transparent));
  box-shadow: 0 18px 44px var(--glow-ok) }
.mixv-h { align-self: stretch; display: flex; align-items: center; gap: 8px; min-height: 26px; margin-bottom: 12px }
.mixv-ic { width: 26px; height: 26px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted-3); transition: .26s var(--ease-bounce) }
.mixv-ic svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.mixz.is-fix .mixv:focus-within .mixv-ic { color: var(--on-accent); border-color: transparent; background: var(--accent) linear-gradient(145deg, var(--lime), var(--accent));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 28%, transparent) }
.mixv-name { min-width: 0; font-size: 13px; font-weight: 700; letter-spacing: -.01em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mixv.is-bad .mixv-name { color: var(--bad-ink) }

/* Фейдер: паз с рисками без чисел, заливка от середины шкалы до ручки,
   ручка-колпачок с тремя чертами. Положение — --p от 0 (низ) до 1
   (верх), метка эталона в разборе — --r по той же шкале. */
.mixv-fad { display: flex; gap: 9px; justify-content: center; align-items: stretch; height: 250px; margin-bottom: 12px }
.mixv-f {
  --cap: 34px;
  position: relative; width: 54px; flex: none; border-radius: 18px; overflow: hidden; outline: none; touch-action: none; cursor: grab;
  border: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 85%, transparent), color-mix(in srgb, var(--panel) 70%, transparent));
}
.mixv-f:focus-visible { box-shadow: 0 0 0 2px var(--accent-hi) }
.mixv-f.is-grab { cursor: grabbing }
.mixv-grid { position: absolute; left: 0; right: 0; top: calc(var(--cap) / 2); bottom: calc(var(--cap) / 2); display: flex; flex-direction: column; justify-content: space-between; pointer-events: none }
.mixv-grid i { height: 1px; margin: 0 9px; background: var(--line) }
.mixv-grid i.z { height: 1.5px; margin: 0 5px; background: var(--line-2) }
.mixv-slot { display: none }
.mixv-fill { position: absolute; left: 8px; right: 8px; border-radius: 6px; pointer-events: none; opacity: .9;
  bottom: calc(var(--cap) / 2 + var(--lo, .5) * (100% - var(--cap))); height: calc((var(--hi, .5) - var(--lo, .5)) * (100% - var(--cap)));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 40%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)) }
.mixv-f.is-neg .mixv-fill { background: linear-gradient(0deg, color-mix(in srgb, var(--brass) 30%, transparent), color-mix(in srgb, var(--brass) 6%, transparent)) }
.mixv-cap {
  position: absolute; left: 4px; right: 4px; height: var(--cap); z-index: 1;
  bottom: calc(var(--p, .5) * (100% - var(--cap)));
  display: grid; place-items: center; align-content: center; gap: 3px; border-radius: 11px;
  background: linear-gradient(180deg, #39433D, #1B211E 52%, #252D28); border: 1px solid #47534C;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .14); transition: box-shadow .26s, border-color .26s, opacity .3s;
}
.mixv-cap i { display: block; width: 22px; height: 2px; border-radius: 2px; background: #5C6862 }
.mixv-cap i:nth-child(2) { background: linear-gradient(90deg, var(--lime), var(--accent)); box-shadow: 0 0 9px color-mix(in srgb, var(--lime) 50%, transparent) }
.mixz.is-fix .mixv:focus-within .mixv-cap, .mixv-f.is-grab .mixv-cap { border-color: var(--accent-edge);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .55), 0 0 22px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, .16) }
/* Пока звучит эталон, ручек нет: запоминают ухом, а не глазами. */
.mixz.is-mem .mixv-cap, .mixz.is-mem .mixv-fill { visibility: hidden }
.mixz.is-mem .mixv-f, .mixz.is-done .mixv-f { cursor: default }
/* Разбор: латунная метка эталона поперёк фейдера. */
.mixv-ref { position: absolute; left: -5px; right: -5px; height: 2px; border-radius: 2px; pointer-events: none; z-index: 2; transform: translateY(50%);
  bottom: calc(var(--cap) / 2 + var(--r, .5) * (100% - var(--cap)));
  background: linear-gradient(90deg, transparent, var(--brass) 14%, #F0D98A 50%, var(--brass) 86%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--brass) 55%, transparent); animation: mixv-ref .45s var(--ease-bounce) }
@keyframes mixv-ref { from { opacity: 0 } to { opacity: 1 } }
/* В разборе, пока слушают эталон, свои ручки притушены. */
#v-mix .mixz.is-done .mixv-cap { opacity: 1 }
#v-mix:has([data-mxab="A"].on) .mixz.is-done .mixv-cap { opacity: .35 }
/* Индикатор уровня канала — после фейдера, с той ветки, что звучит. */
.mixv-mt { position: relative; width: 9px; flex: none; overflow: hidden; border-radius: var(--r-pill); border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 80%, transparent); transition: opacity .3s }
.mixv-mt i { position: absolute; left: 1px; right: 1px; bottom: 1px; height: 0; border-radius: var(--r-pill); opacity: .85; transition: height .16s linear;
  background: linear-gradient(0deg, var(--accent), var(--lime)) }
/* Индикаторы — только в разборе: во время запоминания и ответа по ним
   баланс выставлялся бы глазами (см. mixMeters в src/mix.js). */
.mixz.is-mem .mixv-mt, .mixz.is-fix .mixv-mt { opacity: 0 }

/* Завеса «слушай ухом»: полосы идут за общим уровнем, не за каналом. */
.mixv-veil { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 17px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--panel) 86%, transparent), color-mix(in srgb, var(--bg) 94%, transparent)); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px) }
.mixv-scan { position: absolute; left: 0; right: 0; height: 38%; background: linear-gradient(180deg, transparent, var(--accent-wash), transparent); animation: mixv-scan 3.6s linear infinite }
@keyframes mixv-scan { 0% { top: -40% } 100% { top: 100% } }
.mixv-bars { display: flex; align-items: flex-end; gap: 3px; height: 74px }
.mixv-bars i { width: 4px; height: 20%; border-radius: 3px; opacity: .7; transition: height .2s linear;
  background: linear-gradient(0deg, color-mix(in srgb, var(--accent) 50%, transparent), color-mix(in srgb, var(--lime) 35%, transparent)) }
.mixv-lock { position: absolute; top: 14px; left: 50%; width: 15px; height: 15px; transform: translateX(-50%); fill: none; stroke: var(--muted-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.mixv-vn { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font: 700 9px var(--font-mono); letter-spacing: .06em; color: var(--muted-3);
  writing-mode: horizontal-tb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px }

/* Отклонение после ответа */
.mixv-dev { min-height: 24px; display: flex; justify-content: center }
.mixv-dch { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap;
  font: 700 11px var(--font-mono); letter-spacing: -.01em; color: var(--bad-ink); background: var(--bad-wash); border: 1px solid var(--bad-edge) }
.mixv-dch.is-ok { color: var(--accent-ink); background: var(--accent-wash); border-color: var(--accent-edge) }
.mixv-dch svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round }

/* Линейка ошибки: 0 … 8 дБ, зелёная зона допуска, точка ответа едет на место. */
.mixz-err { padding: 2px 22px 20px }
.mixz-err[hidden] { display: none }
.mixz-eb { position: relative; display: block; height: 38px }
.mixz-eb .ln { position: absolute; left: 0; right: 0; top: 15px; height: 4px; border-radius: var(--r-pill); background: var(--panel-2) }
.mixz-eb .tol { position: absolute; left: 0; top: 15px; height: 4px; border-radius: var(--r-pill); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--accent) 12%, transparent)) }
.mixz-eb .pt { position: absolute; top: 17px; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); border: 3px solid var(--bg); transition: left .7s var(--ease-bounce);
  background: var(--bad); box-shadow: 0 0 14px color-mix(in srgb, var(--bad) 60%, transparent) }
.mixz-eb .pt.is-near { background: var(--brass); box-shadow: 0 0 14px color-mix(in srgb, var(--brass) 60%, transparent) }
.mixz-eb .pt.is-ok { background: var(--accent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent) }
.mixz-eb .cap { position: absolute; top: 24px; white-space: nowrap; font: 700 9.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-3) }
.mixz-eb .cap.is-tol { transform: translateX(-50%); color: var(--accent-ink) }
.mixz-eb .cap.is-max { right: 0 }
.mixz-bot { padding: 12px 20px 16px; text-align: center; font: 600 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-3) }
.mixz-bot b { color: var(--muted); font-weight: 700 }
.mixz-wait { text-align: center; color: var(--muted-3); font-size: 13px; padding: 24px 0 }

/* ── Нижняя панель ── */
.mx-act { position: relative; z-index: 2; flex: none; padding: 12px 22px 22px; display: grid; gap: 10px; justify-items: center;
  background: linear-gradient(0deg, color-mix(in srgb, var(--bg) 96%, transparent) 55%, transparent) }
.mx-note { margin: 0; min-height: 16px; font: 600 11px var(--font-mono); color: var(--muted-3); text-align: center }
.mx-btns { display: flex; align-items: center; justify-content: center; gap: 11px; flex-wrap: wrap; width: 100%; max-width: 660px }
.mx-main { display: flex; gap: 11px; flex-wrap: wrap; justify-content: center }
.mx-play { width: 54px; height: 54px; flex: none; border-radius: 19px; display: grid; place-items: center; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text); transition: transform .24s var(--ease-bounce), border-color .24s, color .24s }
@media (hover: hover) { .mx-play:hover { border-color: var(--accent-edge); color: var(--accent-ink); transform: scale(1.05) } }
/* Заливка у play — подтверждение, что звук идёт. */
.mx-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) }
.mx-play:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px }
.mx-ab { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 230px; flex: none; padding: 6px; border-radius: 22px;
  background: color-mix(in srgb, var(--panel) 85%, transparent); border: 1px solid var(--line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px) }
.mx-ab.hidden { display: none }
.mx-ab button { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0;
  border: 1px solid transparent; border-radius: 17px; background: color-mix(in srgb, var(--panel-2) 55%, transparent); color: var(--muted);
  font: 600 12px var(--font-ui); cursor: pointer; transition: background .26s, color .26s, border-color .26s }
.mx-ab .lt { font: 700 15px/1 var(--font-mono); letter-spacing: -.02em }
@media (hover: hover) { .mx-ab button:not(.on):hover { color: var(--text); background: var(--panel-3); border-color: var(--line-2) } }
.mx-ab button.on { 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) }
.mx-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 }
.mx-ab button:focus-visible { outline: 2px solid var(--solid-focus); outline-offset: 2px }
.mx-main .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 }
.mx-main .btn--ghost, .mx-main .btn--quiet { border-color: var(--line); background: color-mix(in srgb, var(--panel-2) 75%, transparent); color: var(--text) }
.mx-main .btn--quiet { border-color: transparent; background: transparent; color: var(--muted) }
@media (hover: hover) { .mx-main .btn--ghost:hover { border-color: var(--line-2); background: var(--panel-3); transform: translateY(-2px) } .mx-main .btn--quiet:hover { color: var(--text) } }
.mx-main .btn--primary:not(:disabled), .mx-main .btn--solid:not(:disabled) { 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) { .mx-main .btn--primary:not(:disabled):hover, .mx-main .btn--solid:not(:disabled):hover { transform: translateY(-2px) } }
.mx-main .btn:disabled { min-width: 200px; background: var(--panel-2); border-color: var(--line); color: var(--muted); box-shadow: none }
.mx-main .btn:focus-visible { outline: 2px solid var(--solid-focus); outline-offset: 2px }

@media (max-width: 820px) {
  .mx-ask { font-size: 26px }
  .mx-ask u { font-size: 19px }
  .mixv-row { gap: 9px; padding: 16px 14px 6px }
  .mixv { padding: 12px 8px 11px }
  .mixv-fad { height: 200px }
  .mixv-f { width: 44px }
}
@media (max-width: 640px) {
  .mx-scroll { padding: 14px 12px 6px }
  .mixz { border-radius: 24px }
  .mixv-row { gap: 6px; padding: 12px 10px 4px }
  .mixv { padding: 10px 4px; border-radius: 18px }
  .mixv-h { flex-direction: column; gap: 5px; margin-bottom: 8px }
  .mixv-name { font-size: 11px; max-width: 100% }
  .mixv-fad { gap: 5px; height: clamp(170px, 30vh, 220px) }
  .mixv-f { width: 40px }
  .mixv-mt { width: 6px }
  /* Пять-шесть каналов на 375 px: колонка уже 50 px, отклонение — без
     стрелки и без «дБ», только число. */
  .mixv-dch { gap: 3px; padding: 3px 6px; font-size: 9.5px }
  .mixv-dch svg, .mixv-dch .u { display: none }
  .mixv-vn { font-size: 8px; white-space: normal; line-height: 1.2 }
  .mx-act { padding: 10px 12px 14px }
  .mx-main { flex: 1 1 100% }
  .mx-main .btn { flex: 1 1 0; min-width: 0 !important; padding: 13px 14px }
  .mx-ab { width: 190px }
}

/* Разбор: отклонение по дорожкам — полоса от нуля в сторону ухода,
   зелёная зона допуска вокруг нуля. */
.mixw-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px }
.mixw-h .why-cl { margin: 0 }
.mixw-v { font: 700 22px var(--font-mono); letter-spacing: -.04em; color: var(--brass) }
.mixw-v.is-ok { color: var(--accent-ink) }
.mixw-v.is-bad { color: var(--bad-ink) }
.mixw-v u { margin-left: 3px; text-decoration: none; font-size: 12px; color: var(--muted) }
.mixw-list { display: flex; flex-direction: column; gap: 11px }
.mixw-row { display: grid; grid-template-columns: 84px 1fr 64px; align-items: center; gap: 11px }
.mixw-n { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.mixw-l { position: relative; height: 16px }
.mixw-l .z { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-2) }
.mixw-l .tz { position: absolute; top: 5px; height: 6px; border-radius: var(--r-pill); background: var(--accent-wash); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent) }
.mixw-l .bar { position: absolute; top: 6px; height: 4px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--bad), color-mix(in srgb, var(--bad) 50%, transparent)) }
.mixw-l .bar.is-ok { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, transparent)) }
.mixw-d { text-align: right; font: 700 12.5px var(--font-mono); color: var(--bad-ink); white-space: nowrap }
.mixw-d.is-ok { color: var(--accent-ink) }

/* Фейдеры в обучении — маленькие, в тех же состояниях, что на экране. */
.mixd { display: flex; gap: 16px; justify-content: center }
.mixd-one { width: 46px; text-align: center }
.mixd-one b { display: block; font-size: 11px; font-weight: 700; color: var(--muted) }
.mixd-tr { position: relative; width: 34px; height: 96px; margin: 0 auto 7px; overflow: hidden; border-radius: 12px; border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 85%, transparent), color-mix(in srgb, var(--panel) 70%, transparent)) }
.mixd-g { position: absolute; inset: 7px 0; display: flex; flex-direction: column; justify-content: space-between }
.mixd-g i { height: 1px; margin: 0 6px; background: var(--line) }
.mixd-k { position: absolute; left: 3px; right: 3px; height: 13px; transform: translateY(-50%); border-radius: 5px; transition: top .6s var(--ease-bounce);
  background: linear-gradient(180deg, #39433D, #1B211E); border: 1px solid #47534C }
.mixd-r { position: absolute; left: -3px; right: -3px; height: 2px; border-radius: 2px; background: var(--brass); box-shadow: 0 0 10px color-mix(in srgb, var(--brass) 50%, transparent); opacity: 0; transition: .4s }
.mixd-tr.is-ref .mixd-r { opacity: 1 }
.mixd-bar { position: absolute; left: 6px; right: 6px; bottom: 6px; border-radius: 4px; opacity: .8; background: linear-gradient(0deg, var(--accent), color-mix(in srgb, var(--lime) 40%, transparent));
  animation: mixd-pulse 1.3s ease-in-out infinite }
@keyframes mixd-pulse { 0%, 100% { opacity: .35 } 50% { opacity: .85 } }

@media (prefers-reduced-motion: reduce) {
  .mixv-scan, .mixd-bar, .mx-ab button.on::after, .mixv-ref { animation: none }
  .mx-field.is-ok::after, .mx-field.is-near::after, .mx-field.is-bad::after { animation: none; opacity: .26 }
  .mixz { animation: none !important }
}