:root {
  --bg: #101212;
  --bg-sunken: #090A0A;
  --surface: #171A19;
  --elevated: #232625;
  --overlay: rgba(244, 246, 243, .06);
  --text: #F4F6F3;
  --text-2: rgba(244, 246, 243, .82);
  --muted: #98A29C;
  --placeholder: rgba(244, 246, 243, .46);
  --border: rgba(244, 246, 243, .09);
  --border-subtle: #3F4643;
  --border-strong: #5D6863;
  --accent: #78D6CF;
  --grad: linear-gradient(135deg, #A7EEE3 0%, #3FB5B3 100%);
  --on-accent: #090A0A;
  --accent-soft-weak: rgba(120, 214, 207, .1);
  --chat: #18D26B;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ease: .16s ease;
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 400 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, ul, ol { margin: 0 }
ul, ol { padding: 0; list-style: none }
a { color: inherit; text-decoration: none }
.ic {
  display: inline-block; width: 24px; height: 24px; flex: none; vertical-align: middle;
}
:focus-visible { outline: 2px solid rgba(120, 214, 207, .58); outline-offset: 2px }
[hidden] { display: none !important }

.skip {
  position: absolute; left: 16px; top: -64px; z-index: 3000; padding: 10px 14px;
  border-radius: 8px; background: var(--grad); color: var(--on-accent); font-weight: 700;
}
.skip:focus { top: 16px }


.logo { display: inline-flex; align-items: center; gap: 10px; height: 44px; min-width: 0 }
.logo__img { display: block; flex: none; width: 44px; height: 44px; object-fit: contain }
.logo span {
  font: 800 26px/1 var(--font); letter-spacing: .01em; text-transform: uppercase; white-space: nowrap;
}


.langmenu { position: relative }
.langbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  border-radius: 8px; background: var(--surface); border: 1px solid var(--border-subtle);
  color: var(--text-2); font: 500 14px/20px var(--font); cursor: pointer; list-style: none;
  transition: color var(--ease), border-color var(--ease);
}
.langbtn::-webkit-details-marker { display: none }
.langbtn:hover { color: var(--text); border-color: var(--border-strong) }
.langbtn .ic { width: 14px; height: 14px; opacity: .7; transition: transform var(--ease) }
.langmenu[open] .langbtn .ic { transform: rotate(180deg) }
.langmenu__pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 180px; padding: 6px;
  border-radius: 12px; background: var(--bg); border: 1px solid var(--border-subtle);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
.langmenu__item {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px;
  border-radius: 8px; font: 500 14px/20px var(--font); color: var(--text-2);
}
.langmenu__item:hover { background: var(--overlay); color: var(--text) }
.langmenu__item span { flex: 1 }
.langmenu__item .tick { width: 16px; height: 16px; color: var(--accent) }
.fl {
  display: block; flex: none; width: 20px; height: 14px; border-radius: 2px;
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .16);
}


.land {
  min-height: 100vh; display: flex; flex-direction: column; background: var(--bg);
  scrollbar-gutter: stable both-edges;
}
.land__hd { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 16px 24px }

.land__main { flex: 1; display: flex; flex-direction: column; padding: 24px }
.land__welcome { flex: 1; display: flex; align-items: flex-end }
.land__col { display: flex; flex-direction: column; gap: 24px; width: 100% }
.land__title { font: 700 36px/1.2 var(--font) }
.land__sub { font: 700 14px/20px var(--font); color: var(--placeholder) }

.try {
  position: relative; display: flex; align-items: center; justify-content: center; height: 64px;
  border-radius: 9999px; background: var(--grad); color: var(--on-accent); font: 700 18px/normal var(--font);
  transition: filter var(--ease);
}
.try:hover { filter: brightness(1.05) }
.try .ic { position: absolute; right: 16px }

.os { display: flex; align-items: center; justify-content: space-evenly }
.os > span {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 8px; background: var(--surface); color: #FFF;
}
.os .fab { display: block; width: auto; fill: currentColor }
.os .fab-windows { height: 15px }
.os .fab-linux, .os .fab-apple { height: 20px }
.os .fab-android { height: 18px }
.os .macos { display: flex; flex-direction: column; align-items: center; font-style: normal; line-height: 1 }
.os .macos small { font-size: 6.5px; font-weight: 600; letter-spacing: .02em }
.os .macos b { font-size: 13px; font-weight: 500; letter-spacing: -.03em; line-height: .85 }

