/* ===================================================================
   incy.to — справочник по приложению Incy.

   Визуальный ключ: приборная панель. Incy почти целиком управляется
   ссылками-командами (incy://import, incy://add, routing onadd, код
   привязки ТВ), поэтому навигация сделана пультом: клавиши с настоящими
   моно-строками команд и тёмный дисплей, который объясняет, что
   происходит внутри приложения на этом шаге.

   Дисциплина: структуру держат линии в 1px и «физика» клавиши (нижняя
   грань + сдвиг при нажатии), а не тени и скругления. Радиусы мелкие,
   цвет один акцентный, всё остальное — оттенки чернил и бумаги.
   =================================================================== */
@import url('/fonts/faces.css');

:root {
  /* 6 цветовых токенов */
  --paper:#F4F1F6;      /* фон: светлый пластик панели */
  --surface:#FFFFFF;    /* плоскости: клавиши, карточки, поля */
  --ink:#191320;        /* чернила и корпус дисплея */
  --muted:#6B6178;      /* второстепенный текст */
  --rule:#E2DCE8;       /* линейки, грани клавиш */
  --accent:#B0186B;     /* сигнальная краска: нажатая клавиша, связи */
  --accent-dark:#8E1256;
  --accent-soft:#FBE7F1;/* подложка акцента */
  /* семантика состояний — разведена с акцентом по тону и светлоте */
  --ok:#17724C;   --ok-bg:#E4F1EA;
  --warn:#8A5A00; --warn-bg:#F7EFDC;
  --down:#B3261E; --down-bg:#FAE7E4;
  /* экран пульта */
  --screen:#191320; --screen-2:#241B2E; --screen-ink:#F3EDF7; --screen-dim:#A79BB4;

  --f-display:'Exo 2',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Commissioner',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-data:'Source Code Pro',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --r:4px; --r-sm:2px; --r-lg:6px;
  --wrap:1160px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:#15111C; --surface:#1E1826; --ink:#F2EDF6; --muted:#A79BB4;
    --rule:#332A3F; --accent:#FF5C9F; --accent-dark:#FF83B5; --accent-soft:#2C1526;
    --ok:#5BD69B;   --ok-bg:#14291F;
    --warn:#E2B15C; --warn-bg:#2A2113;
    --down:#FF8B80; --down-bg:#2E1614;
    --screen:#0F0B15; --screen-2:#1A1422; --screen-ink:#F3EDF7; --screen-dim:#9C8FAA;
  }
}

/* --- база ------------------------------------------------------ */
* { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.62 var(--f-body);
  font-feature-settings:'ss01','cv01';
  -webkit-font-smoothing:antialiased;
}
h1, h2, h3 { font-family:var(--f-display); font-weight:800; letter-spacing:-.015em }
a { color:var(--accent-dark); text-decoration:none }
a:hover { text-decoration:underline }
img { max-width:100%; height:auto }
code { font:400 .92em/1.5 var(--f-data); background:var(--accent-soft); color:var(--accent-dark);
  padding:2px 5px; border-radius:var(--r-sm); word-break:break-word }
pre { font:400 14px/1.6 var(--f-data); background:var(--screen); color:var(--screen-ink);
  padding:16px 18px; border-radius:var(--r); overflow-x:auto; margin:24px 0 }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm) }
.skip { position:absolute; left:-9999px }
.skip:focus { left:16px; top:16px; z-index:60; background:var(--surface); padding:10px 16px;
  border:1px solid var(--accent); border-radius:var(--r) }

.page { max-width:var(--wrap); margin:0 auto; padding:0 20px }

/* --- метки и чипы ---------------------------------------------- */
.tag {
  display:inline-block; font:600 11px/1.4 var(--f-data); letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.tag--sig { color:var(--accent) }
.chip {
  display:inline-flex; align-items:center; gap:7px; font:600 11px/1 var(--f-data);
  letter-spacing:.08em; text-transform:uppercase; padding:6px 10px; border-radius:var(--r-sm);
}
.chip::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none }
.chip--ok { background:var(--ok-bg); color:var(--ok) }
.chip--warn { background:var(--warn-bg); color:var(--warn) }
.chip--down { background:var(--down-bg); color:var(--down) }

