/* ==========================================================================
   MainHeroWidget — единый CSS-файл (демо-стенд + встраиваемый компонент)
   Структура: TOKENS → BASE → LAYOUT → COMPONENTS
   ========================================================================== */

/* === TOKENS === */

:root {
  /* Токены демо-стенда (страница-обёртка). НЕ часть контракта встраивания —
     компонент несёт собственные токены на своём корневом элементе ниже. */
  --demo-ink: #0E0D13;
  --demo-paper: #EDE7DA;
  --demo-line: #33303D;
}

.mh-hero-widget {
  /* цвет */
  --ink:#0E0D13; --ink-2:#17151F; --ink-3:#211E2B; --sunken:#0A0910;
  --gold:#F2B33D; --gold-hi:#FFD98A; --ember:#E4553B;
  --paper:#EDE7DA; --paper-dim:#A7A091; --line:#33303D; --focus:#FFD98A;
  --line-strong:#7A7390;
  /* типографика */
  --font-display:'Cormorant','Georgia',serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;
  --tracking-heading:-0.02em; --tracking-eyebrow:0.12em;
  --leading-body:1.55; --leading-heading:1.15;
  /* радиусы */
  --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --radius-pill:999px;
  /* сцена: размеров нет — компонент заполняет mount-контейнер на 100% x 100% */
  --scene-crop:center 62%;
  --blur-quiz:6px;
  --scrim-quiz:rgba(14,13,19,.45);
  --panel-bg:rgba(14,13,19,.5);
  /* Бюджеты высоты РАЗВЯЗАНЫ (task п.4, §8.9): панель контролов и квиз-карточка
     используют РАЗНЫЕ токены. Раньше обе плоскости делили один --panel-max-h,
     поэтому снижение бюджета панели до 40% обрезало бы и шаги квиза. */
  --panel-max-h:40%;    /* макс. высота ТОЛЬКО панели контролов (mobile), ~40%
                           высоты компонента (FR-8 п.8). На desktop не действует. */
  --quiz-max-h:62%;     /* макс. высота ТОЛЬКО квиз-карточки; бюджет квиза не
                           затронут уплотнением панели (§8.4) */
  /* Компактная сетка панели контролов (mobile) под бюджет ~40% (§8.9).
     База — при svh≥844px; тач-безопасные полы (--*-min) — при svh≤780px
     (окно приёмочных кадров). Сжимаемые токены = clamp(пол, линейная-svh, база).
     Селектор не сжимается — его высота = высоте стрелки 44px (SC 2.5.8). */
  --panel-pad-base:16px; --panel-pad-min:12px;
  --row-gap-base:10px;   --row-gap-min:8px;   /* focus-кольца соседних строк
                                                 смыкаются без перекрытия (§7.7) */
  --row-loc-base:48px;   --row-loc-min:44px;  /* пол = высоте стрелки (тач-цель) */
  --zone-bpm-base:52px;  --zone-bpm-min:46px; /* зона захвата ползунка 44px перекрывает */
  --row-sel:44px;        /* строка селектора = высоте стрелки (не сжимается) */
  --label-mono:11px;     /* моно-подписи селекторов/BPM (mobile); desktop — 13px */
  /* Линейная интерполяция пол→база на окне svh ∈ [780px, 844px]. */
  --panel-pad:clamp(var(--panel-pad-min), calc(var(--panel-pad-min) + 4px * (100svh - 780px) / 64px), var(--panel-pad-base));
  --row-gap:clamp(var(--row-gap-min), calc(var(--row-gap-min) + 2px * (100svh - 780px) / 64px), var(--row-gap-base));
  --row-loc:clamp(var(--row-loc-min), calc(var(--row-loc-min) + 4px * (100svh - 780px) / 64px), var(--row-loc-base));
  --zone-bpm:clamp(var(--zone-bpm-min), calc(var(--zone-bpm-min) + 6px * (100svh - 780px) / 64px), var(--zone-bpm-base));
  /* Полностью сжатый поток (сумма полов): 12·2 + 44 + 3·44 + 46 + 8·4 = 278px.
     Держит панель без клиппинга/прокрутки ниже вьюпорта ~759px, где тач-полы
     44px имеют приоритет над приблизительной целью «~40%» (§5.4, §7.6). */
  --panel-floor-h:278px;
  --logo-w:42%;
  --eq-duration:.625s;
  --t-layer:400ms; --t-carousel:240ms; --t-location:320ms;
  --t-weather:600ms; --t-step:240ms;
  --t-start-btn:250ms; --t-start-img:300ms;
  --ease:cubic-bezier(.33,0,.2,1);
  --quiz-pad:20px; --quiz-gap:10px;
}

