/* Цвета — из темы приложения (stem-studio/bench/Sources/Yurka/Theme.swift):
   светлая основная, тёмная переопределяет; мятный — всё про петлю, синий — то,
   что звучит сейчас; пятна фона — бирюзовое и синее внизу, без ржавого. */
:root {
  color-scheme: light dark;
  --bg: #ffffff; --ink: #0b0b0c; --dim: rgba(60,60,67,.78); --faint: rgba(60,60,67,.70);   /* ≥4,5:1 на белом */
  --hair: rgba(0,0,0,.10); --voice: #0a66d6; --loop: #0e7c63; --glass: rgba(0,0,0,.045);
  --top: rgba(255,255,255,.72); --amb1: #9fe3cf; --amb2: #b9d3f5; --amb-op: .75; --panel: #ffffff;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #000; --ink: #f5f5f7; --dim: rgba(235,235,245,.68); --faint: rgba(235,235,245,.52);   /* ≥4,5:1 на чёрном */
          --hair: rgba(255,255,255,.12); --voice: #66adff; --loop: #33d6ac; --glass: rgba(255,255,255,.08);
          --top: rgba(0,0,0,.55); --amb1: #0e5c4c; --amb2: #1b3a6b; --amb-op: .95; --panel: #141416; }
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.5 var(--sans);
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
:lang(ko) { word-break: keep-all; }

/* ── шапка ─────────────────────────────────────────────── */
.top { position: fixed; inset: 0 0 auto; z-index: 20; height: 52px; display: flex; align-items: center;
       justify-content: space-between; padding: 0 max(20px, calc((100vw - 1200px) / 2));
       background: var(--top); -webkit-backdrop-filter: saturate(180%) blur(20px);
       backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hair); }
.mark { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; }
.mark img { width: 26px; height: 26px; border-radius: 7px; }
/* Apple: значок на экране не ниже 40 px. */
.top .badge img { height: 40px; display: block; }

/* ── история ───────────────────────────────────────────── */
/* iPhone: высота экрана плавает — нижняя панель Safari/Chrome уезжает при
   прокрутке. Сцена и длина истории — по большой высоте (lvh), чтобы под
   уехавшей панелью был фон сцены, а не голая страница (чёрная полоса 5.10).
   Содержимое — по малой (svh): панель его не закрывает никогда. */
/* 7 шагов: (6,5 × 0,65 + 1) экрана. Шаг короче экрана — изменения видны сразу. */
.story { position: relative; height: 525vh; height: 525lvh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; }

.amb { position: absolute; inset: -20%; pointer-events: none; filter: blur(90px); opacity: var(--amb-op); }
.amb i { position: absolute; border-radius: 50%; }
.amb i:nth-child(1) { width: 50vmax; height: 50vmax; left: 6%; top: 58%; background: var(--amb1);
                      animation: drift1 26s ease-in-out infinite alternate; }
.amb i:nth-child(2) { width: 48vmax; height: 48vmax; left: 66%; top: 54%; background: var(--amb2);
                      animation: drift2 31s ease-in-out infinite alternate; }
.amb i:nth-child(3) { width: 30vmax; height: 30vmax; left: 40%; top: 78%; background: var(--amb1);
                      animation: drift1 37s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(-8vmax, 6vmax) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-10vmax, -7vmax) scale(.9); } }

.frame { position: relative; height: 100vh; height: 100svh; max-width: 1200px; margin: 0 auto; padding: 52px 20px 0;
         display: grid; grid-template-columns: 11fr 13fr; gap: 56px; align-items: center; }

.caps { position: relative; height: 62vh; }
.cap { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
       opacity: 0; will-change: opacity, transform; pointer-events: none; }
.cap.on { pointer-events: auto; }
.cap h1, .cap h2 { margin: 0; font-weight: 700; letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; }
.cap h1 { font-size: clamp(2.5rem, 4.3vw, 4.1rem); }
.cap h2 { font-size: clamp(2.2rem, 4.4vw, 3.9rem); }
.cap p { margin: 1.1rem 0 0; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--dim); max-width: 30rem;
         letter-spacing: -.01em; text-wrap: pretty; }
.cap .voice { color: var(--voice); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 2rem; }
.cta .badge img { height: 48px; display: block; }

.play { position: relative; display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 24px 0 7px;
        border-radius: 999px; border: 0; background: var(--ink); color: var(--bg);
        font: 600 16px/1 var(--sans); letter-spacing: -.01em; cursor: pointer; white-space: nowrap;
        box-shadow: 0 10px 30px -10px rgba(10, 102, 214, .55); transition: transform .15s, box-shadow .2s; }