/* --- шапка ------------------------------------------------------ */
.hdr { position:sticky; top:0; z-index:40; background:var(--paper); border-bottom:1px solid var(--rule) }
.hdr__in { display:flex; align-items:center; gap:16px; height:66px; flex-wrap:nowrap }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); flex:none }
.brand:hover { text-decoration:none }
.brand__badge {
  width:34px; height:34px; display:grid; place-items:center; flex:none;
  background:var(--ink); color:var(--paper); border-radius:var(--r);
  font:800 19px/1 var(--f-display);
}
.brand__mark { display:block; font:800 19px/1.1 var(--f-display); letter-spacing:-.02em }
.brand__mark b { color:var(--accent); font-weight:800 }
.brand__sub { display:block; font:600 8.5px/1.2 var(--f-data); letter-spacing:.16em; color:var(--muted) }
.hdr__nav { display:flex; align-items:center; gap:10px; margin-left:auto }
.hdr__links { display:flex; gap:15px; margin-right:4px; white-space:nowrap }
.hdr__links a { font:500 14.5px/1 var(--f-body); color:var(--ink) }
.hdr__links a:hover { color:var(--accent); text-decoration:none }
.hdr__links a[aria-current=page] { color:var(--accent); font-weight:600 }
.searchbtn {
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--r); padding:8px 11px;
  font:500 13.5px/1 var(--f-body); color:var(--muted);
}
.searchbtn:hover { border-color:var(--accent); color:var(--ink) }
.searchbtn__ico { font-size:15px; line-height:1 }
.searchbtn kbd { font:400 11px/1 var(--f-data); border:1px solid var(--rule); border-radius:var(--r-sm); padding:3px 5px }
.burger {
  display:none; cursor:pointer; background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r); padding:9px 13px; font:600 13.5px/1 var(--f-body); color:var(--ink);
}
.mnav { display:none; border-top:1px solid var(--rule); padding:8px 0 12px }
.mnav ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px }
.mnav a { display:block; padding:11px 12px; font-size:15px; font-weight:500; color:var(--ink);
  border:1px solid var(--rule); border-radius:var(--r); background:var(--surface) }
.mnav a:hover { border-color:var(--accent); text-decoration:none }
.mnav a[aria-current=page] { color:var(--accent); border-color:var(--accent); background:var(--accent-soft) }

/* --- раскладка -------------------------------------------------- */
.layout { display:grid; grid-template-columns:236px minmax(0,1fr); gap:44px; align-items:start;
  padding:28px 0 64px }
main { min-width:0 }

.side { position:sticky; top:88px }
.side__grp { margin-bottom:22px }
.side__ttl { display:block; font:600 10.5px/1.4 var(--f-data); letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px }
.side ul { list-style:none; margin:0; padding:0 }
.side li a {
  display:block; padding:6px 10px; border-radius:var(--r-sm); color:var(--ink);
  font-size:14.5px; line-height:1.4; border-left:2px solid transparent;
}
.side li a:hover { background:var(--surface); text-decoration:none }
.side li a[aria-current=page] { border-left-color:var(--accent); background:var(--surface);
  color:var(--accent-dark); font-weight:600 }
.side__grp--out { display:grid; gap:8px; border-top:1px solid var(--rule); padding-top:16px }
.side__out { font:600 13.5px/1.4 var(--f-body); color:var(--accent-dark) }

/* --- статья ----------------------------------------------------- */
.crumbs { display:flex; flex-wrap:wrap; gap:7px; align-items:center; font-size:13.5px;
  color:var(--muted); margin:0 0 18px }
.crumbs a { color:var(--muted) }
.crumbs i { color:var(--rule); font-style:normal }

.art { max-width:74ch; padding-bottom:24px }
.art h1 { font-size:clamp(1.95rem,3.2vw + .6rem,2.7rem); line-height:1.14; margin:0 0 12px }
.art__meta { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; margin-bottom:20px }
.art__lead { font-size:1.13rem; line-height:1.55; color:var(--muted); margin:0 0 24px }
.art h2 { font-size:clamp(1.4rem,1.5vw + .8rem,1.85rem); line-height:1.2; margin:40px 0 12px;
  padding-top:16px; border-top:1px solid var(--rule) }
