/* Сервердело — оформление. Мобильные в первую очередь, тёмная тема — по настройке системы. */

/* Manrope (SIL OFL 1.1) лежит на нашем сервере: без сторонних CDN */
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/fonts/manrope-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/fonts/manrope-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --fon:#fbfbfd; --karta:#fff; --podlozhka:#f2f4f9; --ramka:#e3e7ef;
  --tekst:#0c111d; --tusklo:#596478; --akcent:#4f46e5; --akcent-tm:#4338ca;
  --akcent-fon:rgba(79,70,229,.08); --akcent-liniya:rgba(79,70,229,.3);
  --zhelto:#7a5200; --zhelt-fon:#fff8e7; --zhelt-ramka:#f3dfa6;
  --zeleno:#0d7a4f; --zelen-fon:#eaf7f0;
  --grad:linear-gradient(120deg,#6366f1 0%,#8b5cf6 48%,#06b6d4 100%);
  --ten:0 1px 2px rgba(16,24,40,.04),0 10px 28px -16px rgba(16,24,40,.14);
  --ten-vys:0 2px 6px rgba(16,24,40,.05),0 28px 56px -24px rgba(49,46,129,.32);
  --shapka-fon:rgba(251,251,253,.8);
  --shirina:1180px; --chtenie:720px;
  --shrift:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --plavno:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --fon:#0a0c12; --karta:#10131b; --podlozhka:#161a25; --ramka:#242a3a;
    --tekst:#e9ecf3; --tusklo:#9aa3b6; --akcent:#a3a9ff; --akcent-tm:#c3c7ff;
    --akcent-fon:rgba(163,169,255,.1); --akcent-liniya:rgba(163,169,255,.38);
    --zhelto:#f1d185; --zhelt-fon:#1d1709; --zhelt-ramka:#4a3b14;
    --zeleno:#5fd3a0; --zelen-fon:#0c2219;
    --ten:0 1px 2px rgba(0,0,0,.3),0 10px 28px -16px rgba(0,0,0,.6);
    --ten-vys:0 2px 6px rgba(0,0,0,.3),0 28px 56px -24px rgba(0,0,0,.8);
    --shapka-fon:rgba(10,12,18,.72);
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--fon); color:var(--tekst);
  font:17px/1.7 var(--shrift);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
::selection{background:rgba(99,102,241,.22)}
.obertka{max-width:var(--shirina); margin:0 auto; padding:0 20px}
a{color:var(--akcent); text-decoration:none; transition:color .2s}
a:hover{color:var(--akcent-tm)}
:focus-visible{outline:2px solid var(--akcent); outline-offset:3px; border-radius:6px}
svg{flex:none}

/* ---------- шапка: стекло, тень при прокрутке, полоса чтения ---------- */
.shapka{position:sticky; top:0; z-index:50; background:var(--shapka-fon);
  -webkit-backdrop-filter:saturate(1.8) blur(16px); backdrop-filter:saturate(1.8) blur(16px);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s}
.shapka.prokrutka{border-bottom-color:var(--ramka); box-shadow:0 12px 32px -22px rgba(16,24,40,.35)}
.shapka .obertka{display:flex; align-items:center; gap:16px; min-height:68px}
.logo{display:inline-flex; align-items:center; gap:11px; font-weight:800; font-size:19px;
  letter-spacing:-.02em; color:var(--tekst); white-space:nowrap}
.logo:hover{color:var(--tekst)}
.logo .znak{display:block; transition:transform .6s var(--plavno);
  filter:drop-shadow(0 6px 14px rgba(99,102,241,.35))}
.logo:hover .znak{transform:rotate(-10deg) scale(1.07)}
.znak .led{animation:led 2.8s ease-in-out infinite}
.znak .led + .led{animation-delay:1.4s}
@keyframes led{0%,100%{opacity:1} 50%{opacity:.2}}

.menyu{display:flex; gap:2px; margin-left:auto}
.menyu a{position:relative; color:var(--tusklo); font-weight:600; font-size:15px;
  padding:8px 13px; border-radius:10px}
.menyu a:hover,.menyu a.tek{color:var(--tekst)}
.menyu a::after{content:""; position:absolute; left:13px; right:13px; bottom:3px; height:2px;
  border-radius:2px; background:var(--grad); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--plavno)}
