/* Лендинг: стеклянная шапка, зернистый тёплый градиент, печатающийся заголовок */
html { scroll-behavior: smooth; }
body { font-size: 16px; }
section[id] { scroll-margin-top: 96px; }

/* ---------- шапка ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 84px;
  background: rgba(34, 22, 9, 0.55); border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  transition: background-color 300ms ease;
}
.bar.scrolled { background: rgba(16, 16, 18, 0.78); }
.bar-inner { max-width: 1248px; height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 52px; }
.logo { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.logo img { display: block; width: auto; height: 38px; }
.bar-nav { display: flex; align-items: center; gap: 30px; }
.bar-nav > a, .drop-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 0; border: 0; background: none;
  font-size: 15px; font-weight: 500; color: var(--bone); text-decoration: none; opacity: 0.9;
  transition: opacity 160ms ease;
}
.bar-nav > a:hover, .drop-btn:hover { opacity: 1; }
.chev { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.drop { position: relative; }
.drop-menu {
  position: absolute; top: calc(100% + 14px); left: -14px; width: 330px; padding: 8px;
  border-radius: 18px; background: rgba(28, 20, 18, 0.88); border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-4px) scale(0.98); transform-origin: top left;
  transition: opacity 160ms ease, transform 160ms var(--ease-out), visibility 160ms;
}
.drop-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.drop:hover .drop-menu, .drop:focus-within .drop-menu, .drop.open .drop-menu { opacity: 1; visibility: visible; transform: none; }
.drop-menu a { display: block; padding: 10px 12px; border-radius: 12px; text-decoration: none; transition: background-color 160ms ease; }
.drop-menu a:hover { background: rgba(255, 255, 255, 0.07); }
.drop-menu b { display: block; font-size: 14px; font-weight: 500; }
.drop-menu span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.bar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pill {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px;
  border-radius: 9999px; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--ease-out);
}
.pill:active { transform: scale(0.97); }
.pill-line { color: var(--bone); border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(0, 0, 0, 0.14); }
.pill-line:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.4); }
.pill-cream { color: #131315; background: var(--cream); }
.pill-cream:hover { background: var(--bone); }

/* ---------- первый экран ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(780px, 100svh, 1100px); padding: 84px 24px 120px; display: grid; place-items: center;
}
/* фон приглушённый и «пыльный»: горчично-оливковые края, ржаво-коричневый центр, сливовый отсвет и крупное зерно */
.hero-bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #34200d 0%, #36190f 40%, #21140e 74%, var(--canvas) 100%); }
.hero-bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36%; background: linear-gradient(to bottom, rgba(16, 16, 18, 0), var(--canvas)); }
.blob { position: absolute; border-radius: 50%; will-change: transform; animation: drift 26s ease-in-out infinite alternate; }
.b1 { width: 78vw; height: 78vw; left: -32vw; top: -16vw; background: radial-gradient(circle, rgba(128, 94, 14, 0.9) 0%, rgba(128, 94, 14, 0) 64%); }
.b2 { width: 64vw; height: 64vw; right: -28vw; top: -4vw; background: radial-gradient(circle, rgba(118, 88, 16, 0.85) 0%, rgba(118, 88, 16, 0) 62%); animation-delay: -9s; }
.b3 { width: 50vw; height: 50vw; right: 4vw; top: -24vw; background: radial-gradient(circle, rgba(104, 28, 70, 0.9) 0%, rgba(104, 28, 70, 0) 64%); animation-delay: -4s; }
.b4 { width: 76vw; height: 62vw; left: 12vw; top: -8vw; background: radial-gradient(circle, rgba(118, 42, 18, 0.9) 0%, rgba(118, 42, 18, 0) 64%); animation-delay: -14s; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(3vw, 2vw, 0) scale(1.07); } }
.hero-bg .grain, .final-bg .grain {
  position: absolute; inset: 0; opacity: 0.55; mix-blend-mode: overlay; pointer-events: none; background-size: 220px 220px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.hero-inner { position: relative; z-index: 2; width: 100%; min-width: 0; max-width: 1100px; text-align: center; }
.hero-title {
  margin: 0 auto; max-width: 1040px; min-height: 2.06em;
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: clamp(44px, 5.4vw, 84px); line-height: 1.03; letter-spacing: -0.035em; color: var(--bone);
}
.typed { display: block; text-wrap: balance; }
.nw { white-space: nowrap; }
.caret {
  display: inline-block; width: 2px; height: 0.86em; margin-left: 0.08em; vertical-align: -0.08em;
  background: rgba(255, 255, 255, 0.8); animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.hero-sub { margin: 20px auto 0; max-width: 540px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.88); text-wrap: pretty; }

/* поле ввода — главный элемент экрана: тёмное, плотное, с тёплой кромкой и ореолом */
.composer {
  position: relative; margin: 34px auto 0; max-width: 760px; padding: 20px 20px 14px; text-align: left;
  background: rgba(26, 16, 11, 0.8); border: 1px solid rgba(255, 214, 170, 0.16); border-radius: 22px;
  backdrop-filter: blur(24px) saturate(130%); -webkit-backdrop-filter: blur(24px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.25),
    0 0 42px -4px rgba(255, 146, 70, 0.32),
    0 30px 70px -28px rgba(0, 0, 0, 0.75);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.composer:focus-within {
  border-color: rgba(255, 214, 170, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.25),
    0 0 56px -2px rgba(255, 146, 70, 0.42),
    0 30px 70px -28px rgba(0, 0, 0, 0.75);
}
.composer textarea {
  display: block; width: 100%; resize: none; border: 0; outline: none; background: transparent; color: var(--bone);
  font-size: 17px; line-height: 1.5; padding: 2px 6px 16px; min-height: 42px; max-height: 168px; overflow-y: auto;
}
.composer textarea::placeholder { color: rgba(255, 255, 255, 0.52); }
.composer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.composer-side { display: flex; align-items: center; gap: 8px; }
.round {
  width: 38px; height: 38px; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.09); color: var(--bone);
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
.round:hover { background: rgba(255, 255, 255, 0.16); }
.round:active { transform: scale(0.94); }
.soft {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px; border: 0; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.09); color: var(--bone); font-size: 14px;
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
.soft:hover { background: rgba(255, 255, 255, 0.16); }
.soft:active { transform: scale(0.97); }
.soft[aria-pressed="true"] { background: rgba(236, 75, 143, 0.28); }
.create {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px 0 16px; border: 0; border-radius: 9999px;
  background: linear-gradient(90deg, #ec4b8f 0%, #f2672f 100%); color: #fff; font-size: 15px; font-weight: 500; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 26px -12px rgba(242, 90, 60, 0.85);
  transition: filter 160ms ease, transform 160ms var(--ease-out);
}
.create:hover { filter: brightness(1.07); }
.create:active { transform: scale(0.97); }
.hero-note { margin: 16px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.6); }

/* ---------- карточки по краям первого экрана ---------- */
/* карточки парят и до наведения приглушены */
.float-card {
  position: absolute; z-index: 1; width: clamp(190px, 14.5vw, 270px); aspect-ratio: 2 / 3;
  transform: rotate(var(--r)); cursor: pointer;
}
.fc-body {
  position: absolute; inset: 0; border-radius: 20px; overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06);
  filter: brightness(0.58) saturate(0.72); opacity: 0.88;
  animation: levitate 7s ease-in-out infinite alternate;
  transition: filter 450ms ease, opacity 450ms ease, box-shadow 450ms ease;
}
.fc-right .fc-body { animation-duration: 8.5s; animation-delay: -3s; }
@keyframes levitate {
  0% { transform: translate3d(0, -10px, 0) rotate(-0.8deg); }
  100% { transform: translate3d(0, 12px, 0) rotate(0.8deg); }
}
.float-card:hover .fc-body, .float-card:focus-visible .fc-body, .float-card.playing .fc-body {
  filter: brightness(1) saturate(1.08); opacity: 1;
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.fc-body .card-meta, .fc-body .play-btn { opacity: 0.75; transition: opacity 450ms ease, transform 160ms var(--ease-out), background-color 160ms ease; }
.float-card:hover .card-meta, .float-card:hover .play-btn, .float-card.playing .card-meta, .float-card.playing .play-btn { opacity: 1; }
.fc-left { --r: -10deg; left: -1.5vw; top: 29%; }
.fc-right { --r: 9deg; right: -3vw; top: 26%; }
.art-svg, .art-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.art-img { object-fit: cover; }
.fc-body::after, .demo-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 46%);
}
.play-btn {
  position: absolute; left: 50%; top: 46%; z-index: 2; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, 0.32); border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.float-card:hover .play-btn, .demo-card:hover .play-btn { transform: scale(1.06); background: rgba(0, 0, 0, 0.45); }