.art h3 { font:600 1.14rem/1.35 var(--f-display); margin:26px 0 8px }
.art p { margin:0 0 16px }
.art ul:not([class]), .art ol:not([class]) { margin:0 0 20px; padding:0; list-style:none }
.art ul:not([class])>li, .art ol:not([class])>li { position:relative; padding-left:26px; margin-bottom:9px }
.art ul:not([class])>li::before {
  content:''; position:absolute; left:4px; top:.68em; width:7px; height:7px;
  border:1.5px solid var(--accent); border-radius:var(--r-sm);
}
.art ol:not([class]) { counter-reset:o }
.art ol:not([class])>li { counter-increment:o }
.art ol:not([class])>li::before {
  content:counter(o); position:absolute; left:0; top:.05em;
  font:600 12px/1.6 var(--f-data); color:var(--accent);
}

/* --- врезки ----------------------------------------------------- */
.note { margin:24px 0; padding:18px 20px; border:1px solid var(--rule); border-radius:var(--r);
  background:var(--surface); border-left:3px solid var(--muted) }
.note p:last-child { margin-bottom:0 }
.note__ttl { display:block; font:600 1.04rem/1.4 var(--f-display); margin-bottom:6px }
.note ul { margin:8px 0 0; padding-left:20px }
.note ul li { margin-bottom:6px }
.note--info { border-left-color:var(--accent) }
.note--ok { border-left-color:var(--ok); background:var(--ok-bg); border-color:transparent }
.note--ok .note__ttl { color:var(--ok) }
.note--warn { border-left-color:var(--warn); background:var(--warn-bg); border-color:transparent }
.note--warn .note__ttl { color:var(--warn) }
.note--down { border-left-color:var(--down); background:var(--down-bg); border-color:transparent }
.note--down .note__ttl { color:var(--down) }

/* --- шаги ------------------------------------------------------- */
.steps { list-style:none; margin:24px 0; padding:0; counter-reset:s; display:grid; gap:12px }
.steps>li {
  position:relative; counter-increment:s; background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--r); padding:16px 18px 16px 54px;
}
.steps>li::before {
  content:counter(s,decimal-leading-zero); position:absolute; left:16px; top:16px;
  font:600 13px/1 var(--f-data); color:var(--accent); letter-spacing:.05em;
}
.steps>li p { margin:0 0 10px; color:var(--muted) }
.steps>li p:last-child { margin-bottom:0 }
.step__ttl { display:block; font:600 1.06rem/1.35 var(--f-display); color:var(--ink); margin:0 0 8px }
.steps ul { margin:0 0 10px; padding-left:20px; color:var(--muted) }
.steps ul li { margin-bottom:6px }
.steps .shot, .steps .cmdline { margin:12px 0 0 }

/* --- таблицы ---------------------------------------------------- */
.tw { overflow-x:auto; margin:24px 0; border:1px solid var(--rule); border-radius:var(--r);
  background:var(--surface) }
.tw table { border-collapse:collapse; width:100%; font-size:15px }
.tw th, .tw td { text-align:left; padding:12px 16px; border-bottom:1px solid var(--rule); vertical-align:top }
.tw th { font:600 10.5px/1.4 var(--f-data); letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); background:var(--paper); white-space:nowrap }
.tw tr:last-child td { border-bottom:0 }
.tw td:first-child { font-weight:600 }

/* --- признаки «симптом → вывод» --------------------------------- */
.signs { list-style:none; margin:24px 0; padding:0; display:grid; gap:8px }
.signs__i { display:grid; grid-template-columns:minmax(180px,34%) 1fr; gap:16px; align-items:baseline;
  padding:12px 16px; border:1px solid var(--rule); border-radius:var(--r); background:var(--surface) }
