/* Общие токены и chrome (header/footer/кнопки) — сознательно продублированы
   из index.html, а не вынесены туда общим файлом: не хотелось трогать уже
   работающий и провизуально проверенный index.html ради рефакторинга,
   не relevant текущей задаче (см. комментарий в конце файла). */
:root{
  --bg:#0a0f0d; --bg2:#0f1613; --surface:#131c18; --surface2:#182119;
  --neon:#39ff9d; --neon-dim:rgba(57,255,157,.14); --neon-glow:rgba(57,255,157,.35);
  --text:#eaf5ef; --dim:#8ea69b; --border:rgba(57,255,157,.16);
  --white:#ffffff;
  --font-h:'Montserrat',sans-serif; --font-b:'Inter',sans-serif;
}
/* Те же 2 альтернативные темы, что на главной — чтобы выбор темы,
   сохранённый в localStorage (2up_theme), не "сбрасывался" визуально при
   переходе в блог. Самого переключателя (3 кружка) тут нет — только
   уважаем уже сделанный на главной выбор. */
:root[data-theme="purple"]{
  --bg:#120f1e; --bg2:#1a1730; --surface:#1c1830; --surface2:#241d3d;
  --neon:#7d5fe0; --neon-dim:rgba(125,95,224,.14); --neon-glow:rgba(125,95,224,.35);
  --text:#eceaf4; --dim:#a49dbd; --border:rgba(125,95,224,.18);
}
:root[data-theme="orange"]{
  --bg:#0e1015; --bg2:#161920; --surface:#161920; --surface2:#1e222b;
  --neon:#ff9d42; --neon-dim:rgba(255,157,66,.14); --neon-glow:rgba(255,157,66,.35);
  --text:#eef1f6; --dim:#8993a4; --border:rgba(255,157,66,.18);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--text); font-family:var(--font-b);
  line-height:1.6; overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
h1,h2,h3{font-family:var(--font-h); letter-spacing:-0.01em;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; color:var(--neon);
  background:var(--neon-dim); border:1px solid var(--border); border-radius:999px;
  padding:6px 14px; margin-bottom:20px;
}
.eyebrow::before{content:'●'; font-size:8px;}

.bg-glow{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 20% -10%, var(--neon-glow), transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 10%, rgba(57,157,255,.12), transparent 60%),
    linear-gradient(var(--bg), var(--bg));
  opacity:.5;
}
.bg-grid{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.35;
  background-image:
    linear-gradient(rgba(57,255,157,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,255,157,.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 75%);
}

header{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
  background:rgba(10,15,13,.72); border-bottom:1px solid var(--border);
}
header .wrap{display:flex; align-items:center; justify-content:space-between; height:74px;}
.logo{font-family:var(--font-h); font-weight:800; font-size:22px; display:flex; align-items:center; gap:8px;}
.logo span{color:var(--neon);}
nav{display:flex; align-items:center; gap:32px;}
nav a{font-size:14px; font-weight:500; color:var(--dim); transition:color .2s;}
nav a:hover, nav a.active{color:var(--neon);}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-b); font-weight:600; font-size:14px; cursor:pointer;
  border-radius:10px; padding:13px 24px; border:1px solid transparent;
  transition:transform .15s, box-shadow .2s, background .2s, border-color .2s;
}
.btn:active{transform:scale(.97);}
.btn-neon{background:var(--neon); color:#06130c;}
.btn-neon:hover{box-shadow:0 6px 28px -6px var(--neon-glow); transform:translateY(-1px);}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border);}
.btn-ghost:hover{border-color:var(--neon); color:var(--neon);}
.btn-sm{padding:9px 16px; font-size:13px;}
.nav-cta{display:flex; gap:12px;}
.burger{display:none; background:none; border:none; color:var(--text); font-size:24px; cursor:pointer;}
.soon-badge{font-size:10px; background:var(--neon-dim); color:var(--neon); padding:2px 8px; border-radius:6px; margin-left:6px;}

.sec-head{max-width:640px; margin:0 0 56px;}
.sec-head.center{margin:0 auto 56px; text-align:center;}
.sec-head h2{font-size:clamp(26px,3.4vw,38px); font-weight:800; margin-bottom:14px;}
.sec-head p{color:var(--dim); font-size:15px;}

footer{border-top:1px solid var(--border); padding:56px 0 32px; background:var(--bg2);}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px;}
.foot-col h4{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim); margin-bottom:16px;}
.foot-col a, .foot-col p{display:block; font-size:13.5px; color:var(--dim); margin-bottom:10px;}
.foot-col a:hover{color:var(--neon);}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top:24px; border-top:1px solid var(--border); font-size:12.5px; color:var(--dim);}

