/* ✨ /download — блок преимуществ: bento-сетка с живыми мини-демо.
   Анимации — только transform / opacity; плитка вне экрана — на паузе (.run ставит dl-features.js);
   prefers-reduced-motion — статичный кадр. Размеры плиток постоянные: демо внутри не меняют их высоту. */
.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; padding:48px 0 16px; }

/* заголовок секции */
.fx-head { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 400px); align-items:end; gap:16px 64px; margin:0 0 40px; }
.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); border:1px solid rgba(255,255,255,.09); }
.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-size:52px; line-height:1.06; font-weight:700; letter-spacing:-.03em; color:#fff; text-wrap:balance; }
.fx-g { display:inline-block; padding-bottom:.06em; margin-bottom:-.06em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.fx-sub { margin:0 0 6px; font-size:17px; line-height:1.6; color:var(--fx-t2); }

/* сетка: ПК — bento на 12 колонок */
.fx-grid { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); grid-template-rows:340px 340px 320px; gap:16px; }
.fx-a { grid-column:1 / span 7; grid-row:1 / span 2; }
.fx-b { grid-column:8 / span 5; grid-row:1; }
.fx-c { grid-column:8 / span 5; grid-row:2; }
.fx-e { grid-column:1 / span 7; grid-row:3; }
.fx-f { grid-column:8 / span 5; grid-row:3; }