.signs__when { font:600 14.5px/1.45 var(--f-body) }
.signs__means { font-size:15px; color:var(--muted) }
.signs__i[data-kind=ok] { background:var(--ok-bg); border-color:transparent }
.signs__i[data-kind=ok] .signs__when { color:var(--ok) }
.signs__i[data-kind=warn] { background:var(--warn-bg); border-color:transparent }
.signs__i[data-kind=warn] .signs__when { color:var(--warn) }
.signs__i[data-kind=down] { background:var(--down-bg); border-color:transparent }
.signs__i[data-kind=down] .signs__when { color:var(--down) }

/* --- ссылка-команда --------------------------------------------- */
.cmdline {
  display:grid; grid-template-columns:auto 1fr auto; gap:8px 12px; align-items:center;
  margin:22px 0; padding:12px 14px; background:var(--screen); border-radius:var(--r);
  border:1px solid var(--screen-2);
}
.cmdline__tag { color:var(--accent); flex:none }
.cmdline__txt { font:400 13.5px/1.5 var(--f-data); color:var(--screen-ink); background:none;
  padding:0; word-break:break-all; min-width:0 }
.cmdline__copy {
  cursor:pointer; font:600 11px/1 var(--f-data); letter-spacing:.08em; text-transform:uppercase;
  background:none; color:var(--screen-dim); border:1px solid var(--screen-2);
  border-radius:var(--r-sm); padding:7px 10px; white-space:nowrap;
}
.cmdline__copy:hover { color:var(--screen-ink); border-color:var(--screen-dim) }
.cmdline__note { grid-column:1 / -1; font-size:13.5px; color:var(--screen-dim) }
.cmdline__note a { color:var(--accent-dark) }
.cmdline--bad .cmdline__txt { color:#FF9A90; text-decoration:line-through }

/* --- параметр / значение ---------------------------------------- */
.kv { list-style:none; margin:0; padding:0; display:grid; gap:6px }
.kv li { display:flex; gap:12px; justify-content:space-between; align-items:baseline }
.kv b { font:600 11px/1.4 var(--f-data); letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.kv span { font:600 15px/1.4 var(--f-body); text-align:right }
.kv--art { margin:22px 0; padding:16px 18px; background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--r) }
.kv--art li + li { border-top:1px solid var(--rule); padding-top:6px }

/* --- FAQ -------------------------------------------------------- */
.faq { margin:24px 0; border:1px solid var(--rule); border-radius:var(--r); background:var(--surface);
  overflow:hidden }
.faq h3 { margin:0; padding:16px 20px 6px; font:600 1.04rem/1.4 var(--f-display);
  border-top:1px solid var(--rule) }
.faq h3:first-child { border-top:0 }
.faq p { margin:0; padding:0 20px 16px; color:var(--muted) }

/* --- скриншоты -------------------------------------------------- */
.shot { margin:24px 0 }
.shot__frame {
  display:grid; place-items:center; min-height:150px; border:1px dashed var(--rule);
  border-radius:var(--r); background:var(--surface);
}
.shot__code { font:600 12px/1 var(--f-data); letter-spacing:.1em; color:var(--accent);
  background:var(--accent-soft); padding:7px 11px; border-radius:var(--r-sm) }
.shot__link { display:block; border:1px solid var(--rule); border-radius:var(--r); overflow:hidden;
  position:relative; background:var(--surface) }
.shot__link img { display:block; width:100%; max-height:520px; object-fit:contain }
.shot__zoom { position:absolute; right:10px; bottom:10px; font:600 11px/1 var(--f-data);
  letter-spacing:.06em; background:var(--screen); color:var(--screen-ink); padding:7px 9px; border-radius:var(--r-sm) }
.shot__cap { font-size:13.5px; color:var(--muted); margin:9px 0 0 }
.shot__pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px }
.shot__part { position:relative; border:1px solid var(--rule); border-radius:var(--r);
  padding:8px; background:var(--surface) }
.shot__part img { display:block; width:100%; max-height:400px; object-fit:contain; border-radius:var(--r-sm) }
.shot__mark { position:absolute; left:12px; top:12px; z-index:2; font:600 11px/1 var(--f-data);
  background:var(--screen); color:var(--screen-ink); padding:5px 8px; border-radius:var(--r-sm) }