/* ══════════ блог: листинг ══════════ */
.art-wrap{padding:72px 0 96px;}
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.blog-card{
  background:var(--surface2); border:1px solid var(--border); border-radius:16px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .12s ease-out, box-shadow .25s ease, border-color .2s;
  box-shadow:0 10px 22px -18px rgba(0,0,0,.55);
  will-change:transform;
}
.blog-card:hover{
  border-color:var(--neon);
  box-shadow:0 26px 46px -20px rgba(0,0,0,.65), 0 0 26px -6px var(--neon-glow);
}
/* ── "закреплённая" фича (Команды cmd) — полноширинный баннер НАД
   сеткой статей, а не просто первая карточка среди равных (прямой
   запрос пользователя 2026-09-11: "чтобы оно всегда было первым на
   виду"). ── */
.pinned-feature{
  display:flex; align-items:center; gap:22px; margin-bottom:36px;
  background:linear-gradient(120deg, var(--neon-dim), var(--surface2) 60%);
  border:1px solid var(--neon); border-radius:16px; padding:26px 28px;
  transition:transform .12s ease-out, box-shadow .25s ease;
  box-shadow:0 10px 30px -16px var(--neon-glow);
  will-change:transform;
}
.pinned-feature:hover{box-shadow:0 20px 46px -18px rgba(0,0,0,.6), 0 0 34px -6px var(--neon-glow);}
.pinned-ico{
  flex-shrink:0; width:64px; height:64px; border-radius:14px; background:var(--neon-dim);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:30px;
  overflow:hidden;
}
.pinned-ico img{width:100%; height:100%; object-fit:cover;}
.pinned-body{flex:1; min-width:0;}
.pinned-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--neon); margin-bottom:8px;
}
.pinned-body h3{font-size:19px; margin-bottom:6px;}
.pinned-body p{font-size:13.5px; color:var(--dim);}
.pinned-arrow{flex-shrink:0; font-size:13.5px; font-weight:600; color:var(--neon); white-space:nowrap;}
@media (max-width:860px){
  .pinned-feature{flex-wrap:wrap;}
  .pinned-arrow{width:100%;}
}

.bc-cover{aspect-ratio:16/10; overflow:hidden; background:var(--bg2);}
.bc-cover img{width:100%; height:100%; object-fit:cover;}
.bc-noimg{width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:40px;}
.bc-body{padding:20px 22px 24px; flex:1; display:flex; flex-direction:column;}
.bc-icon{font-size:20px; margin-bottom:10px;}
.bc-body h3{font-size:16px; margin-bottom:8px; line-height:1.35;}
.bc-body p{font-size:13px; color:var(--dim); flex:1;}

/* ══════════ блог: страница статьи ══════════ */
.art-narrow{max-width:760px;}
.art-back{display:inline-block; font-size:13.5px; color:var(--dim); margin-bottom:24px;}
.art-back:hover{color:var(--neon);}
.art-narrow h1{font-size:clamp(26px,4vw,36px); font-weight:800; line-height:1.25; margin-bottom:10px;}
.art-date{font-size:12.5px; color:var(--dim); margin-bottom:32px;}
.art-body{font-size:15.5px; color:var(--text);}
.art-body p{margin-bottom:18px; color:#cfe0d8;}
.art-body h3{font-size:20px; font-weight:700; margin:40px 0 16px; color:var(--text);}
.art-body h3:first-child{margin-top:0;}
.art-body strong{color:var(--neon); font-weight:600;}
.art-list{list-style:none; display:flex; flex-direction:column; gap:10px; margin:0 0 22px;}
.art-list li{
  position:relative; padding:12px 16px 12px 42px; background:var(--surface2);
  border:1px solid var(--border); border-radius:10px; font-size:14.5px; color:#cfe0d8;
  counter-increment: art-step;
}
.art-list{counter-reset: art-step;}
.art-list li::before{
  content:counter(art-step); position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; border-radius:50%; background:var(--neon-dim); color:var(--neon);
  font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border);
}
.art-img{
  margin:18px 0 26px; border-radius:12px; overflow:hidden; border:1px solid var(--border);
  background:var(--surface2);
}
.art-img img{width:100%; height:auto;}
.art-cta{
  margin-top:56px; padding:28px; border-radius:16px; background:var(--surface2);
  border:1px solid var(--border); text-align:center;
}
.art-cta h3{font-size:18px; margin-bottom:8px;}
.art-cta p{color:var(--dim); font-size:13.5px; margin-bottom:20px;}