.play:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -10px rgba(10, 102, 214, .7); }
.play:focus-visible { outline: 2px solid var(--voice); outline-offset: 3px; }
.play b { width: 38px; height: 38px; border-radius: 50%; background: var(--bg); color: var(--ink); display: grid; place-items: center; }
/* Звук — главное на странице, и кнопка его зовёт: динамик с «дышащими» волнами
   и расходящееся кольцо, пока звук не включён. Владелец (5.10): «кнопка со
   звуком должна зазывать, иначе не очевидно». */
.play .spk { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.play .w1 { animation: wave 1.6s ease-in-out infinite; }
.play .w2 { animation: wave 1.6s ease-in-out .25s infinite; }
@keyframes wave { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.play[data-state="playing"] .spk { display: none; }
.play[data-state="playing"] b::before { content: ""; width: 10px; height: 12px;
  background: linear-gradient(90deg, var(--ink) 0 35%, transparent 35% 65%, var(--ink) 65%); }
.play[data-state="playing"] { box-shadow: none; }
.play[data-state="loading"] b { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .4; } }
.play::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--voice);
               opacity: 0; pointer-events: none; }
.cta .play[data-state="idle"]::after, .dock.nudge .play[data-state="idle"]::after { animation: halo 2.4s ease-out infinite; }
@keyframes halo { 0% { opacity: .8; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(1.1, 1.45); } }
.cap .sound-hint { margin-top: .9rem; font-size: .98rem; color: var(--dim); }
.dock { position: fixed; z-index: 5; left: max(20px, calc((100vw - 1200px) / 2 + 20px)); bottom: calc(32px + env(safe-area-inset-bottom));
        opacity: 0; transition: opacity .3s; pointer-events: none; }
.dock.on { opacity: 1; pointer-events: auto; }
/* Невидимая кнопка не должна ловить фокус с клавиатуры. */
.dock:not(.on) { visibility: hidden; transition: opacity .3s, visibility 0s .3s; }

.desk { position: relative; display: flex; flex-direction: column; gap: 32px; }
/* Поле дорожек — не больше 40 % экрана: шесть дорожек читаются уже от ~36 px
   на каждую, остальное место — тексту песни под ними. */
.lanes { position: relative; width: 100%; height: min(40vh, 360px); }
.lanes canvas { width: 100%; height: 100%; display: block; cursor: pointer; }
/* Дорожки для клавиатуры и скринридера: настоящие кнопки поверх строк холста,
   невидимые, пока на них нет фокуса. */
.lane-keys { position: absolute; inset: 0; display: grid; grid-auto-rows: 1fr; pointer-events: none; }
.lane-keys button { pointer-events: none; opacity: 0; border: 0; background: none; color: transparent;
                    font: 600 12px/1 var(--sans); text-align: left; padding: 0 8px; border-radius: 8px; }
.lane-keys button:focus-visible { opacity: 1; outline: 2px solid var(--voice); outline-offset: -2px; }
/* Над полем, а не на нём: на телефоне «Тональность» длинная, и плашка
   ложилась на верхнюю дорожку под линию проигрывания. */
.readout { position: absolute; right: 0; bottom: calc(100% + 10px); display: flex; gap: 10px; opacity: 0; }
.readout span { padding: 7px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--hair);
                font: 600 14px/1 var(--sans); font-variant-numeric: tabular-nums; -webkit-backdrop-filter: blur(20px);
                backdrop-filter: blur(20px); }
.readout em { font-style: normal; color: var(--dim); font-weight: 500; margin-right: 6px; }

.lyric { min-height: 5rem; }
.lyric-tag { font: 600 12px/1 var(--sans); letter-spacing: .06em; color: var(--dim); margin-bottom: 8px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 64px; }
.lyric .now { font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.lyric .next { margin-top: .35rem; font-size: clamp(.95rem, 1.2vw, 1.1rem); font-weight: 500; color: var(--faint);
               letter-spacing: -.01em; }
.lyric span { color: var(--faint); transition: color .12s; }
.lyric span.sung { color: var(--ink); }
.lyric span.cur { color: var(--voice); }

.hint { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); transform: translateX(-50%); color: var(--dim);
        font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.hint::after { content: ""; display: block; width: 1px; height: 28px; margin: 10px auto 0;
               background: linear-gradient(var(--dim), transparent); animation: hint 2.2s ease-in-out infinite; }
@keyframes hint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; }
                  51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ── после истории: кадры, плеер, факты ───────────────────── */
.sec { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.screens, .try, .facts, .final { max-width: 1200px; margin: 0 auto; padding: 120px 20px 0; }
.screens h2, .try h2, .facts h2, .final h2 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; letter-spacing: -.035em;
  line-height: 1.05; margin: 0 0 .6rem; text-wrap: balance; }
