/* androidinfo.ru — система «Приложение» (Material 3 Expressive). Всё под .k-ai (класс на ). Сетка 4 dp. Основа — site.css утверждённого макета (_design/src/sites/ai), переделан под окно: без рамок, без @container, без CSS-вложенности (старые Android-браузеры не теряют стили целиком). Компьютер — от 960 px. */ html{background:#F8FAF6; -webkit-text-size-adjust:100%; text-size-adjust:100%} :root[data-theme="dark"]{background:#0F1411} html:has(body.k-ai[data-open]){overflow:hidden} .k-ai{ /* поверхности и текст */ --bg:#F8FAF6; --s1:#EEF3EC; --s2:#E4EBE2; --s3:#D6DFD4; --card:#FFFFFF; --ink:#171D19; --ink2:#434B45; --line:#C3CCC2; --line2:#737C74; --pri:#0A7A47; --on-pri:#FFFFFF; --mint:#A6F2C2; --on-mint:#002111; --mint2:#84E2AA; --inv:#2C322D; --on-inv:#EDF2EB; --inv-pri:#A6F2C2; --amb:#8C5000; --amb-c:#FFDDB8; --on-amb-c:#2D1600; --red:#B3261E; --red-c:#F9DEDC; --on-red-c:#410E0B; --md-bg:#0A7A47; --md-fg:#FFFFFF; --md-sub:#C9F3DA; --md-ch:rgba(255,255,255,.14); --lit:#FFE16A; --ph-body:#1B211D; --ph-edge:#4A544D; --ph-key:#6B766E; --cmd-bg:#171D19; --cmd-fg:#A6F2C2; /* цвета тем: контейнер / яркая форма / тон (глиф) / текст на контейнере */ --fw-c:#FFDBCB; --fw-v:#FF8A4C; --fw-o:#9A4500; --fw-on:#331200; --set-c:#D9E2FF; --set-v:#6E90F2; --set-o:#3056A8; --set-on:#001A43; --fi-c:#F7E388; --fi-v:#EBC51C; --fi-o:#6D5E00; --fi-on:#211B00; --sec-c:#FFD9E2; --sec-v:#F27399; --sec-o:#984061; --sec-on:#3E001D; --ap-c:#A6F2C2; --ap-v:#35C27A; --ap-o:#0A7A47; --ap-on:#002111; --sh-c:#EADDFF; --sh-v:#9D7FF3; --sh-o:#6750A4; --sh-on:#21005D; --ph-c:#BCEBF0; --ph-v:#25B5BF; --ph-o:#00696F; --ph-on:#002022; --ar-c:#E1E3DE; --ar-v:#A5AAA3; --ar-o:#5C5F5B; --ar-on:#191C19; --f:"Roboto Flex",Roboto,"Segoe UI",system-ui,-apple-system,Arial,sans-serif; --mono:"Roboto Mono",ui-monospace,Consolas,"Cascadia Mono",monospace; --spring:cubic-bezier(.34,1.45,.64,1); --emph:cubic-bezier(.2,0,0,1); --clip-sq56:path("M28 1.7L33.7 1.7L36.4 1.8L38.5 2L40.3 2.2L41.9 2.5L43.4 2.8L44.7 3.2L45.9 3.7L46.9 4.3L47.9 4.9L48.8 5.6L49.7 6.3L50.4 7.2L51.1 8.1L51.7 9.1L52.3 10.1L52.8 11.3L53.2 12.6L53.5 14.1L53.8 15.7L54 17.5L54.2 19.6L54.3 22.3L54.3 28L54.3 33.7L54.2 36.4L54 38.5L53.8 40.3L53.5 41.9L53.2 43.4L52.8 44.7L52.3 45.9L51.7 46.9L51.1 47.9L50.4 48.8L49.7 49.7L48.8 50.4L47.9 51.1L46.9 51.7L45.9 52.3L44.7 52.8L43.4 53.2L41.9 53.5L40.3 53.8L38.5 54L36.4 54.2L33.7 54.3L28 54.3L22.3 54.3L19.6 54.2L17.5 54L15.7 53.8L14.1 53.5L12.6 53.2L11.3 52.8L10.1 52.3L9.1 51.7L8.1 51.1L7.2 50.4L6.3 49.7L5.6 48.8L4.9 47.9L4.3 46.9L3.7 45.9L3.2 44.7L2.8 43.4L2.5 41.9L2.2 40.3L2 38.5L1.8 36.4L1.7 33.7L1.7 28L1.7 22.3L1.8 19.6L2 17.5L2.2 15.7L2.5 14.1L2.8 12.6L3.2 11.3L3.7 10.1L4.3 9.1L4.9 8.1L5.6 7.2L6.3 6.3L7.2 5.6L8.1 4.9L9.1 4.3L10.1 3.7L11.3 3.2L12.6 2.8L14.1 2.5L15.7 2.2L17.5 2L19.6 1.8L22.3 1.7Z"); --clip-ck56:path("M28 0.6L29.8 1.1L31.4 2.5L32.7 4.4L33.9 6.1L35 7.3L36.4 7.6L38.2 7.3L40.3 6.7L42.6 6.2L44.6 6.4L46.1 7.4L46.8 9.2L46.9 11.4L46.7 13.7L46.6 15.6L46.9 17.1L48 18.1L49.8 19L51.8 19.9L53.7 21.1L54.9 22.7L55 24.4L54.1 26.3L52.6 28L51 29.5L49.9 30.9L49.5 32.3L49.9 33.9L50.8 35.7L51.8 37.8L52.2 39.9L51.8 41.7L50.4 43L48.4 43.7L46.1 43.9L44 44L42.4 44.5L41.4 45.5L40.8 47.2L40.3 49.3L39.6 51.5L38.4 53.2L36.8 53.9L34.9 53.7L32.9 52.7L31.1 51.4L29.5 50.3L28 49.8L26.5 50.3L24.9 51.4L23.1 52.7L21.1 53.7L19.2 53.9L17.6 53.2L16.4 51.5L15.7 49.3L15.2 47.2L14.6 45.5L13.6 44.5L12 44L9.9 43.9L7.6 43.7L5.6 43L4.2 41.7L3.8 39.9L4.2 37.8L5.2 35.7L6.1 33.9L6.5 32.3L6.1 30.9L5 29.5L3.4 28L1.9 26.3L1 24.4L1.1 22.7L2.3 21.1L4.2 19.9L6.2 19L8 18.1L9.1 17.1L9.4 15.6L9.3 13.7L9.1 11.4L9.2 9.2L9.9 7.4L11.4 6.4L13.4 6.2L15.7 6.7L17.8 7.3L19.6 7.6L21 7.3L22.1 6.1L23.3 4.4L24.6 2.5L26.2 1.1Z"); --clip-sq64:path("M32 1.9L38.5 2L41.6 2.1L44 2.2L46.1 2.5L47.9 2.8L49.6 3.2L51 3.7L52.4 4.2L53.6 4.9L54.8 5.6L55.8 6.4L56.8 7.2L57.6 8.2L58.4 9.2L59.1 10.4L59.8 11.6L60.3 13L60.8 14.4L61.2 16.1L61.5 17.9L61.8 20L61.9 22.4L62 25.5L62.1 32L62 38.5L61.9 41.6L61.8 44L61.5 46.1L61.2 47.9L60.8 49.6L60.3 51L59.8 52.4L59.1 53.6L58.4 54.8L57.6 55.8L56.8 56.8L55.8 57.6L54.8 58.4L53.6 59.1L52.4 59.8L51 60.3L49.6 60.8L47.9 61.2L46.1 61.5L44 61.8L41.6 61.9L38.5 62L32 62.1L25.5 62L22.4 61.9L20 61.8L17.9 61.5L16.1 61.2L14.4 60.8L13 60.3L11.6 59.8L10.4 59.1L9.2 58.4L8.2 57.6L7.2 56.8L6.4 55.8L5.6 54.8L4.9 53.6L4.2 52.4L3.7 51L3.2 49.6L2.8 47.9L2.5 46.1L2.2 44L2.1 41.6L2 38.5L1.9 32L2 25.5L2.1 22.4L2.2 20L2.5 17.9L2.8 16.1L3.2 14.4L3.7 13L4.2 11.6L4.9 10.4L5.6 9.2L6.4 8.2L7.2 7.2L8.2 6.4L9.2 5.6L10.4 4.9L11.6 4.2L13 3.7L14.4 3.2L16.1 2.8L17.9 2.5L20 2.2L22.4 2.1L25.5 2Z"); --clip-ck64:path("M32 0.6L34 1.2L35.8 2.9L37.4 5L38.7 7L40 8.3L41.6 8.7L43.7 8.3L46.1 7.6L48.6 7.1L50.9 7.3L52.6 8.5L53.5 10.5L53.6 13L53.4 15.6L53.2 17.8L53.6 19.5L54.9 20.7L56.9 21.7L59.3 22.7L61.4 24.1L62.7 25.9L62.9 27.9L61.9 30L60.2 32L58.3 33.7L57 35.3L56.5 36.9L57 38.7L58.1 40.9L59.1 43.2L59.6 45.6L59.2 47.7L57.6 49.1L55.3 49.9L52.7 50.2L50.3 50.3L48.5 50.8L47.3 52L46.7 53.9L46.1 56.4L45.2 58.9L43.9 60.7L42.1 61.6L39.9 61.4L37.6 60.2L35.5 58.7L33.7 57.4L32 57L30.3 57.4L28.5 58.7L26.4 60.2L24.1 61.4L21.9 61.6L20.1 60.7L18.8 58.9L17.9 56.4L17.3 53.9L16.7 52L15.5 50.8L13.7 50.3L11.3 50.2L8.7 49.9L6.4 49.1L4.8 47.7L4.4 45.6L4.9 43.2L5.9 40.9L7 38.7L7.5 36.9L7 35.3L5.7 33.7L3.8 32L2.1 30L1.1 27.9L1.3 25.9L2.6 24.1L4.7 22.7L7.1 21.7L9.1 20.7L10.4 19.5L10.8 17.8L10.6 15.6L10.4 13L10.5 10.5L11.4 8.5L13.1 7.3L15.4 7.1L17.9 7.6L20.3 8.3L22.4 8.7L24 8.3L25.3 7L26.6 5L28.2 2.9L30 1.2Z"); /* маски: «печенье» для номеров шагов, значки врезок и копирования */ --m-ck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50.0 0.4L52.8 1.1L55.5 3.0L57.8 5.7L59.8 8.5L61.8 10.7L63.8 12.0L66.2 12.3L69.2 11.8L72.5 11.0L76.0 10.5L79.3 10.7L81.9 12.0L83.6 14.4L84.4 17.5L84.5 21.1L84.3 24.5L84.3 27.5L85.0 29.8L86.7 31.6L89.2 33.1L92.3 34.6L95.3 36.4L97.7 38.7L98.8 41.4L98.7 44.3L97.2 47.2L95.0 50.0L92.6 52.5L90.7 54.8L89.8 57.0L89.9 59.5L90.9 62.2L92.3 65.4L93.4 68.7L93.8 72.0L93.0 74.8L90.9 76.9L87.9 78.2L84.5 78.9L81.1 79.3L78.1 79.8L76.0 80.9L74.5 82.9L73.5 85.7L72.5 89.0L71.2 92.3L69.4 95.0L67.0 96.6L64.0 96.9L60.9 96.0L57.8 94.3L55.0 92.4L52.4 90.9L50.0 90.4L47.6 90.9L45.0 92.4L42.2 94.3L39.1 96.0L36.0 96.9L33.0 96.6L30.6 95.0L28.8 92.3L27.5 89.0L26.5 85.7L25.5 82.9L24.0 80.9L21.9 79.8L18.9 79.3L15.5 78.9L12.1 78.2L9.1 76.9L7.0 74.8L6.2 72.0L6.6 68.7L7.7 65.4L9.1 62.2L10.1 59.5L10.2 57.0L9.3 54.8L7.4 52.5L5.0 50.0L2.8 47.2L1.3 44.3L1.2 41.4L2.3 38.7L4.7 36.4L7.7 34.6L10.8 33.1L13.3 31.6L15.0 29.8L15.7 27.5L15.7 24.5L15.5 21.1L15.6 17.5L16.4 14.4L18.1 12.0L20.7 10.7L24.0 10.5L27.5 11.0L30.8 11.8L33.8 12.3L36.2 12.0L38.2 10.7L40.2 8.5L42.2 5.7L44.5 3.0L47.2 1.1Z'/%3E%3C/svg%3E"); --m-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 11v5.4M12 7.7v.2'/%3E%3C/svg%3E"); --m-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.4 2.9 17.6A2 2 0 0 0 4.6 20.6h14.8a2 2 0 0 0 1.7-3L13.7 4.4a2 2 0 0 0-3.4 0zM12 9.6v4M12 17v.2'/%3E%3C/svg%3E"); --m-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='m8.2 12.3 2.6 2.6 5-5.2'/%3E%3C/svg%3E"); --m-stop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.3 3h7.4L21 8.3v7.4L15.7 21H8.3L3 15.7V8.3zM12 7.6v5.2M12 16.3v.2'/%3E%3C/svg%3E"); --m-quote:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 17.5c0-4.6 1.6-8.2 5.3-10.5l1.2 1.6C8.3 10.2 7.4 12 7.3 13.6H10V19H4zm9.6 0c0-4.6 1.6-8.2 5.3-10.5l1.2 1.6c-2.2 1.6-3.1 3.4-3.2 5H20V19h-6.4z'/%3E%3C/svg%3E"); --m-copy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='8.5' width='11.5' height='11.5' rx='2.6'/%3E%3Cpath d='M15.5 8.5V6.6A2.1 2.1 0 0 0 13.4 4.5H6.6A2.1 2.1 0 0 0 4.5 6.6v6.8a2.1 2.1 0 0 0 2.1 2.1h1.9'/%3E%3C/svg%3E"); --m-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); --m-ext:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4.5h5.5V10M19.5 4.5l-8 8M17 14v4.2A1.3 1.3 0 0 1 15.7 19.5H5.8a1.3 1.3 0 0 1-1.3-1.3V8.3A1.3 1.3 0 0 1 5.8 7H10'/%3E%3C/svg%3E"); margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font-family:var(--f); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; color-scheme:light; overflow-x:clip; } :root[data-theme="dark"] .k-ai{ --bg:#0F1411; --s1:#171D19; --s2:#1E2520; --s3:#2A322C; --card:#252D27; --ink:#DEE5DD; --ink2:#BFC9BF; --line:#3F4942; --line2:#89938A; --pri:#7DDBA3; --on-pri:#003920; --mint:#005231; --on-mint:#A6F2C2; --mint2:#0B6A3F; --inv:#DEE5DD; --on-inv:#2C322D; --inv-pri:#0A7A47; --amb:#FFB866; --amb-c:#5A3500; --on-amb-c:#FFDDB8; --red:#FFB4AB; --red-c:#8C1D18; --on-red-c:#FFDAD6; --ph-body:#0A0E0B; --ph-edge:#3A443D; --ph-key:#5E6962; --cmd-bg:#070B08; --cmd-fg:#7DDBA3; --fw-c:#6B2C06; --fw-v:#E8723A; --fw-o:#FFB68F; --fw-on:#FFDBCB; --set-c:#1D3E80; --set-v:#5C80E6; --set-o:#B1C5FF; --set-on:#D9E2FF; --fi-c:#4C4200; --fi-v:#CBA800; --fi-o:#E6CB5A; --fi-on:#F7E388; --sec-c:#6C2045; --sec-v:#DB5E88; --sec-o:#FFB0C8; --sec-on:#FFD9E2; --ap-c:#005231; --ap-v:#27A865; --ap-o:#7DDBA3; --ap-on:#A6F2C2; --sh-c:#4A3584; --sh-v:#8A6BE6; --sh-o:#D0BCFF; --sh-on:#EADDFF; --ph-c:#00494E; --ph-v:#1D9FA8; --ph-o:#82D3DA; --ph-on:#BCEBF0; --ar-c:#383C38; --ar-v:#6F746E; --ar-o:#C4C7C1; --ar-on:#E1E3DE; color-scheme:dark; } .k-ai .t-fw{--tc:var(--fw-c); --tv:var(--fw-v); --to:var(--fw-o); --ton:var(--fw-on); --onv:var(--fw-on)} .k-ai .t-set{--tc:var(--set-c); --tv:var(--set-v); --to:var(--set-o); --ton:var(--set-on); --onv:var(--set-on)} .k-ai .t-fi{--tc:var(--fi-c); --tv:var(--fi-v); --to:var(--fi-o); --ton:var(--fi-on); --onv:var(--fi-on)} .k-ai .t-sec{--tc:var(--sec-c); --tv:var(--sec-v); --to:var(--sec-o); --ton:var(--sec-on); --onv:var(--sec-on)} .k-ai .t-ap{--tc:var(--ap-c); --tv:var(--ap-v); --to:var(--ap-o); --ton:var(--ap-on); --onv:var(--ap-on)} .k-ai .t-sh{--tc:var(--sh-c); --tv:var(--sh-v); --to:var(--sh-o); --ton:var(--sh-on); --onv:var(--sh-on)} .k-ai .t-ph{--tc:var(--ph-c); --tv:var(--ph-v); --to:var(--ph-o); --ton:var(--ph-on); --onv:var(--ph-on)} .k-ai .t-ar{--tc:var(--ar-c); --tv:var(--ar-v); --to:var(--ar-o); --ton:var(--ar-on); --onv:var(--ar-on)} :root[data-theme="dark"] .k-ai :is(.t-fw,.t-set,.t-fi,.t-sec,.t-ap,.t-sh,.t-ph,.t-ar){--onv:#170F0A} /* ---------- основа ---------- */ .k-ai,.k-ai *,.k-ai *::before,.k-ai *::after{box-sizing:border-box} .k-ai a{color:inherit} .k-ai svg{flex:none} .k-ai p{margin:0} .k-ai h1,.k-ai h2,.k-ai h3{margin:0; text-wrap:balance} .k-ai button,.k-ai input,.k-ai textarea,.k-ai select{font-family:var(--f)} .k-ai :focus-visible{outline:3px solid var(--pri); outline-offset:2px} .k-ai [hidden]{display:none!important} .k-ai .nw{white-space:nowrap} .k-ai .vh{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} .k-ai time,.k-ai .num{font-variant-numeric:tabular-nums} .k-ai .skip{position:fixed; left:12px; top:-60px; z-index:100; padding:12px 18px; border-radius:22px; background:var(--pri); color:var(--on-pri); font-weight:700; text-decoration:none; transition:top .2s} .k-ai .skip:focus{top:12px} .k-ai .deco{position:absolute; pointer-events:none} .k-ai .shp{position:relative; flex:none; width:36px; height:36px; display:grid; place-items:center} .k-ai .shp > svg:first-child{position:absolute; inset:0; width:100%; height:100%; color:var(--tc, var(--mint))} .k-ai .shp > svg + svg{position:relative; width:55%; height:55%} .k-ai .shp > b{position:relative} /* слой состояния и ripple (site.js ставит --x/--y/--d) */ .k-ai .rp{position:relative; overflow:hidden; isolation:isolate; -webkit-tap-highlight-color:transparent; cursor:pointer} .k-ai .rp::before{content:""; position:absolute; inset:0; z-index:-1; background:currentColor; opacity:0; transition:opacity .2s; pointer-events:none} .k-ai .rp:hover::before{opacity:.08} .k-ai .rp:active::before{opacity:.12} .k-ai .rp::after{content:""; position:absolute; z-index:-1; left:var(--x,50%); top:var(--y,50%); width:var(--d,0px); height:var(--d,0px); margin:calc(var(--d,0px) / -2) 0 0 calc(var(--d,0px) / -2); border-radius:50%; background:currentColor; opacity:0; transform:scale(0); pointer-events:none} .k-ai .rp.is-rip::after{animation:ai-rip .6s var(--emph)} /* ---------- верхняя панель ---------- */ .k-ai .bar{position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:4px; height:64px; padding:0 4px 0 16px; background:var(--bar, var(--bg)); transition:background-color .3s} .k-ai.admin-bar .bar{top:32px} .k-ai.is-scrolled .bar{background:var(--bar-s, var(--s2))} .k-ai .bar.t-fw,.k-ai .bar.t-set,.k-ai .bar.t-fi,.k-ai .bar.t-sec,.k-ai .bar.t-ap,.k-ai .bar.t-sh,.k-ai .bar.t-ph,.k-ai .bar.t-ar{--bar:var(--tc); --bar-s:var(--tc); color:var(--ton)} .k-ai .bar.hub-bar{--bar:var(--tv); --bar-s:var(--tv); color:var(--onv)} .k-ai .bar .sp{flex:1} .k-ai .logo{display:inline-flex; align-items:center; min-height:48px; font-size:21px; font-weight:820; font-stretch:118%; letter-spacing:-.02em; line-height:1; color:inherit; text-decoration:none; white-space:nowrap; transition:opacity .25s, transform .3s var(--emph)} .k-ai .lg-i{position:relative; display:inline-block} .k-ai .lg-i svg{position:absolute; left:50%; bottom:.62em; width:.52em; height:.47em; transform:translateX(-50%); color:var(--pri); overflow:visible; transform-origin:50% 100%} .k-ai .logo:hover .lg-i svg{animation:ai-wig .7s var(--spring)} .k-ai .bar:is(.t-fw,.t-set,.t-fi,.t-sec,.t-ap,.t-sh,.t-ph,.t-ar) .lg-i svg{color:var(--to)} .k-ai .hub-bar .lg-i svg{color:var(--onv)} .k-ai .bar-t{position:absolute; left:16px; right:112px; opacity:0; transform:translateY(8px); font-size:16px; font-weight:700; font-stretch:108%; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; transition:opacity .25s, transform .3s var(--emph)} .k-ai .bar.has-me .bar-t{right:176px} .k-ai.is-collapsed .bar .logo{opacity:0; transform:translateY(-8px); pointer-events:none} .k-ai.is-collapsed .bar-t{opacity:1; transform:none} .k-ai .me{margin-left:auto; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 8px 0 6px; border:1px solid var(--line); border-radius:22px; background:var(--card); color:var(--ink); font-size:14px; font-weight:650; line-height:1; white-space:nowrap} .k-ai .me-ic{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--mint); color:var(--on-mint)} .k-ai .me-ic svg{width:18px; height:18px} .k-ai .me-l{display:none} .k-ai .me .car{width:18px; height:18px; transition:transform .3s var(--spring)} .k-ai[data-open="brand"] .me .car{transform:rotate(180deg)} .k-ai .ib{flex:none; width:48px; height:48px; display:grid; place-items:center; border:0; border-radius:50%; background:transparent; color:inherit; padding:0} .k-ai .ib svg{width:24px; height:24px} /* ---------- нижняя панель (телефон) → rail (компьютер) ---------- */ .k-ai .nav{position:fixed; left:0; right:0; bottom:0; z-index:40; height:calc(80px + env(safe-area-inset-bottom)); display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); padding:0 4px env(safe-area-inset-bottom); background:var(--s2)} .k-ai .nv{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:0; color:var(--ink2); text-decoration:none; font-size:12px; font-weight:600; font-stretch:84%; line-height:16px; letter-spacing:0; white-space:nowrap} .k-ai .nv::before{display:none} .k-ai .nv i{display:grid; place-items:center; width:56px; height:32px; border-radius:16px; transition:background-color .25s, width .45s var(--spring)} .k-ai .nv i svg{width:24px; height:24px} .k-ai .nv:hover i{background:color-mix(in srgb, var(--ink) 8%, transparent)} .k-ai .nv[aria-current="page"],.k-ai .nv.is-on{color:var(--ink); font-weight:750} .k-ai .nv[aria-current="page"] i,.k-ai .nv.is-on i{width:64px; background:var(--mint); color:var(--on-mint)} .k-ai .nv-d,.k-ai .fab{display:none} /* ---------- шторки: «Мой телефон», «Темы», «Ещё», «Поиск» ---------- */ .k-ai .scrim{position:fixed; inset:0; z-index:50; background:rgba(12,18,14,.45); opacity:0; pointer-events:none; transition:opacity .3s} .k-ai[data-open] .scrim{opacity:1; pointer-events:auto} .k-ai .sheet{position:fixed; left:0; right:0; bottom:0; z-index:51; max-height:86vh; overflow-y:auto; overscroll-behavior:contain; padding:0 16px calc(24px + env(safe-area-inset-bottom)); border-radius:28px 28px 0 0; background:var(--s1); color:var(--ink); transform:translateY(105%); visibility:hidden; transition:transform .35s var(--emph), visibility 0s .35s} .k-ai[data-open="brand"] .sheet[data-sheet="brand"],.k-ai[data-open="topics"] .sheet[data-sheet="topics"],.k-ai[data-open="more"] .sheet[data-sheet="more"],.k-ai[data-open="search"] .sheet[data-sheet="search"]{transform:none; visibility:visible; transition:transform .5s cubic-bezier(.05,.7,.1,1)} .k-ai .sheet-hd{display:block; width:32px; height:4px; border-radius:2px; background:var(--line2); margin:12px auto 18px} .k-ai .sheet-top{display:flex; align-items:center; gap:8px} .k-ai .sheet-t{display:block; font-size:22px; font-weight:780; font-stretch:118%; line-height:1.2} .k-ai .sheet-x{margin-left:auto; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; background:var(--card); color:var(--ink); padding:0} .k-ai .sheet-x svg{width:20px; height:20px} .k-ai .sheet p.sheet-p{font-size:14px; line-height:1.45; color:var(--ink2); margin:6px 0 16px} .k-ai .brands{display:grid; gap:4px} .k-ai .br{display:flex; align-items:center; gap:14px; min-height:56px; padding:6px 16px 6px 12px; border:0; border-radius:8px; background:var(--card); color:var(--ink); font-size:16px; font-weight:600; line-height:1.25; text-align:left; text-decoration:none; transition:border-radius .35s var(--spring), background-color .2s} .k-ai .br:first-child{border-radius:20px 20px 8px 8px} .k-ai .br:last-child{border-radius:8px 8px 20px 20px} .k-ai .br i{flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:var(--s2); font-style:normal; font-weight:800; font-size:15px} .k-ai .br .ck{margin-left:auto; width:22px; height:22px; opacity:0; transform:scale(.4); transition:.3s var(--spring)} .k-ai .br[aria-pressed="true"]{background:var(--mint); color:var(--on-mint); border-radius:28px} .k-ai .br[aria-pressed="true"] i{background:var(--card); color:var(--pri)} .k-ai .br[aria-pressed="true"] .ck{opacity:1; transform:none} .k-ai .br i svg{width:20px; height:20px} .k-ai .br small{display:block; font-size:12.5px; font-weight:500; color:var(--ink2)} .k-ai .br .n{margin-left:auto; font-size:13px; font-weight:650; color:var(--ink2); font-variant-numeric:tabular-nums} .k-ai .br .bi{flex:none; width:40px; height:40px; display:grid; place-items:center; background:var(--tc); color:var(--to); clip-path:var(--clip-sq56); transform:scale(.72); margin:-4px -6px} .k-ai .br .bi svg{width:28px; height:28px} .k-ai .br.kid{padding-left:28px; min-height:48px; font-size:15px} .k-ai .br.is-cur{box-shadow:inset 0 0 0 2px var(--pri)} .k-ai .sh-sub{margin:18px 4px 8px; font-size:12.5px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2)} .k-ai .sr-res{display:grid; gap:4px; margin-top:12px} .k-ai .sr-res:empty{display:none} .k-ai .sr-list{display:grid; gap:4px} .k-ai .sr-i{display:grid; gap:2px; padding:12px 16px; border-radius:8px; background:var(--card); color:var(--ink); text-decoration:none} .k-ai .sr-i:first-child{border-radius:20px 20px 8px 8px} .k-ai .sr-i:last-child{border-radius:8px 8px 20px 20px} .k-ai .sr-i:only-child{border-radius:20px} .k-ai .sr-i .o{font-size:12px; font-weight:700; color:var(--to, var(--pri))} .k-ai .sr-i b{font-size:15.5px; font-weight:650; line-height:1.35} .k-ai .sr-i.is-arc{background:var(--s2); color:var(--ink2)} .k-ai .sr-i.is-arc b{font-weight:550} .k-ai .sr-msg{padding:12px 4px; font-size:14px; color:var(--ink2)} .k-ai .sr-all{justify-self:start; display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-top:8px; padding:0 16px; border-radius:22px; background:var(--mint); color:var(--on-mint); font-size:14px; font-weight:700; text-decoration:none} .k-ai .sr-all svg{width:18px; height:18px} .k-ai .sheet .often{margin:14px 0 0; padding:0; flex-wrap:wrap; overflow:visible} /* ---------- общее: заголовки, чипы, клавиши, команды ---------- */ .k-ai .main{display:grid; gap:12px; padding:4px 16px 16px} .k-ai .sh{display:flex; align-items:center; gap:12px; margin:0 0 14px; font-size:24px; font-weight:800; font-stretch:120%; line-height:1.12; letter-spacing:-.015em} .k-ai .sh .shp{width:36px; height:36px; color:var(--to, var(--pri))} .k-ai .h2{margin:0 0 14px; font-size:24px; font-weight:800; font-stretch:118%; line-height:1.14; letter-spacing:-.015em} .k-ai .h2 .cnt-n{font-size:.7em; font-weight:700; color:var(--ink2); margin-left:6px} .k-ai .chip{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px; border-radius:22px; background:color-mix(in srgb, var(--card) 72%, transparent); color:inherit; text-decoration:none; font-size:14px; font-weight:600; line-height:1.1} .k-ai .sheet .chip{background:var(--card)} .k-ai .kc{display:inline-flex; align-items:center; gap:5px; min-height:30px; padding:2px 10px; border-radius:10px; background:var(--card); color:var(--ink); box-shadow:inset 0 -2px 0 var(--line); font-size:14px; font-weight:650; line-height:1.2; white-space:nowrap} .k-ai .kc svg{width:14px; height:14px; color:var(--pri)} .k-ai .keys{display:flex; flex-wrap:wrap; align-items:center; gap:6px} .k-ai .keys > i{font-style:normal; font-weight:800; opacity:.75} .k-ai code,.k-ai .mono{font-family:var(--mono); font-size:.86em; padding:.08em .38em; border-radius:6px; background:var(--s2); overflow-wrap:anywhere} .k-ai .cmd{display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding:6px 6px 6px 14px; border:0; border-radius:14px; background:var(--cmd-bg); color:var(--cmd-fg); text-align:left; font:500 13.5px/1.4 var(--mono)} .k-ai .cmd::before{background:var(--cmd-fg)} .k-ai .cmd code{flex:1; min-width:0; padding:0; background:none; color:inherit; font:inherit} .k-ai .cmd code::before{content:"› "; opacity:.55} .k-ai .cmd .ok{display:none; flex:none; font:650 12px/1 var(--f); letter-spacing:.02em} .k-ai .cmd .cp{flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:12px; background:color-mix(in srgb, var(--cmd-fg) 16%, transparent); transition:border-radius .3s var(--spring), background-color .2s} .k-ai .cmd .cp svg{width:18px; height:18px} .k-ai .cmd .cp .c2{display:none} .k-ai .cmd.is-copied .ok{display:inline} .k-ai .cmd.is-copied .cp{border-radius:18px; background:var(--cmd-fg); color:var(--cmd-bg)} .k-ai .cmd.is-copied .cp .c1{display:none} .k-ai .cmd.is-copied .cp .c2{display:block} /* ---------- главная: бенто ---------- */ .k-ai .bento{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px} .k-ai .w{position:relative; min-width:0; overflow:hidden; border-radius:28px; background:var(--s1); padding:20px; animation:ai-rise .55s var(--emph) both; animation-delay:calc(var(--i,0) * 70ms)} .k-ai .w-2{grid-column:span 2} .k-ai .wh{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; margin:0 0 16px; position:relative} .k-ai .wh h2{font-size:22px; font-weight:800; font-stretch:120%; line-height:1.15; letter-spacing:-.015em} .k-ai .wh small{font-size:12px; font-weight:550; line-height:1.35; color:var(--ink2)} .k-ai .wh .more{margin-left:auto; display:inline-flex; align-items:center; gap:4px; min-height:44px; padding:0 8px 0 14px; border-radius:22px; text-decoration:none; font-size:14px; font-weight:650; color:var(--pri)} .k-ai .wh .more svg{width:18px; height:18px} /* герой */ .k-ai .hero{background:var(--mint); color:var(--on-mint); border-radius:36px; padding:22px 20px 20px} .k-ai .hero > :not(.deco){position:relative} .k-ai .hero-ck{width:230px; height:230px; right:-96px; top:-84px; color:var(--mint2); animation:ai-spin 48s linear infinite} .k-ai .hero-sun{width:64px; height:64px; right:66px; top:-22px; color:var(--fw-v); animation:ai-spin 30s linear infinite reverse} .k-ai .hero-clo{width:46px; height:46px; right:18px; top:92px; color:var(--set-v); animation:ai-bob 5s ease-in-out infinite} .k-ai .ov{display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:0 14px 0 6px; border-radius:16px; background:color-mix(in srgb, var(--card) 70%, transparent); font-size:13px; font-weight:700; line-height:1} .k-ai .ov svg{width:22px; height:22px; color:var(--pri)} .k-ai .h1{margin:16px 0 12px; font-size:34px; font-weight:800; font-stretch:132%; line-height:1.02; letter-spacing:-.03em; max-width:10em} .k-ai .lede{font-size:16px; line-height:1.5; max-width:46ch; margin-bottom:18px} .k-ai .srch{display:flex; align-items:center; gap:8px; height:56px; padding:0 6px 0 16px; border-radius:28px; background:var(--card); color:var(--ink); transition:box-shadow .2s} .k-ai .srch:focus-within{box-shadow:0 0 0 3px var(--pri)} .k-ai .srch > svg{width:24px; height:24px; color:var(--ink2)} .k-ai .srch input{flex:1; min-width:0; height:100%; border:0; outline:0; background:none; color:inherit; font:400 16px var(--f); -webkit-appearance:none; appearance:none} .k-ai .srch input::placeholder{color:var(--ink2)} .k-ai .srch input::-webkit-search-cancel-button{-webkit-appearance:none} .k-ai .srch button{flex:none; height:44px; padding:0 18px; border:0; border-radius:22px; background:var(--pri); color:var(--on-pri); font-size:15px; font-weight:700} .k-ai .often{display:flex; align-items:center; gap:8px; margin:14px -20px 0; padding:0 20px 2px; overflow-x:auto; scrollbar-width:none} .k-ai .often::-webkit-scrollbar{display:none} .k-ai .often > *{flex:none} .k-ai .often > span{font-size:13px; font-weight:700; margin-right:2px} /* виджет «Режимы телефона» */ .k-ai .modes{background:var(--md-bg); color:var(--md-fg); scroll-margin-top:84px} .k-ai .modes .wh{margin-bottom:12px} .k-ai .modes .wh small{color:var(--md-sub)} .k-ai .md-who{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:-2px 0 14px; font-size:14px; font-weight:600; line-height:1.35; color:var(--md-sub)} .k-ai .md-chg{display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border:1px solid color-mix(in srgb, var(--md-fg) 45%, transparent); border-radius:22px; background:none; color:var(--md-fg); font-size:13px; font-weight:650} .k-ai .seg{display:flex; gap:4px; margin-bottom:16px} .k-ai .seg button{flex:1 1 0; min-width:0; min-height:48px; padding:0 4px; font-stretch:88%; border:0; border-radius:10px; background:var(--md-ch); color:inherit; font-size:13px; font-weight:700; line-height:1.1; transition:border-radius .45s var(--spring), background-color .2s, color .2s} .k-ai .seg button:first-child{border-radius:24px 10px 10px 24px} .k-ai .seg button:last-child{border-radius:10px 24px 24px 10px} .k-ai .seg button[aria-pressed="true"]{border-radius:24px; background:#A6F2C2; color:#002111} .k-ai .md-stage{display:grid; grid-template-columns:104px minmax(0,1fr); gap:14px; align-items:center} .k-ai .md-res{display:grid; gap:10px; align-content:center; min-width:0} .k-ai .md-lbl{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--md-sub)} .k-ai .md-t{font-size:14.5px; line-height:1.45} .k-ai .md-alt{font-size:13px; line-height:1.4; color:var(--md-sub)} .k-ai .md-src{font-size:12.5px; line-height:1.45; color:var(--md-sub)} .k-ai .md-src a{color:var(--md-fg); font-weight:700; text-underline-offset:3px; white-space:nowrap} .k-ai .md-st{display:inline-flex; align-items:center; min-height:22px; margin-right:4px; padding:0 8px; border-radius:11px; font-size:11.5px; font-weight:750; vertical-align:1px} .k-ai .md-st.is-o{background:#A6F2C2; color:#002111} .k-ai .md-st.is-p{background:#FFDDB8; color:#2D1600} .k-ai .modes .kc{background:#FFFFFF; color:#171D19; box-shadow:inset 0 -2px 0 #B9C4BA} .k-ai .modes .kc svg{color:#0A7A47} .k-ai .modes .cmd{background:rgba(0,0,0,.28); color:#FFFFFF; font-size:12.5px; padding-left:12px} .k-ai .modes .cmd .cp{background:rgba(255,255,255,.16)} .k-ai .modes .cmd.is-copied .cp{background:#A6F2C2; color:#002111} .k-ai .modes.mini{padding:18px; border-radius:28px} .k-ai .modes.mini .wh{margin-bottom:10px} .k-ai .modes.mini .wh h2{font-size:18px; font-weight:800; font-stretch:115%} .k-ai .modes.mini .seg{margin-bottom:12px} .k-ai .modes.mini .seg button{min-height:44px; font-size:13px} .k-ai .modes.mini .md-stage{grid-template-columns:84px minmax(0,1fr); gap:12px} .k-ai .modes.mini .md-who{margin:-4px 0 10px; font-size:13px} /* рисунок телефона сбоку */ .k-ai .ph{display:block; width:100%; height:auto; overflow:visible; color:inherit} .k-ai .ph-edge{fill:var(--ph-edge)} .k-ai .ph-body{fill:var(--ph-body)} .k-ai .ph-scr{fill:#0C110E} .k-ai .ph-cam{fill:#2B332E} .k-ai .ph-k{fill:var(--ph-key); transition:fill .3s} .k-ai .ph-h{fill:var(--lit); opacity:0; transform-box:fill-box; transform-origin:center} .k-ai .ph-l{fill:currentColor; font:800 15px var(--f); opacity:.8} .k-ai .ph-pwr{fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; opacity:.8} .k-ai .ph-t{fill:#A6F2C2; font:700 9.5px var(--mono); letter-spacing:.06em} .k-ai .ph-ln{fill:#2E3A33} .k-ai .ph-hi{fill:#A6F2C2} .k-ai .ph-tile{fill:#223029} .k-ai .ph-s{display:none} .k-ai .ph-cable{display:none; fill:none; stroke:var(--lit); stroke-width:6; stroke-linecap:round; stroke-dasharray:4 7; animation:ai-flow .8s linear infinite} .k-ai [data-mode="fb"] .ph-s-fb,.k-ai [data-mode="rec"] .ph-s-rec,.k-ai [data-mode="adb"] .ph-s-adb,.k-ai [data-mode="adb"] .ph-cable,.k-ai [data-cable] .ph-cable{display:inline} .k-ai [data-lit~="up"] .ph-up,.k-ai [data-lit~="dn"] .ph-dn,.k-ai [data-lit~="pw"] .ph-pw{fill:var(--lit)} .k-ai [data-lit~="up"] .ph-h-up,.k-ai [data-lit~="dn"] .ph-h-dn,.k-ai [data-lit~="pw"] .ph-h-pw{animation:ai-pulse 1.7s ease-out infinite} .k-ai [data-lit~="dn"] .ph-h-dn{animation-delay:.12s} .k-ai [data-lit~="pw"] .ph-h-pw{animation-delay:.24s} /* виджет «Темы»: значки-приложения, сквиркл → печенье */ .k-ai .apps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px 4px; margin:0; padding:0; list-style:none} .k-ai .app{display:grid; justify-items:center; align-content:start; gap:8px; min-height:44px; padding:2px 0; border-radius:16px; color:var(--ink); text-decoration:none; text-align:center; font-size:12px; font-weight:650; line-height:1.25; font-stretch:86%} .k-ai .app-ic{width:56px; height:56px; display:grid; place-items:center; background:var(--tc); color:var(--to); clip-path:var(--clip-sq56); transition:clip-path .6s var(--spring), transform .6s var(--spring)} .k-ai .app-ic svg{width:28px; height:28px; transition:transform .6s var(--spring)} .k-ai .app:hover .app-ic,.k-ai .app:focus-visible .app-ic,.k-ai .app:active .app-ic{clip-path:var(--clip-ck56); transform:rotate(-8deg)} .k-ai .app:hover .app-ic svg,.k-ai .app:focus-visible .app-ic svg{transform:rotate(8deg) scale(1.08)} .k-ai .app small{display:none; font-size:12px; font-weight:500; color:var(--ink2); font-stretch:100%} /* маршруты — маленькие виджеты (на месте «инструментов» макета) */ .k-ai .tool{display:grid; align-content:space-between; gap:18px; min-height:172px; padding:18px; background:var(--tc); color:var(--ton); text-decoration:none} .k-ai .tool-sh{position:relative; width:52px; height:52px; display:grid; place-items:center; color:var(--onv)} .k-ai .tool-sh > svg:first-child{position:absolute; inset:0; width:100%; height:100%; color:var(--tv); transition:transform .8s var(--spring)} .k-ai .tool-sh > svg + svg{position:relative; width:24px; height:24px} .k-ai .tool:hover .tool-sh > svg:first-child{transform:rotate(60deg) scale(1.08)} .k-ai .tool .o{display:block; margin-bottom:4px; font-size:11.5px; font-weight:750; letter-spacing:.05em; text-transform:uppercase; opacity:.8} .k-ai .tool b{display:block; font-size:16px; font-weight:780; font-stretch:112%; line-height:1.2; letter-spacing:-.01em} .k-ai .tool small{display:block; margin-top:4px; font-size:13px; font-weight:500; line-height:1.35} /* уведомления «Недавно обновлено» */ .k-ai .ntf{display:grid; gap:4px; margin:0; padding:0; list-style:none} .k-ai .nt{display:grid; gap:6px; padding:14px 16px 16px; border-radius:8px; background:var(--card); color:var(--ink); text-decoration:none; transition:border-radius .35s var(--spring)} .k-ai .ntf li:first-child .nt{border-radius:24px 24px 8px 8px} .k-ai .ntf li:last-child .nt{border-radius:8px 8px 24px 24px} .k-ai .ntf li:only-child .nt{border-radius:24px} .k-ai .nt:hover{border-radius:24px} .k-ai .nt-h{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:650; line-height:1.2; color:var(--ink2)} .k-ai .nt-ic{width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:var(--tv); color:var(--onv)} .k-ai .nt-ic svg{width:14px; height:14px} .k-ai .nt-h time{margin-left:auto} .k-ai .nt b{font-size:16px; font-weight:650; line-height:1.35} .k-ai .nt small{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--ink2)} .k-ai .nt small svg{width:16px; height:16px; color:var(--pri)} /* «Чаще всего читают» */ .k-ai .pop{display:grid; gap:2px; margin:0; padding:0; list-style:none} .k-ai .pop a{display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; align-items:center; min-height:56px; padding:10px 10px 10px 2px; border-radius:18px; color:var(--ink); text-decoration:none} .k-ai .pop-n{font-size:30px; font-weight:850; font-stretch:140%; line-height:1; text-align:center; color:var(--to)} .k-ai .pop b{display:block; font-size:15.5px; font-weight:650; line-height:1.35} .k-ai .pop small{display:block; margin-top:2px; font-size:12.5px; font-weight:500; line-height:1.4; color:var(--ink2)} /* «Как мы пишем инструкции» — инверсная поверхность */ .k-ai .how{background:var(--inv); color:var(--on-inv)} .k-ai .how .wh small{color:inherit; opacity:.75} .k-ai .how .more{color:var(--inv-pri)} .k-ai .how ol{display:grid; gap:18px; margin:0; padding:0; list-style:none} .k-ai .how li{display:grid; grid-template-columns:56px minmax(0,1fr); gap:14px; align-items:start} .k-ai .how-n{position:relative; width:56px; height:56px; display:grid; place-items:center; color:var(--inv); font-size:22px; font-weight:850; font-stretch:130%} .k-ai .how-n svg{position:absolute; inset:0; width:100%; height:100%; color:var(--inv-pri)} .k-ai .how-n b{position:relative} .k-ai .how li b.t{display:block; margin:2px 0 4px; font-size:17px; font-weight:750; font-stretch:110%; line-height:1.3} .k-ai .how li p{font-size:15px; line-height:1.5; opacity:.9} /* подвал */ .k-ai .foot{display:grid; gap:14px; margin:28px 16px calc(100px + env(safe-area-inset-bottom)); padding:24px 20px 20px; border-radius:28px; background:var(--s1)} .k-ai .foot .logo{font-size:30px; justify-self:start} .k-ai .foot nav{display:flex; flex-wrap:wrap; gap:4px} .k-ai .foot nav a{display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:22px; background:var(--card); text-decoration:none; font-size:14px; font-weight:600} .k-ai .foot small{font-size:12.5px; line-height:1.45; color:var(--ink2)} /* ---------- статья ---------- */ .k-ai .art-head{position:relative; overflow:hidden; background:var(--tc); color:var(--ton); padding:4px 16px 28px; border-radius:0 0 36px 36px} .k-ai .art-head > :not(.deco){position:relative} .k-ai .ah-ck{width:300px; height:300px; right:-132px; top:-36px; color:var(--tv); animation:ai-spin 70s linear infinite} .k-ai .ah-gl{width:40px; height:40px; right:18px; top:16px; color:var(--onv)} .k-ai .back{display:inline-flex; align-items:center; gap:6px; max-width:100%; min-height:44px; padding:0 16px 0 10px; border-radius:22px; background:color-mix(in srgb, var(--card) 55%, transparent); text-decoration:none; font-size:14px; font-weight:650; line-height:1.2} .k-ai .back svg{width:20px; height:20px} .k-ai .ah-h1{margin:18px 0 18px; max-width:13em; font-size:30px; font-weight:800; font-stretch:122%; line-height:1.06; letter-spacing:-.025em; overflow-wrap:break-word} .k-ai .ah-chips{display:flex; flex-wrap:wrap; gap:8px} .k-ai .ach{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px 0 6px; border-radius:22px; background:color-mix(in srgb, var(--card) 72%, transparent); color:var(--ink); text-decoration:none; font-size:13px; font-weight:650; line-height:1.25} .k-ai .ach > svg{width:18px; height:18px; margin-left:6px} .k-ai .ach .av{width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--to); color:var(--tc); font-size:12px; font-weight:850; letter-spacing:-.02em} .k-ai .ach.fresh{background:var(--amb-c); color:var(--on-amb-c)} .k-ai .ach.fresh svg{color:var(--amb)} .k-ai .ach.ok{background:var(--card); color:var(--ink); box-shadow:inset 0 0 0 2px var(--pri)} .k-ai .ach.ok svg{color:var(--pri)} .k-ai .ach.old{background:var(--card); color:var(--ink2)} .k-ai .tabs{position:sticky; top:64px; z-index:25; display:flex; align-items:center; gap:4px; padding-right:12px; background:var(--bg); box-shadow:inset 0 -1px 0 var(--line)} .k-ai.admin-bar .tabs{top:96px} .k-ai .tabs-in{position:relative; flex:1; min-width:0; display:flex; overflow-x:auto; scrollbar-width:none; padding:0 4px} .k-ai .tabs-in::-webkit-scrollbar{display:none} .k-ai .tb{flex:none; display:flex; align-items:center; min-height:48px; padding:0 14px; color:var(--ink2); text-decoration:none; font-size:14px; font-weight:650; line-height:1; white-space:nowrap; transition:color .2s} .k-ai .tb.is-on{color:var(--pri)} .k-ai .tabs-ind{position:absolute; left:0; bottom:0; width:var(--iw,0px); height:3px; border-radius:3px 3px 0 0; background:var(--pri); transform:translateX(var(--ix,0px)); transition:transform .45s var(--spring), width .45s var(--spring), opacity .2s; opacity:0} .k-ai .tabs-cnt{flex:none; display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 12px 0 8px; border-radius:16px; background:var(--mint); color:var(--on-mint); font-size:13px; font-weight:750; line-height:1; white-space:nowrap} .k-ai .tabs-cnt svg{width:16px; height:16px} .k-ai .wave{position:absolute; left:0; right:0; top:100%; height:6px; pointer-events:none} .k-ai .wave i{display:block; height:6px; width:calc(var(--p,0) * 100%); background:var(--pri); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='6'%3E%3Cpath d='M0 3q5-4 10 0t10 0' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") 0 0/20px 6px repeat-x; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='6'%3E%3Cpath d='M0 3q5-4 10 0t10 0' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") 0 0/20px 6px repeat-x; animation:ai-wave 1.1s linear infinite} .k-ai .post{display:grid; grid-template-columns:minmax(0,1fr); gap:0; padding:20px 16px 8px} .k-ai .art{display:grid; grid-template-columns:minmax(0,1fr); gap:36px; min-width:0} .k-ai .art > *{min-width:0} .k-ai .aside{display:none} .k-ai .modes-slot:empty{display:none} .k-ai [data-anchor],.k-ai .cs-body h2,.k-ai .cs-body h3{scroll-margin-top:124px} .k-ai .note{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:20px; font-size:15px; line-height:1.5} .k-ai .note > svg{width:22px; height:22px; margin-top:1px} .k-ai .note b{font-weight:750} .k-ai .note a{font-weight:700} .k-ai .note.out{background:var(--red-c); color:var(--on-red-c)} .k-ai .note.arc{background:var(--ar-c); color:var(--ar-on)} .k-ai .note.arc > svg{color:var(--ar-o)} .k-ai .short{display:grid; gap:18px; padding:20px; border-radius:28px; background:var(--s1)} .k-ai .short .sh{margin:0} .k-ai .facts{display:grid; gap:12px; margin:0; padding:0; list-style:none; counter-reset:f} .k-ai .facts li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; font-size:16px; line-height:1.5} .k-ai .facts li::before{counter-increment:f; content:counter(f); width:28px; height:28px; display:grid; place-items:center; border-radius:10px; background:var(--mint); color:var(--on-mint); font-size:13px; font-weight:800} .k-ai .risk{padding:16px; border-radius:20px; background:var(--card); --rc:var(--red); --rcc:var(--red-c); --rcon:var(--on-red-c)} .k-ai .risk.r1{--rc:var(--pri); --rcc:var(--mint); --rcon:var(--on-mint)} .k-ai .risk.r2{--rc:var(--amb); --rcc:var(--amb-c); --rcon:var(--on-amb-c)} .k-ai .risk-h{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:14px; font-weight:750} .k-ai .risk-h span{font-size:12px; font-weight:600; color:var(--ink2)} .k-ai .rk{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; align-items:end; margin:14px 0 8px} .k-ai .rk i{display:block; height:calc(14px + var(--l) * 10px); border-radius:6px; background:var(--s3)} .k-ai .rk i:first-child{border-radius:12px 6px 6px 12px} .k-ai .rk i:last-child{border-radius:6px 12px 12px 6px} .k-ai .rk .on{background:var(--rcc)} .k-ai .rk .cur{background:var(--rc); animation:ai-breath 2.4s ease-in-out infinite; --lo:.72} .k-ai .rk-l{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; font-size:11.5px; font-weight:550; line-height:1.25; color:var(--ink2)} .k-ai .rk-l b{display:block; font-size:13px; font-weight:800; color:var(--ink)} .k-ai .rk-l .cur,.k-ai .rk-l .cur b{color:var(--rc); font-weight:800} .k-ai .risk-c{display:flex; gap:10px; align-items:flex-start; margin-top:12px; padding:10px 12px; border-radius:14px; background:var(--rcc); color:var(--rcon); font-size:14.5px; font-weight:650; line-height:1.4} .k-ai .risk-c svg{width:20px; height:20px; margin-top:1px} .k-ai .pass{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none} .k-ai .pass li{display:inline-flex; align-items:center; gap:10px; min-height:44px; max-width:100%; padding:6px 14px 6px 6px; border-radius:22px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line); font-size:14px; line-height:1.35} .k-ai .pass li > svg{width:32px; height:32px; padding:6px; border-radius:50%; background:var(--s2); color:var(--pri)} .k-ai .pass li > span{min-width:0; overflow-wrap:anywhere} .k-ai .pass b{font-weight:750} .k-ai .pass code{font-size:.9em} .k-ai .route{margin-top:12px; padding:16px; border-radius:24px; background:var(--s1)} .k-ai .route-h{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-bottom:14px; font-size:15px; font-weight:750; line-height:1.3} .k-ai .route-h svg{width:22px; height:22px; color:var(--pri)} .k-ai .route-h small{margin-left:auto; min-height:28px; display:inline-flex; align-items:center; padding:0 10px; border-radius:14px; background:var(--tv); color:var(--onv); font-size:12.5px; font-weight:750} .k-ai .rt{display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); gap:4px; margin:0; padding:0; list-style:none} .k-ai .rt a{display:grid; align-content:start; gap:8px; min-height:44px; color:var(--ink2); text-decoration:none; font-size:12px; font-weight:600; line-height:1.25} .k-ai .rt a::before{content:""; height:10px; border-radius:5px; background:var(--s3)} .k-ai .rt li:first-child a::before{border-radius:10px 4px 4px 10px} .k-ai .rt .past a{color:var(--ink)} .k-ai .rt .past a::before{background:var(--pri)} .k-ai .rt .cur a{color:var(--ink); font-weight:800} .k-ai .rt .cur a::before{background:var(--tv); animation:ai-breath 2.4s ease-in-out infinite} .k-ai .code{flex:none; width:56px; height:56px; display:grid; place-items:center; background:var(--tc); color:var(--ton); clip-path:var(--clip-sq56); font:700 13px/1 var(--mono); letter-spacing:-.03em; transition:clip-path .6s var(--spring)} .k-ai .code svg{width:26px; height:26px; color:var(--to)} .k-ai a:hover > .code{clip-path:var(--clip-ck56)} /* FAQ, автор и источники, «Дальше», комментарии */ .k-ai .faq{display:grid; gap:4px} .k-ai .fq{border-radius:8px; background:var(--s1); transition:border-radius .4s var(--spring), background-color .2s} .k-ai .fq:first-child{border-radius:24px 24px 8px 8px} .k-ai .fq:last-child{border-radius:8px 8px 24px 24px} .k-ai .fq:only-child{border-radius:24px} .k-ai .fq[open]{border-radius:24px; background:var(--s2)} .k-ai .fq summary{display:flex; align-items:center; gap:12px; min-height:56px; padding:10px 12px 10px 20px; list-style:none; cursor:pointer; font-size:16px; font-weight:650; line-height:1.35; border-radius:inherit} .k-ai .fq summary::-webkit-details-marker{display:none} .k-ai .fq summary > svg{margin-left:auto; width:36px; height:36px; padding:7px; border-radius:50%; background:var(--card); transition:transform .4s var(--spring)} .k-ai .fq[open] summary > svg{transform:rotate(180deg)} .k-ai .fq-a{padding:0 20px 18px; font-size:16px; line-height:1.55} .k-ai .fq-a p + p{margin-top:10px} .k-ai .fq-a a{color:var(--pri); font-weight:600} .k-ai .who{display:grid; gap:4px; margin:0 0 20px; padding:0; list-style:none} .k-ai .who li{display:grid; grid-template-columns:48px minmax(0,1fr); gap:14px; align-items:center; padding:12px 16px 12px 12px; border-radius:8px; background:var(--s1)} .k-ai .who li:first-child{border-radius:24px 24px 8px 8px} .k-ai .who li:last-child{border-radius:8px 8px 24px 24px} .k-ai .who li:only-child{border-radius:24px} .k-ai .who li > div{min-width:0} .k-ai .av2{position:relative; width:48px; height:48px; display:grid; place-items:center; color:var(--ton); font-size:18px; font-weight:850; font-stretch:115%} .k-ai .av2 svg{position:absolute; inset:0; width:100%; height:100%; color:var(--tc)} .k-ai .av2 b{position:relative} .k-ai .who strong{display:block; font-size:16px; font-weight:700; line-height:1.3; overflow-wrap:anywhere} .k-ai .who strong a{text-decoration:none} .k-ai .who strong a:hover{text-decoration:underline} .k-ai .who small{display:block; font-size:13.5px; line-height:1.45; color:var(--ink2)} .k-ai .tag{display:inline-flex; align-items:center; min-height:22px; margin-left:6px; padding:0 8px; border-radius:11px; background:var(--amb-c); color:var(--on-amb-c); font-size:11.5px; font-weight:700; vertical-align:2px} .k-ai .tag.ok{background:var(--mint); color:var(--on-mint)} .k-ai .next{display:grid; gap:8px} .k-ai .nx{display:grid; grid-template-columns:52px minmax(0,1fr) 40px; gap:14px; align-items:center; min-height:96px; padding:16px; border-radius:28px; background:var(--tc); color:var(--ton); text-decoration:none; transition:border-radius .45s var(--spring)} .k-ai .nx:hover{border-radius:40px} .k-ai .nx:active{border-radius:16px} .k-ai .nx .shp{width:52px; height:52px} .k-ai .nx .shp > svg:first-child{color:var(--tv)} .k-ai .nx .shp > svg + svg{color:var(--onv)} .k-ai .nx-t{display:block; min-width:0} .k-ai .nx .o{display:block; font-size:12px; font-weight:750; letter-spacing:.04em; text-transform:uppercase; opacity:.8} .k-ai .nx b{display:block; margin:3px 0; font-size:16.5px; font-weight:750; font-stretch:106%; line-height:1.25} .k-ai .nx small{display:block; font-size:13px; font-weight:550} .k-ai .nx .go{width:40px; height:40px; padding:9px; border-radius:50%; background:var(--ton); color:var(--tc)} .k-ai .report{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin-top:16px; padding:14px 16px; border-radius:20px; background:var(--inv); color:var(--on-inv); font-size:14px; line-height:1.45} .k-ai .report span{flex:1 1 220px} .k-ai .report a{display:inline-flex; align-items:center; min-height:44px; margin-left:auto; padding:0 16px; border-radius:22px; background:var(--inv-pri); color:var(--inv); font-weight:750; text-decoration:none} .k-ai .cm-l{display:grid; gap:4px; margin:0; padding:0; list-style:none} .k-ai .cm{padding:14px 16px; border-radius:8px; background:var(--s1)} .k-ai .cm:first-child{border-radius:24px 24px 8px 8px} .k-ai .cm:last-child{border-radius:8px 8px 24px 24px} .k-ai .cm:only-child{border-radius:24px} .k-ai .cm.is-reply{margin-left:24px} .k-ai .cm-h{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-bottom:6px; font-size:13.5px; color:var(--ink2)} .k-ai .cm-h b{font-size:15px; font-weight:700; color:var(--ink)} .k-ai .cm-h .av{width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--s3); color:var(--ink); font-size:14px; font-weight:800} .k-ai .cm.is-staff{background:color-mix(in srgb, var(--mint) 35%, var(--s1))} .k-ai .cm.is-staff .cm-h .av{background:var(--pri); color:var(--on-pri); font-size:12px} .k-ai .cm-more{margin-top:4px} .k-ai .cm-more > summary{display:flex; align-items:center; justify-content:center; min-height:48px; padding:0 18px; border-radius:24px; background:var(--s2); color:var(--ink); font-size:15px; font-weight:700; list-style:none; cursor:pointer} .k-ai .cm-more > summary::-webkit-details-marker{display:none} .k-ai .cm-more[open] > summary{margin-bottom:4px} .k-ai .cm-t{font-size:15.5px; line-height:1.55; overflow-wrap:anywhere} .k-ai .cm-t p + p{margin-top:8px} /* боковая колонка (компьютер) */ .k-ai .prog{padding:20px; border-radius:28px; background:var(--s1)} .k-ai .prog h3{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:18px; font-weight:800; font-stretch:115%; margin-bottom:10px} .k-ai .prog ol{display:grid; gap:2px; margin:0 0 14px; padding:0; list-style:none} .k-ai .prog li a{display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; align-items:center; min-height:36px; padding:4px 8px 4px 0; border-radius:14px; color:var(--ink2); text-decoration:none; font-size:14px; font-weight:600; line-height:1.3} .k-ai .prog li i{width:28px; height:28px; display:grid; place-items:center; border-radius:50%; box-shadow:inset 0 0 0 2px var(--line2); font-style:normal; font-size:12px; font-weight:800; transition:.35s var(--spring)} .k-ai .prog li a.is-on{color:var(--ink)} .k-ai .prog li a.is-on i{background:var(--pri); color:var(--on-pri); box-shadow:none; border-radius:10px} .k-ai .pbar{height:8px; border-radius:4px; background:var(--s3); overflow:hidden} .k-ai .pbar i{display:block; height:100%; width:calc(var(--p,0) * 100%); border-radius:4px; background:var(--pri)} .k-ai .pbar.st i{width:calc(var(--done,0) * 100%); transition:width .7s var(--spring)} .k-ai .prog p{margin-top:12px; font-size:13.5px; line-height:1.45; color:var(--ink2)} .k-ai .prog p a{color:var(--pri); font-weight:700} /* ---------- текст статьи и страницы ---------- */ .k-ai .cs-body{font-size:17px; line-height:1.62; overflow-wrap:break-word} .k-ai .cs-body > :first-child{margin-top:0} .k-ai .cs-body p{margin:0 0 14px} .k-ai .cs-body h2{margin:38px 0 14px; font-size:24px; font-weight:800; font-stretch:118%; line-height:1.15; letter-spacing:-.015em} .k-ai .cs-body h3{margin:28px 0 10px; font-size:19px; font-weight:780; font-stretch:112%; line-height:1.25} .k-ai .cs-body h4,.k-ai .cs-body h5,.k-ai .cs-body h6{margin:22px 0 8px; font-size:17px; font-weight:750; line-height:1.3} .k-ai .cs-body a{color:var(--pri); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--pri) 45%, transparent)} .k-ai .cs-body a:hover{text-decoration-color:currentColor} .k-ai .cs-body strong,.k-ai .cs-body b{font-weight:720} .k-ai .cs-body em,.k-ai .cs-body i{font-style:italic} .k-ai .cs-body hr{height:0; margin:28px 0; border:0; border-top:2px dashed var(--line)} .k-ai .cs-body ul,.k-ai .cs-body ol{margin:0 0 16px; padding:0} .k-ai .cs-body ul{list-style:none} .k-ai .cs-body ul > li{position:relative; margin:0 0 8px; padding-left:24px} .k-ai .cs-body ul > li::before{content:""; position:absolute; left:5px; top:.58em; width:9px; height:9px; border-radius:3px; background:var(--tv, var(--pri)); transform:rotate(45deg)} .k-ai .cs-body li > ul,.k-ai .cs-body li > ol{margin:8px 0 4px} .k-ai .cs-body li > ul > li::before{background:transparent; box-shadow:inset 0 0 0 2px var(--tv, var(--pri))} .k-ai .cs-body ol{list-style:none; counter-reset:st; display:grid; gap:10px} .k-ai .cs-body ol > li{position:relative; counter-increment:st; min-height:36px; padding:5px 0 0 50px} .k-ai .cs-body ol > li::before{content:counter(st); position:absolute; left:0; top:0; width:36px; height:36px; display:grid; place-items:center; background:var(--tc, var(--mint)); color:var(--ton, var(--on-mint)); font-size:15px; font-weight:850; font-stretch:115%; line-height:1; -webkit-mask:var(--m-ck) center/100% 100% no-repeat; mask:var(--m-ck) center/100% 100% no-repeat} .k-ai .cs-body ol > li::after{content:""; position:absolute; left:17px; top:42px; bottom:-6px; width:2px; border-radius:1px; background:var(--line)} .k-ai .cs-body ol > li:last-child::after{display:none} .k-ai .cs-body li > ol{gap:6px} .k-ai .cs-body li > ol > li{padding-left:34px; min-height:26px; padding-top:1px} .k-ai .cs-body li > ol > li::before{width:26px; height:26px; font-size:12.5px} .k-ai .cs-body li > ol > li::after{display:none} .k-ai .cs-body li > p{margin:0 0 8px} /* шаги с галочками (site.js размечает списки в разделах «Шаг N», «Пошаговая…», «Способ…») */ .k-ai .cs-body ol.ai-steps{gap:12px} .k-ai .cs-body ol.ai-steps > li{margin-left:50px; padding:12px 14px; border-radius:20px; background:var(--s1); transition:background-color .35s, border-radius .45s var(--spring)} .k-ai .cs-body ol.ai-steps > li::before{left:-50px; top:4px; transition:background-color .3s, transform .8s var(--spring)} .k-ai .cs-body ol.ai-steps > li::after{left:-33px; top:46px; bottom:-10px; transition:background-color .4s} .k-ai .cs-body ol.ai-steps > li.is-done{background:color-mix(in srgb, var(--mint) 42%, var(--s1)); border-radius:28px} .k-ai .cs-body ol.ai-steps > li.is-done::before{content:"✓"; background:var(--pri); color:var(--on-pri); transform:rotate(-12deg)} .k-ai .cs-body ol.ai-steps > li.is-done::after{background:var(--pri)} .k-ai .done{display:flex; width:fit-content; align-items:center; gap:10px; min-height:44px; margin-top:10px; padding:0 16px 0 12px; border-radius:22px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line); font-size:14px; font-weight:650; line-height:1; cursor:pointer; user-select:none} .k-ai .done input{appearance:none; -webkit-appearance:none; flex:none; width:20px; height:20px; margin:0; display:grid; place-items:center; border:2px solid var(--line2); border-radius:6px; transition:background-color .2s, border-color .2s; cursor:pointer} .k-ai .done input:checked{background:var(--pri); border-color:var(--pri)} .k-ai .done input:checked::after{content:""; width:9px; height:5px; border-left:2.5px solid var(--on-pri); border-bottom:2.5px solid var(--on-pri); transform:translateY(-1px) rotate(-45deg)} .k-ai .done input:focus-visible{outline:none} .k-ai .done:has(input:focus-visible){outline:3px solid var(--pri); outline-offset:2px} /* врезки */ .k-ai .cs-body blockquote{position:relative; margin:20px 0; padding:14px 16px 14px 50px; border-radius:20px; background:var(--s1); color:var(--ink); font-size:16px; line-height:1.55} .k-ai .cs-body blockquote::before{content:""; position:absolute; left:16px; top:15px; width:22px; height:22px; background:var(--ink2); -webkit-mask:var(--m-quote) center/contain no-repeat; mask:var(--m-quote) center/contain no-repeat} .k-ai .cs-body blockquote > :last-child{margin-bottom:0} .k-ai .cs-body blockquote p{margin:0 0 8px} .k-ai .cs-body blockquote.info{background:var(--set-c); color:var(--set-on)} .k-ai .cs-body blockquote.info::before{background:var(--set-o); -webkit-mask-image:var(--m-info); mask-image:var(--m-info)} .k-ai .cs-body blockquote.warning{background:var(--amb-c); color:var(--on-amb-c)} .k-ai .cs-body blockquote.warning::before{background:var(--amb); -webkit-mask-image:var(--m-warn); mask-image:var(--m-warn)} .k-ai .cs-body blockquote.check{background:var(--mint); color:var(--on-mint)} .k-ai .cs-body blockquote.check::before{background:var(--pri); -webkit-mask-image:var(--m-ok); mask-image:var(--m-ok)} .k-ai .cs-body blockquote.danger{background:var(--red-c); color:var(--on-red-c)} .k-ai .cs-body blockquote.danger::before{background:var(--red); -webkit-mask-image:var(--m-stop); mask-image:var(--m-stop)} .k-ai .cs-body blockquote:is(.info,.warning,.check,.danger) a{color:inherit; text-decoration-color:currentColor} .k-ai .cs-body blockquote code{background:color-mix(in srgb, var(--card) 70%, transparent)} /* код, команды, клавиши */ .k-ai .cs-body code{font-size:.84em} .k-ai .cs-body code.cs-copy{display:inline; padding:.12em .5em .12em .45em; border-radius:8px; background:var(--s2); box-shadow:inset 0 0 0 1px var(--line); cursor:copy; transition:background-color .2s} .k-ai .cs-body code.cs-copy::after{content:""; display:inline-block; width:.95em; height:.95em; margin-left:.35em; vertical-align:-.12em; background:var(--ink2); -webkit-mask:var(--m-copy) center/contain no-repeat; mask:var(--m-copy) center/contain no-repeat} .k-ai .cs-body code.cs-copy:hover{background:var(--s3)} .k-ai .cs-body code.cs-copy.is-copied{background:var(--mint); color:var(--on-mint); box-shadow:none} .k-ai .cs-body code.cs-copy.is-copied::after{background:var(--pri); -webkit-mask-image:var(--m-check); mask-image:var(--m-check)} .k-ai .cs-body pre{position:relative; margin:12px 0 16px; padding:0; border-radius:14px; background:var(--cmd-bg); color:var(--cmd-fg); font:500 14px/1.5 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere} .k-ai .cs-body pre code{display:block; padding:13px 16px; background:none; box-shadow:none; color:inherit; font:inherit; border-radius:inherit} .k-ai .cs-body pre code.cs-copy{padding-right:60px; min-height:48px; background:none; box-shadow:none} .k-ai .cs-body pre code.cs-copy::before{content:"› "; opacity:.55} .k-ai .cs-body pre code.cs-copy::after{position:absolute; right:6px; top:6px; width:36px; height:36px; margin:0; border-radius:12px; background:var(--cmd-fg); -webkit-mask:none; mask:none; opacity:.16; transition:border-radius .3s var(--spring), opacity .2s} .k-ai .cs-body pre:has(code.cs-copy)::after{content:""; position:absolute; right:15px; top:15px; width:18px; height:18px; background:var(--cmd-fg); -webkit-mask:var(--m-copy) center/contain no-repeat; mask:var(--m-copy) center/contain no-repeat; pointer-events:none} .k-ai .cs-body pre:has(code.cs-copy.is-copied)::after{background:var(--cmd-bg); -webkit-mask-image:var(--m-check); mask-image:var(--m-check)} .k-ai .cs-body pre code.cs-copy.is-copied{background:none; color:inherit} .k-ai .cs-body pre code.cs-copy.is-copied::after{opacity:1; border-radius:18px} .k-ai .cs-body kbd,.k-ai kbd.kb{display:inline-block; min-width:1.8em; padding:.1em .5em; border-radius:8px; background:var(--card); color:var(--ink); box-shadow:inset 0 -2px 0 var(--line), inset 0 0 0 1px var(--line); font:650 .85em/1.4 var(--f); text-align:center; white-space:nowrap} /* картинки, подписи, видео */ .k-ai .cs-body img{display:block; width:auto; max-width:100%; height:auto; max-height:min(78vh, 680px); margin:18px auto; border-radius:18px; background:var(--s2)} .k-ai .cs-body li img{max-height:min(70vh, 560px); margin:12px 0} .k-ai .cs-body p img,.k-ai .cs-body a img{margin:0 auto} .k-ai .cs-body p > img:only-child,.k-ai .cs-body p > a:only-child > img{margin:18px auto} .k-ai .cs-body img[width="1"],.k-ai .cs-body img[height="1"]{display:none} .k-ai .cs-body figure,.k-ai .cs-body .wp-caption{max-width:100%!important; width:auto!important; margin:20px 0} .k-ai .cs-body figure img,.k-ai .cs-body .wp-caption img{margin:0 auto} .k-ai .cs-body figcaption,.k-ai .cs-body .wp-caption-text,.k-ai .cs-body .wp-element-caption{margin:8px 4px 0; font-size:13.5px; line-height:1.45; color:var(--ink2); text-align:center} .k-ai .cs-body .aligncenter{display:block; margin-left:auto; margin-right:auto; text-align:center} .k-ai .cs-body .alignleft,.k-ai .cs-body .alignright{margin:12px auto} .k-ai .cs-body a.highslide,.k-ai .cs-body a[href$=".jpg"],.k-ai .cs-body a[href$=".png"],.k-ai .cs-body a[href$=".webp"]{display:inline-block; max-width:100%; cursor:zoom-in; text-decoration:none} .k-ai .cs-body iframe,.k-ai .cs-body video,.k-ai .cs-body embed,.k-ai .cs-body object{display:block; width:100%; max-width:100%; height:auto; aspect-ratio:16/9; margin:20px 0; border:0; border-radius:18px; background:var(--s2)} .k-ai .cs-body .wp-block-embed__wrapper{position:relative} .k-ai .cs-body .wp-block-image,.k-ai .cs-body .wp-block-embed{margin:20px 0} .k-ai .cs-body .wp-block-quote{margin:20px 0} .k-ai .cs-body .wp-block-separator{border:0; border-top:2px dashed var(--line); margin:28px 0} .k-ai .cs-body .wp-block-button__link,.k-ai .cs-body .btn{display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:22px; background:var(--pri); color:var(--on-pri); text-decoration:none; font-weight:700} .k-ai .cs-body .wp-block-columns{display:flex; flex-wrap:wrap; gap:16px} .k-ai .cs-body .wp-block-column{flex:1 1 260px; min-width:0} .k-ai .cs-body .wp-block-table,.k-ai .cs-body .wp-block-table > .cs-table{margin:20px 0} .k-ai .cs-body [style*="width"]:not(img):not(iframe){max-width:100%} .k-ai .cs-body dl{margin:0 0 16px} .k-ai .cs-body dt{font-weight:720} .k-ai .cs-body dd{margin:0 0 10px 16px} /* таблицы (ядро оборачивает в div.cs-table) */ .k-ai .cs-body .cs-table{margin:20px 0; overflow-x:auto; border-radius:18px; box-shadow:inset 0 0 0 1px var(--line); background:var(--card); -webkit-overflow-scrolling:touch} .k-ai .cs-body table{width:100%; border-collapse:collapse; font-size:15px; line-height:1.45} .k-ai .cs-body th,.k-ai .cs-body td{padding:11px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); min-width:120px} .k-ai .cs-body thead th,.k-ai .cs-body tr:first-child th{background:var(--s2); font-weight:750; font-size:14px} .k-ai .cs-body tr:last-child td{border-bottom:0} .k-ai .cs-body tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--s1) 55%, transparent)} /* страница: форма обратной связи Reboot */ .k-ai .cs-body .contact-form form{display:grid; gap:10px; max-width:560px} .k-ai .cs-body input[type="text"],.k-ai .cs-body input[type="email"],.k-ai .cs-body input[type="search"],.k-ai .cs-body textarea{width:100%; min-height:52px; padding:12px 16px; border:1px solid var(--line2); border-radius:16px; background:var(--card); color:var(--ink); font:400 16px/1.4 var(--f)} .k-ai .cs-body textarea{min-height:140px; resize:vertical} .k-ai .cs-body input:focus,.k-ai .cs-body textarea:focus{outline:3px solid var(--pri); outline-offset:1px} .k-ai .cs-body button,.k-ai .cs-body input[type="submit"]{justify-self:start; min-height:48px; padding:0 22px; border:0; border-radius:24px; background:var(--pri); color:var(--on-pri); font:700 15px var(--f); cursor:pointer} /* ---------- рубрика-хаб, поиск, 404 ---------- */ .k-ai .hub-head{position:relative; overflow:hidden; background:var(--tv); color:var(--onv); padding:4px 16px 30px; border-radius:0 0 40px 40px} .k-ai .hub-head > :not(.deco){position:relative} .k-ai .hh-ck{width:250px; height:250px; right:-92px; top:18px; color:var(--tc); animation:ai-spin 60s linear infinite} .k-ai .hh-gl{width:56px; height:56px; right:16px; top:14px; color:var(--to)} .k-ai .hh-ov{display:inline-flex; vertical-align:middle; align-items:center; min-height:28px; margin-left:8px; padding:0 12px; border-radius:14px; background:var(--ton); color:var(--tv); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase} .k-ai .hh-h1{margin:12px 0 12px; max-width:7.4em; font-size:42px; font-weight:850; font-stretch:132%; line-height:.98; letter-spacing:-.035em; overflow-wrap:break-word} .k-ai .hh-h1.is-long{font-size:34px; max-width:9em} .k-ai .hh-p{max-width:34ch; margin-bottom:16px; font-size:16px; line-height:1.5} .k-ai .hh-meta{display:flex; flex-wrap:wrap; gap:8px} .k-ai .hh-meta .ach{background:color-mix(in srgb, var(--card) 60%, transparent)} .k-ai .hub-head .back{background:color-mix(in srgb, var(--card) 45%, transparent)} .k-ai .hub-head .srch{margin-top:6px; max-width:640px} :root[data-theme="dark"] .k-ai .hub-head{background:var(--tc); color:var(--ton)} :root[data-theme="dark"] .k-ai .hh-ck{color:var(--tv)} :root[data-theme="dark"] .k-ai .hh-gl{color:var(--onv)} :root[data-theme="dark"] .k-ai .hh-ov{background:var(--tv); color:var(--onv)} :root[data-theme="dark"] .k-ai .bar.hub-bar{--bar:var(--tc); --bar-s:var(--tc); color:var(--ton)} :root[data-theme="dark"] .k-ai .hub-bar .lg-i svg{color:var(--to)} :root[data-theme="dark"] .k-ai .hub-head .back{background:color-mix(in srgb, var(--card) 70%, transparent)} .k-ai .main.hub{display:grid; grid-template-columns:minmax(0,1fr); row-gap:0; padding-top:24px} .k-ai .hub > *{min-width:0; margin-bottom:36px} .k-ai .hub > :last-child{margin-bottom:8px} .k-ai .start{display:flex; gap:8px; margin:0 -16px; padding:0 16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 16px; scrollbar-width:none; list-style:none} .k-ai .start::-webkit-scrollbar{display:none} .k-ai .start li{flex:0 0 78%; scroll-snap-align:start} .k-ai .sc{display:grid; align-content:space-between; gap:28px; height:100%; min-height:196px; padding:20px; border-radius:28px; text-decoration:none; transition:border-radius .45s var(--spring)} .k-ai .sc:hover{border-radius:44px} .k-ai .start li:nth-child(3n+1) .sc{background:var(--tc); color:var(--ton)} .k-ai .start li:nth-child(3n+2) .sc{background:var(--tv); color:var(--onv)} .k-ai .start li:nth-child(3n) .sc{background:var(--to); color:var(--tc)} .k-ai .sc .shp{width:56px; height:56px; font-size:22px; font-weight:850; font-stretch:130%} .k-ai .sc .shp > svg:first-child{color:var(--card)} .k-ai .start li:nth-child(3n) .sc .shp{color:var(--ton)} .k-ai .sc b.t{display:block; font-size:20px; font-weight:800; font-stretch:115%; line-height:1.14; letter-spacing:-.01em} .k-ai .sc small{display:block; margin-top:6px; font-size:14px; font-weight:550; line-height:1.4} .k-ai .map{display:grid; gap:8px} .k-ai .mg{padding:16px; border-radius:24px; background:var(--s1)} .k-ai .mg h3{display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:16px; font-weight:780; font-stretch:112%; line-height:1.25} .k-ai .mg h3 .shp{width:32px; height:32px; color:var(--to)} .k-ai .mg h3 i{margin-left:auto; min-width:28px; height:28px; display:grid; place-items:center; padding:0 6px; border-radius:14px; background:var(--tc); color:var(--ton); font-style:normal; font-size:13px; font-weight:800} .k-ai .mg ul{display:grid; gap:6px; margin:0; padding:0; list-style:none} .k-ai .pl{display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 12px 10px 16px; border-radius:22px; background:var(--card); color:var(--ink); text-decoration:none; font-size:14.5px; font-weight:550; line-height:1.3} .k-ai .pl .n{margin-left:auto; font-size:12.5px; font-weight:700; color:var(--ink2)} .k-ai .pl svg{margin-left:auto; width:18px; height:18px; color:var(--ink2)} .k-ai .pl .n + svg{margin-left:0} .k-ai .flt{display:flex; gap:8px; margin:0 -16px 10px; padding:2px 16px; overflow-x:auto; scrollbar-width:none} .k-ai .flt::-webkit-scrollbar{display:none} .k-ai .bc{flex:none; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px; border:1px solid var(--line2); border-radius:12px; background:transparent; color:var(--ink); font-size:14px; font-weight:650; transition:border-radius .4s var(--spring), background-color .2s} .k-ai .bc .ck{display:none; width:18px; height:18px} .k-ai .bc[aria-pressed="true"]{padding-left:10px; border-color:transparent; border-radius:22px; background:var(--mint); color:var(--on-mint)} .k-ai .bc[aria-pressed="true"] .ck{display:block} .k-ai .cnt{margin:0 0 10px; font-size:13px; font-weight:650; color:var(--ink2)} .k-ai .cnt a{color:var(--pri)} .k-ai .ins{display:grid; gap:4px; margin:0; padding:0; list-style:none} .k-ai .ins a{display:grid; grid-template-columns:56px minmax(0,1fr) 20px; gap:14px; align-items:center; padding:12px; border-radius:8px; background:var(--s1); color:var(--ink); text-decoration:none; transition:border-radius .35s var(--spring)} .k-ai .ins li:first-child a{border-radius:24px 24px 8px 8px} .k-ai .ins li:last-child a{border-radius:8px 8px 24px 24px} .k-ai .ins li:only-child a{border-radius:24px} .k-ai .ins a > svg{width:20px; height:20px; color:var(--ink2)} .k-ai .ins .tx{min-width:0} .k-ai .ins .o{display:block; font-size:12px; font-weight:700; color:var(--to)} .k-ai .ins b{display:block; margin:2px 0; font-size:15.5px; font-weight:650; line-height:1.35} .k-ai .ins small{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; font-size:12.5px; font-weight:500; color:var(--ink2)} .k-ai .ins small svg{width:15px; height:15px; color:var(--pri)} .k-ai .ins .is-arc a{background:color-mix(in srgb, var(--ar-c) 55%, var(--bg)); color:var(--ink2)} .k-ai .ins .is-arc .code{font-size:12px; background:var(--ar-c); color:var(--ar-o)} .k-ai .ins .is-arc b{font-weight:550} .k-ai .ins .is-arc .o{color:var(--ar-o)} .k-ai .ins .is-arc small svg{color:var(--ink2)} .k-ai .mk{display:inline-flex; align-items:center; gap:5px; min-height:22px; padding:0 8px; border-radius:11px; box-shadow:inset 0 0 0 1px var(--line2); font-size:11.5px; font-weight:650; color:var(--ink2)} .k-ai .mk svg{width:13px; height:13px} .k-ai .none{padding:18px; border-radius:24px; background:var(--s1); font-size:15.5px; line-height:1.5} .k-ai .pager{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:14px} .k-ai .pager a,.k-ai .pager span{min-width:44px; height:44px; display:grid; place-items:center; padding:0 12px; border-radius:22px; background:var(--s1); color:var(--ink); text-decoration:none; font-size:15px; font-weight:650} .k-ai .pager span{background:none} .k-ai .pager [aria-current]{background:var(--pri); color:var(--on-pri); border-radius:14px} .k-ai .pager .pn{display:flex; gap:6px; padding:0 18px; background:var(--mint); color:var(--on-mint)} .k-ai .pager .pn.nx2{margin-left:auto} .k-ai .pager .pn svg{width:18px; height:18px} .k-ai .pager .pn.pv svg{transform:scaleX(-1)} .k-ai .hub-about{padding:20px; border-radius:28px; background:var(--s1)} .k-ai .hub-about .cs-body{font-size:15.5px; line-height:1.55; color:var(--ink2)} .k-ai .hub-about .cs-body strong{color:var(--ink)} .k-ai .hub-arch{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:16px 18px; border-radius:24px; background:var(--ar-c); color:var(--ar-on); font-size:14.5px; line-height:1.45} .k-ai .hub-arch svg{width:22px; height:22px; color:var(--ar-o)} .k-ai .hub-arch a{margin-left:auto; display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:22px; background:var(--card); color:var(--ink); font-weight:700; text-decoration:none} .k-ai .e404{font:850 40px/1 var(--f); font-stretch:130%; letter-spacing:-.04em; color:var(--onv); position:absolute; right:18px; top:22px; opacity:.9} .k-ai .solo{max-width:860px; margin:0 auto; width:100%} /* cookie-плашка Clearfy — над нижней панелью, в системе сайта */ .k-ai .clearfy-cookie{left:12px!important; right:12px!important; bottom:calc(92px + env(safe-area-inset-bottom))!important; max-width:none; padding:12px 14px!important; border-radius:20px!important; background:var(--inv)!important; color:var(--on-inv)!important; box-shadow:0 12px 30px -12px rgba(0,0,0,.45)!important; font:500 13px/1.45 var(--f)!important; z-index:45!important} .k-ai .clearfy-cookie-container{display:flex; align-items:center; gap:10px; text-align:left!important} .k-ai .clearfy-cookie-accept{flex:none; min-height:40px; padding:0 18px!important; border-radius:20px!important; background:var(--inv-pri)!important; color:var(--inv)!important; font:700 14px var(--f)!important} /* ---------- компьютер ---------- */ @media (min-width:960px){ .k-ai{padding-left:88px} .k-ai .nav{top:0; bottom:0; right:auto; width:88px; height:auto; display:flex; flex-direction:column; align-items:center; gap:10px; padding:24px 0; background:var(--bg); box-shadow:inset -1px 0 0 var(--line)} .k-ai.admin-bar .nav{top:32px} .k-ai .nv{width:88px; min-height:56px; flex:none} .k-ai .nv-p{display:none} .k-ai .nv-d{display:flex} .k-ai .fab{display:grid; place-items:center; width:56px; height:56px; margin-bottom:18px; background:var(--mint); color:var(--on-mint); clip-path:var(--clip-sq56); transition:clip-path .6s var(--spring)} .k-ai .fab svg{width:24px; height:24px} .k-ai .fab:hover,.k-ai .fab:focus-visible{clip-path:var(--clip-ck56)} .k-ai .nv-more{margin-top:auto} .k-ai .bar{padding:0 20px 0 32px} .k-ai .bar-t{left:32px; right:160px; font-size:18px} .k-ai .bar.has-me .bar-t{right:360px} .k-ai .me{padding:0 12px 0 6px} .k-ai .me-l{display:inline; font-weight:500; color:var(--ink2)} .k-ai .sheet{left:auto; right:24px; top:78px; bottom:auto; width:380px; max-height:calc(100vh - 110px); padding:4px 16px 20px; border-radius:28px; transform:translateY(-12px) scale(.96); opacity:0; transform-origin:top right; box-shadow:0 20px 50px -20px rgba(0,0,0,.45); transition:transform .3s var(--emph), opacity .2s, visibility 0s .3s} .k-ai .sheet[data-sheet="topics"],.k-ai .sheet[data-sheet="more"]{left:104px; right:auto; top:auto; bottom:24px; transform-origin:bottom left} .k-ai .sheet[data-sheet="search"]{left:calc(50% + 44px); right:auto; top:72px; width:min(640px, calc(100vw - 160px)); transform:translate(-50%,-12px) scale(.98); transform-origin:top center} .k-ai[data-open="brand"] .sheet[data-sheet="brand"],.k-ai[data-open="topics"] .sheet[data-sheet="topics"],.k-ai[data-open="more"] .sheet[data-sheet="more"]{transform:none; opacity:1; transition:transform .3s var(--emph), opacity .2s} .k-ai[data-open="search"] .sheet[data-sheet="search"]{transform:translate(-50%,0); opacity:1; transition:transform .3s var(--emph), opacity .2s} .k-ai[data-open] .scrim{background:rgba(12,18,14,.18)} .k-ai .sheet-hd{visibility:hidden; margin:8px auto 10px} .k-ai .main{max-width:1188px; margin:0 auto; padding:8px 32px 24px; gap:16px} .k-ai .bento{grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px} .k-ai .w{padding:28px} .k-ai .d7{grid-column:span 7} .k-ai .d5{grid-column:span 5} .k-ai .d6{grid-column:span 6} .k-ai .d3{grid-column:span 3} .k-ai .d4{grid-column:span 4} .k-ai .d12{grid-column:span 12} .k-ai .dr2{grid-row:span 2} .k-ai .hero{padding:32px 36px 32px; border-radius:40px} .k-ai .often{flex-wrap:wrap; margin:16px 0 0; padding:0; overflow:visible} .k-ai .seg button{font-stretch:100%; font-size:14px} .k-ai .h1{font-size:64px; line-height:.98; max-width:9.5em; margin:20px 0 16px} .k-ai .lede{font-size:18px} .k-ai .hero-ck{width:360px; height:360px; right:-150px; top:-150px} .k-ai .hero-sun{width:92px; height:92px; right:150px; top:-36px} .k-ai .hero-clo{width:64px; height:64px; right:40px; top:156px} .k-ai .md-stage{grid-template-columns:150px minmax(0,1fr); gap:22px} .k-ai .apps{gap:22px 8px} .k-ai .app{font-size:13px; font-stretch:96%} .k-ai .app-ic{width:64px; height:64px; clip-path:var(--clip-sq64)} .k-ai .app:hover .app-ic,.k-ai .app:focus-visible .app-ic,.k-ai .app:active .app-ic{clip-path:var(--clip-ck64)} .k-ai .app small{display:block} .k-ai .tool{min-height:0} .k-ai .how ol{grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px} .k-ai .foot{max-width:1124px; margin:32px auto 32px; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; padding:24px 28px} .k-ai .foot nav{justify-content:center} /* статья */ .k-ai .art-head{padding:8px 48px 44px} .k-ai .ah-ck{width:560px; height:560px; right:-120px; top:-190px} .k-ai .ah-gl{width:92px; height:92px; right:130px; top:90px} .k-ai .ah-h1{font-size:50px; max-width:15em; margin:22px 0 22px} .k-ai .tabs{padding:0 32px 0 20px} .k-ai .tabs-in{flex:0 1 auto} .k-ai .tabs-cnt{margin-left:auto} .k-ai .post{grid-template-columns:minmax(0,720px) 340px; gap:48px; justify-content:center; padding:32px 32px 16px} .k-ai .post.solo-col{grid-template-columns:minmax(0,760px)} .k-ai .h2,.k-ai .cs-body h2{font-size:30px} .k-ai .aside{display:flex; flex-direction:column; gap:12px; min-width:0} .k-ai .aside .prog{position:sticky; top:136px; max-height:calc(100vh - 152px); overflow-y:auto; scrollbar-width:thin} .k-ai.admin-bar .aside .prog{top:168px} .k-ai .next{grid-template-columns:repeat(3,minmax(0,1fr))} .k-ai .nx{grid-template-columns:1fr; align-content:space-between; min-height:210px; padding:20px} .k-ai .nx .go{justify-self:end} .k-ai .cs-body .alignleft{float:left; max-width:48%; margin:6px 20px 12px 0} .k-ai .cs-body .alignright{float:right; max-width:48%; margin:6px 0 12px 20px} .k-ai .cs-body h2,.k-ai .cs-body h3,.k-ai .cs-body .cs-table,.k-ai .cs-body pre,.k-ai .cs-body blockquote{clear:both} /* хаб */ .k-ai .hub-head{padding:8px 48px 48px} .k-ai .hh-ck{width:520px; height:520px; right:40px; top:-80px} .k-ai .hh-gl{width:180px; height:180px; right:210px; top:90px} .k-ai .hh-h1{font-size:68px; max-width:9em} .k-ai .hh-h1.is-long{font-size:56px; max-width:11em} .k-ai .hh-p{max-width:52ch; font-size:18px} .k-ai .e404{font-size:150px; right:190px; top:120px; font-stretch:140%} .k-ai .main.hub{grid-template-columns:minmax(0,1fr) 400px; column-gap:40px; align-items:start} .k-ai .hub > *{grid-column:1; margin-bottom:40px} .k-ai .hub > .hub-start{grid-column:1 / -1} .k-ai .hub > .hub-map{grid-column:2; grid-row:1 / span 6} .k-ai .hub.has-start > .hub-map{grid-row:2 / span 6} .k-ai .main.hub.no-side{grid-template-columns:minmax(0,860px); justify-content:center} .k-ai .start{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin:0; padding:0; overflow:visible} .k-ai .sc{min-height:188px} .k-ai .flt{margin:0 0 10px; padding:2px 0; flex-wrap:wrap} .k-ai .clearfy-cookie{left:auto!important; right:24px!important; bottom:24px!important; width:420px} } @media (min-width:1400px){ .k-ai .hh-gl{right:280px} } /* ---------- движение ---------- */ @keyframes ai-rip{0%{transform:scale(0); opacity:.22} 60%{opacity:.14} 100%{transform:scale(1); opacity:0}} @keyframes ai-spin{to{transform:rotate(360deg)}} @keyframes ai-bob{0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-8px) rotate(20deg)}} @keyframes ai-pulse{0%{opacity:.85; transform:scale(.7)} 70%{opacity:0; transform:scale(1.9)} 100%{opacity:0; transform:scale(1.9)}} @keyframes ai-flow{to{stroke-dashoffset:-22}} @keyframes ai-wave{to{-webkit-mask-position:20px 0; mask-position:20px 0}} @keyframes ai-breath{0%,100%{opacity:1} 50%{opacity:var(--lo,.55)}} @keyframes ai-wig{0%{transform:translateX(-50%) rotate(0)} 30%{transform:translateX(-50%) rotate(-14deg)} 60%{transform:translateX(-50%) rotate(10deg)} 100%{transform:translateX(-50%) rotate(0)}} @keyframes ai-rise{from{opacity:0; transform:translateY(14px) scale(.98)} to{opacity:1; transform:none}} @media (prefers-reduced-motion:reduce){ .k-ai *,.k-ai *::before,.k-ai *::after{animation:none!important; transition:none!important} } .ds-rm .k-ai *,.ds-rm .k-ai *::before,.ds-rm .k-ai *::after{animation:none!important; transition:none!important}