/* ✨ лендинг: разделы «Запись голосов» / «Передача игры» (.px) и плитки «Зачем приложение» (.fx) с живыми мини-демо.
   Анимации — только transform / opacity; плитка вне экрана — на паузе (.run ставит dl-features.js);
   prefers-reduced-motion — статичный кадр. Размеры постоянные: демо внутри не меняют высоту блоков. */
.px, .fx { --fx-pink:#FF5A7A; --fx-vio:#C04BE8; --fx-ind:#7B61FF; --fx-blue:#3EA6FF; --fx-ok:#34C77B; --fx-red:#FF5A52; --fx-t2:#9A9AA3; --fx-r:24px; }
.px svg, .fx svg { display:block; }
@keyframes fxBar { from { transform:scaleY(var(--a, .3)); } to { transform:scaleY(var(--b, 1)); } }
@keyframes fxBlink { 0%, 100% { opacity:1; } 50% { opacity:.25; } }

/* ── ② ③ разделы продукта: текст + мокап ─────────────────── */
.px { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.08fr); align-items:center; gap:64px; padding:88px 0 24px; }
.px-live .px-text { order:2; }
.px-eye { display:inline-flex; align-items:center; gap:8px; margin:0 0 18px; padding:6px 13px 6px 10px; border-radius:999px; font-size:13.5px; font-weight:600;
  color:#FFB3C2; background:rgba(255,90,122,.1); box-shadow:inset 0 0 0 1px rgba(255,90,122,.28); }
.px-eye .ic { width:16px; height:16px; }
.px-eye-b { color:#C9B8FF; background:rgba(123,97,255,.12); box-shadow:inset 0 0 0 1px rgba(123,97,255,.32); }
.px-h { margin:0 0 16px; font-family:var(--head); font-size:42px; line-height:1.1; font-weight:700; letter-spacing:-.03em; color:#fff; text-wrap:balance; }
.px-h .dl-g { display:inline-block; }
.px-lead { max-width:520px; margin:0 0 26px; font-size:16.5px; line-height:1.6; color:var(--t2); }
.px-list { display:grid; gap:16px; margin:0 0 30px; padding:0; list-style:none; }
.px-list li { display:grid; grid-template-columns:38px minmax(0, 1fr); gap:14px; align-items:start; }
.px-list .ic { width:38px; height:38px; padding:9px; border-radius:11px; color:#fff; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.px-rec .px-list .ic { color:#FF9EB2; }
.px-live .px-list .ic { color:#B9A8FF; }
.px-list p { margin:0; font-size:15px; line-height:1.55; color:var(--t2); }
.px-list b { color:#fff; font-weight:500; }
.px-cta { display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 18px 0 20px; border-radius:14px; font-size:15.5px; font-weight:600; color:#fff; text-decoration:none;
  background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); transition:background-color .15s, box-shadow .15s; }
.px-cta:hover { background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28); }
.px-cta .ic { transition:transform .2s; }
.px-cta:hover .ic { transform:translateX(3px); }
.px-art { position:relative; min-width:0; }
.px-art::before { content:""; position:absolute; z-index:-1; inset:-12% 0; pointer-events:none; background:radial-gradient(50% 50% at 50% 50%, rgba(192,75,232,.18), transparent 70%); }
.px-live .px-art::before { background:radial-gradient(50% 50% at 50% 50%, rgba(123,97,255,.2), transparent 70%); }

/* 🎙 мокап записи: четыре дорожки, хлопок в начале, файлы на выходе */
.rc { display:flex; flex-direction:column; gap:16px; padding:22px 22px 20px; border-radius:var(--fx-r); background:linear-gradient(180deg, #111115, #0A0A0C);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), 0 40px 80px -40px rgba(0,0,0,.9); }
.rc-top { display:flex; align-items:center; gap:10px; white-space:nowrap; }
.rc-rec { display:flex; align-items:center; gap:6px; height:24px; padding:0 9px 0 8px; border-radius:7px; font-size:11px; font-weight:700; letter-spacing:.08em;
  color:#FF9790; background:rgba(255,90,82,.13); box-shadow:inset 0 0 0 1px rgba(255,90,82,.38); }
.rc-rec i { width:7px; height:7px; border-radius:50%; background:var(--fx-red); box-shadow:0 0 8px var(--fx-red); animation:fxBlink 1.4s ease-in-out infinite; }
.rc-time { width:5ch; font-size:13.5px; font-weight:600; color:#ECECEF; font-variant-numeric:tabular-nums; }
.rc-fmt { margin-left:auto; padding:3px 8px; border-radius:6px; font-size:11.5px; color:#9A9AA3; box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); }
.rc-body { height:204px; display:grid; grid-template-columns:auto minmax(0, 1fr); gap:12px; }
.rc-nms { display:grid; grid-template-rows:repeat(4, minmax(0, 1fr)); gap:8px; }
.rc-nm { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500; color:#D2D2D8; white-space:nowrap; }
.rc-nm::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--c); }
.rc-c1 { --c:#FF6F8E; } .rc-c2 { --c:#5AB4FF; } .rc-c3 { --c:#4FD69A; } .rc-c4 { --c:#C79BFF; }
.rc-wvs { position:relative; display:grid; min-width:0; }
.rc-base, .rc-clip { grid-area:1 / 1; min-width:0; }
.rc-base, .rc-in { display:grid; grid-template-rows:repeat(4, minmax(0, 1fr)); gap:8px; height:100%; }
.rc-w { display:flex; align-items:center; gap:2px; min-height:0; overflow:hidden; border-radius:8px; padding:0 6px; background:rgba(255,255,255,.03); }
.rc-w i { flex:none; width:2.5px; height:78%; border-radius:2px; transform:scaleY(var(--a)); background:rgba(255,255,255,.13); }
.rc-in .rc-w { background:color-mix(in srgb, var(--c) 9%, transparent); }
.rc-in .rc-w i { background:var(--c); }
.rc-in .rc-w:nth-child(1) { --c:#FF6F8E; } .rc-in .rc-w:nth-child(2) { --c:#5AB4FF; } .rc-in .rc-w:nth-child(3) { --c:#4FD69A; } .rc-in .rc-w:nth-child(4) { --c:#C79BFF; }
/* «записанная» часть: внешний слой едет вправо, внутренний — обратно, рисунок стоит на месте */
.rc-clip { overflow:hidden; transform:translateX(-38%); animation:rcClip 12s linear infinite; }
.rc-in { transform:translateX(38%); animation:rcIn 12s linear infinite; }
.rc-head { position:absolute; inset:-6px 0; pointer-events:none; transform:translateX(-38%); animation:rcClip 12s linear infinite; }
.rc-head::after { content:""; position:absolute; right:-1px; top:0; bottom:0; width:2px; border-radius:1px; background:var(--fx-red); box-shadow:0 0 10px rgba(255,90,82,.9); }
.rc-head::before { content:""; position:absolute; right:-5px; top:-2px; width:10px; height:10px; border-radius:3px; background:var(--fx-red); transform:rotate(45deg); }
@keyframes rcClip { 0% { transform:translateX(-100%); opacity:0; } 3% { opacity:1; } 92% { transform:translateX(0); opacity:1; } 100% { transform:translateX(0); opacity:0; } }
@keyframes rcIn { 0% { transform:translateX(100%); } 92%, 100% { transform:translateX(0); } }
/* хлопок: одна черта через все дорожки в самом начале */
.rc-clap { position:absolute; left:18px; top:-8px; bottom:-4px; width:0; border-left:1.5px dashed rgba(255,214,102,.8); pointer-events:none; }
.rc-clap span { position:absolute; left:0; bottom:-15px; transform:translateX(-50%); font-style:normal; font-size:12px; line-height:1; }
.rc-out { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:6px; }
.rc-f { display:flex; flex-direction:column; gap:2px; min-width:0; padding:9px 11px; border-radius:11px; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); }
.rc-f b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; font-weight:500; color:#ECECEF; }
.rc-f small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:#8E8E96; }
.rc-f-p { background:linear-gradient(135deg, rgba(255,90,122,.16), rgba(123,97,255,.16)); box-shadow:inset 0 0 0 1px rgba(192,75,232,.35); }
/* узкая картинка (окно ~1000 px): три файла в ряд не влезают («Проект для мон…») — как на телефоне: два + проект во всю ширину */
.px-art { container-type:inline-size; }
@container (max-width: 520px) { .rc-out { grid-template-columns:repeat(2, minmax(0, 1fr)); } .rc-f-p { grid-column:1 / -1; } }

/* 📡 мокап передачи: плеер зрителя + телефон + ссылка */
.lv { position:relative; padding:0 0 64px; }
.lv-play { position:relative; aspect-ratio:16 / 10; overflow:hidden; border-radius:var(--fx-r); container-type:inline-size;
  box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 40px 80px -36px rgba(0,0,0,.95), 0 30px 70px -40px rgba(123,97,255,.6); }
.lv-lat, .lv-mode, .lv-who { position:absolute; z-index:1; display:flex; align-items:center; gap:6px; color:#fff; white-space:nowrap;
  background:rgba(10,5,20,.58); box-shadow:inset 0 0 0 1px rgba(255,255,255,.13); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.lv-lat { right:14px; top:60px; height:30px; padding:0 11px 0 9px; border-radius:10px; font-size:12px; color:#B4F5D2; }
.lv-lat b { display:inline-block; width:2ch; text-align:right; font-size:15px; color:#fff; font-variant-numeric:tabular-nums; }
.lv-lat .ic { width:15px; height:15px; color:var(--fx-ok); }
.lv-mode { left:14px; bottom:14px; gap:2px; padding:3px; border-radius:11px; }
.lv-mode i { padding:5px 11px; border-radius:8px; font-style:normal; font-size:12px; color:#BDBDC4; }
.lv-mode i.on { color:#fff; background:rgba(255,255,255,.16); }
.lv-who { right:14px; top:14px; gap:0; height:34px; padding:0 10px 0 6px; border-radius:12px; }
.lv-who .mk-av { width:24px; height:24px; margin-right:-6px; box-shadow:0 0 0 2px #1A0D2A; font-size:11px; }
.lv-who b { margin-left:14px; font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.lv-phone { position:absolute; right:-14px; bottom:0; width:23%; min-width:104px; aspect-ratio:9 / 18.5; padding:6px; border-radius:22px; background:#121215;
  box-shadow:0 0 0 1px rgba(255,255,255,.16), 0 30px 50px -16px rgba(0,0,0,.95); }
.lv-ph-scr { position:relative; height:100%; overflow:hidden; border-radius:17px; background:#05030A; }
.lv-ph-scr .mk-scene { inset:auto 0 auto 0; top:34%; height:auto; aspect-ratio:16 / 10; }
.lv-ph-t { position:absolute; left:0; right:0; bottom:12%; font-size:10.5px; text-align:center; color:#9A9AA3; }
.lv-ph-scr::before { content:""; position:absolute; left:50%; top:6px; width:34%; height:5px; border-radius:3px; background:#1E1E22; transform:translateX(-50%); }
.lv-link { position:absolute; left:18px; bottom:6px; display:flex; align-items:center; gap:8px; height:40px; padding:0 14px 0 12px; border-radius:12px; font-size:13px; color:#DADAE0;
  background:#141418; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 20px 30px -16px rgba(0,0,0,.9); white-space:nowrap; }
.lv-link .ic { width:16px; height:16px; color:#B9A8FF; }

/* сцена игры (синтвейв): общая для плеера и плитки приложения */
.fs-scene { position:absolute; inset:0; overflow:hidden; background:linear-gradient(180deg, #0B0519 0%, #1E0D38 34%, #45154F 58%, #5A1A55 62%); }
.fs-scene::before { content:""; position:absolute; left:15%; right:15%; top:20%; height:55%; background:radial-gradient(50% 50% at 50% 60%, rgba(255,110,150,.4), transparent 70%); }
.fs-sun { position:absolute; left:50%; top:16%; width:28%; aspect-ratio:1; transform:translateX(-50%); border-radius:50%;
  background:linear-gradient(180deg, #FFD58C 0%, #FF8A72 38%, #FF5A7A 62%, #C04BE8 100%);
  -webkit-mask:linear-gradient(#000 0 50%, transparent 0 54%, #000 0 61%, transparent 0 66%, #000 0 72%, transparent 0 78%, #000 0 83%, transparent 0 90%, #000 0);
  mask:linear-gradient(#000 0 50%, transparent 0 54%, #000 0 61%, transparent 0 66%, #000 0 72%, transparent 0 78%, #000 0 83%, transparent 0 90%, #000 0); }
.fs-mnt { position:absolute; left:0; width:200%; bottom:38%; animation:stPan 40s linear infinite; }
.fs-mnt svg { width:100%; height:100%; }
.fs-m1 { height:20%; }
.fs-m1 path { fill:#2A0D3C; stroke:rgba(255,120,190,.45); stroke-width:1; vector-effect:non-scaling-stroke; }
.fs-m2 { height:13%; animation-duration:22s; }
.fs-m2 path { fill:#170826; stroke:rgba(255,120,190,.3); stroke-width:1; vector-effect:non-scaling-stroke; }
@keyframes stPan { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.fs-floor { position:absolute; left:0; right:0; top:62%; bottom:0; overflow:hidden; background:#0C0416; perspective:110px; perspective-origin:50% 0; }
.fs-floor::before { content:""; position:absolute; z-index:1; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, #FF8AC4 30%, #FFC2E0 50%, #FF8AC4 70%, transparent); box-shadow:0 0 14px 2px rgba(255,90,170,.6); }
.fs-floor::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(60,10,70,.95), rgba(12,4,22,0) 40%); }
.fs-grid { position:absolute; left:-120%; right:-120%; top:0; height:300%; transform-origin:50% 0; transform:rotateX(76deg);
  background-image:linear-gradient(90deg, rgba(255,92,180,.7) 1.5px, transparent 1.5px), linear-gradient(0deg, rgba(255,92,180,.7) 1.5px, transparent 1.5px);
  background-size:26px 26px; background-position:center 0; animation:stGrid .5s linear infinite; }
@keyframes stGrid { from { transform:rotateX(76deg) translateY(-26px); } to { transform:rotateX(76deg) translateY(0); } }
.fs-live { position:absolute; z-index:1; left:14px; top:14px; display:flex; align-items:center; gap:7px; height:28px; padding:0 11px 0 10px; border-radius:9px; color:#fff; white-space:nowrap;
  font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; background:rgba(229,57,53,.88); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.fs-live i { width:7px; height:7px; border-radius:50%; background:#fff; animation:fxBlink 1.6s ease-in-out infinite; }

/* ── ④ «Зачем приложение»: bento ─────────────────────────── */
.fx { padding:96px 0 16px; }
.fx-head { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 420px); align-items:end; gap:16px 64px; margin:0 0 36px; }
.fx-eye { grid-column:1 / -1; justify-self:start; display:inline-flex; align-items:center; gap:9px; margin:0; padding:6px 13px 6px 11px; border-radius:999px;
  font-size:13px; font-weight:500; color:#E4E4E8; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.fx-eye::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--grad); box-shadow:0 0 10px 1px rgba(192,75,232,.8); }
.fx-h { margin:0; font-family:var(--head); font-size:48px; line-height:1.06; font-weight:700; letter-spacing:-.035em; color:#fff; text-wrap:balance; }
.fx-sub { margin:0 0 6px; font-size:16.5px; line-height:1.6; color:var(--fx-t2); }

.fx-grid { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); grid-template-rows:330px 330px; gap:16px; }
.fx-a { grid-column:1 / span 7; grid-row:1 / span 2; }
.fx-c { grid-column:8 / span 5; grid-row:1; }
.fx-f { grid-column:8 / span 5; grid-row:2; }

/* плитка: тонкая градиентная обводка (::after), курсор-спотлайт (::before + .fx-ring) */
.fx-t { position:relative; isolation:isolate; display:flex; flex-direction:column; min-width:0; overflow:hidden; border-radius:var(--fx-r);
  background:linear-gradient(180deg, #0F0F12, #09090B 70%); box-shadow:0 30px 60px -40px rgba(0,0,0,.9); }
.fx-t::after, .fx-ring { content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; padding:1px; pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.fx-t::after { background:linear-gradient(170deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 38%, rgba(255,255,255,.04) 70%, rgba(192,75,232,.22)); }
.fx-ring { background:radial-gradient(240px circle at var(--mx, 50%) var(--my, 0), rgba(255,255,255,.75), rgba(214,120,255,.45) 35%, transparent 72%); opacity:0; transition:opacity .35s; }
.fx-t::before { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 0), rgba(200,120,255,.075), transparent 65%); }
@media (hover:hover) { .fx-t:hover::before, .fx-t:hover .fx-ring { opacity:1; } }
.fx-demo { position:relative; flex:1 1 auto; min-height:0; overflow:hidden; }   /* страховка: демо никогда не залезает на текст */
.fx-demo::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.075) 1px, transparent 1.3px); background-size:18px 18px;
  -webkit-mask:radial-gradient(120% 90% at 50% 0, #000 20%, transparent 75%); mask:radial-gradient(120% 90% at 50% 0, #000 20%, transparent 75%); }
.fx-txt { flex:none; padding:6px 28px 26px; font-size:15.5px; line-height:1.55; color:var(--fx-t2); }
.fx-txt h3, .fx-txt p { display:inline; margin:0; font:inherit; }
.fx-txt h3 { color:#fff; font-weight:500; }
.fx-a { background:radial-gradient(70% 45% at 50% 0, rgba(192,75,232,.16), transparent 70%), linear-gradient(180deg, #0F0F12, #09090B 70%); }
.fx-c { background:radial-gradient(70% 60% at 50% 0, rgba(62,166,255,.11), transparent 70%), linear-gradient(180deg, #0F0F12, #09090B 70%); }
.fx-f { background:radial-gradient(70% 60% at 50% 0, rgba(59,165,93,.11), transparent 70%), linear-gradient(180deg, #0F0F12, #09090B 70%); }

/* появление при прокрутке (класс .arm ставит JS): ничего не прячем — содержимое мягко «всплывает», снимок в любой момент — блок виден целиком */
.dl-main.arm .rv:not(.in) .fx-demo > *, .dl-main.arm .rv:not(.in) .fx-txt, .dl-main.arm .rv:not(.in) > .px-art > * { transform:translateY(22px); }
.dl-main.arm .rv .fx-demo > *, .dl-main.arm .rv .fx-txt, .dl-main.arm .rv > .px-art > * { transition:transform 1s cubic-bezier(.2,.7,.2,1) var(--rd, 0s); }
.dl-main.arm .rv.now .fx-demo > *, .dl-main.arm .rv.now .fx-txt, .dl-main.arm .rv.now > .px-art > * { transition:none; }
.dl-main.arm .fx-t.in:not(.now)::before { animation:fxEnter 1.6s ease-out var(--rd, 0s) backwards; }
@keyframes fxEnter { 0% { opacity:0; } 30% { opacity:1; } 100% { opacity:0; } }
/* вне экрана — всё на паузе */
.dl-main .rn:not(.run) *, .dl-main .rn:not(.run) *::before, .dl-main .rn:not(.run) *::after { animation-play-state:paused !important; }

/* 🎮 захват + «✨ Умный» звук */
.fs { display:flex; flex-direction:column; gap:12px; padding:22px 22px 10px; }
.fs-play { position:relative; flex:1 1 auto; min-height:0; overflow:hidden; border-radius:14px; container-type:inline-size;
  box-shadow:0 0 0 1px rgba(255,255,255,.09), 0 24px 50px -24px rgba(120,30,160,.6); }
.fs-fps, .fs-hw { position:absolute; z-index:1; background:rgba(10,5,20,.58); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#fff; white-space:nowrap; }
.fs-fps { right:14px; top:14px; display:flex; align-items:baseline; gap:6px; padding:7px 13px 9px 11px; border-radius:13px; }
.fs-n { width:3ch; text-align:right; font-size:42px; line-height:.9; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg, #fff 30%, #F2B8FF); -webkit-background-clip:text; background-clip:text; color:transparent; }
.fs-fps small { font-size:13px; font-weight:500; color:rgba(255,255,255,.7); }
.fs-hw { left:14px; bottom:14px; display:flex; align-items:center; gap:7px; height:32px; padding:0 12px 0 10px; border-radius:10px; font-size:12.5px; font-weight:500; }
.fs-hw svg { width:16px; height:16px; fill:none; stroke:#7FD3FF; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
@container (max-width: 430px) {
  .fs-live { left:10px; top:10px; }
  .fs-fps { right:10px; top:10px; }
  .fs-n { font-size:34px; }
  .fs-hw { left:10px; bottom:10px; height:28px; font-size:12px; }
}
.fs-aud { flex:none; display:grid; gap:7px; }
.fs-cap { display:flex; align-items:center; gap:7px; margin:2px 0 1px; font-size:12.5px; font-weight:500; color:#E4E4E8; }
.fs-cap .ic { width:16px; height:16px; color:#F2B8FF; }
.fs-ln { display:grid; grid-template-columns:104px minmax(0, 1fr) 96px; align-items:center; gap:10px; height:34px; padding:0 8px 0 12px; border-radius:11px;
  background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.fs-lb { display:flex; align-items:center; gap:8px; min-width:0; font-size:12.5px; font-weight:500; color:#D2D2D8; white-space:nowrap; }
.fs-lb svg { width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.fs-game .fs-lb svg { stroke:var(--fx-blue); }
.fs-wv { display:flex; align-items:center; gap:3px; height:18px; overflow:hidden; }
.fs-wv i { flex:none; width:3px; height:100%; border-radius:2px; transform:scaleY(var(--a)); animation:fxBar var(--d, .6s) ease-in-out var(--dl, 0s) infinite alternate; }
.fs-game .fs-wv i { background:linear-gradient(180deg, #8FD0FF, #3EA6FF); }
.fs-out .fs-wv i { background:#4A4A52; }
.fs-out .fs-lb { color:#8E8E96; }
.fs-out { background:rgba(255,255,255,.02); }
.fs-tag { justify-self:end; padding:3px 8px; border-radius:7px; font-size:11px; font-weight:500; color:#FFB3AE; background:rgba(255,90,82,.12); white-space:nowrap; }
.fs-tag.on { color:#B4F5D2; background:rgba(52,199,123,.14); }

/* ⌨ горячие клавиши поверх игр */
.hk { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:16px 18px 2px; container-type:inline-size; }
.hk-pill { position:relative; flex:none; width:212px; height:36px; }
.hk-st { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; white-space:nowrap;
  font-size:13px; font-weight:500; color:#E4E4E8; background:rgba(24,24,28,.92); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 12px 24px -12px rgba(0,0,0,.9);
  opacity:0; transform:translateY(5px) scale(.97); transition:opacity .14s, transform .2s; }
.hk-st.on { opacity:1; transform:none; transition:opacity .25s .13s, transform .35s cubic-bezier(.3,.9,.3,1) .13s; }
.hk-st svg { width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.hk-idle svg { stroke:#8E8E96; }
.hk-off, .hk-deaf { color:#FFC1BC; background:rgba(60,14,14,.92); box-shadow:inset 0 0 0 1px rgba(255,90,82,.45), 0 12px 24px -12px rgba(255,60,50,.5); }
.hk-off svg, .hk-deaf svg { stroke:var(--fx-red); }
.hk-ptt { color:#B4F5D2; background:rgba(10,44,28,.92); box-shadow:inset 0 0 0 1px rgba(52,199,123,.5), 0 12px 24px -12px rgba(52,199,123,.5); }
.hk-eq { display:flex; align-items:center; gap:2px; height:13px; }
.hk-eq i { width:2.5px; height:100%; border-radius:2px; background:var(--fx-ok); transform:scaleY(.5); animation:hkB .42s ease-in-out infinite alternate; }
.hk-eq i:nth-child(2) { animation-duration:.33s; animation-delay:-.15s; }
.hk-eq i:nth-child(3) { animation-duration:.5s; animation-delay:-.3s; }
.hk-eq i:nth-child(4) { animation-duration:.37s; animation-delay:-.05s; }
@keyframes hkB { from { transform:scaleY(.3); } to { transform:scaleY(1); } }
.hk-rows { display:grid; gap:10px; }
.hk-row { display:flex; align-items:center; gap:7px; }
.hk-plus { width:10px; text-align:center; font-size:15px; color:#5F5F68; }
.hk-what { margin-left:8px; font-size:12.5px; color:#8E8E96; white-space:nowrap; }
.kc { position:relative; flex:none; height:43px; border-radius:11px; background:#0B0B0E; box-shadow:0 10px 18px -10px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.04); }
.kc::after { content:""; position:absolute; left:10%; right:10%; bottom:-10px; height:16px; border-radius:50%; background:radial-gradient(closest-side, rgba(214,90,240,.55), transparent);
  opacity:0; transition:opacity .15s; z-index:-1; }
.kc > b { position:relative; isolation:isolate; display:flex; align-items:center; justify-content:center; gap:7px; height:40px; min-width:40px; padding:0 13px; border-radius:10px;
  font-size:14px; font-weight:500; color:#ECECEF; background:linear-gradient(180deg, #2E2E35, #1F1F24); box-shadow:inset 0 0 0 1px #3C3C45, inset 0 1px 0 1px rgba(255,255,255,.06);
  transition:transform .12s ease-out; }
.kc > b::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:var(--grad); opacity:0; transition:opacity .12s;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.kc.dn > b { transform:translateY(3px); }
.kc.dn > b::before, .kc.dn::after { opacity:1; }
.kc-sq > b { width:40px; padding:0; }
.kc-ms > b { padding:0 13px 0 10px; }
.kc-ms svg { width:19px; height:19px; fill:none; stroke:#B9B9C2; stroke-width:1.6; stroke-linecap:round; }
.kc-side { fill:#FF7AB0; stroke:none; opacity:.25; transition:opacity .12s; }
.kc.dn .kc-side { opacity:1; }
@container (max-width: 330px) {
  .hk-row { gap:5px; }
  .kc { height:39px; }
  .kc > b { height:36px; min-width:36px; padding:0 10px; font-size:13px; }
  .kc-sq > b { width:36px; padding:0; }
  .hk-plus { width:8px; font-size:14px; }
  .hk-what { margin-left:4px; font-size:12px; }
}

/* ⬇ трей и обновление */
.up { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px 20px 4px; }
.up-win { width:100%; max-width:340px; overflow:hidden; border-radius:12px; background:#111114; box-shadow:0 0 0 1px rgba(255,255,255,.09), 0 24px 40px -22px rgba(0,0,0,.95); }
.up-bar { display:flex; align-items:center; gap:7px; height:32px; padding-left:10px; background:#1F1F1F; font-size:11.5px; color:#C8C8C8; }
.up-bar img { flex:none; }
.up-ttl { margin-right:auto; font-weight:500; white-space:nowrap; }
.up-dl { display:grid; place-items:center; flex:none; width:34px; height:100%; color:#3BA55D; background:rgba(59,165,93,.14); opacity:0; transform:scale(.5); transition:opacity .25s, transform .45s cubic-bezier(.3,1.7,.5,1); }
.up-dl.on { opacity:1; transform:none; }
.up-dl svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.up-wc { display:flex; height:100%; }
.up-wc i { position:relative; width:32px; height:100%; }
.up-wc i::before, .up-wc i::after { content:""; position:absolute; left:50%; top:50%; }
.up-min::before { width:9px; height:1px; background:#C8C8C8; transform:translate(-50%, -50%); }
.up-max::before { width:8px; height:8px; box-shadow:inset 0 0 0 1px #C8C8C8; transform:translate(-50%, -50%); }
.up-x::before, .up-x::after { width:11px; height:1px; background:#C8C8C8; transform:translate(-50%, -50%) rotate(45deg); }
.up-x::after { transform:translate(-50%, -50%) rotate(-45deg); }
.up-body { display:grid; gap:11px; padding:15px 14px 15px; }
.up-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:12.5px; color:#9A9AA3; white-space:nowrap; }
.up-t { position:relative; color:#ECECEF; font-weight:500; }
.up-n b { font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.up-prog { height:4px; overflow:hidden; border-radius:2px; background:rgba(255,255,255,.08); }
.up-prog i { display:block; height:100%; border-radius:2px; transform-origin:0 50%; transform:scaleX(1); background:linear-gradient(90deg, #2FA866, #5BE0A0); }
.up-prog i.go { transition:transform 2.4s cubic-bezier(.35,.1,.4,1); }
.up-map { display:grid; grid-template-columns:repeat(24, minmax(0, 1fr)); gap:3px; }
.up-map i { position:relative; aspect-ratio:1; border-radius:2px; background:rgba(255,255,255,.07); }
.up-map i.ch::after { content:""; position:absolute; inset:0; border-radius:inherit; background:#5BE0A0; box-shadow:0 0 6px rgba(91,224,160,.8); opacity:.18; transition:opacity .3s; }
.up-map i.ch.got::after { opacity:1; }
.up-tray { display:flex; align-items:center; gap:9px; max-width:340px; width:100%; height:36px; padding:0 12px 0 6px; border-radius:11px; font-size:12px; color:#BDBDC4;
  background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); white-space:nowrap; overflow:hidden; }
.up-tr-i { display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:8px; background:#1E1E22; }

/* ── ноутбук и планшет ─────────────────────────────────── */
@media (max-width: 1180px) {
  .px { gap:44px; }
  .px-h { font-size:36px; }
  .fx-head { grid-template-columns:minmax(0, 1fr); margin-bottom:28px; }
  .fx-h { font-size:42px; }
  .fx-sub { max-width:600px; }
  .fx-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:none; }
  .fx-a { grid-column:1 / -1; grid-row:auto; height:540px; }
  .fx-c, .fx-f { grid-column:auto; grid-row:auto; height:350px; }
}
@media (max-width: 900px) {
  .px { grid-template-columns:minmax(0, 1fr); gap:36px; padding-top:64px; }
  .px-live .px-text { order:0; }
  .px-art { max-width:640px; }
  .fx { padding-top:72px; }
}
/* ── телефон: столбик, у демо — постоянная высота ───────── */
@media (max-width: 640px) {
  .px { padding-top:52px; gap:28px; }
  .px-h { font-size:clamp(26px, 7.6vw, 32px); }
  .px-lead { font-size:15.5px; margin-bottom:22px; }
  .px-list { gap:14px; margin-bottom:24px; }
  .px-list li { grid-template-columns:34px minmax(0, 1fr); gap:12px; }
  .px-list .ic { width:34px; height:34px; padding:8px; border-radius:10px; }
  .px-list p { font-size:14.5px; }
  .px-cta { display:flex; justify-content:center; height:50px; }
  .rc { padding:16px 14px 14px; gap:12px; --fx-r:20px; }
  .rc-body { height:168px; gap:8px; }
  .rc-nm { font-size:11.5px; gap:5px; }
  .rc-out { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .rc-f-p { grid-column:1 / -1; }
  .lv { padding-bottom:58px; --fx-r:18px; }
  .lv-play { aspect-ratio:16 / 11; }
  .lv-lat { right:10px; top:10px; height:28px; }
  .lv-mode { left:10px; bottom:10px; }
  .lv-mode i { padding:4px 8px; font-size:11px; }
  .lv-who { display:none; }
  .lv-phone { right:-4px; width:26%; min-width:88px; border-radius:18px; padding:5px; }
  .lv-ph-scr { border-radius:14px; }
  .lv-link { left:0; max-width:calc(74% - 8px); overflow:hidden; font-size:12px; }
  .lv-link span { overflow:hidden; text-overflow:ellipsis; }
  .fx { padding-top:60px; }
  .fx-head { margin-bottom:22px; gap:12px; }
  .fx-h { font-size:clamp(28px, 8.2vw, 34px); }
  .fx-sub { font-size:15px; }
  .fx-grid { grid-template-columns:minmax(0, 1fr); gap:12px; }
  .fx-t { --fx-r:20px; height:auto !important; }
  .fx-a, .fx-c, .fx-f { grid-column:auto; }
  .fx-demo { flex:none; }
  .fx-a .fx-demo { height:390px; }
  .fx-c .fx-demo { height:250px; }
  .fx-f .fx-demo { height:220px; padding:16px 16px 4px; }
  .fx-txt { padding:6px 20px 22px; font-size:15px; }
  .fs { padding:14px 14px 8px; gap:10px; }
  .fs-ln { grid-template-columns:86px minmax(0, 1fr) auto; gap:8px; padding:0 6px 0 10px; }
  .fs-lb { font-size:12px; gap:6px; }
  .fs-tag { font-size:10.5px; padding:3px 6px; }
  .hk { padding:16px 12px 4px; gap:16px; }
}

/* без анимаций: красивый статичный кадр */
@media (prefers-reduced-motion: reduce) {
  .px *, .px *::before, .px *::after, .fx *, .fx *::before, .fx *::after { animation:none !important; transition:none !important; }
}