/* === BASE === */

@font-face {
  font-family:'Cormorant'; font-style:normal; font-weight:500 600; font-display:swap;
  src:url('../assets/fonts/cormorant-latin-500-600.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+2000-206F, U+2122;
}
@font-face {
  font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('../assets/fonts/inter-latin-400-500-600.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+2000-206F, U+2122;
}
@font-face {
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../assets/fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+2000-206F;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  background:var(--demo-ink);
  color:var(--demo-paper);
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
img { max-width:100%; display:block; }
button { font:inherit; }
input { font:inherit; }

.mh-visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* === LAYOUT === */

/* Демо-стенд: страница содержит ТОЛЬКО mount-контейнер компонента.
   Mobile — весь вьюпорт; desktop — портретный кадр по центру вьюпорта. */
.stand {
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
}

.stand-mount {
  position:relative;
  width:100vw; height:100svh;
  overflow:hidden;
}
@media (min-width:1024px) {
  .stand-mount {
    width:min(50vw, 620px);
    transform:scale(.8);
    border-radius:24px;
    border:1px solid var(--demo-line);
  }
}

/* Fallback без JavaScript: статичный стартовый кадр в разметке стенда.
   При исполнении скрипта mount() замещает содержимое контейнера компонентом. */
.stand-fallback {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top;
}

/* === COMPONENTS === */

/* --- Компонент: .mh-hero-widget --- */

.mh-hero-widget {
  position:relative;
  display:block;
  width:100%; height:100%;
  overflow:hidden;
  background:var(--ink);
  font-family:var(--font-body);
  color:var(--paper);
  line-height:var(--leading-body);
}

.mh-scene-wrap { position:relative; width:100%; height:100%; }

.mh-scene {
  position:absolute; inset:0; margin:0;
  overflow:hidden;
  background:var(--ink);
}

.mh-layer {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:var(--scene-crop);
}

.mh-layer-slot { position:absolute; inset:0; }
.mh-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:var(--scene-crop);
  opacity:0;
}

/* --- Погодные эффекты (декоративные, aria-hidden) --- */

.mh-weather { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.mh-weather-effect { position:absolute; inset:0; opacity:0; transition:opacity var(--t-weather) ease; }
.mh-weather-effect.is-active { opacity:1; }

.mh-rain-layer { position:absolute; inset:0; opacity:.55; }
.mh-rain-layer--a {
  background-image:repeating-linear-gradient(105deg, transparent 0 12px, rgba(255,217,138,.28) 12px 13px, transparent 13px 22px);
  background-size:22px 160px;
  animation:mh-rain-a .9s linear infinite;
}
.mh-rain-layer--b {
  background-image:repeating-linear-gradient(105deg, transparent 0 12px, rgba(255,217,138,.28) 12px 13px, transparent 13px 22px);
  background-size:34px 220px;
  animation:mh-rain-b 1.4s linear infinite;
}
/* Анимируется background-position (не transform) — паттерн бесконечно тайлится
   по периоду своего же background-size, что даёт бесшовный цикл при любой
   высоте сцены; чистый translateY элемента такой гарантии не даёт. */
@keyframes mh-rain-a { from{ background-position:0 0; } to{ background-position:0 160px; } }
@keyframes mh-rain-b { from{ background-position:0 0; } to{ background-position:0 220px; } }

.mh-snow-layer { position:absolute; inset:0; opacity:.6; }
.mh-snow-layer--a {
  background-image:radial-gradient(circle, rgba(237,231,218,.55) 2px, transparent 2.5px);
  background-size:90px 90px;
  animation:mh-snow-a 7s linear infinite;
}
.mh-snow-layer--b {
  background-image:radial-gradient(circle, rgba(237,231,218,.55) 3px, transparent 3.5px);
  background-size:140px 140px;
  animation:mh-snow-b 11s linear infinite;
}
@keyframes mh-snow-a { from{ background-position:0 0; } to{ background-position:6px 90px; } }
@keyframes mh-snow-b { from{ background-position:0 0; } to{ background-position:-6px 140px; } }

.mh-sun-glow {
  position:absolute; left:50%; top:8%; width:240px; height:240px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,217,138,.5), transparent 70%);
  animation:mh-sun-pulse 6s ease-in-out infinite;
}
@keyframes mh-sun-pulse { 0%,100%{ opacity:.7; } 50%{ opacity:1; } }

.mh-sun-rays {
  position:absolute; left:50%; top:8%; width:240px; height:240px;
  transform:translate(-50%,0) rotate(0deg);
  background:conic-gradient(from 0deg, rgba(255,217,138,.35) 0 8deg, transparent 8deg 45deg);
  -webkit-mask-image:radial-gradient(closest-side, #000 60%, transparent 100%);
  mask-image:radial-gradient(closest-side, #000 60%, transparent 100%);
  animation:mh-sun-rotate 60s linear infinite;
}
@keyframes mh-sun-rotate { to{ transform:translate(-50%,0) rotate(360deg); } }

.mh-cloud {
  position:absolute; top:6%; border-radius:50%;
  background:rgba(14,13,19,.35); filter:blur(18px);
}
.mh-cloud--a { left:5%; width:55%; height:60px; animation:mh-cloud-a 70s ease-in-out infinite alternate; }
.mh-cloud--b { left:30%; width:40%; height:48px; animation:mh-cloud-b 90s ease-in-out infinite alternate; }
.mh-cloud--c { left:15%; width:65%; height:70px; animation:mh-cloud-c 100s ease-in-out infinite alternate; }
@keyframes mh-cloud-a { from{ transform:translateX(-6%); } to{ transform:translateX(6%); } }
@keyframes mh-cloud-b { from{ transform:translateX(6%); } to{ transform:translateX(-6%); } }
@keyframes mh-cloud-c { from{ transform:translateX(-4%); } to{ transform:translateX(4%); } }

/* --- Расфокус-слой квиза --- */

.mh-quiz-blur {
  position:absolute; inset:0;
  backdrop-filter:blur(var(--blur-quiz));
  -webkit-backdrop-filter:blur(var(--blur-quiz));
  background:var(--scrim-quiz);
  opacity:0;
  transition:opacity 400ms var(--ease);
  pointer-events:none;
}
.mh-quiz-blur.is-active { opacity:1; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mh-quiz-blur { background:rgba(14,13,19,.62); }
}

/* --- Эквалайзер-логотип --- */

.mh-logo {
  position:absolute; top:40%; left:50%; transform:translate(-50%,-50%);
  width:var(--logo-w);
  filter:drop-shadow(0 1px 6px rgba(14,13,19,.55)) drop-shadow(0 0 18px rgba(14,13,19,.35));
  pointer-events:none;
}
.mh-logo-svg { display:block; width:100%; height:auto; }
.mh-eq-bar {
  transform-box:fill-box;
  transform-origin:center bottom;
  animation:mh-eq var(--eq-duration) ease-in-out infinite;
}
.mh-eq-bar:nth-of-type(1) { animation-delay:-0s; }
.mh-eq-bar:nth-of-type(2) { animation-delay:-.12s; }
.mh-eq-bar:nth-of-type(3) { animation-delay:-.27s; }
.mh-eq-bar:nth-of-type(4) { animation-delay:-.41s; }
@keyframes mh-eq { 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(.28); } }

/* --- Оверлей-стек (титр + квиз/панель контролов, нижняя часть сцены) --- */

.mh-overlay-stack {
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  gap:12px;
  pointer-events:none;
}
.mh-overlay-stack > * { pointer-events:auto; }

.mh-scene-title {
  align-self:flex-start;
  margin-left:12px;
  background:rgba(33,30,43,.85);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-radius:10px;
  padding:6px 12px;
  font-family:var(--font-mono);
  font-weight:500; font-size:13px; letter-spacing:.06em;
  color:var(--paper);
}

/* --- Квиз-карточка --- */

.mh-quiz {
  width:100%;
  max-height:var(--quiz-max-h);
  background:rgba(33,30,43,.5);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:var(--quiz-pad);
  display:flex; flex-direction:column; gap:var(--quiz-gap);
  box-shadow:0 8px 16px rgba(0,0,0,.15);
  position:relative;
}
.mh-quiz::after {
  content:''; position:absolute; inset:-1px -1px auto -1px; height:40%;
  border-radius:inherit;
  background:radial-gradient(120% 60% at 50% 0%, rgba(242,179,61,.20), transparent 70%);
  opacity:.8; pointer-events:none;
}
.mh-quiz[hidden] { display:none; }

.mh-quiz-progress { height:2px; background:var(--line); border-radius:2px; overflow:hidden; flex:0 0 auto; }
.mh-quiz-progress-fill {
  display:block; height:100%; width:20%;
  background:var(--gold);
  transition:width 300ms var(--ease);
}

.mh-quiz-header { display:flex; align-items:center; justify-content:space-between; flex:0 0 auto; }
.mh-quiz-counter { font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--paper-dim); }

.mh-btn-skip {
  appearance:none; background:none; border:none; cursor:pointer;
  height:44px; padding:0 4px;
  border-radius:var(--radius-pill);
  font-family:var(--font-body); font-weight:600; font-size:16px;
  color:var(--paper-dim);
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px;
  transition:color .2s ease, text-decoration-color .2s ease;
}
@media (hover:hover) and (pointer:fine) {
  .mh-btn-skip:hover { color:var(--paper); text-decoration-color:var(--gold); }
}
.mh-btn-skip:focus-visible { outline:2px solid var(--gold-hi); outline-offset:2px; }
.mh-btn-skip:active { transform:scale(.97); }

.mh-quiz-body { flex:1 1 auto; min-height:0; overflow-y:auto; }
.mh-quiz-step { display:flex; flex-direction:column; gap:16px; }
.mh-quiz-step[hidden] { display:none; }

.mh-quiz-question {
  margin:0; font-family:var(--font-display); font-weight:600;
  font-size:26px; line-height:var(--leading-heading); letter-spacing:var(--tracking-heading);
  color:var(--paper);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.mh-quiz-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.mh-option {
  appearance:none; cursor:pointer;
  height:56px; border-radius:var(--radius-md);
  background:transparent; border:1px solid var(--line-strong);
  color:var(--paper); font-family:var(--font-body); font-weight:600; font-size:16px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:border-color .2s ease, background-color .2s ease, transform .1s ease;
}
@media (hover:hover) and (pointer:fine) {
  .mh-option:hover { border-color:var(--gold); background:var(--ink-2); }
}
.mh-option:focus-visible { outline:2px solid var(--gold-hi); outline-offset:2px; }
.mh-option:active { transform:scale(.97); }
.mh-option.is-selected { border:2px solid var(--gold); background:var(--ink-2); }

.mh-check-icon { width:16px; height:16px; color:var(--gold); flex:0 0 auto; }

.mh-input-name {
  height:52px; width:100%;
  background:var(--sunken); border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  padding:0 16px;
  color:var(--paper); font-family:var(--font-body); font-size:16px;
  caret-color:var(--gold);
}
.mh-input-name::placeholder { color:var(--paper-dim); }
@media (hover:hover) and (pointer:fine) {
  .mh-input-name:hover { border-color:var(--paper-dim); }
}
.mh-input-name:focus-visible { outline:2px solid var(--gold-hi); outline-offset:2px; }
.mh-input-name:focus { border-color:var(--gold); }

.mh-btn-primary {
  appearance:none; cursor:pointer; border:none;
  height:52px; border-radius:var(--radius-pill);
  padding:0 28px;
  background:var(--gold); color:var(--ink);
  font-family:var(--font-body); font-weight:600; font-size:16px;
  width:100%;
  transition:background-color .2s ease, transform .1s ease;
}
@media (hover:hover) and (pointer:fine) {
  .mh-btn-primary:hover { background:var(--gold-hi); }
}
.mh-btn-primary:focus-visible { outline:2px solid var(--ink); outline-offset:0; box-shadow:0 0 0 4px var(--paper); }
.mh-btn-primary:active { transform:scale(.97); }

.mh-btn-ghost {
  appearance:none; cursor:pointer;
  height:52px; border-radius:var(--radius-pill);
  padding:0 20px;
  background:transparent; border:1px solid var(--line-strong);
  color:var(--paper); font-family:var(--font-body); font-weight:600; font-size:16px;
  transition:border-color .2s ease, color .2s ease, transform .1s ease;
}
@media (hover:hover) and (pointer:fine) {
  .mh-btn-ghost:hover { color:var(--paper); border-color:var(--gold); }
}
.mh-btn-ghost:focus-visible { outline:2px solid var(--gold-hi); outline-offset:2px; }
.mh-btn-ghost:active { transform:scale(.97); }

.mh-quiz-hint { margin:0; font-family:var(--font-body); font-weight:400; font-size:15px; line-height:var(--leading-body); color:var(--paper-dim); }
.mh-quiz-actions { display:flex; gap:10px; }
.mh-quiz-actions .mh-btn-primary { flex:0 1 62%; width:auto; }
.mh-quiz-actions .mh-btn-ghost { flex:0 1 38%; }

.mh-quiz-chips { display:flex; flex-direction:column; gap:8px; }
.mh-chip {
  appearance:none; cursor:pointer;
  min-height:48px; width:100%;
  border-radius:var(--radius-md);
  background:transparent; border:1px solid var(--line-strong);
  color:var(--paper); font-family:var(--font-body); font-weight:500; font-size:16px;
  display:flex; align-items:center; gap:10px;
  padding:0 16px; text-align:left;
  flex:0 0 auto;
  transition:border-color .2s ease, background-color .2s ease, transform .1s ease;
}
@media (hover:hover) and (pointer:fine) {
  .mh-chip:hover { border-color:var(--gold); background:var(--ink-2); }
}
.mh-chip:focus-visible { outline:2px solid var(--gold-hi); outline-offset:2px; }
.mh-chip:active { transform:scale(.97); }
.mh-chip.is-selected { border:2px solid var(--gold); background:var(--ink-2); }
.mh-chip-emoji { font-size:20px; line-height:1; flex:0 0 auto; }

/* --- Панель контролов интерактивной сцены --- */

.mh-controls {
  width:100%;
  /* Бюджет ~40% высоты компонента, но не ниже полностью сжатого потока (278px):
     ≤40% при вьюпорте ≥759px; ниже — держит пол без клиппинга и БЕЗ внутренней
     прокрутки (доступность важнее приблизительной цели «~40%», §5.4). */
  max-height:max(var(--panel-max-h), var(--panel-floor-h));
  background:var(--panel-bg);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:var(--panel-pad);
  display:flex; flex-direction:column; gap:var(--row-gap);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mh-controls { background:rgba(14,13,19,.7); }
}
.mh-controls[hidden] { display:none; }

.mh-location-row {
  display:grid; grid-template-columns:44px 1fr 44px;
  align-items:center; justify-content:center;
  height:var(--row-loc); min-height:var(--row-loc-min); gap:8px;
  touch-action:pan-y;
}
.mh-location-value {
  font-family:var(--font-display); font-weight:600; font-size:22px;
  color:var(--paper); text-align:center; line-height:1.15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mh-location-value.is-empty { color:var(--paper-dim); }

.mh-arrow {
  appearance:none; cursor:pointer;
  width:44px; height:44px; border-radius:var(--radius-pill);
  border:1px solid var(--line-strong); background:transparent;
  color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, color .2s ease, transform .1s ease;
}
@media (hover:hover) and (pointer:fine) {
  .mh-arrow:hover { border-color:var(--gold); color:var(--gold-hi); }
}
.mh-arrow:focus-visible { outline:2px solid var(--gold-hi); outline-offset:2px; }
.mh-arrow:active { transform:scale(.97); }
.mh-icon { width:16px; height:16px; display:block; }

/* Карусель: моно-подпись стоит ВНУТРИ строки тесным блоком над значением
   (центральная колонка стека), а не отдельной строкой над контролом — так
   убирается прежняя строка-подпись + gap 6px (ключевая экономия высоты, §8.6). */
.mh-carousel { touch-action:pan-y; }
.mh-carousel-row {
  display:grid; grid-template-columns:44px 1fr 44px;
  align-items:center; justify-content:center; gap:8px;
  height:var(--row-sel); min-height:44px;   /* = высоте стрелки (SC 2.5.8) */
  touch-action:pan-y;
}
.mh-carousel-stack {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; min-width:0;                       /* центральная колонка стека */
}
.mh-carousel-label {
  font-family:var(--font-mono); font-weight:500; font-size:var(--label-mono);
  letter-spacing:.12em; text-transform:uppercase; color:var(--paper-dim);
  line-height:1.2;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mh-carousel-value {
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:500; font-size:16px; line-height:1.2;
  color:var(--paper); text-align:center;
  max-width:100%; min-width:0; white-space:nowrap;
}
.mh-carousel-value.is-empty { color:var(--paper-dim); }
.mh-value-emoji { font-size:18px; }

/* Зона BPM без отдельного верхнего отступа — интервал перед ней задаёт общий
   gap панели (прежний padding-top:16px снят, §8.7). Компактная зона; грэб-зона
   ползунка (44px) перекрывает её по вертикали отрицательными margin (§7.6). */
.mh-bpm {
  height:var(--zone-bpm); min-height:var(--zone-bpm-min);
  display:flex; flex-direction:column; justify-content:center;
}
.mh-bpm-row { display:flex; align-items:center; justify-content:space-between; line-height:1.2; }
.mh-bpm-label { font-family:var(--font-mono); font-weight:500; font-size:var(--label-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--paper-dim); }
.mh-bpm-value { font-family:var(--font-mono); font-weight:500; font-size:16px; color:var(--gold); }

/* Зона захвата 44px (SC 2.5.8): <input> высотой 44px перекрывает компактную
   слайдер-зону (margin:-9px 0 → 26px в потоке, 44px хит-зона). Визуальный трек
   6px вынесен на ::track, иначе sunken-фон и inset-линия растянулись бы на все
   44px хит-зоны. --bpm-pct/--eq-duration ставит JS (setupBpm) — не трогаем. */
.mh-bpm-slider {
  appearance:none; -webkit-appearance:none;
  width:100%; height:44px; margin:-9px 0;
  background:transparent; cursor:pointer; outline:none;
}
/* WebKit: трек-заполнение на ::runnable-track + ручное центрирование ползунка */
.mh-bpm-slider::-webkit-slider-runnable-track {
  height:6px; border-radius:var(--radius-pill);
  background:linear-gradient(to right, var(--gold) 0%, var(--gold) var(--bpm-pct, 30%), var(--sunken) var(--bpm-pct, 30%), var(--sunken) 100%);
  box-shadow:inset 0 0 0 1px var(--line);
}
.mh-bpm-slider::-webkit-slider-thumb {
  appearance:none; -webkit-appearance:none;
  width:24px; height:24px; border-radius:50%;
  background:var(--gold);
  box-shadow:0 2px 6px rgba(0,0,0,.4);
  border:none; cursor:pointer;
  margin-top:-9px;   /* (6 − 24)/2 — центр 24px ползунка на 6px треке */
  transition:background-color .2s ease, width .1s ease, height .1s ease, margin-top .1s ease;
}
/* Firefox: нативные трек/прогресс/ползунок (авто-центрирование в 44px input) */
.mh-bpm-slider::-moz-range-track { height:6px; border-radius:999px; background:var(--sunken); box-shadow:inset 0 0 0 1px var(--line); }
.mh-bpm-slider::-moz-range-progress { height:6px; border-radius:999px; background:var(--gold); }
.mh-bpm-slider::-moz-range-thumb {
  width:24px; height:24px; border-radius:50%;
  background:var(--gold); box-shadow:0 2px 6px rgba(0,0,0,.4); border:none; cursor:pointer;
}
@media (hover:hover) and (pointer:fine) {
  .mh-bpm-slider:hover::-webkit-slider-thumb { background:var(--gold-hi); }
  .mh-bpm-slider:hover::-moz-range-thumb { background:var(--gold-hi); }
}
.mh-bpm-slider:focus-visible::-webkit-slider-thumb { outline:2px solid var(--gold-hi); outline-offset:2px; }
.mh-bpm-slider:focus-visible::-moz-range-thumb { outline:2px solid var(--gold-hi); outline-offset:2px; }
.mh-bpm-slider:active::-webkit-slider-thumb { width:28px; height:28px; margin-top:-11px; background:var(--ember); }
.mh-bpm-slider:active::-moz-range-thumb { width:28px; height:28px; background:var(--ember); }

.mh-cascade-in { animation:mh-row-in 400ms var(--ease) both; }
@keyframes mh-row-in { from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }

/* --- Состояние «Старт» --- */

/* Верхний слой стека компонента (последний ребёнок корня — поверх сцены,
   расфокуса, логотипа, титра и оверлеев). Фона нет: при fade-out изображения
   под ним бесшовно открывается сцена в том же footprint. */
.mh-start {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.mh-start-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top;
  transition:opacity var(--t-start-img) var(--ease);
}
.mh-start-cta {
  /* position:relative обязателен: без него absolute-изображение слоя
     рисуется поверх кнопки независимо от порядка в DOM */
  position:relative; z-index:1;
  width:auto;
  padding:16px 28px;
  transition:opacity var(--t-start-btn) var(--ease), background-color .2s ease, transform .1s ease;
}
.mh-start.is-leaving { pointer-events:none; }
.mh-start.is-leaving .mh-start-img,
.mh-start.is-leaving .mh-start-cta { opacity:0; }

/* --- Desktop (>= 1024px), раздел 17 --- */

@media (min-width:1024px) {
  .mh-overlay-stack { padding:24px; }
  .mh-quiz { max-width:520px; border-radius:var(--radius-lg); align-self:center; }
  /* Desktop — расширение мобильной версии: жёсткого бюджета ~40% нет (панель
     плавающая, высота по контенту), строки комфортнее (§6 п.4, task п.5).
     Компактная mobile-компрессия (clamp/40%) на desktop не применяется. */
  .mh-controls {
    border-radius:var(--radius-lg);
    max-height:none; padding:24px; gap:12px;
  }
  .mh-location-row { height:56px; }
  .mh-carousel-row { height:52px; min-height:52px; }
  .mh-bpm { height:60px; min-height:60px; }
  .mh-quiz-question { font-size:30px; }
  .mh-location-value { font-size:26px; }
  .mh-carousel-value { font-size:17px; }
  .mh-quiz-hint { font-size:16px; }
  .mh-carousel-label, .mh-quiz-counter, .mh-bpm-label { font-size:13px; }
}

/* --- prefers-reduced-motion: reduce (раздел 18.3) --- */

@media (prefers-reduced-motion: reduce) {
  .mh-eq-bar { animation:none; transform:scaleY(1); }
  .mh-rain-layer--a, .mh-rain-layer--b,
  .mh-snow-layer--a, .mh-snow-layer--b,
  .mh-sun-glow, .mh-sun-rays,
  .mh-cloud--a, .mh-cloud--b, .mh-cloud--c {
    animation:none;
  }
  .mh-quiz-blur { transition:none; }
  .mh-img { transition:opacity var(--t-layer) linear; }
  .mh-cascade-in { animation:none; opacity:1; transform:none; }
  /* Переход «Старт» → «Квиз»: только opacity, без transform (раздел 18.3) */
  .mh-start-img { transition:opacity var(--t-start-img) linear; }
  .mh-start-cta { transition:opacity var(--t-start-btn) linear; }
}