.land__ft { background: var(--surface); padding: 16px 24px; border-top: 1px solid var(--border-strong) }
.land__grid { display: grid; row-gap: 8px }
.land__brand { font: 500 12px/normal var(--font); color: var(--muted) }
.land__ctitle { display: none; font: 500 14px/20px var(--font); color: var(--muted) }
.land__links { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap }
.land__links a {
  font: 500 12px/normal var(--font); color: var(--muted); text-decoration: underline; text-underline-offset: 2px;
}
.land__links a:hover { color: var(--text) }
.land__contacts { display: none }
.land__contacts a {
  display: flex; align-items: center; gap: 8px; font: 500 14px/20px var(--font); color: var(--text);
}
.land__contacts a:hover { color: var(--accent) }
.land__contacts .ic { stroke-width: 1 }

@media (min-width: 768px) {
  .land__hd { border-bottom: 1px solid var(--border-strong) }
  .land__welcome { max-width: 520px }
  .land__grid {
    grid-template-columns: max-content max-content;
    grid-template-areas: "brand title" "links contacts";
    justify-content: space-between; align-items: center;
  }
  .land__brand { grid-area: brand }
  .land__ctitle { grid-area: title; display: block }
  .land__links { grid-area: links; justify-content: flex-start; gap: 16px }
  .land__contacts { grid-area: contacts; display: flex; gap: 24px; align-items: center; flex-wrap: wrap }
}
@media (min-width: 769px) and (max-width: 950px) {
  .land__contacts { flex-direction: column; align-items: flex-start; gap: 8px }
}

@media (max-width: 480px) {
  .langbtn__t { display: none }
  .langbtn { padding: 0 10px }
  .land__hd .logo span { font-size: 22px }
  .land__title { font-size: 30px }
}


.doc { min-height: 100vh; display: flex; flex-direction: column; scrollbar-gutter: stable both-edges }
@media (min-width: 768px) { .doc .land__hd { border-bottom: 1px solid var(--border-strong) } }
.doc__main { flex: 1; padding: 32px 24px 64px }
.doc__in { max-width: 760px; margin: 0 auto }
.doc__back {
  display: inline-flex; align-items: center; gap: 4px; margin: 0 0 16px -6px; padding: 6px;
  border-radius: 8px; color: var(--muted); font: 500 14px/20px var(--font); transition: color var(--ease);
}
.doc__back:hover { color: var(--accent) }
.doc__back .ic { width: 20px; height: 20px }
.doc__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px }
.doc__tabs a {
  min-height: 40px; padding: 10px 16px; border-radius: 8px; background: var(--surface);
  font: 500 14px/20px var(--font); color: var(--text-2); transition: color var(--ease);
}
.doc__tabs a:hover { color: var(--accent) }
.doc__tabs a[aria-current] {
  background: var(--accent-soft-weak); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(120, 214, 207, .22);
}
.doc__title { font: 700 30px/1.2 var(--font); letter-spacing: -.01em }
.doc__upd { margin-top: 8px; font: 500 14px/20px var(--font); color: var(--muted) }
.doc__lead { margin-top: 16px; font: 500 16px/26px var(--font); color: var(--text-2) }

.doc__toc { margin: 28px 0 8px; padding: 8px 16px; border-radius: 12px; background: var(--surface) }
.doc__toc summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 40px; cursor: pointer;
  list-style: none; font: 700 14px/20px var(--font);
}
.doc__toc summary::-webkit-details-marker { display: none }
.doc__toc summary .ic { width: 16px; height: 16px; color: var(--muted); transition: transform .15s ease }
.doc__toc:not([open]) summary .ic { transform: rotate(-90deg) }
.doc__toc ol { display: grid; gap: 2px; margin: 4px 0 8px }
@media (min-width: 640px) { .doc__toc ol { grid-template-columns: 1fr 1fr; column-gap: 24px } }
.doc__toc a {
  display: block; padding: 6px 0; font: 500 14px/20px var(--font); color: var(--text-2); transition: color var(--ease);
}
.doc__toc a:hover { color: var(--accent) }