.menyu a:hover::after,.menyu a.tek::after{transform:scaleX(1)}
.burger{display:none}
.progress{position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--grad);
  transform:scaleX(0); transform-origin:0 50%; pointer-events:none}

/* хлебные крошки */
.kroshki{font-size:13.5px; color:var(--tusklo); padding:18px 0 0}
.kroshki .obertka{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kroshki a{color:var(--tusklo)}
.kroshki a:hover{color:var(--akcent)}
.kroshki i{font-style:normal; opacity:.45; margin:0 5px}
.kroshki span{color:var(--tekst)}

/* ---------- текст ---------- */
main{padding:8px 0 88px}
h1,h2,h3{color:var(--tekst); font-weight:800; letter-spacing:-.025em; text-wrap:balance}
h1{font-size:clamp(30px,4.2vw,44px); line-height:1.12; margin:18px 0 16px}
h2{font-size:clamp(23px,2.6vw,29px); line-height:1.22; margin:56px 0 14px}
h3{font-size:clamp(19px,2vw,21px); line-height:1.32; margin:34px 0 10px; font-weight:700; letter-spacing:-.015em}
p{margin:0 0 16px}
ul,ol{margin:0 0 18px; padding-left:24px}
li{margin:0 0 8px}
li::marker{color:var(--akcent)}
ol > li::marker{font-weight:800; font-size:.92em}
b,strong{font-weight:700}
.lid{font-size:clamp(18px,1.6vw,20px); color:var(--tusklo); line-height:1.6; margin:0 0 22px}

/* ---------- статья ---------- */
.statya{max-width:calc(var(--chtenie) + 40px)}
.vid-statya .kroshki .obertka{max-width:calc(var(--chtenie) + 40px)}
.statya-shapka{padding:12px 0 4px}
.statya-shapka h1{margin-top:16px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:5px 13px; border-radius:999px;
  font-size:13px; font-weight:700; color:var(--akcent); background:var(--akcent-fon);
  transition:background-color .25s, transform .25s var(--plavno)}
.chip::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--grad)}
.chip:hover{background:rgba(99,102,241,.16); transform:translateY(-1px)}
.meta{display:flex; flex-wrap:wrap; gap:8px 22px; font-size:14px; color:var(--tusklo);
  padding:14px 0 0; margin:0 0 30px; border-top:1px solid var(--ramka)}
.meta span{display:inline-flex; align-items:center; gap:7px}
.meta svg{width:17px; height:17px; color:var(--akcent)}

/* оглавление: на телефоне раскрывается, на широком экране висит справа */
.soderzhanie{margin:0 0 34px; border:1px solid var(--ramka); border-radius:16px;
  background:var(--karta); box-shadow:var(--ten)}
.soderzhanie summary{display:flex; align-items:center; gap:10px; padding:14px 18px;
  cursor:pointer; list-style:none; font-weight:700; font-size:15.5px}
.soderzhanie summary::-webkit-details-marker{display:none}
.soderzhanie summary span{font-size:12.5px; font-weight:700; color:var(--akcent);
  background:var(--akcent-fon); padding:1px 9px; border-radius:999px}
.soderzhanie summary::after{content:""; margin-left:auto; width:8px; height:8px;
  border-right:2px solid var(--tusklo); border-bottom:2px solid var(--tusklo);
  transform:translateY(-2px) rotate(45deg); transition:transform .35s var(--plavno)}