.shot__partcap { display:block; font-size:13px; color:var(--muted); margin-top:8px }

/* --- кнопки ----------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink); border-radius:var(--r);
  padding:12px 20px; font:600 .96rem/1 var(--f-body); white-space:nowrap;
}
.btn:hover { background:#000; color:#fff; text-decoration:none }
.btn:active { transform:translateY(1px) }
.btn--go { background:var(--accent); border-color:var(--accent); color:#fff }
.btn--go:hover { background:var(--accent-dark); border-color:var(--accent-dark) }
.btn--ghost { background:var(--surface); color:var(--ink); border-color:var(--rule) }
.btn--ghost:hover { background:var(--surface); color:var(--accent); border-color:var(--accent) }
.btn--sm { padding:9px 16px; font-size:.9rem }

/* --- CTA -------------------------------------------------------- */
.cta {
  margin:32px 0; padding:22px 24px; border:1px solid var(--rule); border-radius:var(--r-lg);
  background:var(--surface); border-top:3px solid var(--accent);
}
.cta__tag { display:block; margin-bottom:8px; color:var(--accent) }
.cta__ttl { font:800 1.4rem/1.25 var(--f-display); letter-spacing:-.02em; margin:0 0 10px }
.cta p { margin:0 0 14px; color:var(--muted) }
.cta__pts { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; padding:0 }
.cta__pts li { font:600 12.5px/1.3 var(--f-body); background:var(--paper); border:1px solid var(--rule);
  border-radius:var(--r-sm); padding:7px 11px }
.cta__row { display:flex; flex-wrap:wrap; gap:12px; align-items:center }
.cta__fine { font-size:13.5px; color:var(--muted) }
.cta--diag { border-top-color:var(--warn); background:var(--warn-bg); border-color:transparent;
  border-top:3px solid var(--warn) }
.cta--diag .cta__tag { color:var(--warn) }
.cta--diag .cta__pts li { background:var(--surface); border-color:transparent }

.trial {
  display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; margin:26px 0;
  padding:16px 18px; border:1px solid var(--accent); border-radius:var(--r); background:var(--accent-soft);
}
.trial__tag { flex:0 0 100%; color:var(--accent-dark) }
.trial__txt { flex:1 1 320px; margin:0; font-size:15px }
.trial .btn { flex:0 0 auto }

.conn { margin:32px 0; padding:22px 24px; border:1px solid var(--rule); border-radius:var(--r-lg);
  background:var(--surface) }
.conn__hd { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:8px }
.conn__free { color:var(--ok); margin-left:auto }
.conn__ttl { font:800 1.3rem/1.25 var(--f-display); letter-spacing:-.02em; margin:0 0 18px }
.conn__steps { list-style:none; margin:0 0 18px; padding:0; display:grid; gap:12px;
  grid-template-columns:repeat(3,minmax(0,1fr)) }
.conn__steps li { padding:16px; border-radius:var(--r); background:var(--paper); display:grid; gap:6px;
  border:1px solid var(--rule) }
.conn__n { font:600 11px/1 var(--f-data); letter-spacing:.1em; color:var(--accent) }
.conn__ttl2 { font:600 1.02rem/1.3 var(--f-display) }
.conn__txt { font-size:14px; color:var(--muted); line-height:1.5 }
.conn__row { display:flex; flex-wrap:wrap; gap:12px; align-items:center }

/* --- строки-ссылки ---------------------------------------------- */
.rows { list-style:none; margin:24px 0; padding:0; display:grid; gap:8px }
.rows li { margin:0 }
.row {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:center;
  padding:14px 18px; background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r); color:var(--ink);
}
.row:hover { text-decoration:none; border-color:var(--accent) }
.row:hover .row__go { color:var(--accent) }
.row__idx { font:600 10.5px/1.4 var(--f-data); letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); min-width:74px }
.row__ttl { display:block; font:600 1.05rem/1.35 var(--f-display) }
.row__sub { display:block; font-size:14px; color:var(--muted); margin-top:3px }
.row__go { font-size:13.5px; color:var(--muted); white-space:nowrap }