:is(:lang(ja), :lang(ko), :lang(zh)) :is(.screens, .try, .facts, .final) h2 { letter-spacing: -.01em; line-height: 1.2; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Кадры приложения: тонкая рамка телефона, без отрисованного корпуса. */
.phones { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.phone { margin: 0; }
.device { border-radius: 14% / 6.5%; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--hair), 0 24px 60px -24px rgba(0,0,0,.45); }
.device img { display: block; width: 100%; height: auto; }
.phone figcaption { margin-top: 14px; font-size: 15px; line-height: 1.35; color: var(--dim); text-wrap: balance; }

/* Плеер «Попробуйте сами» — нижняя панель приложения. */
.try-head p { color: var(--dim); font-size: clamp(1.05rem, 1.5vw, 1.25rem); max-width: 40rem; margin: 0; }
.player { margin-top: 36px; border-radius: 28px; padding: 22px; background: var(--panel); border: 1px solid var(--hair);
          box-shadow: 0 30px 80px -40px rgba(0,0,0,.35); display: grid; gap: 18px; }
.pl-song b { display: block; font-size: 17px; } .pl-song span { color: var(--dim); font-size: 13px; }
.pl-lyric { min-height: 3.6rem; }
.pl-lyric .now { font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 700; letter-spacing: -.02em; }
.pl-lyric .next { font-size: 1rem; font-weight: 600; color: var(--faint); margin-top: .2rem; }
.pl-lyric span { color: var(--faint); } .pl-lyric span.sung { color: var(--ink); } .pl-lyric span.cur { color: var(--voice); }
.pl-wave { position: relative; }
.pl-wave canvas { display: block; width: 100%; height: 88px; cursor: crosshair; touch-action: pan-y; }   /* полоса волны — не ловушка прокрутки */
.pl-wave:focus-visible { outline: 2px solid var(--voice); outline-offset: 6px; border-radius: 8px; }
.pl-times { display: flex; justify-content: space-between; font: 500 12px/1 var(--sans); color: var(--dim); margin-top: 8px; font-variant-numeric: tabular-nums; }
.laps { color: var(--loop); font-weight: 600; }
.pl-hint { margin: -8px 0 0; font-size: 13px; color: var(--dim); }
.pl-stems { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.stem { display: grid; justify-items: center; gap: 6px; background: none; border: 0; color: var(--ink); font: 500 12px/1.2 var(--sans); cursor: pointer; padding: 0; }
.stem .ic { width: 52px; height: 52px; padding: 15px; border-radius: 50%; background: var(--glass); box-shadow: inset 0 0 0 1px var(--hair); transition: background .2s, opacity .2s; }
.stem[aria-pressed="false"] .ic { background: none; box-shadow: inset 0 0 0 1.5px var(--faint); opacity: .55; }
.stem[aria-pressed="false"] span { color: var(--dim); text-decoration: line-through; }
.stem:disabled { cursor: default; } .stem:disabled .ic { opacity: .35; background: none; box-shadow: inset 0 0 0 1px var(--hair); }
.stem small { display: block; font-size: 10px; color: var(--dim); font-weight: 400; margin-top: 2px; }
.pl-play.failed { box-shadow: 0 0 0 3px var(--rec, #d6362f); }
.stem:focus-visible .ic, .pl-transport button:focus-visible, .pl-key button:focus-visible { outline: 2px solid var(--voice); outline-offset: 2px; }
.pl-ctrl { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
.pl-tempo, .pl-key { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 999px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--hair); }
.pl-tempo input { flex: 1; accent-color: var(--loop); min-width: 0; }
.pl-tempo output, .pl-key output { font: 600 15px/1 var(--sans); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: center; }
.pl-key output { min-width: 1.8em; }
.pl-key button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; color: var(--ink); font: 500 22px/1 var(--sans); cursor: pointer; }
.pl-transport { display: flex; justify-content: center; align-items: center; gap: 28px; }
.pl-transport button { border: 0; cursor: pointer; display: grid; place-items: center; }
.pl-loop, .pl-reset { width: 48px; height: 48px; border-radius: 50%; background: var(--glass); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); }
.pl-loop[aria-pressed="true"] { background: var(--loop); color: var(--bg); box-shadow: none; }   /* на тёмной — чёрный по мятному: белый давал 1,85:1 */
.pl-play { width: 68px; height: 68px; border-radius: 50%; background: var(--ink); }
.pl-play b::before { content: ""; display: block; margin-left: 5px; border-left: 18px solid var(--bg); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.pl-play[data-state="playing"] b::before { margin: 0; width: 18px; height: 20px; border: 0; background: linear-gradient(90deg, var(--bg) 0 35%, transparent 35% 65%, var(--bg) 65%); }
.pl-play[data-state="loading"] b { animation: pulse 1s ease-in-out infinite; }
.try-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 24px; }
.try-cta p { margin: 0; font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.try-cta .badge img, .final .badge img { display: block; height: 48px; width: auto; }

/* Факты: цена, сравнение, вопросы. */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 64px 72px; }
.facts p { color: var(--dim); font-size: 1.1rem; margin: 0; }
.facts .faq { grid-column: 1 / -1; }
.price-note { margin-top: 14px !important; font-size: .95rem !important; }
.compare table { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.compare thead th { font-weight: 600; color: var(--ink); }
.compare tbody th { font-weight: 500; color: var(--dim); }
.compare td:nth-child(2) { color: var(--ink); font-weight: 600; }
.compare td:nth-child(3) { color: var(--dim); }
.faq details { border-bottom: 1px solid var(--hair); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.1rem; letter-spacing: -.01em; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--dim); font-weight: 400; font-size: 1.4rem; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: .7rem; max-width: 46rem; }
.final { text-align: center; padding-bottom: 120px; }
.final p { color: var(--dim); font-size: 1.2rem; margin: 0 auto 28px; max-width: 34rem; }
.final .badge { display: inline-block; } .final .badge img { height: 56px; }

/* ── после истории ─────────────────────────────────────── */
.foot { max-width: 1200px; margin: 0 auto; padding: 48px 20px 64px; border-top: 1px solid var(--hair);
        color: var(--dim); font-size: 14px; display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }

.foot .langs { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.foot .langs a[aria-current] { color: var(--ink); }

/* Иероглифы и хангыль: латинская разрядка −0,035em их слепляет. */
:is(:lang(ja), :lang(ko), :lang(zh)) .cap :is(h1, h2) { letter-spacing: -.01em; line-height: 1.2; }

/* ── документ: поддержка, 404 ──────────────────────────── */
.doc { max-width: 46rem; margin: 0 auto; padding: 132px 20px 72px; min-height: 72vh; }
.doc h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; margin: 0; }
.doc header { padding: 0; }
.doc .tagline { color: var(--dim); font-size: 1.15rem; margin: .6rem 0 0; }
.doc a { color: var(--loop); }
.faq { margin: 2.6rem 0 0; }
.faq dt { font-weight: 600; font-size: 1.12rem; letter-spacing: -.01em; margin-top: 2rem; }
.faq dd { margin: .45rem 0 0; color: var(--dim); }
.doc h2 { font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; margin: 2rem 0 .4rem; }
.doc p { color: var(--dim); margin: 0; }
.doc section + section { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--hair); }

/* ── телефон ───────────────────────────────────────────── */
@media (max-width: 899px) {
  .frame { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; align-items: stretch; padding-top: 64px; }
  .caps { height: 40vh; height: 40svh; }
  .cap { justify-content: flex-start; padding-top: 8px; }
  .cap h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .cap h2 { font-size: clamp(1.9rem, 8vw, 2.5rem); }
  .cap p { font-size: 1rem; margin-top: .7rem; }
  .cta { margin-top: 1.1rem; flex-wrap: nowrap; gap: 12px; }   /* Apple: поле вокруг значка ≥ ¼ его высоты */
  .cta .badge img { height: 44px; }
  .cta .play { height: 46px; padding-right: 18px; font-size: 15px; gap: 10px; }
  .cta .play b { width: 34px; height: 34px; }
  /* Подпись и дорожки — одной группой сверху: раньше между ними зияла треть экрана. */
  .desk { justify-content: flex-start; gap: 14px; padding: 2vh 0 92px; }
  .lanes { height: 27vh; height: 27svh; }
  .lyric { min-height: 4.8rem; }
  .dock { left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom)); }
  .top .badge { display: none; }
  .screens, .try, .facts, .final { padding-top: 88px; }
  .phones { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto;
            scroll-snap-type: x mandatory; margin: 32px -20px 0; padding: 0 20px 8px; scrollbar-width: none; }
  .phone { scroll-snap-align: center; }
  .player { padding: 16px; border-radius: 22px; }
  .pl-stems { grid-template-columns: repeat(3, 1fr); row-gap: 14px; }
  .pl-ctrl { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; gap: 56px; }
  .caps { z-index: 2; }
}

/* Без скриптов история — обычная страница сверху вниз. */
html:not(.js) .story { height: auto; }
html:not(.js) .stage { position: static; height: auto; }
html:not(.js) .caps { height: auto; }
html:not(.js) .cap { position: static; opacity: 1; padding: 12vh 0; }
html:not(.js) .desk, html:not(.js) .dock { display: none; }

@media (prefers-reduced-motion: reduce) {
  .amb i, .hint::after, .play[data-state="loading"] b, .play .w1, .play .w2, .play::after { animation: none !important; }
  .cap { transform: none !important; }
}