.soderzhanie[open] summary::after{transform:translateY(2px) rotate(225deg)}
.oglavlenie{list-style:none; margin:0; padding:0 10px 12px}
.soderzhanie[open] .oglavlenie{animation:vyezd .4s var(--plavno)}
@keyframes vyezd{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.oglavlenie li{margin:0}
.oglavlenie a{position:relative; display:block; padding:7px 10px 7px 18px; border-radius:10px;
  font-size:14.5px; line-height:1.4; color:var(--tusklo); transition:color .2s, background-color .2s}
.oglavlenie a::before{content:""; position:absolute; left:6px; top:9px; bottom:9px; width:2px;
  border-radius:2px; background:var(--grad); transform:scaleY(0); transition:transform .35s var(--plavno)}
.oglavlenie a:hover{color:var(--tekst); background:var(--podlozhka)}
.oglavlenie a.tek{color:var(--tekst); font-weight:700}
.oglavlenie a.tek::before{transform:scaleY(1)}

.telo h2,.telo h3{scroll-margin-top:96px}
.telo h2::before{content:""; display:block; width:34px; height:3px; border-radius:3px;
  background:var(--grad); margin:0 0 16px}
.telo a:not(.pl){text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:var(--akcent-liniya); transition:color .2s, text-decoration-color .2s}
.telo a:not(.pl):hover{text-decoration-color:currentColor}

/* партнёрская ссылка */
.pl{font-weight:700; background:var(--grad) 0 100%/100% 2px no-repeat; padding-bottom:1px;
  transition:background-size .35s var(--plavno), color .2s}
.pl:hover{background-size:100% 3px}

.vrezka{position:relative; overflow:hidden; margin:0 0 20px; padding:16px 18px 16px 22px;
  border-radius:14px; background:var(--podlozhka); color:var(--tusklo); font-size:16px; line-height:1.65}
.vrezka::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--grad)}
.vazhno{position:relative; margin:0 0 20px; padding:16px 18px 16px 54px; border-radius:14px;
  background:var(--zhelt-fon); border:1px solid var(--zhelt-ramka); color:var(--zhelto); font-size:16px}
.vazhno::before{content:"!"; position:absolute; left:16px; top:16px; width:24px; height:24px;
  border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:14px; line-height:1;
  color:#fff; background:linear-gradient(135deg,#f59e0b,#f97316)}

/* таблицы — на телефоне прокручиваются вбок, тень у края подсказывает */
.tabl{overflow-x:auto; margin:0 0 24px; border:1px solid var(--ramka); border-radius:14px;
  -webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right,var(--karta) 30%,transparent) left/40px 100% no-repeat local,
    linear-gradient(to left,var(--karta) 30%,transparent) right/40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.16),transparent) left/14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.16),transparent) right/14px 100% no-repeat scroll,
    var(--karta)}
table{border-collapse:collapse; width:100%; font-size:15px; min-width:460px}
th,td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--ramka); vertical-align:top}
tbody tr:last-child td{border-bottom:0}
th{background:var(--podlozhka); font-weight:700; font-size:14px; white-space:nowrap}
tbody tr{transition:background-color .2s}
tbody tr:hover{background:var(--akcent-fon)}

/* команды: окно терминала и кнопка «Копировать» */
.kod{position:relative; margin:0 0 22px; border-radius:14px; overflow:hidden; background:#0b1020;
  border:1px solid rgba(148,163,255,.14); box-shadow:0 18px 40px -26px rgba(11,16,32,.7)}
.kod-shapka{display:flex; align-items:center; gap:7px; height:36px; padding:0 14px;
  border-bottom:1px solid rgba(148,163,255,.1); background:rgba(255,255,255,.025)}