/* --- хвост статьи ----------------------------------------------- */
.also { margin:44px 0 20px }
.also__list { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px 24px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.also__list li { font-size:15px }
.helpful { display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:16px 20px;
  border:1px solid var(--rule); border-radius:var(--r); background:var(--surface) }
.helpful__q { font:600 1rem/1.3 var(--f-display) }
.helpful__btns { display:flex; gap:8px; margin-left:auto }
.helpful button { cursor:pointer; font:600 14px/1 var(--f-body); padding:9px 18px;
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--r); color:var(--ink) }
.helpful button:hover { border-color:var(--accent); color:var(--accent) }
.helpful[data-done] .helpful__btns { display:none }
.helpful__thanks { font-size:14.5px; color:var(--ok); font-weight:600 }

/* --- инструменты ------------------------------------------------ */
.tool { margin:24px 0; padding:20px 22px; border:1px solid var(--rule); border-radius:var(--r-lg);
  background:var(--surface) }
.tool__hd { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:14px }
.tool__local { color:var(--ok); margin-left:auto }
.tool label { display:block; font:600 10.5px/1.4 var(--f-data); letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px }
.tool input, .tool textarea, .tool select {
  width:100%; font:400 14.5px/1.5 var(--f-data); padding:11px 13px; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--r);
}
.tool textarea { resize:vertical }
.tool__fields { display:grid; gap:14px; grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
.tool__row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:16px }
.tool__out:not(:empty) { margin-top:18px; padding-top:18px; border-top:1px solid var(--rule) }
.tool__note { font-size:14.5px; color:var(--muted) }
.tool__out .kv { margin-bottom:12px }
.tool__out .cmdline { margin-top:14px }

/* ===================================================================
   SIGNATURE: пульт команд
   =================================================================== */
.deck { margin:0 0 32px }

.deck--hero { background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:20px 22px 18px }
.deck__hd { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:baseline; margin-bottom:16px }
.deck__hdnote { font-size:13.5px; color:var(--muted) }
.deck__hdnote b { color:var(--ink); font-weight:600 }
.deck__grid { display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:18px; align-items:stretch }

.deck--hero .deck__keys { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }

/* клавиша: физическая — нижняя грань толще, при нажатии уезжает вниз */
.key {
  display:grid; align-content:start; gap:4px; padding:11px 13px 12px; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-bottom:3px solid var(--rule);
  border-radius:var(--r); transition:transform .06s linear, border-color .12s linear;
}
.key:hover { text-decoration:none; border-color:var(--accent); border-bottom-color:var(--accent) }
.key__top { display:flex; align-items:center; justify-content:space-between; gap:8px }
.key__n { font:600 10px/1 var(--f-data); letter-spacing:.12em; color:var(--muted) }
.key__lamp { width:8px; height:8px; border-radius:50%; background:var(--rule); flex:none }
.key[data-lamp=on] .key__lamp { background:var(--ok) }
.key[data-lamp=err] .key__lamp { background:var(--down) }
.key__name { font:800 14px/1.2 var(--f-display); letter-spacing:.04em }
.key__cmd { font:400 11.5px/1.35 var(--f-data); color:var(--accent-dark); word-break:break-all }
.key__unit { font-size:12.5px; line-height:1.35; color:var(--muted) }
.key[data-state=sel], .key[aria-current=true] {
  background:var(--accent-soft); border-color:var(--accent); border-bottom-color:var(--accent);
  transform:translateY(2px); border-bottom-width:1px; margin-bottom:2px;
}
.key[data-state=sel] .key__unit, .key[aria-current=true] .key__unit { color:var(--accent-dark); font-weight:600 }
.key[data-state=broken] {
  background:var(--down-bg); border-color:var(--down); border-bottom-color:var(--down);
  transform:translateY(2px); border-bottom-width:1px; margin-bottom:2px;
}
.key[data-state=broken] .key__unit { color:var(--down); font-weight:600 }
.key[data-state=broken] .key__lamp { background:var(--down) }
.key[data-state=done] .key__lamp { background:var(--ok) }
.key[data-state=done] { opacity:.86 }