/* плитка: тонкая градиентная обводка (::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-txt .nw { white-space:nowrap; }

/* цветная подсветка плиток */
.fx-a { background:radial-gradient(70% 45% at 50% 0, rgba(192,75,232,.16), transparent 70%), linear-gradient(180deg, #0F0F12, #09090B 70%); }
.fx-b { background:radial-gradient(70% 60% at 50% 0, rgba(52,199,123,.10), 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-e { background:radial-gradient(70% 60% at 50% 0, rgba(255,90,82,.09), 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): ничего не прячем — содержимое плитки мягко «всплывает»
   внутри неё, а сверху по обводке проходит свет. Снимок в любой момент — блок виден целиком */
.fx.arm .fx-t:not(.in) .fx-demo > *, .fx.arm .fx-t:not(.in) .fx-txt { transform:translateY(22px); }
.fx.arm .fx-t .fx-demo > *, .fx.arm .fx-t .fx-txt { transition:transform 1s cubic-bezier(.2,.7,.2,1) var(--rd, 0s); }
.fx.arm .fx-t.now .fx-demo > *, .fx.arm .fx-t.now .fx-txt { transition:none; }   /* запасной показ — без анимации */
.fx.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; } }
/* вне экрана — всё на паузе */
.fx-t:not(.run) *, .fx-t:not(.run) *::before, .fx-t:not(.run) *::after { animation-play-state:paused !important; }

/* общие мелочи */
.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; } }

/* ── 🎮 стрим ───────────────────────────────────────────── */
.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-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, .fs-fps, .fs-hw { position:absolute; z-index:1; background:rgba(10,5,20,.58); border:1px solid rgba(255,255,255,.12);

  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#fff; white-space:nowrap; }
.fs-live { left:14px; top:14px; display:flex; align-items:center; gap:7px; height:28px; padding:0 11px 0 10px; border-radius:9px;
  font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; background:rgba(229,57,53,.88); border-color: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; }
.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:8px; }
.fs-ln { display:grid; grid-template-columns:116px minmax(0, 1fr); align-items:center; height:36px; padding: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; font-size:12.5px; font-weight:500; color:#D2D2D8; white-space:nowrap; }
.fs-lb svg { width:17px; height:17px; flex:none; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.fs-game .fs-lb svg { stroke:var(--fx-blue); }
.fs-vox .fs-lb svg { stroke:#E77BE0; }
.fs-wv { display:flex; align-items:center; gap:3px; height:20px; 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-vox .fs-wv i { background:linear-gradient(180deg, #FF7A93, #C04BE8); }

/* ── 📡 голос напрямую ──────────────────────────────────── */
.fp-svg { position:absolute; left:16px; right:16px; top:14px; bottom:0; width:calc(100% - 32px); height:calc(100% - 14px); overflow:visible; font-family:var(--body); }
.fp-ln line { stroke:rgba(255,255,255,.16); stroke-width:1.2; }
.fp-p { opacity:0; animation:ppGo var(--d, 1.4s) cubic-bezier(.45,.05,.55,.95) var(--dl, 0s) infinite; }
.fp-p circle:first-child { fill:rgba(120,255,190,.18); }
.fp-p circle:last-child { fill:#C8FFE3; }
@keyframes ppGo { 0% { transform:translate(var(--x1), var(--y1)); opacity:0; } 14%, 80% { opacity:1; } 100% { transform:translate(var(--x2), var(--y2)); opacity:0; } }
.fp-src { opacity:0; transition:opacity .4s; }
.fp-src.on { opacity:1; }
.fp-ms rect { fill:#121216; stroke:rgba(255,255,255,.13); }
.fp-ms text { fill:#DCDCE2; font-size:11.5px; font-weight:500; text-anchor:middle; font-variant-numeric:tabular-nums; }
.fp-n text { fill:#fff; font-size:16px; font-weight:700; text-anchor:middle; }
.fp-av { stroke:rgba(0,0,0,.35); stroke-width:1; }
.fp-ring { fill:none; stroke:var(--fx-ok); stroke-width:2.5; opacity:0; transition:opacity .35s; }
.fp-pulse { fill:none; stroke:var(--fx-ok); stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center; }
.fp-n.on .fp-ring { opacity:1; }
.fp-n.on .fp-pulse { animation:ppPulse 1.6s ease-out infinite; }
@keyframes ppPulse { from { transform:scale(1); opacity:.55; } to { transform:scale(1.5); opacity:0; } }
.fp-eq { opacity:0; transition:opacity .35s; }
.fp-n.on .fp-eq { opacity:1; }
.fp-eq > rect:first-child { fill:#0C1F15; stroke:rgba(52,199,123,.7); stroke-width:1; }
.fp-b { fill:var(--fx-ok); transform-box:fill-box; transform-origin:center; transform:scaleY(.6); animation:ppB .46s ease-in-out infinite alternate; }
.fp-b:nth-of-type(3) { animation-duration:.38s; animation-delay:-.2s; }
.fp-b:nth-of-type(4) { animation-duration:.52s; animation-delay:-.1s; }
@keyframes ppB { from { transform:scaleY(.3); } to { transform:scaleY(1); } }

/* ── ⌨ кнопки поверх игр ───────────────────────────────── */
.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:ppB .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; }
.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; }
/* клавиша: тёмное основание + крышка, которая опускается на 3 px */
.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::after { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1px;
  background:linear-gradient(180deg, rgba(150,60,210,.55), rgba(255,90,122,.25)); opacity:0; transition:opacity .12s; }
.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::after, .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; }
}

/* ── 🎙 запись ──────────────────────────────────────────── */
.rc { display:flex; flex-direction:column; gap:16px; padding:22px 24px 8px; }
.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:500; 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 { flex:1 1 auto; min-height:0; max-height:150px; display:grid; grid-template-columns:auto minmax(0, 1fr); gap:12px; }
.rc-nms { display:grid; grid-template-rows:repeat(3, minmax(0, 1fr)); gap:8px; }
.rc-nm { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500; color:#D2D2D8; }
.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-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(3, 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-clip { overflow:hidden; transform:translateX(-38%); animation:rcClip 10s linear infinite; }
.rc-in { transform:translateX(38%); animation:rcIn 10s linear infinite; }
.rc-head { position:absolute; inset:-6px 0; pointer-events:none; transform:translateX(-38%); animation:rcClip 10s 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); } }

/* ── ⬇ обновление ──────────────────────────────────────── */
.up { display:grid; place-items:center; 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; }

/* ── планшет: две колонки ──────────────────────────────── */
@media (max-width: 1180px) {
  .fx-head { grid-template-columns:minmax(0, 1fr); margin-bottom:32px; }
  .fx-h { font-size:44px; }
  .fx-sub { max-width:560px; }
  .fx-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:none; }
  .fx-a, .fx-b, .fx-c, .fx-e, .fx-f { grid-column:auto; grid-row:auto; height:360px; }
  .fx-a { grid-column:1 / -1; height:560px; }
}
/* телефон: столбик, у демо — постоянная высота */
@media (max-width: 700px) {
  .fx { padding-top:24px; }
  .fx-head { margin-bottom:24px; gap:12px; }
  .fx-h { font-size:clamp(28px, 8.4vw, 36px); }
  .fx-sub { font-size:15.5px; }
  .fx-grid { grid-template-columns:minmax(0, 1fr); gap:12px; }
  .fx-t { --fx-r:20px; height:auto !important; }
  .fx-a, .fx-b, .fx-c, .fx-e, .fx-f { grid-column:auto; }
  .fx-demo { flex:none; height:212px; }
  .fx-a .fx-demo { height:340px; }
  .fx-c .fx-demo { height:262px; }
  .fx-f .fx-demo { height:180px; padding:16px 16px 4px; }
  .fx-txt { padding:6px 20px 22px; font-size:15px; }
  .fs { padding:16px 16px 8px; gap:10px; }
  .fs-ln { grid-template-columns:100px minmax(0, 1fr); padding:0 10px; }
  .fp-svg { left:6px; right:6px; top:10px; width:calc(100% - 12px); height:calc(100% - 10px); }
  .hk { padding:16px 12px 4px; gap:16px; }
  .up { padding:16px 16px 4px; }
  .rc { padding:18px 16px 6px; gap:12px; }
}

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