.kod-shapka i,.terminal-shapka i{width:10px; height:10px; border-radius:50%; background:#ff5f57}
.kod-shapka i:nth-child(2),.terminal-shapka i:nth-child(2){background:#febc2e}
.kod-shapka i:nth-child(3),.terminal-shapka i:nth-child(3){background:#28c840}
pre{margin:0 0 22px; padding:15px 18px; overflow-x:auto; background:#0b1020; color:#e3e7f8;
  border-radius:14px; font-size:14.5px; line-height:1.6; -webkit-overflow-scrolling:touch}
.kod pre{margin:0; border-radius:0; background:transparent}
pre code{font-family:var(--mono)}
.kopir{position:absolute; top:5px; right:8px; height:26px; padding:0 11px; border-radius:8px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:#b9c0e6;
  font:600 12.5px/1 var(--shrift); cursor:pointer; transition:background-color .2s, color .2s, border-color .2s}
.kopir:hover{background:rgba(99,102,241,.35); color:#fff; border-color:rgba(165,180,252,.5)}
.kopir.gotovo{color:#86efac; border-color:rgba(134,239,172,.45); background:rgba(34,197,94,.12)}
:not(pre) > code{font-family:var(--mono); font-size:.88em; padding:2px 6px; border-radius:6px;
  background:var(--podlozhka); border:1px solid var(--ramka); color:var(--tekst)}

.obnovleno{margin-top:40px; padding-top:16px; border-top:1px solid var(--ramka); font-size:14px; color:var(--tusklo)}

/* оглавление сбоку на широком экране */
@media (min-width:1180px){
  .statya{max-width:var(--shirina); display:grid; grid-template-columns:minmax(0,1fr) 270px;
    column-gap:64px; align-items:start}
  .statya > *{grid-column:1; max-width:var(--chtenie)}
  .statya > .soderzhanie{grid-column:2; grid-row:1 / span 3; position:sticky; top:92px; margin:28px 0 0;
    max-height:calc(100vh - 120px); overflow:auto; scrollbar-width:thin; background:transparent;
    border:0; border-left:1px solid var(--ramka); border-radius:0; box-shadow:none}
  .soderzhanie summary{padding:2px 18px 10px; font-size:12px; letter-spacing:.09em;
    text-transform:uppercase; color:var(--tusklo)}
  .vid-statya .kroshki .obertka{max-width:var(--shirina)}
}

/* ---------- разделы ---------- */
.razdel-shapka{max-width:760px; padding:6px 0 4px}
.razdel-shapka .ikonka{margin-top:18px}
.razdel-shapka h1{margin-top:14px}
.ikonka{width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  color:var(--akcent); background:var(--akcent-fon); transition:transform .5s var(--plavno)}
.ikonka svg{width:24px; height:24px}
.spisok{list-style:none; padding:0; margin:30px 0 0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr)); gap:18px}
.spisok li{margin:0}
.spisok .pusto{color:var(--tusklo); font-size:15px}

/* карточки: подъём, свет за курсором, градиентная рамка */
.kartochka,.razdel-k{position:relative; isolation:isolate; overflow:hidden; background:var(--karta);
  border:1px solid var(--ramka); box-shadow:var(--ten);
  transition:transform .5s var(--plavno), box-shadow .5s var(--plavno), border-color .3s}
.kartochka::before,.razdel-k::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(440px circle at var(--mx,50%) var(--my,-20%),rgba(99,102,241,.13),transparent 45%);
  opacity:0; transition:opacity .4s}
.kartochka::after,.razdel-k::after{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:var(--grad); pointer-events:none; opacity:0; transition:opacity .4s;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude}
.kartochka:hover,.razdel-k:hover{transform:translateY(-5px); box-shadow:var(--ten-vys); border-color:transparent}
.kartochka:hover::before,.kartochka:hover::after,.razdel-k:hover::before,.razdel-k:hover::after{opacity:1}

.kartochka{display:flex; flex-direction:column; height:100%; padding:22px 22px 18px; border-radius:18px; color:var(--tekst)}
.kartochka:hover{color:var(--tekst)}
.kartochka b{display:block; font-size:18px; line-height:1.35; margin:0 0 8px; letter-spacing:-.01em}
.kartochka > span{display:block; font-size:14.5px; color:var(--tusklo); line-height:1.55}
.kartochka .metka{font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--akcent); margin:0 0 10px}
.kartochka time{display:flex; justify-content:space-between; align-items:center; margin-top:auto;
  padding-top:16px; font-size:13px; color:var(--tusklo)}
.kartochka time::after{content:"→"; color:var(--akcent); font-size:16px; transition:transform .3s var(--plavno)}
.kartochka:hover time::after{transform:translateX(5px)}

/* ---------- главная ---------- */
.geroj-obertka{padding-top:18px}
.geroj{position:relative; isolation:isolate; overflow:hidden; border-radius:28px; background:#070a14;
  color:#e8ebff; padding:60px 52px; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:48px; align-items:center; box-shadow:0 40px 80px -44px rgba(30,27,75,.6)}
.geroj-fon{position:absolute; inset:0; z-index:-1; pointer-events:none}
.pyatno{position:absolute; border-radius:50%; will-change:transform}
.p1{width:640px; height:640px; left:-220px; top:-300px;
  background:radial-gradient(closest-side,rgba(99,102,241,.75),rgba(99,102,241,0));
  animation:dreif1 18s ease-in-out infinite alternate}
.p2{width:560px; height:560px; right:-180px; top:-160px;
  background:radial-gradient(closest-side,rgba(139,92,246,.6),rgba(139,92,246,0));
  animation:dreif2 22s ease-in-out infinite alternate}
.p3{width:560px; height:560px; left:32%; bottom:-330px;
  background:radial-gradient(closest-side,rgba(6,182,212,.55),rgba(6,182,212,0));
  animation:dreif3 20s ease-in-out infinite alternate}
@keyframes dreif1{to{transform:translate(140px,90px) scale(1.15)}}
@keyframes dreif2{to{transform:translate(-120px,130px) scale(.9)}}
@keyframes dreif3{to{transform:translate(-90px,-110px) scale(1.2)}}
.setka{position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 25%,transparent 80%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 25%,transparent 80%)}

.geroj-tekst > *,.terminal{animation:vsplyv .9s var(--plavno) backwards}
.geroj-tekst > :nth-child(2){animation-delay:.08s}
.geroj-tekst > :nth-child(3){animation-delay:.16s}
.geroj-tekst > :nth-child(4){animation-delay:.24s}
.geroj-tekst > :nth-child(5){animation-delay:.32s}
.terminal{animation-name:vplyv; animation-duration:1.1s; animation-delay:.2s}
@keyframes vsplyv{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
@keyframes vplyv{from{opacity:0; transform:perspective(1200px) translate3d(40px,10px,0) rotateY(-16deg)}
  to{opacity:1; transform:perspective(1200px) rotateY(-6deg) rotateX(3deg)}}

.nadzag{display:inline-flex; align-items:center; gap:10px; margin:0 0 24px; padding:6px 15px 6px 12px;
  border-radius:999px; font-size:13.5px; font-weight:600; color:#c9cdf7;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1)}
.tochka{width:8px; height:8px; border-radius:50%; background:#34d399; animation:pulsar 2.2s infinite}
@keyframes pulsar{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)} 70%{box-shadow:0 0 0 10px rgba(52,211,153,0)}
  100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.geroj h1{color:#fff; font-size:clamp(36px,5.2vw,60px); line-height:1.04; letter-spacing:-.04em; margin:0 0 22px}
.grad{background:linear-gradient(100deg,#a5b4fc 0%,#c4b5fd 25%,#67e8f9 50%,#c4b5fd 75%,#a5b4fc 100%);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; animation:perelyv 9s linear infinite}
@keyframes perelyv{to{background-position:-200% 0}}
.geroj .lid{color:#aab1d6; max-width:560px; margin:0 0 32px}
.knopki{display:flex; flex-wrap:wrap; gap:12px}
.knopka{position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:13px; font-weight:700; font-size:15.5px;
  transition:transform .3s var(--plavno), box-shadow .3s, background-color .3s, border-color .3s}
.knopka span{transition:transform .3s var(--plavno)}
.knopka:hover span{transform:translateX(4px)}
.knopka-gl{color:#fff; background:linear-gradient(120deg,#6366f1,#8b5cf6 55%,#0891b2);
  box-shadow:0 12px 30px -12px rgba(99,102,241,.8)}
.knopka-gl::after{content:""; position:absolute; top:0; bottom:0; left:0; width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-160%) skewX(-20deg); transition:transform .8s var(--plavno)}
.knopka-gl:hover{color:#fff; transform:translateY(-2px); box-shadow:0 18px 38px -14px rgba(99,102,241,.95)}
.knopka-gl:hover::after{transform:translateX(320%) skewX(-20deg)}
.knopka-vt{color:#e8ebff; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15)}
.knopka-vt:hover{color:#fff; background:rgba(255,255,255,.11); transform:translateY(-2px)}
.cifry{display:flex; flex-wrap:wrap; gap:14px 36px; margin:38px 0 0; padding:24px 0 0;
  border-top:1px solid rgba(255,255,255,.1)}
.cifry div{display:flex; flex-direction:column}
.cifry b{font-size:30px; line-height:1.15; font-weight:800; color:#fff; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.cifry span{font-size:13.5px; color:#9097bd}

.terminal{position:relative; border-radius:18px; background:rgba(12,17,34,.82);
  border:1px solid rgba(255,255,255,.1); overflow:hidden;
  box-shadow:0 40px 70px -34px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06);
  transform:perspective(1200px) rotateY(-6deg) rotateX(3deg); transition:transform .7s var(--plavno)}
.terminal-shapka{display:flex; align-items:center; gap:7px; padding:12px 15px;
  border-bottom:1px solid rgba(255,255,255,.07)}
.terminal-shapka span{margin-left:10px; font:500 12.5px var(--mono); color:#7f87ad}
.terminal-telo{padding:18px 18px 24px; font:13.5px/1.8 var(--mono); color:#dbe0f7; overflow-wrap:break-word}
.terminal-telo .s{display:block; min-height:1.8em}
.terminal-telo .pr{color:#7dd3fc; margin-right:8px}
.terminal-telo .v{color:#86efac}
.js .terminal-telo .s{visibility:hidden}
.js .terminal-telo .s.vidna{visibility:visible}
.terminal-telo .ost{visibility:hidden}
.kursor{display:inline-block; width:8px; height:1.15em; margin-right:-8px; vertical-align:-.22em;
  background:#a5b4fc; animation:migaj 1.05s steps(1) infinite}
@keyframes migaj{50%{opacity:0}}

.blok-glavnoj{margin-top:84px}
.zagolovok-bloka{display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin:0 0 28px}
.zagolovok-bloka h2{margin:0; font-size:clamp(26px,3vw,34px)}
.zagolovok-bloka p{margin:0; color:var(--tusklo); max-width:640px}
.razdely{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.razdel-k{padding:28px; border-radius:22px}
.razdel-k:hover .ikonka{transform:rotate(-8deg) scale(1.08)}
.razdel-k .schet{position:absolute; top:28px; right:28px; font-size:13px; font-weight:700;
  color:var(--tusklo); background:var(--podlozhka); padding:4px 11px; border-radius:999px}
.razdel-k h3{margin:18px 0 6px; font-size:23px; font-weight:800}
.razdel-k h3 a{color:var(--tekst)}
.razdel-k h3 a:hover{color:var(--akcent)}
.razdel-k .podpis{color:var(--tusklo); font-size:15px; margin:0 0 16px}
.razdel-k ul{list-style:none; margin:0 0 18px; padding:0; border-top:1px solid var(--ramka)}
.razdel-k li{margin:0; border-bottom:1px solid var(--ramka)}
.razdel-k li a{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0;
  color:var(--tekst); font-weight:600; font-size:15.5px; line-height:1.4}
.razdel-k li a::after{content:"→"; color:var(--akcent); opacity:0; transform:translateX(-8px);
  transition:opacity .3s, transform .3s var(--plavno)}
.razdel-k li a:hover{color:var(--akcent)}
.razdel-k li a:hover::after{opacity:1; transform:none}
.vse{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px}
.vse span{transition:transform .3s var(--plavno)}
.vse:hover span{transform:translateX(5px)}
.svezhie{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.princip{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.princip > div{padding:26px; border-radius:20px; background:var(--podlozhka); border:1px solid var(--ramka)}
.princip svg{width:26px; height:26px; color:var(--akcent)}
.princip b{display:block; font-size:17.5px; margin:14px 0 6px}
.princip p{margin:0; color:var(--tusklo); font-size:15px; line-height:1.6}

/* появление при прокрутке (классы ставит main.js только тем, что ниже экрана) */
.poyav{opacity:0; transform:translateY(26px) scale(.985);
  transition:opacity .8s var(--plavno), transform .9s var(--plavno); transition-delay:var(--z,0ms)}
.poyav.vidno{opacity:1; transform:none}

/* ---------- подвал ---------- */
.podval{position:relative; background:#070a12; color:#a3aac4; padding:64px 0 34px; font-size:14.5px}
.podval::before{content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.7),rgba(6,182,212,.7),transparent)}
.podval a{color:#d5d9f3}
.podval a:hover{color:#fff}
.podval-setka{display:grid; grid-template-columns:1.1fr .7fr 1.5fr; gap:40px}
.podval .logo{color:#fff; margin:0 0 14px}
.podval b{display:block; color:#fff; font-size:14px; margin:4px 0 12px}
.podval-nav a{display:block; padding:4px 0}
.podval p{margin:0 0 10px; line-height:1.6}
.podval-niz{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 20px; margin-top:44px;
  padding-top:22px; border-top:1px solid rgba(255,255,255,.08)}
.podval .melko{font-size:13.5px}

/* ---------- планшет и телефон ---------- */
@media (max-width:980px){
  .geroj{grid-template-columns:1fr; padding:44px 32px; gap:40px}
  .terminal,.terminal:hover{transform:none}
  @keyframes vplyv{from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none}}
  .razdely,.princip{grid-template-columns:1fr}
  .svezhie{grid-template-columns:repeat(2,minmax(0,1fr))}
  .podval-setka{grid-template-columns:1fr 1fr}
  .podval-raskr{grid-column:1 / -1}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .obertka{padding:0 16px}
  .statya,.vid-statya .kroshki .obertka{max-width:none}
  .shapka .obertka{flex-wrap:wrap; gap:0 12px; min-height:60px; padding-top:9px; padding-bottom:9px}
  .menyu{width:100%; margin:0; flex-wrap:wrap}
  .menyu a{padding:6px 10px; font-size:14.5px}
  .menyu a:first-child{padding-left:0}
  .menyu a:first-child::after{left:0}
  .js .burger{display:inline-flex; align-items:center; justify-content:center; margin-left:auto;
    width:42px; height:42px; padding:0; border:1px solid var(--ramka); border-radius:12px;
    background:var(--karta); color:var(--tekst); cursor:pointer}
  .burger i,.burger i::before,.burger i::after{display:block; width:18px; height:2px; border-radius:2px; background:currentColor}
  .burger i{position:relative; transition:background-color .2s}
  .burger i::before,.burger i::after{content:""; position:absolute; left:0; transition:transform .4s var(--plavno)}
  .burger i::before{transform:translateY(-6px)}
  .burger i::after{transform:translateY(6px)}
  .otkryto .burger i{background:transparent}
  .otkryto .burger i::before{transform:rotate(45deg)}
  .otkryto .burger i::after{transform:rotate(-45deg)}
  .js .menyu{position:absolute; left:0; right:0; top:100%; flex-direction:column; gap:0;
    padding:6px 16px 16px; background:var(--fon); border-bottom:1px solid var(--ramka);
    box-shadow:0 24px 40px -24px rgba(16,24,40,.35);
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .3s, transform .4s var(--plavno), visibility 0s .4s}
  .js .otkryto .menyu{opacity:1; visibility:visible; transform:none;
    transition:opacity .3s, transform .4s var(--plavno), visibility 0s}
  .js .menyu a{font-size:18px; padding:13px 2px; border-radius:0; border-bottom:1px solid var(--ramka)}
  .js .menyu a:last-child{border-bottom:0}
  .js .menyu a::after{display:none}
  .js .menyu a.tek{color:var(--akcent)}
  h2{margin-top:46px}
  .geroj-obertka{padding-top:12px}
  .geroj{padding:34px 22px 26px; border-radius:22px; gap:32px}
  .knopki{flex-direction:column}
  .knopka{justify-content:center}
  .terminal-telo{font-size:12.5px; padding:16px 14px 20px}
  .cifry{gap:14px 26px}
  .cifry b{font-size:26px}
  .blok-glavnoj{margin-top:60px}
  .razdel-k{padding:22px}
  .razdel-k .schet{top:22px; right:22px}
  .svezhie,.podval-setka{grid-template-columns:1fr}
  th{white-space:normal}
  table{min-width:0; font-size:14px}
  th,td{padding:9px 6px; -webkit-hyphens:auto; hyphens:auto}
  td code,th code{overflow-wrap:anywhere}
  .vazhno{padding-left:48px}
  .vazhno::before{left:13px}
}

/* кто просил меньше движения — без анимаций */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; transition-delay:0s !important}
  .poyav{opacity:1; transform:none}
}

@media print{
  .shapka,.podval,.soderzhanie,.kopir,.burger,.geroj-fon,.terminal{display:none}
  .poyav{opacity:1 !important; transform:none !important}
  .geroj{background:none}
  .geroj,.geroj h1,.geroj .lid,.cifry b{color:#000}
}