/* дисплей пульта */
.deck__screen { background:var(--screen); border:1px solid var(--screen-2); border-radius:var(--r); padding:16px 18px;
  display:grid; align-content:start; gap:10px; color:var(--screen-ink);
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px) }
.deck__screenhd { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline;
  border-bottom:1px solid var(--screen-2); padding-bottom:10px }
.deck__unit { font:400 12.5px/1.4 var(--f-data); color:var(--screen-dim); margin-left:auto }
.deck__cmd { margin:0; font:400 14px/1.5 var(--f-data); color:var(--screen-ink); word-break:break-all }
.deck__read { margin:0; font-size:14.5px; line-height:1.5; color:var(--screen-ink) }
.deck__note { margin:0; font-size:13.5px; line-height:1.55; color:var(--screen-dim) }
.deck__go { justify-self:start; margin-top:2px; font:600 13.5px/1 var(--f-body); color:var(--accent-dark) }
@media (prefers-color-scheme: light) { .deck__go { color:#FF7FB6 } }

.deck__foot { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:baseline;
  border-top:1px solid var(--rule); margin-top:16px; padding-top:12px }
.deck__fmark { font:600 10.5px/1.4 var(--f-data); letter-spacing:.1em; color:var(--accent) }
.deck__fnote { font-size:13px; color:var(--muted); margin-left:auto }

/* компактная планка в статье */
.deck--bar { margin:0 0 26px }
.deck__cap { margin-bottom:8px }
.deck--bar .deck__keys { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px }
.deck--bar .key { padding:8px 10px 9px; gap:2px; border-bottom-width:2px }
.deck--bar .key__cmd { display:none }
.deck--bar .key__name { font-size:12px }
.deck--bar .key__unit { font-size:11px }
.deck--bar .key[data-state=sel], .deck--bar .key[data-state=broken] { transform:translateY(1px); margin-bottom:1px }

/* --- главная ---------------------------------------------------- */
.home { padding:20px 0 64px }
.hero { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-bottom:20px }
.hero__main { max-width:80ch }
.hero h1 { font-size:clamp(2rem,2.9vw + .7rem,2.75rem); line-height:1.08; margin:0 0 12px }
.hero__lead { font-size:1.1rem; line-height:1.5; color:var(--muted); margin:0 0 16px; max-width:64ch }
.hero__row { display:flex; flex-wrap:wrap; gap:12px; align-items:center }
.hero__fine { font-size:13.5px; color:var(--muted); margin:12px 0 0 }
.hero--slim { margin-bottom:20px }

.homesec { margin:44px 0 0 }
.homesec__hd { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:baseline; margin-bottom:14px;
  border-top:1px solid var(--rule); padding-top:16px }
.homesec__ttl { font:800 1.5rem/1.2 var(--f-display); letter-spacing:-.02em; margin:0 }
.homesec__sub { font-size:14px; color:var(--muted); margin-left:auto }
.grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.card { display:grid; align-content:start; gap:7px; padding:16px 18px; background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--r); color:var(--ink) }
.card:hover { text-decoration:none; border-color:var(--accent) }
.card__tag { font:600 10.5px/1.4 var(--f-data); letter-spacing:.1em; text-transform:uppercase; color:var(--accent) }
.card__ttl { font:600 1.06rem/1.3 var(--f-display) }
.card__txt { font-size:14px; color:var(--muted); line-height:1.5 }
.card__cmd { font:400 12px/1.4 var(--f-data); color:var(--muted); word-break:break-all }

/* --- футер ------------------------------------------------------ */
.ftr { border-top:1px solid var(--rule); background:var(--surface) }
.ftr__in { max-width:var(--wrap); margin:0 auto; padding:36px 20px 28px }
.ftr__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-bottom:26px }
.ftr__grid ul { list-style:none; margin:0; padding:0; display:grid; gap:7px }
.ftr__grid a { font-size:14.5px; color:var(--ink) }
.ftr__grid a:hover { color:var(--accent) }
.ftr__disc { font-size:13.5px; line-height:1.6; color:var(--muted); margin:0 0 20px; max-width:96ch;
  border-top:1px solid var(--rule); padding-top:20px }
