@font-face{font-family:"Plex";src:url(fonts/plex-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url(fonts/plex-sans-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex";src:url(fonts/plex-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex";src:url(fonts/plex-sans-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"PlexMono";src:url(fonts/plex-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}
:root{
  --navy:#0E1129;--navy2:#151938;--sky:#5AB0F0;--blue:#1F6DB8;--blue2:#185a9a;--green:#3FCB8E;--amber:#F2B84B;--red:#d9534f;
  --ink:#141a2e;--ink2:#4c5675;--muted:#7b839e;--line:#e3e7f0;--bg:#fff;--tint:#f3f6fb;--tint2:#eaf1fb;
  --font:"Plex",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:"PlexMono",ui-monospace,Menlo,monospace;
  --top:60px;--side:272px;--toc:220px;--r:12px;
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--top) + 16px)}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:var(--blue)} a:hover{color:var(--blue2)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{line-height:1.2;letter-spacing:-.015em;margin:0 0 12px;color:var(--ink)}
h1{font-size:clamp(28px,3.4vw,38px);font-weight:700}
h2{font-size:22px;font-weight:600;margin-top:34px}
h3{font-size:17px;font-weight:600;margin-top:24px}
p{margin:0 0 14px}
.muted{color:var(--muted)} .small{font-size:13px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;text-decoration:none;font-size:15px;cursor:pointer;font-family:inherit;line-height:1.2}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff} .btn.primary:hover{background:var(--blue2);color:#fff}
.btn.small{padding:7px 14px;font-size:14px}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}

/* top bar */
.top{position:sticky;top:0;z-index:50;background:var(--navy);color:#fff;height:var(--top);border-bottom:1px solid #22284f}
.topin{max-width:1440px;margin:0 auto;height:100%;display:flex;align-items:center;gap:18px;padding:0 20px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;font-size:18px;letter-spacing:.02em;white-space:nowrap}
.brand em{font-style:normal;font-weight:400;color:#aab3d9;font-size:15px;padding-left:10px;border-left:1px solid #343b6b}
.search{position:relative;flex:1;max-width:560px}
.search input{width:100%;height:38px;border-radius:10px;border:1px solid #343b6b;background:#1a1f45;color:#fff;padding:0 14px 0 40px;font:inherit;font-size:15px;outline:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab3d9' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center;background-size:18px}
.search input::placeholder{color:#8e97c4} .search input:focus{border-color:var(--sky)}
.results{position:absolute;left:0;right:0;top:44px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 50px rgba(10,14,40,.25);max-height:70vh;overflow:auto;padding:6px;z-index:60}
.results a{display:block;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--ink)} .results a:hover,.results a.sel{background:var(--tint2)}
.results a strong{display:block;font-size:15px} .results a span{display:block;font-size:13px;color:var(--ink2)} .results a em{font-style:normal;background:#fff3c4;border-radius:3px}
.results .cat{font-family:var(--mono);font-size:11px;color:var(--blue);text-transform:uppercase;letter-spacing:.08em}
.results .none{padding:12px;color:var(--muted);font-size:14px}
.toplinks{margin-left:auto;display:flex;align-items:center;gap:18px;white-space:nowrap}
.toplinks a{color:#d9def5;text-decoration:none;font-size:15px;font-weight:500} .toplinks a:hover{color:#fff}
.toplinks .btn{color:#fff;background:transparent;border-color:#4a5290} .toplinks .btn:hover{border-color:var(--sky)}
.toplinks .lang{font-family:var(--mono);font-size:13px;border:1px solid #343b6b;border-radius:6px;padding:4px 8px}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;flex-direction:column;gap:4px}
.burger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px}

/* shell */
.shell{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:calc(100vh - var(--top))}
.side{border-right:1px solid var(--line);background:#fafbfe}
.sidein{position:sticky;top:var(--top);max-height:calc(100vh - var(--top));overflow:auto;padding:22px 16px 30px}
.navhome{display:block;font-weight:600;text-decoration:none;color:var(--ink);padding:8px 10px;border-radius:8px}
.navhome.on,.side a.on{background:var(--tint2);color:var(--blue)}
.navcat{margin-top:16px}
.navhead{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 10px;margin-bottom:6px}
.side ul{list-style:none;margin:0;padding:0}
.side li a{display:block;padding:7px 10px;border-radius:8px;color:var(--ink2);text-decoration:none;font-size:14.5px;line-height:1.35}
.side li a:hover{background:var(--tint);color:var(--ink)}
.sidecontact{margin-top:26px;padding-top:16px;border-top:1px solid var(--line)}
.sidecontact a{display:block;padding:0 10px;font-weight:600;text-decoration:none} .sidecontact .muted{display:block;padding:0 10px;font-size:13px}

.content{padding:28px 48px 70px;display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-content:start}
.k-article .content{grid-template-columns:minmax(0,1fr) var(--toc)}
.crumbs{grid-column:1/-1;font-size:13.5px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.crumbs a{color:var(--muted);text-decoration:none} .crumbs a:hover{color:var(--blue)} .crumbs strong{color:var(--ink);font-weight:500}

/* home */
.hero{max-width:820px;padding:18px 0 10px}
.hero.small{padding-bottom:0}
.lead{font-size:18px;color:var(--ink2)}
.bigsearch{position:relative;display:flex;gap:10px;margin-top:18px;max-width:640px}
.bigsearch input{flex:1;height:48px;border-radius:12px;border:1px solid var(--line);padding:0 16px;font:inherit;font-size:16px;outline:none;background:#fff}
.bigsearch input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,109,184,.15)}
.bigsearch .results{top:54px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px}
.tile{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 18px;text-decoration:none;color:var(--ink);transition:.2s}
a.tile:hover{border-color:var(--blue);box-shadow:0 10px 30px rgba(20,28,70,.08);transform:translateY(-2px)}
.tileic{width:40px;height:40px;border-radius:10px;background:var(--tint2);color:var(--blue);display:grid;place-items:center;margin-bottom:14px}
.tile h2{font-size:18px;margin:0 0 8px}
.tile p{color:var(--ink2);font-size:15px;margin:0 0 8px}
.tile ul{list-style:none;margin:0;padding:0} .tile li{padding:5px 0;border-top:1px solid var(--tint)} .tile li a{text-decoration:none;color:var(--ink2);font-size:15px} .tile li a:hover{color:var(--blue)}
.tile .more{font-weight:600;color:var(--blue);font-size:15px}

/* article */
.art{max-width:800px;min-width:0}
.art header{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.artbody{font-size:16.5px}
.artbody h2{padding-top:6px} .artbody h2 .anchor,.artbody h3 .anchor{opacity:0;margin-left:8px;color:var(--muted);text-decoration:none;font-weight:400}
.artbody h2:hover .anchor,.artbody h3:hover .anchor{opacity:1}
.artbody ul,.artbody ol{padding-left:24px;margin:0 0 16px} .artbody li{margin-bottom:6px}
.artbody ol li::marker{font-weight:600;color:var(--blue)}
.artbody .note{background:var(--tint2);border-left:3px solid var(--blue);padding:12px 16px;border-radius:8px;margin:0 0 16px;color:var(--ink)}
.artbody figure{margin:18px 0} .artbody figure img{border-radius:10px;border:1px solid var(--line)}
.artbody code{font-family:var(--mono);font-size:14px;background:var(--tint);padding:1px 6px;border-radius:5px}
.artbody pre{background:var(--navy);color:#e7ebff;padding:14px 16px;border-radius:10px;overflow:auto;font-family:var(--mono);font-size:13.5px}
.tbl{overflow:auto;margin:0 0 18px;border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)} th{background:var(--tint);font-weight:600} tr:last-child td{border-bottom:0}
.specs th{width:38%;background:#fff;color:var(--ink2);font-weight:500}
.artfoot{margin-top:40px;padding-top:18px;border-top:1px solid var(--line)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.pn a{border:1px solid var(--line);border-radius:10px;padding:12px 14px;text-decoration:none;color:var(--ink);font-weight:600;font-size:15px}
.pn a small{display:block;font-weight:400;color:var(--muted);font-size:12px} .pn .next{grid-column:2;text-align:right} .pn a:hover{border-color:var(--blue)}
.toc{position:sticky;top:calc(var(--top) + 28px);align-self:start;font-size:13.5px}
.toc ul{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.toc li a{display:block;padding:5px 12px;color:var(--ink2);text-decoration:none;margin-left:-2px;border-left:2px solid transparent}
.toc li.l3 a{padding-left:24px;font-size:13px}
.toc li a:hover,.toc li a.on{color:var(--blue);border-left-color:var(--blue)}

/* devices */
.grouph{margin-top:30px}
.devgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.devgrid.small{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.dev{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;text-decoration:none;color:var(--ink);transition:.2s}
.dev:hover{border-color:var(--blue);box-shadow:0 10px 30px rgba(20,28,70,.08)}
.dev img{width:96px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#fff;flex:none}
.dev h3{margin:0 0 2px;font-size:16px} .dev .use{font-family:var(--mono);font-size:12px;color:var(--blue);margin:0 0 6px} .dev p{margin:0;font-size:14px;color:var(--ink2)}
.devhead{display:flex;gap:26px;align-items:flex-start;margin:8px 0 10px}
.devhead img{width:236px;height:176px;object-fit:cover;border-radius:12px;border:1px solid var(--line);flex:none}
.devhead p{font-size:17px;color:var(--ink2)}
p.note{background:var(--tint);padding:12px 16px;border-radius:10px;margin-top:30px;font-size:15px}

/* support */
.supform{max-width:680px;margin-top:20px}
.supform label{display:block;font-weight:500;font-size:14px;margin-bottom:12px}
.supform input,.supform textarea{display:block;width:100%;margin-top:5px;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font:inherit;font-size:16px;background:#fff}
.supform input:focus,.supform textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,109,184,.15)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.frow{display:flex;align-items:center;gap:16px;margin-top:6px}
.alert{background:#fff0ef;border:1px solid #f4c9c6;color:#8a2a26;padding:12px 16px;border-radius:10px;max-width:680px}

/* footer */
.foot{border-top:1px solid var(--line);background:var(--tint);margin-top:40px}
.footin{max-width:1440px;margin:0 auto;padding:26px 20px;display:grid;gap:10px;font-size:14px;color:var(--ink2)}
.footlinks{display:flex;gap:18px;flex-wrap:wrap} .footlinks a{text-decoration:none;font-weight:500}

@media (max-width:1100px){ .k-article .content{grid-template-columns:1fr} .toc{display:none} .tiles{grid-template-columns:1fr 1fr} .content{padding:24px 28px 60px} }
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:var(--top) 0 0 0;background:#fff;z-index:40;transform:translateX(-100%);transition:.25s;border-right:0}
  .side.open{transform:none} .sidein{max-height:none;height:100%}
  .burger{display:flex} .toplinks{gap:10px} .toplinks .site,.toplinks a:not(.btn):not(.lang){display:none} .brand em{display:none}
  .search{max-width:none}
  .tiles{grid-template-columns:1fr} .content{padding:18px 16px 50px} .fgrid{grid-template-columns:1fr}
  .devhead{flex-direction:column} .devhead img{width:100%;height:auto;max-width:360px} .pn{grid-template-columns:1fr} .pn .next{grid-column:1;text-align:left}
}

.stores{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px}
.store{display:inline-flex;align-items:center;gap:9px;background:var(--navy);color:#fff;border:1px solid var(--navy);border-radius:11px;padding:8px 15px 8px 11px;text-decoration:none;line-height:1.1;font-weight:600;font-size:16px;min-width:160px}
.store small{display:block;font-weight:400;font-size:11px;color:#c6cbe3}
a.store:hover{background:#1D2247}
.store.soon{background:transparent;color:var(--ink);border:1px dashed #b8c0d8}
.store.soon small{color:var(--ink2)}
.stores.small{margin:0}.stores.small .store{min-width:0;font-size:13.5px;padding:5px 11px 5px 8px}
.footapp{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-weight:600;color:var(--ink)}