.doc__body h2 {
  padding-top: 28px; margin: 28px 0 12px; border-top: 1px solid var(--border);
  font: 700 19px/1.3 var(--font); scroll-margin-top: 16px;
}
.doc__body h3 { margin: 20px 0 8px; font: 700 16px/1.4 var(--font) }
.doc__body p { margin: 0 0 12px; font: 500 15px/24px var(--font); color: var(--text-2) }
.doc__body ul, .doc__body ol { margin: 0 0 14px; display: grid; gap: 8px }
.doc__body li { position: relative; padding-left: 20px; font: 500 15px/24px var(--font); color: var(--text-2) }
.doc__body ul > li::before {
  content: ""; position: absolute; left: 4px; top: 10px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}
.doc__body ol { counter-reset: li }
.doc__body ol > li { counter-increment: li; padding-left: 28px }
.doc__body ol > li::before { content: counter(li) "."; position: absolute; left: 0; color: var(--accent) }
.doc__body b, .doc__body strong { color: var(--text); font-weight: 700 }
.doc__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px }
.doc__body .nowrap { white-space: nowrap }
.doc__body table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font: 500 14px/20px var(--font) }
.doc__body th, .doc__body td { padding: 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top }
@media (max-width: 767px) {
  .doc__main { padding: 20px 16px 48px }
  .doc__title { font-size: 24px }
}


.chat { position: fixed; right: 20px; bottom: 20px; z-index: 900 }
.chat__fab {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--chat); color: #FFF; box-shadow: 0 12px 30px -10px rgba(24, 210, 107, .55);
  transition: transform .15s ease;
}
.chat__fab:hover { transform: scale(1.05) }
.bubble { width: 25px; height: 21px; border-radius: 11px 11px 11px 4px; background: #FFF }
.chat__fab .ic { width: 30px; height: 30px }
.chat__fab--close { display: none }
.chat:target .chat__fab--open { display: none }
.chat:target .chat__fab--close { display: grid }

.chat__panel {
  position: absolute; right: 0; bottom: 78px; display: none; overflow: auto;
  width: min(400px, calc(100vw - 40px)); max-height: min(640px, calc(100vh - 120px));
  border-radius: 14px; background: #F6F7F9; color: #1D2025; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6);
}
.chat:target .chat__panel { display: block; animation: fade .14s ease-out }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.chat__hello { padding: 40px 20px 22px }
.chat__hello h2 { font: 600 26px/1.2 var(--font); letter-spacing: -.01em }
.chat__hello p { margin-top: 8px; font: 400 17px/1.5 var(--font); color: #4A5160 }
.chat__card {
  margin: 0 16px 16px; padding: 18px 20px; border-radius: 10px; background: #FFF;
  border: 1px solid #E6E8EE; box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.chat__card h3 { font: 600 15px/1.4 var(--font); margin-bottom: 6px }
.online { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; margin-bottom: 6px }
.online p { font: 400 14.5px/1.5 var(--font); color: #6B7280 }
.faces { display: flex; flex: none; margin-top: 8px }
.faces i {
  display: grid; place-items: center; width: 34px; height: 34px; margin-left: -9px; border-radius: 50%;
  border: 2px solid #FFF; font: 600 13px/1 var(--font); font-style: normal; color: #3B3F48;
}
.faces i:nth-child(1) { background: #CFEFE4 }
.faces i:nth-child(2) { background: #E3E0F7 }
.faces i:nth-child(3) { background: #FBE0CC }
.chat__go {
  display: flex; align-items: center; gap: 8px; margin-top: 12px; font: 600 15px/1.4 var(--font); color: #12A956;
}
.chat__go:hover { color: #0C8A45 }
.chat__go .ic { width: 18px; height: 18px }
.chat__go .ic:last-child { width: 16px; height: 16px; margin-left: auto }
.chat__note { margin: 4px 0 0 26px; font: 400 13px/1.45 var(--font); color: #6B7280 }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  * { transition-duration: .01ms !important; animation: none !important }
}