/* ── те же "живые" эффекты, что на главной (см. index.html) — прямой
   запрос пользователя 2026-09-10 "примени то же самое на страницах
   блога" + "все блоки так сделай". Два независимых эффекта:
   1) объёмный наклон вслед за курсором — на карточках/боксах;
   2) лёгкое translate-смещение — на логотипе, картинках и словах
      заголовков (см. wrapWords в blog.js). */
.art-cta, .art-list li{
  box-shadow:0 10px 22px -18px rgba(0,0,0,.55);
  transition:transform .12s ease-out, box-shadow .25s ease;
  will-change:transform;
}
/* ── плавное появление при прокрутке (см. index.html) — тот же приём,
   тот же JS-хелпер, продублирован в blog.js. ── */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,.8,.24,1), transform .7s cubic-bezier(.16,.8,.24,1);}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none !important;}
}

.logo, .word-shift, .bc-cover img, .art-img img{
  transition:transform .18s ease-out;
  will-change:transform;
}
.word-shift{display:inline-block;}

/* ══════════ "Команды cmd" — отдельная фича (readdme.docx), не обычная
   статья: таблица команд с поиском и копированием в буфер, а не сплошной
   текст. Прямой запрос пользователя 2026-09-11 "сделай как отдельную
   фичу с командами". ══════════ */
.cmd-search{
  width:100%; max-width:440px; margin:0 auto 44px; display:block;
  background:var(--surface2); border:1px solid var(--border); border-radius:10px;
  padding:13px 16px; color:var(--text); font-family:var(--font-b); font-size:14px; outline:none;
}
.cmd-search:focus{border-color:var(--neon);}
.cmd-cat{margin-bottom:36px;}
.cmd-cat h3{font-size:16.5px; margin-bottom:14px;}
.cmd-row{
  display:flex; align-items:center; gap:14px; padding:10px 14px; border-radius:8px;
  border:1px solid var(--border); background:var(--surface2); margin-bottom:8px;
}
.cmd-row code{
  font-family:ui-monospace,'JetBrains Mono',monospace; font-size:12.5px; font-weight:700;
  color:var(--neon); background:var(--neon-dim); padding:3px 9px; border-radius:6px;
  flex-shrink:0; min-width:118px; text-align:center;
}
.cmd-row span{font-size:13.5px; color:var(--dim); flex:1;}
.cmd-copy{
  flex-shrink:0; background:transparent; border:1px solid var(--border); border-radius:6px;
  color:var(--dim); cursor:pointer; font-size:11.5px; padding:5px 9px; transition:all .15s; white-space:nowrap;
}
.cmd-copy:hover{border-color:var(--neon); color:var(--neon);}
.cmd-copy.copied{border-color:var(--neon); color:var(--neon); background:var(--neon-dim);}
.cmd-row.cmd-hidden{display:none;}

.cmd-examples{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:20px;}
.cmd-ex-group h4{font-size:13px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px;}
.cmd-ex-group .cmd-row span{font-size:13px;}

.tip-card{
  background:var(--surface2); border:1px solid var(--border); border-radius:14px;
  padding:20px 22px; margin-bottom:16px;
}
.tip-card h4{font-size:15px; margin-bottom:10px;}
.tip-card p{font-size:13.5px; color:var(--dim); margin-bottom:10px;}
.tip-code{
  position:relative; background:var(--bg2); border:1px solid var(--border); border-radius:8px;
  padding:12px 46px 12px 14px; font-family:ui-monospace,'JetBrains Mono',monospace; font-size:12px;
  color:var(--text); white-space:pre-wrap; word-break:break-word; margin-bottom:4px;
}
.tip-code:last-child{margin-bottom:0;}
.tip-code .cmd-copy{position:absolute; top:8px; right:8px;}
.tip-card a{color:var(--neon); text-decoration:underline;}
.cmd-sources{font-size:12px; color:var(--dim); margin-top:8px;}
.cmd-sources a{color:var(--dim); text-decoration:underline;}
.cmd-sources a:hover{color:var(--neon);}

@media (max-width:860px){
  nav{display:none;}
  .burger{display:block;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .blog-grid{grid-template-columns:1fr;}
  .cmd-examples{grid-template-columns:1fr;}
  .cmd-row{flex-wrap:wrap;}
  .cmd-row code{min-width:0;}
}

/* Дублирование токенов с index.html — сознательный компромисс: общий
   /shared.css потребовал бы менять уже проверенный index.html, риск не
   стоил выгоды ради ~120 строк переиспользуемого CSS на этом этапе. Если
   дизайн главной поменяется — не забыть синхронизировать переменные тут. */