.page{padding-block:48px 96px}
.page__head{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-bottom:36px;
  border-bottom:1px solid var(--border);
}
.page__back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:var(--text-muted);
  margin-bottom:24px;
}
.page__back:hover{color:var(--text)}
.page__h{font-size:clamp(34px,5vw,52px);margin-bottom:14px}
.page__lead{color:var(--text-muted);font-size:18px;max-width:62ch;margin-bottom:14px}
.page__upd{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-dim);
  padding:5px 12px;
  border:1px solid var(--border);
  border-radius:999px;
}

/* быстрый старт */
.quick{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:40px;
}
.quick a{
  display:block;
  padding:22px 24px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--surface);
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.quick a:hover{border-color:var(--accent);transform:translateY(-2px)}
.quick b{
  display:block;
  font-family:var(--font-head);
  font-weight:600;
  font-size:16px;
  color:var(--text);
  margin-bottom:6px;
}
.quick span{font-size:14px;color:var(--text-muted);line-height:1.5}
.quick__n{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  margin-bottom:14px;
  border-radius:8px;
  background:rgba(139,92,246,.14);
  border:1px solid rgba(139,92,246,.28);
  color:var(--accent-hi);
  font-family:var(--font-mono);
  font-size:12px;
}

.doc{
  display:grid;
  grid-template-columns:232px minmax(0,1fr);
  gap:64px;
  margin-top:56px;
  align-items:start;
}

/* оглавление */
.doc__nav{position:sticky;top:calc(var(--header-h) + 28px)}
.doc__nav h2{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:16px;
}
.doc__nav ul{display:flex;flex-direction:column;gap:2px}
.doc__nav a{
  display:block;
  padding:8px 14px;
  border-radius:9px;
  font-size:14px;
  color:var(--text-muted);
  border-left:2px solid transparent;
  transition:color .18s var(--ease), background .18s var(--ease);
}
.doc__nav a:hover{color:var(--text);background:var(--surface)}
.doc__nav a.is-here{
  color:var(--accent-hi);
  background:rgba(139,92,246,.08);
  border-left-color:var(--accent);
}

/* разделы */
.doc__body section{
  padding:32px 34px;
  margin-bottom:20px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:var(--surface);
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.doc__body h2{
  font-family:var(--font-head);
  font-size:23px;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
}
.doc__body h3{
  font-family:var(--font-head);
  font-size:16px;
  margin:26px 0 10px;
  color:var(--text);
}
.doc__body h3:first-of-type{margin-top:0}
.doc__body p,.doc__body li{color:var(--text-muted);line-height:1.7}
.doc__body p{margin-bottom:14px}
.doc__body p:last-child{margin-bottom:0}
.doc__body ol,.doc__body ul{margin:0 0 18px;padding-left:0}
.doc__body ol{counter-reset:step;display:flex;flex-direction:column;gap:14px}
.doc__body ol li{counter-increment:step;position:relative;padding-left:44px}
.doc__body ol li::before{
  content:counter(step);
  position:absolute;
  left:0;
  top:-1px;
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:rgba(139,92,246,.14);
  border:1px solid rgba(139,92,246,.28);
  color:var(--accent-hi);
  font-family:var(--font-mono);
  font-size:12px;
}
.doc__body ul:not(.plain){display:flex;flex-direction:column;gap:10px}
.doc__body ul:not(.plain) li{position:relative;padding-left:20px}
.doc__body ul:not(.plain) li::before{
  content:"";
  position:absolute;
  left:2px;
  top:11px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
}
.doc__body a{color:var(--accent-hi);text-decoration:underline;text-underline-offset:3px}
.doc__body a.btn{color:#fff;text-decoration:none}
.doc__body strong{color:var(--text);font-weight:600}
.doc__body code{
  font-family:var(--font-mono);
  font-size:13px;
  padding:2px 7px;
  border-radius:6px;
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text);
}

.note{
  padding:16px 20px;
  border-radius:var(--radius);
  background:var(--surface-2);
  border:1px solid var(--border);
  border-left:2px solid var(--accent);
  margin:18px 0 0;
}
.note p:last-child{margin-bottom:0}

.spec{
  width:100%;
  border-collapse:collapse;
  margin-bottom:4px;
  font-size:15px;
}
.spec th,.spec td{
  text-align:left;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  color:var(--text-muted);
}
.spec th{
  width:42%;
  color:var(--text);
  font-weight:500;
}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}

/* блок помощи в конце */
.ask{
  margin-top:24px;
  padding:30px 34px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:linear-gradient(180deg,#150F26,#0D0918);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.ask b{display:block;font-family:var(--font-head);font-size:18px;margin-bottom:6px}
.ask p{color:var(--text-muted);font-size:15px;margin:0}

@media (max-width:600px){
  .spec tr{
    display:block;
    padding:14px 0;
    border-bottom:1px solid var(--border);
  }
  .spec tr:last-child{border-bottom:0}
  .spec th,.spec td{display:block;width:auto;padding:0;border-bottom:0}
  .spec th{margin-bottom:6px}
}

@media (max-width:900px){
  .doc{grid-template-columns:1fr;gap:28px;margin-top:32px}
  .doc__nav{position:static}
  .doc__nav ul{flex-direction:row;flex-wrap:wrap;gap:8px}
  .doc__nav a{border:1px solid var(--border);border-left-width:1px;background:var(--surface)}
  .quick{grid-template-columns:1fr;gap:12px}
  .doc__body section{padding:24px 22px}
  .ask{padding:24px 22px}
  .page{padding-block:32px 64px}
}