.ftr__bar { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center;
  font:600 10.5px/1.4 var(--f-data); letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.ftr__bar a { color:var(--muted) }
.ftr__bar a:hover { color:var(--accent) }
.ftr__copy { margin-left:auto }

/* --- поиск ------------------------------------------------------ */
.sdlg { display:none; position:fixed; inset:0; z-index:70 }
.sdlg[data-open] { display:block }
.sdlg__bd { position:absolute; inset:0; background:rgba(25,19,32,.5) }
.sdlg__box { position:relative; max-width:660px; margin:9vh auto 0; background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden }
.sdlg input { width:100%; border:0; border-bottom:1px solid var(--rule); padding:18px 20px;
  font:400 17px/1.4 var(--f-body); color:var(--ink); background:var(--surface) }
.sdlg input:focus { outline:none }
.sres { list-style:none; margin:0; padding:6px; max-height:56vh; overflow-y:auto }
.sres li a { display:grid; gap:2px; padding:10px 14px; border-radius:var(--r); color:var(--ink) }
.sres li a:hover, .sres li[data-sel] a { background:var(--accent-soft); text-decoration:none }
.sres__t { font:600 15px/1.35 var(--f-body) }
.sres__s { font:600 10.5px/1.4 var(--f-data); letter-spacing:.1em; text-transform:uppercase; color:var(--accent) }
.sres__empty { padding:18px 20px; color:var(--muted); font-size:15px }
.sdlg__foot { border-top:1px solid var(--rule); padding:10px 20px;
  font:600 10.5px/1.4 var(--f-data); letter-spacing:.08em; color:var(--muted) }

/* --- адаптив ---------------------------------------------------- */
@media (max-width:1080px) {
  .hdr__links { display:none }
  .burger { display:inline-block }
  .layout { grid-template-columns:minmax(0,1fr); gap:0 }
  .side { display:none; position:static; margin-bottom:24px; padding-bottom:20px;
    border-bottom:1px solid var(--rule) }
  .side[data-open] { display:block }
  .mnav[data-open] { display:block }
  .deck__grid { grid-template-columns:minmax(0,1fr) }
}
@media (max-width:860px) {
  .conn__steps { grid-template-columns:minmax(0,1fr) }
  .grid3 { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .ftr__grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .deck--bar .deck__keys { grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media (max-width:640px) {
  body { font-size:16.5px }
  .page { padding:0 16px }
  .hdr__cta { display:none }
  /* в шапке остаются бренд, «Разделы» и компактная кнопка поиска */
  .hdr__in { gap:10px; height:60px }
  .brand__sub { display:none }
  .burger { padding:9px 11px; font-size:13px }
  .searchbtn { padding:9px 10px }
  .searchbtn span:not(.searchbtn__ico), .searchbtn kbd { display:none }
  .art { max-width:100% }
  .art h2 { margin-top:32px }
  .deck--hero .deck__keys { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .deck--bar .deck__keys { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .deck__fnote { margin-left:0 }
  .signs__i { grid-template-columns:minmax(0,1fr); gap:4px }
  .grid3, .grid2 { grid-template-columns:minmax(0,1fr) }
  .row { grid-template-columns:minmax(0,1fr); gap:6px }
  .row__go { display:none }
  .row__idx { min-width:0 }
  .tool__fields { grid-template-columns:minmax(0,1fr) }
  .shot__pair { grid-template-columns:minmax(0,1fr) }
  .shot__link img { max-height:none }
  .shot__part img { max-height:none }
  .cmdline { grid-template-columns:minmax(0,1fr) }
  .cmdline__copy { justify-self:start }
  .helpful__btns { margin-left:0 }
  .ftr__copy { margin-left:0 }
  .sdlg__box { margin:0; max-width:100%; height:100%; border-radius:0 }
  .sres { max-height:calc(100vh - 130px) }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important } }