.float-card:focus-visible { outline: none; }
.playing .play-btn { background: var(--cream); color: #131315; }
.card-meta { position: absolute; left: 16px; right: 16px; bottom: 15px; z-index: 2; text-align: left; }
.card-title { display: block; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.92); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-by { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: rgba(255, 255, 255, 0.7); }
.card-by i { flex: none; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, #ec4b8f, #f2672f); }
.card-by span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* жанры бегущей строкой на месте логотипов прессы */
.genres {
  position: absolute; left: 0; right: 0; bottom: 44px; z-index: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.genres-track { display: flex; align-items: center; gap: 64px; width: max-content; animation: marquee 60s linear infinite; }
.genres-track span { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.22); white-space: nowrap; }
.genres-track span:nth-child(3n) { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 31px; letter-spacing: 0; }
.genres-track span:nth-child(3n + 1) { text-transform: uppercase; letter-spacing: 0.08em; font-size: 21px; font-weight: 700; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- секции: общий ритм, заголовки по центру ---------- */
:root { --sec-y: clamp(52px, 6.5vw, 96px); }
.sec { max-width: 1248px; margin: 0 auto; padding: var(--sec-y) 24px; }
.sec-head, .showcase-head, .how-head { max-width: 860px; margin: 0 auto 56px; text-align: center; }
.sec-head h2, .showcase-head h2, .how-head h2 {
  margin: 0; font-size: clamp(38px, 4.8vw, 64px); font-weight: 500; line-height: 1.03; letter-spacing: -0.035em; text-wrap: balance;
}
.sec-head p, .showcase-head p, .how-head p {
  margin: 16px auto 0; max-width: 620px; font-size: 18px; line-height: 1.45; color: rgba(255, 255, 255, 0.66); text-wrap: pretty;
}

/* ---------- второй блок: лента примеров ---------- */
.showcase { padding: var(--sec-y) 0; }
.showcase-head { padding: 0 24px; }
.rail {
  max-width: 1200px; margin: 0 auto; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  cursor: grab; overscroll-behavior-x: contain; outline: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail.dragging { cursor: grabbing; }
.rail.dragging .song { pointer-events: none; }
.rail-track { display: flex; gap: 38px; width: max-content; padding: 2px 0 6px; }
.song { flex: none; width: 228px; scroll-snap-align: start; user-select: none; -webkit-user-select: none; }
.song-art {
  position: relative; display: block; width: 100%; height: 310px; padding: 0; border: 0; border-radius: 12px; overflow: hidden;
  background: #1c1c1f; cursor: pointer;
}
.song-art .art-svg, .song-art .art-img { transition: transform 600ms var(--ease-out); }
.song:hover .song-art .art-svg, .song:hover .song-art .art-img { transform: scale(1.035); }
.song-play {
  position: absolute; left: 14px; top: 14px; z-index: 2; display: grid; place-items: center; color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}
.song-play svg path, .song-play svg rect { stroke: none; }
.song-stats { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: flex; gap: 6px; }
.stat {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 6px;
  background: rgba(28, 28, 30, 0.42); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; font-size: 13px; font-weight: 500;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.song-title { margin-top: 14px; font-size: 16px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-by { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.82); min-width: 0; }
.song-by i { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; }
.song-by span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- как создать: вкладки над большой живой сценой ---------- */
.how { max-width: 1248px; margin: 0 auto; padding: var(--sec-y) 24px; }

.how-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-bottom: 24px; }
.how-tab {
  display: flex; flex-direction: column; gap: 8px; padding: 0 0 4px; border: 0; background: none; color: inherit; text-align: left;
  opacity: 0.5; transition: opacity 300ms ease;
}
.how-tab:hover { opacity: 0.82; }
.how-tab.on { opacity: 1; }
.ht-bar { display: block; height: 3px; margin-bottom: 10px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.ht-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #ec4b8f, #f2672f); }
.how-tab.done .ht-bar i { width: 100%; }
.how-tab.on .ht-bar i { animation: fill 7s linear forwards; }
.how-tabs.paused .ht-bar i { animation-play-state: paused; }
@keyframes fill { to { width: 100%; } }
.ht-title { display: flex; align-items: baseline; gap: 10px; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.ht-title em { font-style: normal; font-size: 13px; color: rgba(255, 255, 255, 0.5); font-variant-numeric: tabular-nums; }
.ht-desc { max-width: 340px; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* сцена: яркий живой градиент, поверх него крупные стеклянные макеты */
.how-stage {
  --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.06)), rgba(40, 16, 12, 0.26);
  --glass-line: rgba(255, 255, 255, 0.24);
  position: relative; isolation: isolate; height: 580px; border-radius: 32px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1);
}
.stage-bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(150deg, #6c4312 0%, #5e2514 50%, #4a1738 100%); }
.sb { position: absolute; border-radius: 50%; will-change: transform; animation: drift 22s ease-in-out infinite alternate; }
.s1 { width: 70%; aspect-ratio: 1; left: -16%; top: -44%; background: radial-gradient(circle, rgba(214, 162, 40, 0.95) 0%, rgba(214, 162, 40, 0) 64%); }
.s2 { width: 76%; aspect-ratio: 1; left: 14%; bottom: -72%; background: radial-gradient(circle, rgba(238, 100, 40, 0.95) 0%, rgba(238, 100, 40, 0) 64%); animation-delay: -7s; }
.s3 { width: 60%; aspect-ratio: 1; right: -16%; top: -38%; background: radial-gradient(circle, rgba(200, 52, 142, 0.92) 0%, rgba(200, 52, 142, 0) 64%); animation-delay: -12s; }
.s4 { width: 46%; aspect-ratio: 1; right: 2%; bottom: -34%; background: radial-gradient(circle, rgba(236, 75, 143, 0.6) 0%, rgba(236, 75, 143, 0) 64%); animation-delay: -4s; }
.stage-bg::after {
  content: ""; position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: overlay; background-size: 220px 220px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.scene {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 32px;
  opacity: 0; filter: blur(12px); transform: scale(0.97); pointer-events: none;
  transition: opacity 500ms ease, filter 500ms ease, transform 700ms var(--ease-out);
}
.scene.on { opacity: 1; filter: none; transform: none; }
.how-stage svg { display: block; }
.mock-composer, .mock-lyrics, .fc-float { background: var(--glass); border: 1px solid var(--glass-line); }

/* 1. идея: поле ввода печатает запрос, из текста «вылетают» распознанные параметры, курсор жмёт «Создать» */
.sc-idea { position: relative; width: 860px; }
.mock-composer {
  position: relative; z-index: 1; padding: 28px 26px 22px; border-radius: 32px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 50px 90px -40px rgba(0, 0, 0, 0.65), 0 0 90px -24px rgba(255, 150, 80, 0.5);
}
.mock-composer::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0deg 190deg, #ffd27a 250deg, #f2672f 295deg, #ec4b8f 335deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 400ms ease;
}
.mock-composer.sent::before { opacity: 1; animation: orbit 1.8s linear infinite; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes orbit { to { --ang: 360deg; } }
.mc-text { min-height: 104px; padding: 0 8px 20px; font-size: 30px; line-height: 1.38; letter-spacing: -0.02em; color: #fff; }
.mc-caret, .ml-last::after {
  display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.16em;
  background: rgba(255, 255, 255, 0.9); animation: blink 1.05s steps(1) infinite;
}
.ml-last::after { content: ""; margin-left: 4px; }
.mc-row { display: flex; align-items: center; gap: 10px; }
.mc-round { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.13); }
.mc-round svg { width: 20px; height: 20px; }
.mc-soft { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 14px; border-radius: 9999px; background: rgba(255, 255, 255, 0.13); font-size: 17px; }
.mc-soft svg { width: 19px; height: 19px; }
.mc-gap { flex: 1; }
.mc-create {
  position: relative; display: inline-flex; align-items: center; gap: 9px; height: 54px; padding: 0 28px 0 22px; border-radius: 9999px;
  background: linear-gradient(90deg, #ec4b8f, #f2672f); color: #fff; font-size: 18px; font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 14px 34px -12px rgba(242, 90, 60, 0.95);
  transition: transform 160ms var(--ease-out);
}
.mc-create svg { width: 20px; height: 20px; }
.mock-composer.press .mc-create { transform: scale(0.94); }
.mock-composer.sent .mc-create::after {
  content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid rgba(255, 180, 130, 0.85);
  animation: ripple 800ms var(--ease-out) forwards;
}
@keyframes ripple { from { opacity: 1; transform: scale(0.92); } to { opacity: 0; transform: scale(1.32); } }
.mc-cursor {
  position: absolute; z-index: 3; right: 76px; bottom: 18px; width: 30px; height: 30px;
  opacity: 0; transform: translate(190px, 130px);
  transition: transform 950ms cubic-bezier(0.65, 0, 0.35, 1), opacity 300ms ease;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
}
.mc-cursor svg { width: 100%; height: 100%; fill: #fff; stroke: #131315; stroke-width: 1.3; stroke-linejoin: round; transition: transform 140ms var(--ease-out); }
.mock-composer.go .mc-cursor { opacity: 1; transform: none; }
.mock-composer.press .mc-cursor svg { transform: scale(0.82); }
.mock-composer.sent .mc-cursor { opacity: 0; transition: opacity 500ms ease 1.1s; }

.fchip {
  --x: var(--dx); --y: var(--dy);
  position: absolute; z-index: 0; left: calc(50% + var(--x)); top: calc(50% + var(--y)); translate: -50% -50%;
  opacity: 0; transform: translate(calc(var(--x) * -0.6), calc(var(--y) * -0.6)) scale(0.5);
  transition: transform 800ms cubic-bezier(0.2, 1.3, 0.35, 1), opacity 300ms ease;
}
.fchip.in { opacity: 1; transform: none; }
.fc-float {
  display: flex; align-items: center; gap: 12px; padding: 8px 22px 8px 8px; border-radius: 9999px; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 22px 40px -22px rgba(0, 0, 0, 0.6);
}
.scene.on .fc-float { animation: chipFloat 5s ease-in-out infinite alternate; animation-delay: var(--fd, 0s); }
@keyframes chipFloat { from { transform: translateY(-7px); } to { transform: translateY(8px); } }
.fc-ic { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--g, linear-gradient(135deg, #ec4b8f, #f2672f)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.fc-ic svg { width: 21px; height: 21px; }
.fc-txt { display: flex; flex-direction: column; line-height: 1.2; }
.fc-txt small { font-size: 12px; color: rgba(255, 255, 255, 0.66); }
.fc-txt b { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }

/* 2. текст: крупный лист в две колонки, рифмы подсвечиваются маркером, шаги отмечаются галочками */
.mock-lyrics {
  width: 1000px; padding: 26px 36px 34px; border-radius: 32px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 50px 90px -40px rgba(0, 0, 0, 0.65), 0 0 90px -30px rgba(255, 150, 80, 0.45);
}
.ml-head { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.ml-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ml-meta b { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; }
.ml-meta span { font-size: 14px; color: rgba(255, 255, 255, 0.66); }
.ml-checks { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.ml-check {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px 0 11px; border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.5); font-size: 15px; font-weight: 500;
}
.ml-check svg { width: 17px; height: 17px; opacity: 0.4; }
.scene.on .ml-check { animation: checkOn 380ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 280ms + 700ms); }
.scene.on .ml-check svg { animation: checkIcon 380ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 280ms + 700ms); }
@keyframes checkOn { 40% { scale: 1.08; } to { background-color: #f7f4ef; color: #131315; border-color: transparent; } }
@keyframes checkIcon { to { opacity: 1; color: #f2672f; } }
.ml-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.ml-col { display: flex; flex-direction: column; }
.ml-tag { margin-bottom: 6px; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.ml-line { position: relative; isolation: isolate; font-size: 27px; line-height: 1.6; letter-spacing: -0.015em; white-space: nowrap; }
.ml-line mark { position: relative; background: none; color: #fff; font-weight: 600; }
.ml-line mark::before {
  content: ""; position: absolute; z-index: -1; left: -5px; right: -5px; top: 16%; bottom: 6%; border-radius: 8px;
  background: var(--mk); transform: scaleX(0); transform-origin: 0 50%;
}
.r1 { --mk: linear-gradient(90deg, rgba(236, 75, 143, 0.8), rgba(242, 103, 47, 0.8)); }
.r2 { --mk: linear-gradient(90deg, rgba(255, 186, 74, 0.78), rgba(242, 103, 47, 0.78)); }
.r3 { --mk: linear-gradient(90deg, rgba(160, 96, 255, 0.78), rgba(236, 75, 143, 0.78)); }
.r4 { --mk: linear-gradient(90deg, rgba(255, 214, 120, 0.72), rgba(236, 120, 60, 0.78)); }
.ml-tag, .ml-line { opacity: 0; transform: translateY(8px); filter: blur(4px); }
.scene.on .ml-tag, .scene.on .ml-line { animation: lineIn 500ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 280ms + 200ms); }
.scene.on .ml-line mark::before { animation: marker 460ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 280ms + 620ms); }
@keyframes lineIn { to { opacity: 1; transform: none; filter: none; } }
@keyframes marker { to { transform: none; } }

/* 3. песня: большой плеер, пластинка выезжает и крутится, варианты переключаются */
.mock-player { display: flex; align-items: center; gap: 120px; width: 1060px; }
.mp-art { position: relative; flex: none; width: 340px; height: 340px; }
.mp-cover {
  position: absolute; inset: 0; z-index: 1; display: block; border-radius: 24px; overflow: hidden;
  box-shadow: 0 44px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.12); transition: opacity 600ms ease;
}
.mp-cover.b { z-index: 2; opacity: 0; }
.mock-player.alt .mp-cover.b { opacity: 1; }
.mp-disc {
  position: absolute; top: 4%; left: 8%; width: 92%; height: 92%; border-radius: 50%;
  background: repeating-radial-gradient(circle, #121214 0 2px, #1d1d20 2px 4px); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8);
  transition: left 900ms var(--ease-out);
}
.mp-disc::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: radial-gradient(circle, #121214 0 9%, #ec4b8f 10% 62%, #f2672f 63% 100%); transition: filter 600ms ease; }
.mock-player.alt .mp-disc::after { filter: hue-rotate(-50deg) saturate(1.2); }
.scene.on .mp-disc { left: 36%; animation: spin 3.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mp-side { position: relative; z-index: 3; flex: 1; min-width: 0; }
.mp-title { font-size: 50px; font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; }
.mp-sub { margin-top: 8px; font-size: 18px; color: rgba(255, 255, 255, 0.7); }
.mp-vars { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.mp-var {
  display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 9999px; font-size: 15px;
  background-color: rgba(255, 255, 255, 0.13); color: rgba(255, 255, 255, 0.86); transition: background-color 300ms ease, color 300ms ease;
}
.mp-var.v1, .mock-player.alt .mp-var.v2 { background-color: #f7f4ef; color: #131315; font-weight: 500; }
.mock-player.alt .mp-var.v1 { background-color: rgba(255, 255, 255, 0.13); color: rgba(255, 255, 255, 0.86); font-weight: 400; }
.mp-wave { display: flex; align-items: center; gap: 4px; height: 92px; margin-top: 28px; }
.mp-wave i { flex: 1; height: var(--h); border-radius: 3px; background: rgba(255, 255, 255, 0.3); transition: height 500ms var(--ease-out); }
.mock-player.alt .mp-wave i { height: var(--h2); }
.mock-player:not(.alt) .mp-wave i.p1, .mock-player.alt .mp-wave i.p2 { background: linear-gradient(#ffd27a, #f2672f 55%, #ec4b8f); }
.scene.on .mp-wave i { animation: eq 900ms ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes eq { from { transform: scaleY(0.62); } to { transform: scaleY(1); } }
.mp-time { display: flex; justify-content: space-between; margin-top: 10px; font-size: 14px; color: rgba(255, 255, 255, 0.62); font-variant-numeric: tabular-nums; }
.mp-time b { font-weight: 400; }
.mp-time .b, .mock-player.alt .mp-time .a { display: none; }
.mock-player.alt .mp-time .b { display: inline; }
.mp-controls { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.mp-btn { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, 0.13); }
.mp-btn svg { width: 20px; height: 20px; }
.mp-play { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; background: var(--cream); color: #131315; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.6); }
.mp-play svg { width: 26px; height: 26px; }
.mp-pill { display: inline-flex; align-items: center; gap: 7px; height: 50px; padding: 0 20px; border-radius: 9999px; background: rgba(255, 255, 255, 0.13); font-size: 16px; }
.mp-pill.liked { color: #ff5fa2; padding: 0 15px; }
.mp-pill svg { width: 20px; height: 20px; }

/* ниже 1248 px макеты уменьшаются целиком, пропорции сцены сохраняются */
@media (max-width: 1180px) { .sc-fit { zoom: 0.9; } .how-stage { height: 540px; } }
@media (max-width: 1060px) { .sc-fit { zoom: 0.8; } .how-stage { height: 500px; } }
@media (max-width: 960px) {
  .how-tabs { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .how-tab:not(.on) .ht-desc { display: none; }
  .ht-desc { max-width: none; }
  .sc-fit { zoom: 0.72; }
  .how-stage { height: 460px; }
}
@media (max-width: 860px) { .sc-fit { zoom: 0.6; } .how-stage { height: 400px; } }
@media (max-width: 740px) { .sc-fit { zoom: 0.5; } .how-stage { height: 350px; } }
@media (max-width: 640px) {
  .how { padding: var(--sec-y) 16px; }
  .how-stage { height: 520px; border-radius: 24px; }
  .scene { padding: 16px; }
  .sc-fit { zoom: 1; }

  .sc-idea { width: 100%; }
  .mock-composer { padding: 16px 14px 14px; border-radius: 22px; }
  .mc-text { min-height: 94px; padding: 0 4px 14px; font-size: 19px; }
  .mc-row { gap: 6px; }
  .mc-round { width: 38px; height: 38px; }
  .mc-round svg { width: 17px; height: 17px; }
  .mc-dice { display: none; }
  .mc-soft { height: 38px; padding: 0 12px 0 10px; font-size: 13px; }
  .mc-soft svg { width: 16px; height: 16px; }
  .mc-create { height: 42px; padding: 0 17px 0 13px; font-size: 15px; gap: 7px; }
  .mc-create svg { width: 17px; height: 17px; }
  .mc-cursor { right: 50px; bottom: 10px; width: 24px; height: 24px; }
  .fchip { --x: var(--mx); --y: var(--my); }
  .fc-float { gap: 8px; padding: 5px 13px 5px 5px; }
  .fc-ic { width: 32px; height: 32px; }
  .fc-ic svg { width: 16px; height: 16px; }
  .fc-txt small { font-size: 10px; }
  .fc-txt b { font-size: 13px; }

  .mock-lyrics { width: 100%; padding: 16px 18px 18px; border-radius: 22px; }
  .ml-head { flex-wrap: wrap; gap: 10px 12px; padding-bottom: 12px; margin-bottom: 12px; }
  .ml-meta b { font-size: 16px; }
  .ml-meta span { font-size: 12px; }
  .ml-checks { margin-left: 0; width: 100%; gap: 6px; }
  .ml-check { height: 28px; padding: 0 10px 0 8px; gap: 5px; font-size: 12px; }
  .ml-check svg { width: 14px; height: 14px; }
  .ml-cols { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ml-tag { margin-bottom: 2px; font-size: 10px; }
  .ml-line { font-size: 16px; line-height: 1.55; }
  .ml-line mark::before { left: -3px; right: -3px; border-radius: 5px; }

  .mock-player { width: 100%; flex-direction: column; align-items: flex-start; gap: 18px; }
  .mp-art { width: 168px; height: 168px; }
  .mp-cover { border-radius: 16px; }
  .mp-side { width: 100%; }
  .mp-title { font-size: 26px; }
  .mp-sub { margin-top: 4px; font-size: 14px; }
  .mp-vars { margin-top: 12px; gap: 6px; }
  .mp-var { height: 30px; padding: 0 12px; font-size: 12px; }
  .mp-wave { height: 54px; margin-top: 14px; gap: 2px; }
  .mp-time { margin-top: 6px; font-size: 12px; }
  .mp-controls { margin-top: 12px; gap: 8px; }
  .mp-btn { width: 40px; height: 40px; }
  .mp-btn svg { width: 17px; height: 17px; }
  .mp-play { width: 52px; height: 52px; }
  .mp-play svg { width: 21px; height: 21px; }
  .mp-pill { height: 40px; padding: 0 14px; font-size: 14px; }
  .mp-pill.liked { padding: 0 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb, .mp-wave i, .mp-disc, .mc-caret, .ml-last::after, .fc-float, .mock-composer::before { animation: none !important; }
  .fchip { transition: none; }
  .scene.on .ml-tag, .scene.on .ml-line { animation: none; opacity: 1; transform: none; filter: none; }
  .scene.on .ml-line mark::before { animation: none; transform: none; }
  .scene.on .ml-check, .scene.on .ml-check svg { animation-duration: 1ms; animation-delay: 0s; }
  .ht-bar { visibility: hidden; }
}

/* ---------- что ещё можно сделать: шесть карточек с живыми мини-сценами ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feat {
  display: flex; flex-direction: column; min-width: 0; padding: 28px; border-radius: 24px; scroll-margin-top: 110px;
  background: #18181b; border: 1px solid rgba(255, 255, 255, 0.08); transition: border-color 300ms ease, background-color 300ms ease;
}
.feat:hover { border-color: rgba(255, 255, 255, 0.15); background-color: #1b1b1f; }
.feat h3 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
.feat > p { margin: 10px 0 28px; font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.fv { position: relative; isolation: isolate; overflow: hidden; margin-top: auto; aspect-ratio: 16 / 10.5; border-radius: 16px; color: #fff; }
.fv::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.45; mix-blend-mode: overlay; background-size: 180px 180px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.fv svg { display: block; }
.fv-glass {
  position: absolute; z-index: 1; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07)), rgba(30, 12, 10, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 24px 44px -24px rgba(0, 0, 0, 0.6);
}
.fv-caret { display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -0.14em; background: #fff; animation: blink 1.05s steps(1) infinite; }
.fv-switch { position: relative; flex: none; width: 40px; height: 24px; border-radius: 9999px; background: linear-gradient(90deg, #ec4b8f, #f2672f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.fv-switch i { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }

/* 1. жанры: три ленты с жанрами плывут навстречу друг другу */
.fv-genres { background: radial-gradient(90% 100% at 0% 0%, #c4481c 0%, transparent 60%), radial-gradient(90% 100% at 100% 100%, #9b1f6a 0%, transparent 62%), #2a0f14; }
.fvg { position: absolute; z-index: 1; left: -30%; right: -30%; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 10px; rotate: -7deg; }
.fvg-row { display: flex; width: max-content; will-change: transform; }
.fvg-row:nth-child(2) { margin-left: -70px; }
.fvg-row:nth-child(3) { margin-left: -30px; }
.live .fvg-row { animation: marquee 28s linear infinite; }
.live .fvg-row:nth-child(2) { animation-direction: reverse; animation-duration: 32s; }
.live .fvg-row:nth-child(3) { animation-duration: 24s; }
.fvg-pill {
  display: inline-flex; align-items: center; gap: 9px; height: 44px; margin-right: 8px; padding: 0 18px 0 6px; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  font-size: 16px; font-weight: 500; white-space: nowrap;
}
.fvg-pill i { flex: none; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.fvg-pill.hot { background: linear-gradient(90deg, #ec4b8f, #f2672f); border-color: transparent; }
.fvg-pill.serif { font-family: var(--serif); font-style: italic; font-size: 21px; }

/* 2. настройки: большая панель уходит за край, ползунки голоса и длины переезжают */
.fv-settings { background: radial-gradient(85% 100% at 0% 0%, #b8901c 0%, transparent 62%), radial-gradient(85% 100% at 100% 100%, #c4481c 0%, transparent 64%), #3b1a0c; }
.fvs {
  left: 7%; right: -6%; top: 11%; display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 9px 10px; align-items: center;
  padding: 14px 16px 16px; border-radius: 16px;
}
.fvs-l { font-size: 10.5px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.fvs-l:first-child { align-self: start; margin-top: 8px; }
.fvs-style { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fvs-input { display: block; height: 28px; padding: 0 10px; border-radius: 8px; background: rgba(20, 8, 6, 0.32); font-size: 12.5px; line-height: 28px; white-space: nowrap; overflow: hidden; }
.fvs-chips { display: flex; gap: 5px; white-space: nowrap; }
.fvs-chips b { padding: 3px 9px; border-radius: 9999px; background: rgba(255, 255, 255, 0.12); font-size: 11px; font-weight: 500; }
.fvs-chips b.on { background: var(--cream); color: #131315; }
.fv-seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 3px; border-radius: 9999px; background: rgba(20, 8, 6, 0.32); font-size: 12px; }
.fv-seg span { position: relative; z-index: 1; padding: 6px 2px; text-align: center; white-space: nowrap; }
.fv-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n)); border-radius: 9999px;
  background: rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 10px -4px rgba(0, 0, 0, 0.4);
}
.t-voice { --n: 3; transform: translateX(100%); }
.t-len { --n: 4; transform: translateX(200%); }
.live .t-voice { animation: seg3 7s var(--ease-in-out) infinite; }
.live .t-len { animation: seg4 7s var(--ease-in-out) infinite -3.5s; }
@keyframes seg3 { 0%, 26% { transform: translateX(100%); } 33%, 60% { transform: translateX(200%); } 67%, 93% { transform: translateX(0); } 100% { transform: translateX(100%); } }
@keyframes seg4 { 0%, 26% { transform: translateX(200%); } 33%, 60% { transform: translateX(300%); } 67%, 93% { transform: translateX(100%); } 100% { transform: translateX(200%); } }

/* 3. свои стихи: метки частей в тексте совпадают с цветами на дорожке песни, по ней бежит курсор */
.fv-own { background: radial-gradient(90% 100% at 100% 0%, #ec4b8f 0%, transparent 60%), radial-gradient(85% 100% at 0% 100%, #6a2bb0 0%, transparent 66%), #2a0d2b; }
.fvo { left: 7%; right: 7%; top: 9%; display: flex; flex-direction: column; align-items: flex-start; padding: 9px 13px 11px; }
.fvo-tag { display: inline-flex; align-items: center; height: 19px; margin: 1px 0 3px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; }
.fvo-tag::before { content: "["; }
.fvo-tag::after { content: "]"; }
.fvo-line { font-size: 13px; line-height: 1.4; white-space: nowrap; }
.fvo-line + .fvo-tag { margin-top: 6px; }
.t-verse, .s-verse { background: rgba(236, 75, 143, 0.88); }
.t-chorus, .s-chorus { background: rgba(242, 128, 47, 0.92); }
.s-intro { background: rgba(255, 255, 255, 0.22); }
.fvo-track { position: absolute; z-index: 1; left: 7%; right: 7%; bottom: 9%; display: flex; gap: 3px; height: 30px; }
.fvo-track .seg { display: grid; place-items: center; min-width: 0; border-radius: 6px; font-size: 9.5px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.fvo-head { position: absolute; inset: -6px 0; pointer-events: none; }
.fvo-head::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.9); }
.fvo-head { transform: translateX(36%); }
.live .fvo-head { animation: playhead 9s linear infinite; }
@keyframes playhead { from { transform: translateX(0); } to { transform: translateX(100%); } }

/* 4. правка текста: старое слово зачёркивается, новое печатается */
.fv-edit { background: radial-gradient(90% 100% at 100% 0%, #d23c6e 0%, transparent 60%), radial-gradient(85% 100% at 0% 100%, #4f2bb0 0%, transparent 66%), #250c25; }
.fve { left: 7%; right: 7%; top: 50%; translate: 0 -50%; padding: 13px 15px 15px; }
.fve-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 10px; border-radius: 9999px; background: linear-gradient(90deg, #ec4b8f, #f2672f); font-size: 12px; font-weight: 500; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.fve-btn svg { width: 14px; height: 14px; }
.fve-lines { display: flex; flex-direction: column; margin-top: 10px; font-size: 14px; line-height: 1.55; }
.fve-lines span { white-space: nowrap; }
.fve-lines .dim { opacity: 0.55; }
.fve-old, .fve-new { display: inline-block; overflow: hidden; vertical-align: bottom; white-space: nowrap; }
.fve-old { position: relative; max-width: 0; opacity: 0; color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.fve-old::after { content: ""; position: absolute; left: 0; right: 0; top: 54%; height: 1.5px; background: #ff9a7a; transform: scaleX(0); transform-origin: 0 50%; }
.fve-new { max-width: 2.8em; color: #ffd27a; font-weight: 600; }
.live .fve-old { animation: oldOut 6.5s var(--ease-out) infinite; }
.live .fve-old::after { animation: strike 6.5s var(--ease-out) infinite; }
.live .fve-new { animation: newIn 6.5s steps(4, end) infinite; }
@keyframes oldOut { 0%, 30% { max-width: 4em; opacity: 1; } 38%, 100% { max-width: 0; opacity: 0; } }
@keyframes strike { 0%, 12% { transform: scaleX(0); } 24%, 100% { transform: scaleX(1); } }
@keyframes newIn { 0%, 40% { max-width: 0; } 58%, 95% { max-width: 2.8em; } 100% { max-width: 0; } }

/* 5. инструментал: переключатель и широкая волна без голоса */
.fv-instr { background: radial-gradient(80% 95% at 12% 8%, #f2672f 0%, transparent 62%), radial-gradient(75% 95% at 92% 95%, #c21f63 0%, transparent 66%), #3a0f1e; }
.fvi-pill { left: 7%; top: 11%; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 7px; border-radius: 9999px; font-size: 14px; }
.fvi-pill b { margin-right: 6px; font-weight: 500; }
.fvi-mic { position: relative; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.fvi-mic svg { width: 16px; height: 16px; opacity: 0.75; }
.fvi-mic::after { content: ""; position: absolute; width: 2px; height: 20px; border-radius: 2px; background: #fff; rotate: -45deg; }
.fvi-wave { position: absolute; z-index: 1; left: 7%; right: 7%; top: 40%; bottom: 12%; display: flex; align-items: center; gap: 3px; }
.fvi-wave i { flex: 1; height: var(--h); border-radius: 3px; background: linear-gradient(#ffd27a, #f2672f 60%, #ec4b8f); }
.live .fvi-wave i { animation: eq 900ms ease-in-out infinite alternate; animation-delay: var(--d); }

/* 6. библиотека: крупный список уходит за нижний край */
.fv-lib { background: radial-gradient(90% 100% at 0% 0%, #f0a43a 0%, transparent 56%), radial-gradient(85% 100% at 100% 100%, #e0482a 0%, transparent 66%), #3d140c; }
.fvl { left: 7%; right: 7%; top: 11%; padding: 12px 10px; border-radius: 16px; }
.fvl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; padding: 0 2px 0 6px; }
.fvl-head b { font-size: 15px; font-weight: 600; }
.fvl-search { display: flex; align-items: center; gap: 6px; height: 28px; min-width: 104px; padding: 0 12px 0 10px; border-radius: 9999px; background: rgba(20, 8, 6, 0.32); font-size: 12px; }
.fvl-search svg { width: 13px; height: 13px; opacity: 0.7; }
.fvl-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 18px; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; }
.fvl-row.on { background: rgba(255, 255, 255, 0.13); }
.fvl-art { position: relative; display: block; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; }
.fvl-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.fvl-t b { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fvl-t em { font-style: normal; font-size: 11.5px; color: rgba(255, 255, 255, 0.66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fvl-time { font-size: 11.5px; color: rgba(255, 255, 255, 0.66); font-variant-numeric: tabular-nums; }
.fvl-ic svg { width: 16px; height: 16px; }
.fvl-ic.like { color: #ff5fa2; }
.fvl-eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.fvl-eq i { width: 3px; height: 100%; border-radius: 1px; background: #ffd27a; transform-origin: 50% 100%; transform: scaleY(0.6); }
.live .fvl-eq i { animation: eq 700ms ease-in-out infinite alternate; }
.fvl-eq i:nth-child(2) { animation-delay: -300ms; }
.fvl-eq i:nth-child(3) { animation-delay: -550ms; }

/* ---------- тарифы ---------- */
.pricing .sec-head { margin-bottom: 44px; }
.bill { display: inline-flex; gap: 22px; margin-top: 22px; }
.bill-opt { display: inline-flex; align-items: center; gap: 8px; padding: 6px 2px; border: 0; background: none; color: rgba(255, 255, 255, 0.7); font: inherit; font-size: 15px; cursor: pointer; transition: color 200ms ease; }
.bill-opt:hover, .bill-opt.on { color: #fff; }
.bill-opt i { position: relative; flex: none; width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.4); transition: background-color 200ms ease, border-color 200ms ease; }
.bill-opt.on i { border-color: transparent; background: var(--cream); }
.bill-opt.on i::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #131315; border-width: 0 1.6px 1.6px 0; rotate: 45deg; }
.bill-save { margin-left: 2px; padding: 2px 7px; border-radius: 9999px; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 11.5px; font-weight: 600; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1060px; margin: 0 auto; }
.plan { display: flex; flex-direction: column; min-width: 0; padding: 30px 28px 32px; border-radius: 24px; background: #18181b; border: 1px solid rgba(255, 255, 255, 0.08); }
.plan-pro {
  border-color: rgba(236, 75, 143, 0.8); background: linear-gradient(180deg, #21161b, #18181b 46%);
  box-shadow: 0 0 0 1px rgba(236, 75, 143, 0.22), 0 40px 90px -50px rgba(236, 75, 143, 0.55);
}
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.plan h3 { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 34px; line-height: 1; letter-spacing: -0.01em; }
.plan-badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 9999px; background: rgba(255, 255, 255, 0.12); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.plan-badge-hot { background: linear-gradient(90deg, #ec4b8f, #f25aa0); color: #fff; }
.plan-badge svg { width: 12px; height: 12px; }
.plan-for { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.plan-price { display: flex; align-items: baseline; gap: 4px; margin-top: 24px; }
.plan-price b { font-size: 36px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.plan-price span { font-size: 14px; color: var(--muted); }
.plan-note { display: flex; flex-direction: column; gap: 2px; min-height: 40px; margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.plan-note span { display: block; }
.plan-btn {
  display: flex; align-items: center; justify-content: center; height: 52px; margin: 24px 0 28px; border-radius: 9999px;
  font-size: 16px; font-weight: 500; text-decoration: none; transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
a.plan-btn:active { transform: scale(0.97); }
.plan-btn-dark { background: #2c2c30; color: #fff; }
.plan-btn-dark:hover { background: #37373c; }
.plan-btn-hot { color: #fff; background: radial-gradient(120% 160% at 85% 0%, rgba(255, 190, 90, 0.85) 0%, rgba(255, 190, 90, 0) 46%), linear-gradient(90deg, #ec4b8f, #f2672f); }
.plan-btn-cream { background: var(--cream); color: #131315; }
.plan-btn[aria-disabled="true"] { cursor: default; }
.plan-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.plan-list li { position: relative; padding-left: 27px; line-height: 1.4; }
.plan-list li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 50%; background: rgba(255, 255, 255, 0.1) center / 11px no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f4ef' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12.5 4.5 4.5L19 7.5'/></svg>");
}
.plan-pro .plan-list li::before { background-color: rgba(236, 75, 143, 0.28); }
.plan-list li.no { color: var(--faint); }
.plan-list li.no::before {
  background-color: rgba(255, 255, 255, 0.06);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f4ef' stroke-opacity='.5' stroke-width='2.6' stroke-linecap='round'><path d='m7 7 10 10M17 7 7 17'/></svg>");
}
.plans-foot { margin: 28px auto 0; text-align: center; font-size: 14px; color: var(--faint); }
.price-swap { animation: priceIn 280ms var(--ease-out); }
@keyframes priceIn { from { opacity: 0; transform: translateY(5px); filter: blur(2px); } }

/* ---------- вопросы и ответы ---------- */
.faq { display: flex; flex-direction: column; gap: 10px; max-width: 860px; margin: 0 auto; interpolate-size: allow-keywords; }
.faq-item { border-radius: 18px; background: #18181b; border: 1px solid rgba(255, 255, 255, 0.08); transition: background-color 250ms ease, border-color 250ms ease; }
.faq-item:hover { border-color: rgba(255, 255, 255, 0.14); }
.faq-item[open] { background: #1c1c20; border-color: rgba(255, 255, 255, 0.14); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px 20px 26px; border-radius: 18px;
  list-style: none; cursor: pointer; font-size: 18px; font-weight: 500; letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: -2px; }
.faq-x { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); transition: background-color 200ms ease, rotate 300ms var(--ease-out); }
.faq-x::before, .faq-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -0.8px 0 0 -6px; border-radius: 2px; background: var(--cream); }
.faq-x::after { rotate: 90deg; }
.faq-item[open] .faq-x { rotate: 45deg; background: linear-gradient(135deg, #ec4b8f, #f2672f); }
.faq-item p { margin: 0; padding: 0 76px 22px 26px; font-size: 16px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.faq-item::details-content { block-size: 0; overflow: clip; transition: block-size 320ms var(--ease-out), content-visibility 320ms allow-discrete; }
.faq-item[open]::details-content { block-size: auto; }

/* ---------- финал: продолжение первого экрана, тот же тёплый фон ---------- */
.final {
  position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center;
  min-height: clamp(700px, 94svh, 960px); margin-top: calc(var(--sec-y) * 0.5); padding: 150px 24px 160px; text-align: center;
}
.final-bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--canvas) 0%, #21140e 24%, #34200d 50%, #2a170e 74%, var(--canvas) 100%); }
.final-bg::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, var(--canvas) 0%, rgba(16, 16, 18, 0) 24%, rgba(16, 16, 18, 0) 72%, var(--canvas) 100%); }
.final-bg .grain { z-index: 2; }
.f1 { width: 72vw; height: 72vw; left: -28vw; top: 50%; translate: 0 -50%; background: radial-gradient(circle, rgba(128, 94, 14, 0.9) 0%, rgba(128, 94, 14, 0) 64%); }
.f2 { width: 60vw; height: 60vw; right: -24vw; top: 50%; translate: 0 -44%; background: radial-gradient(circle, rgba(118, 88, 16, 0.85) 0%, rgba(118, 88, 16, 0) 62%); animation-delay: -9s; }
.f3 { width: 46vw; height: 46vw; right: 6vw; top: 4%; background: radial-gradient(circle, rgba(104, 28, 70, 0.9) 0%, rgba(104, 28, 70, 0) 64%); animation-delay: -4s; }
.f4 { width: 76vw; height: 60vw; left: 12vw; top: 50%; translate: 0 -50%; background: radial-gradient(circle, rgba(126, 44, 18, 0.95) 0%, rgba(126, 44, 18, 0) 64%); animation-delay: -14s; }
.final-inner { position: relative; z-index: 1; width: 100%; max-width: 1100px; }
.final h2 { margin: 0; font-size: clamp(52px, 8.6vw, 132px); font-weight: 500; line-height: 0.98; letter-spacing: -0.045em; color: var(--bone); text-wrap: balance; }
.final-inner > p { margin: 28px auto 0; max-width: 560px; font-size: 19px; line-height: 1.45; color: rgba(255, 255, 255, 0.86); text-wrap: pretty; }
.final-cta {
  position: relative; display: inline-flex; align-items: center; gap: 12px; height: 66px; margin-top: 44px; padding: 0 36px 0 28px;
  border-radius: 9999px; background: linear-gradient(90deg, #ec4b8f, #f2672f); color: #fff; font-size: 20px; font-weight: 500; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 22px 60px -14px rgba(242, 90, 60, 0.8);
  transition: transform 160ms var(--ease-out), filter 200ms ease;
}
.final-cta::before { content: ""; position: absolute; inset: -8px; border-radius: inherit; border: 1.5px solid rgba(255, 170, 130, 0.55); animation: ctaPulse 2.8s var(--ease-out) infinite; pointer-events: none; }
@keyframes ctaPulse { 0% { opacity: 0.9; transform: scale(0.94); } 70%, 100% { opacity: 0; transform: scale(1.14); } }
.final-cta:hover { filter: brightness(1.07); }
.final-cta:active { transform: scale(0.97); }
.final-cta svg { width: 22px; height: 22px; }

.foot { border-top: 1px solid var(--line); }
.foot-inner { max-width: 1200px; margin: 0 auto; padding: 32px 24px 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.foot .logo img { height: 30px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot-links a { font-size: 14px; color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--cream); }
.foot-note { width: 100%; margin: 0; font-size: 13px; color: var(--faint); }

/* ---------- адаптивность ---------- */
@media (max-width: 1180px) {
  .fc-left { left: -7vw; top: 34%; }
  .fc-right { right: -7vw; top: 30%; }
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .bar-nav { display: none; }
  .float-card { display: none; }
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}
@media (max-width: 1248px) {
  .rail { margin: 0 24px; }
}
@media (max-width: 640px) {
  .rail { margin: 0; padding: 0 16px; scroll-padding-left: 16px; }
  .rail-track { gap: 16px; }
  .song { width: 200px; }
  .song-art { height: 272px; }
  .bar { height: 64px; }
  .bar-inner { padding: 0 16px; gap: 16px; }
  .logo img { height: 31px; }
  .bar-actions .pill-line { display: none; }
  .pill { height: 36px; padding: 0 14px; font-size: 14px; }
  .hero { padding: 96px 16px 110px; min-height: 640px; }
  .hero-title { font-size: 38px; min-height: 3.1em; }
  .hero-sub { font-size: 15px; }
  .composer { padding: 16px 14px 12px; border-radius: 20px; }
  .composer textarea { min-height: 64px; font-size: 16px; }
  .composer-row { flex-wrap: wrap; row-gap: 10px; }
  .composer-side:last-child { flex: 1 1 100%; }
  .composer-side:last-child .create { flex: 1; justify-content: center; }
  .soft { padding: 0 12px; }
  .sec { padding: var(--sec-y) 16px; }
  .sec-head, .showcase-head, .how-head { margin-bottom: 32px; }
  .sec-head h2, .showcase-head h2, .how-head h2 { font-size: 34px; }
  .sec-head p, .showcase-head p, .how-head p { font-size: 16px; }
  .feat-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .feat { padding: 22px; border-radius: 20px; }
  .feat > p { margin-bottom: 22px; }
  .plan { padding: 26px 22px 28px; }
  .faq-item summary { padding: 16px 16px 16px 18px; font-size: 16px; }
  .faq-item p { padding: 0 18px 18px; font-size: 15px; }
  .faq-x { width: 28px; height: 28px; }
  .final { min-height: 0; padding: 112px 16px 120px; }
  .final h2 { font-size: 46px; }
  .final-inner > p { font-size: 16px; }
  .final-cta { height: 58px; margin-top: 32px; padding: 0 28px 0 22px; font-size: 18px; }
  .genres { bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .blob, .genres-track, .caret, .fc-body, .fv-caret { animation: none; }
  .live *, .live *::after { animation: none !important; }
  .final-cta::before { animation: none; opacity: 0; }
}