/* Шрифты со своего домена: было 119KB со стороннего, подмена давала
   два сдвига макета (CLS 0.029 на 505 и 537 мс). size-adjust и
   font-display:swap убирают скачок при замене. Оба файла вариативные —
   одного хватает на все начертания. */
@font-face{
  font-family:"Oswald"; font-style:normal; font-weight:400 500;
  font-display:swap; src:url(/f/oswald.woff2) format("woff2");
}
@font-face{
  font-family:"Source Serif 4"; font-style:normal; font-weight:400 600;
  font-display:swap; src:url(/f/sourceserif.woff2) format("woff2");
}
/* Моноширинный — ТОЛЬКО для измеренных величин. В штампе чертежа
   цифра всегда моноширинная; это и современный признак технического
   документа, и приём самого мира. Не костюм «под технологичность». */
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:400;
  font-display:swap; src:url(/f/mono400.woff2) format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:500;
  font-display:swap; src:url(/f/mono500.woff2) format("woff2");
}

/* Запасные шрифты с подогнанными метриками: пока грузится свой,
   строка занимает ту же ширину — подмена больше не двигает макет.
   Это и чинило CLS 0.029 на навигации и штампе данных. */
@font-face{
  font-family:"Oswald-fb"; src:local("Arial Narrow"),local("Arial");
  size-adjust:84%; ascent-override:105%; descent-override:26%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Serif-fb"; src:local("Georgia"),local("Times New Roman");
  size-adjust:102%; ascent-override:96%; descent-override:30%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Mono-fb"; src:local("Consolas"),local("Courier New");
  size-adjust:97%; ascent-override:98%; descent-override:26%;
  line-gap-override:0%;
}

:root{
  --paper:#e3e6e4; --paper-2:#d7dcda; --paper-3:#cbd2cf;
  --graphite:#17191a; --graphite-2:#3d4245;
  --alum:#6e747a; --alum-dark:#4a4f54;
  --blueprint:#2f4a5c;
  --line:#b9c1be; --line-2:#a3aeaa;
  --plate-bg:#fbfaf8; --foot-bg:var(--graphite); --foot-fg:#c6cbc9;
  --foot-mute:#878f8d; --foot-line:#2c3133; --sel-fg:#f4f2ee;
  --hatch-op:.26; --img-filter:none;
  --foot-hover:#ffffff; --plate-shadow:0 2px 14px rgba(28,30,32,.07);
  --mono:"IBM Plex Mono","Mono-fb",ui-monospace,monospace;
  --wrap:1180px;
  --sp:clamp(56px,7vw,104px);
  --sp-tight:clamp(38px,4.2vw,62px);
  --sp-wide:clamp(74px,9vw,132px);
  /* Четыре ступени, остальное — их производные. Было одиннадцать
     кеглей, из них шесть в диапазоне 12-18px: иерархии не читалось. */
  --t-display:clamp(34px,5.4vw,64px);
  --t-head:clamp(25px,3.2vw,38px);
  --t-body:18px;
  --t-small:13px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--graphite);
  font-family:"Source Serif 4","Serif-fb",Georgia,serif;
  font-size:18px; line-height:1.66;
  font-kerning:normal; text-rendering:optimizeLegibility;
}

/* --- поверхности браузера: не оставляем на умолчаниях --- */
::selection{background:var(--blueprint); color:var(--sel-fg)}
:focus-visible{outline:2px solid var(--blueprint); outline-offset:3px}
a{color:var(--alum-dark); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--blueprint)}
html{scrollbar-color:var(--line-2) var(--paper); caret-color:var(--blueprint)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--line-2); border:3px solid var(--paper)}
table{font-variant-numeric:tabular-nums}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 26px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--graphite);color:var(--paper);padding:10px 14px}

/* ---------- шапка ---------- */
.top{border-bottom:1px solid var(--line); background:var(--paper)}
.top__in{display:flex; align-items:baseline; gap:30px;
  padding:19px 0; flex-wrap:wrap}
.brand{font-family:"Oswald","Oswald-fb",sans-serif; font-weight:500;
  font-size:19px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--graphite); text-decoration:none; white-space:nowrap}
.brand:hover{color:var(--blueprint)}
.nav{display:flex; gap:23px; flex-wrap:wrap; margin-left:auto}
.nav a{font-family:"Oswald","Oswald-fb",sans-serif; font-size:13px; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  color:var(--graphite-2); padding:7px 0; min-height:30px;
  display:inline-flex; align-items:center; border-bottom:1px solid transparent}
.nav a:hover{color:var(--graphite); border-bottom-color:var(--alum)}
.nav a[aria-current=page]{color:var(--graphite); border-bottom-color:var(--blueprint)}

/* ---------- заголовок страницы ---------- */
.head{border-bottom:1px solid var(--line); background:var(--paper-2);
  padding:calc(var(--sp)*.56) 0 calc(var(--sp)*.62)}

/* Первый экран главной: заголовок, чертёж и данные СРАЗУ вместе.
   Раньше до 900px было видно только h1 и край фото — справочник
   не показывал, что он справочник. */
.open{border-bottom:1px solid var(--line); background:var(--paper-2);
  padding:calc(var(--sp)*.52) 0 calc(var(--sp)*.58)}
.open__grid{display:grid; grid-template-columns:1.1fr .72fr;
  gap:clamp(30px,4vw,64px); align-items:end}
.open__grid > *{min-width:0}
.open h1{font-family:"Oswald","Oswald-fb",sans-serif; font-weight:500;
  font-size:var(--t-display); line-height:1.04; margin:0;
  letter-spacing:-.022em; text-wrap:balance; max-width:17ch}
.open__lead{margin:20px 0 0; font-size:20px; color:var(--graphite-2);
  line-height:1.56; max-width:50ch}
/* Данные как в штампе чертежа: правый столбец, моноширинные цифры */
.stamp{border-top:2px solid var(--graphite); padding-top:15px}
.stamp dl{margin:0; display:grid; grid-template-columns:auto 1fr;
  gap:0; font-size:16.5px}
.stamp dt{font-family:"Oswald","Oswald-fb",sans-serif; font-size:var(--t-small);
  letter-spacing:.12em; text-transform:uppercase; color:var(--graphite-2);
  padding:0 20px 0 0; border-bottom:1px solid var(--line);
  height:43px; display:flex; align-items:center}
.stamp dd{margin:0; padding:0; border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums; color:var(--blueprint);
  font-family:var(--mono); font-size:14.5px; letter-spacing:-.01em;
  height:43px; display:flex; align-items:center; justify-content:flex-end}
.stamp dt:last-of-type,.stamp dl dd:last-child{border-bottom:none}
@media (max-width:880px){
  .open__grid{grid-template-columns:1fr; gap:34px; align-items:start}
}
.head h1{font-family:"Oswald","Oswald-fb",sans-serif; font-weight:500;
  font-size:var(--t-display); line-height:1.04; margin:0;
  letter-spacing:-.022em; text-wrap:balance; max-width:20ch}
.head__lead{margin:21px 0 0; font-size:20px; max-width:62ch;
  color:var(--graphite-2); line-height:1.58}
/* сведения о странице идут ПОД заголовком как данные чертежа,
   а не этикеткой над ним — craft-floor запрещает eyebrow безусловно */
.head__meta{margin:25px 0 0; padding:9px 14px; display:inline-flex; gap:16px;
  flex-wrap:wrap; border:1px solid var(--line-2);
  font-family:var(--mono); font-size:12.5px; letter-spacing:.02em;
  color:var(--blueprint)}

/* ---------- секции ---------- */
.sec{padding:var(--sp) 0; border-bottom:1px solid var(--line)}
/* Чередуем тесно/просторно: было пять секций с одинаковым --sp */
.sec--rule{padding:var(--sp-wide) 0}
.sec--band:not(.sec--record){padding:var(--sp-tight) 0}
.sec--band{background:var(--paper-2)}

/* Колонка чтения: узко и тесно сразу после просторного первого экрана.
   Контраст интервалов — то, чего на главной не было совсем. */
.sec--read{padding:var(--sp-tight) 0}
.sec--read .wrap{max-width:760px}
.sec--read p{font-size:19px; line-height:1.72; max-width:68ch}
.sec--read p + p{margin-top:19px}
.sec--read h2{margin-bottom:24px}

/* Запись о железе: просторно, фон темнее бумаги — это сноска, не витрина */
.sec--band:not(.sec--record) .wrap{max-width:1100px}
.sec--record{padding:var(--sp) 0 var(--sp-tight); background:var(--paper-3);
  border-bottom:none}
.sec--record .lead{max-width:60ch}
.sec h2{font-family:"Oswald","Oswald-fb",sans-serif; font-weight:500;
  font-size:var(--t-head); line-height:1.1; margin:0 0 22px;
  letter-spacing:-.016em; text-wrap:balance; max-width:24ch}
/* лид идёт сразу за заголовком — он часть той же группы */
.sec h2 + .lead{margin-top:-10px}
.sec h3{font-family:"Oswald","Oswald-fb",sans-serif; font-weight:500;
  font-size:19px; line-height:1.24; margin:0 0 7px; letter-spacing:.004em}
.lead{font-size:20px; color:var(--graphite-2); max-width:66ch; margin:0 0 34px}
.sec p{max-width:72ch}
.sec h2 + p{margin-top:21px}

/* ---------- чертёж: подпись сайта ---------- */
.plate{margin:0; border:1px solid var(--graphite); background:var(--plate-bg);
  padding:clamp(22px,3.4vw,40px); box-shadow:var(--plate-shadow)}

/* Единственный поставленный момент: разрез прочерчивается, как на
   кульмане. Не россыпь эффектов — одна линия, один раз, по делу. */
@media (prefers-reduced-motion:no-preference){
  .plate:not(.plate--sm) .cut,.plate:not(.plate--sm) .dim{
    stroke-dasharray:100; stroke-dashoffset:100;
    animation:draw 1.5s cubic-bezier(.16,.9,.3,1) forwards}
  .plate:not(.plate--sm) .dim{animation-delay:.55s; animation-duration:1.1s}
  .plate:not(.plate--sm) .hatch{opacity:0;
    animation:hatchin .9s ease-out .9s forwards}
  .plate:not(.plate--sm) text{opacity:0;
    animation:fadein .7s ease-out 1.15s forwards}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
@keyframes hatchin{to{opacity:var(--hatch-op)}}
.plate .hatch{opacity:var(--hatch-op)}
.plate svg{display:block; width:100%; height:auto}
.plate--sm{max-width:100%}
.plate figcaption{margin-top:19px; padding-top:14px;
  border-top:1px solid var(--line); font-family:"Oswald","Oswald-fb",sans-serif;
  font-size:13px; letter-spacing:.02em; color:var(--blueprint)}
.dim{stroke:var(--blueprint); stroke-width:1.6; fill:none; vector-effect:non-scaling-stroke}
.cut{stroke:var(--graphite); stroke-width:2.2; fill:none; vector-effect:non-scaling-stroke}
.hatch{fill:var(--alum); opacity:var(--hatch-op)}
.dimtxt{font-family:var(--mono); font-size:12px;
  letter-spacing:.02em; fill:var(--blueprint); font-weight:500}
.cuttxt{font-family:"Oswald","Oswald-fb",sans-serif; font-size:13px;
  letter-spacing:.1em; fill:var(--graphite-2)}

/* ---------- два столбца: текст + боковые данные ---------- */
/* min-width:0 обязателен: иначе таблица с min-width:520px раздувает
   грид-колонку и уносит абзацы за край экрана (подтверждено рендером) */
.split{display:grid; grid-template-columns:1.72fr .9fr; gap:clamp(34px,5vw,74px);
  align-items:start}
.split > *{min-width:0}
.split__txt p{max-width:72ch}
.aside{border-top:2px solid var(--graphite); padding-top:17px}
.aside dl{margin:0; display:grid; grid-template-columns:auto 1fr;
  gap:9px 18px; font-size:16px}
.aside dt{font-family:"Oswald","Oswald-fb",sans-serif; font-size:11.5px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--graphite-2);
  padding-top:3px}
.aside dd{margin:0; font-variant-numeric:tabular-nums;
  color:var(--blueprint); font-family:var(--mono); font-size:14.5px}

/* Вместо заливки через одну — узкая колонка с правилом слева.
   Разные секции отличаются СТРОЕНИЕМ, а не цветом фона. */
.sec--rule .wrap{max-width:900px}
.duo{columns:2; column-gap:clamp(34px,4vw,62px); margin-top:22px}
.duo p{margin:0 0 17px; break-inside:avoid; max-width:none}
@media (max-width:820px){ .duo{columns:1} }

.num{font-family:var(--mono); font-weight:500; font-style:normal;
  color:var(--blueprint); font-variant-numeric:tabular-nums;
  letter-spacing:.01em}
/* заголовки разделов в подвале и шапке таблиц — тоже данные */
.aside dt{color:var(--graphite-2)}
.steps li::before{color:var(--blueprint)}
.crumb a:hover{color:var(--blueprint)}

/* ---------- ступени (реальная последовательность) ---------- */
.steps{margin:0; padding:0; list-style:none; counter-reset:s;
  border-top:1px solid var(--line)}
.steps li{counter-increment:s; display:grid;
  grid-template-columns:clamp(42px,5vw,64px) 1fr; gap:clamp(16px,2.4vw,30px);
  padding:24px 0; border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);
  font-family:"Oswald","Oswald-fb",sans-serif; font-size:17px; letter-spacing:.06em;
  color:var(--blueprint); padding-top:3px; font-weight:500}
.steps p{margin:0; color:var(--graphite-2)}

/* ---------- таблица данных ---------- */
.tblwrap{overflow-x:auto; margin:32px 0 0;
  border-top:2px solid var(--graphite)}
table.data{border-collapse:collapse; width:100%; min-width:330px; font-size:16.5px}
table.data th{font-family:"Oswald","Oswald-fb",sans-serif; font-size:13px;
  letter-spacing:.11em; text-transform:uppercase; text-align:left;
  padding:13px 17px 13px 0; border-bottom:2px solid var(--blueprint);
  color:var(--blueprint); vertical-align:bottom}
table.data td{padding:13px 17px 13px 0; border-bottom:1px solid var(--line);
  vertical-align:top}
table.data td + td{color:var(--blueprint); font-family:var(--mono);
  font-size:14.5px; letter-spacing:-.01em}
table.data tr:last-child td{border-bottom:none}
table.data td:first-child{font-family:"Oswald","Oswald-fb",sans-serif; font-size:16px;
  color:var(--graphite)}

/* ---------- ведущий снимок раздела ----------
   max-width по файлу задаётся инлайном; апскейла нет по построению. */
.hero{margin:0 0 clamp(30px,4vw,52px); border:1px solid var(--line-2);
  background:var(--paper); padding:clamp(10px,1.4vw,16px);
  width:fit-content; max-width:100%}
.hero img{display:block; width:auto; max-width:100%; height:auto;
  filter:var(--img-filter)}
.hero figcaption{margin-top:13px; padding-top:11px;
  border-top:1px solid var(--line); font-family:"Oswald","Oswald-fb",sans-serif;
  font-size:13px; letter-spacing:.02em; color:var(--blueprint)}

/* ---------- галерея: НЕ растягиваем мелкие фото ----------
   Ширина на figure задаётся инлайном по натуральному размеру фото,
   но её НАДО ограничить шириной колонки, иначе снимок 960px уносит
   страницу за край телефона (подтверждено рендером: 944px при 390). */
.gal{display:flex; flex-wrap:wrap; gap:15px; margin:34px 0 0}
.gal figure{margin:0; border:1px solid var(--line-2); background:var(--paper);
  padding:9px; flex:0 1 auto; max-width:100%; min-width:0}
.gal img{display:block; height:auto; max-width:100%; filter:var(--img-filter)}
.gal figcaption{margin-top:9px; font-family:"Oswald","Oswald-fb",sans-serif;
  font-size:13px; letter-spacing:.03em; color:var(--graphite-2)}

/* ---------- карточки разделов ---------- */
.xgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); margin:34px 0 0}
@media (min-width:820px){
  /* 6 карточек ровно в два ряда по три — auto-fit давал 4+2 с дырой */
  .xgrid{grid-template-columns:repeat(3,1fr)}
}
.xcard{background:var(--paper); padding:25px 23px 23px; text-decoration:none;
  color:inherit; display:flex; flex-direction:column; gap:8px;
  transition:background .18s cubic-bezier(.2,.7,.3,1)}
.xcard:hover{background:var(--paper-2)}
.xcard h3{margin:0}
.xcard p{margin:0; font-size:16.5px; color:var(--graphite-2); max-width:none}
.xcard__go{margin-top:auto; padding-top:13px;
  font-family:"Oswald","Oswald-fb",sans-serif; font-size:13px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--blueprint)}

/* ---------- обзорная полоса главной ----------
   Снимки разной ширины: выравниваем по высоте строки — задаём высоту,
   ширину пускаем auto. Пропорции сохраняются, апскейла нет. */
.strip{display:grid; gap:11px; margin:clamp(26px,3vw,38px) 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(212px,100%),250px))}
.strip__i{text-decoration:none; color:inherit; min-width:0;
  border:1px solid var(--line-2); background:var(--paper);
  padding:9px; transition:background .18s cubic-bezier(.2,.7,.3,1)}
.strip__i:hover{background:var(--paper-2)}
/* Ячейки равные: кадрируем по общей высоте, апскейла нет —
   object-fit:cover только обрезает, не растягивает пиксели. */
.strip__i img{display:block; width:100%; max-width:100%; height:146px;
  object-fit:cover; object-position:center}
.strip__i span{display:block; margin-top:9px; font-family:"Oswald","Oswald-fb",sans-serif;
  font-size:13px; letter-spacing:.02em; color:var(--graphite-2)}
.strip__i:hover span{color:var(--blueprint)}
@media (max-width:620px){ .strip__i img{height:132px} }

/* Перечень разделов вместо сетки одинаковых карточек: порядок теории
   несёт смысл, значит список, а не шесть равновесных прямоугольников. */
.idx{margin:0; padding:0; list-style:none; counter-reset:x;
  border-top:1px solid var(--line-2)}
.idx li{counter-increment:x; border-bottom:1px solid var(--line)}
.idx a{display:grid; grid-template-columns:clamp(44px,5vw,70px) 1fr;
  gap:clamp(14px,2.2vw,28px); padding:21px 0; text-decoration:none;
  color:inherit; transition:background .16s cubic-bezier(.2,.7,.3,1)}
.idx a:hover{background:var(--paper-2)}
.idx a::before{content:counter(x,decimal-leading-zero);
  font-family:"Oswald","Oswald-fb",sans-serif; font-size:16px; letter-spacing:.06em;
  color:var(--blueprint); font-weight:500; padding-top:3px}
.idx h3{margin:0 0 5px}
.idx p{margin:0; font-size:16.5px; color:var(--graphite-2); max-width:62ch}
.idx a > div{min-width:0}
.idx a:hover h3{color:var(--blueprint)}
.rec__go{margin:clamp(24px,3vw,36px) 0 0}
.rec__go a{font-family:"Oswald","Oswald-fb",sans-serif; font-size:16px;
  letter-spacing:.03em; color:var(--blueprint); text-decoration:none;
  min-height:30px; display:inline-flex; align-items:center}
.rec__go a:hover{text-decoration:underline}

/* ---------- столбцы причин ----------
   Рендер показал 40 знаков в строке при норме 65-75: три колонки
   на 1140px физически не дают нормальной меры для абзаца. Берём две
   колонки шире и уменьшаем кегль — мера выходит в район 60-68. */
.cols{display:grid; gap:clamp(30px,3.8vw,58px); margin:34px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
.cols > div{border-top:2px solid var(--graphite); padding-top:17px}
.cols p{margin:0; font-size:16.5px; line-height:1.64;
  color:var(--graphite-2); max-width:none}

/* ---------- перелинковка ---------- */
.rel{margin:0; padding:0; list-style:none; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(224px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line)}
.rel li{background:var(--paper)}
.rel a{display:block; padding:19px 21px; text-decoration:none; color:inherit;
  font-family:"Oswald","Oswald-fb",sans-serif; font-size:16px; line-height:1.3;
  min-height:62px; transition:background .18s cubic-bezier(.2,.7,.3,1)}
.rel a:hover{background:var(--paper-2); color:var(--blueprint)}
.rel span{display:block; margin-top:7px; font-family:"Source Serif 4","Serif-fb",serif;
  font-size:16px; color:var(--graphite-2)}

/* ---------- крошки ----------
   Разделитель «/» декоративен: цвет --line-2 даёт 1.89:1 и провалил бы
   контраст как текст, поэтому он скрыт от чтения (aria-hidden) и
   рисуется как разделитель. Ссылка получает зону нажатия 30px —
   inline-элемент давал 17px. */
.crumb{padding:17px 0 0; font-family:"Oswald","Oswald-fb",sans-serif; font-size:12px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--graphite-2);
  display:flex; align-items:center; flex-wrap:wrap}
.crumb a{color:var(--graphite-2); text-decoration:none;
  min-height:30px; display:inline-flex; align-items:center}
.crumb a:hover{color:var(--blueprint); text-decoration:underline}
.crumb span{color:var(--line-2); padding:0 7px;
  min-height:30px; display:inline-flex; align-items:center}

/* ---------- подвал ---------- */
.foot{background:var(--foot-bg); color:var(--foot-fg); padding:calc(var(--sp)*.62) 0}
.foot__in{display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:34px}
.foot h2{font-family:"Oswald","Oswald-fb",sans-serif; font-size:13px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--foot-mute); margin:0 0 13px; font-weight:400}
.foot ul{margin:0; padding:0; list-style:none}
.foot a{color:var(--foot-fg); text-decoration:none; font-size:16px;
  padding:6px 0; min-height:30px; display:inline-flex; align-items:center}
.foot a:hover{color:var(--foot-hover); text-decoration:underline}
.foot p{font-size:16px; color:var(--foot-mute); margin:0; max-width:46ch}
.foot__base{margin-top:36px; padding-top:21px; border-top:1px solid var(--foot-line);
  font-size:13px; color:var(--foot-mute)}

@media (max-width:860px){
  .split{grid-template-columns:1fr}
  .head__lead{font-size:19px}
}

/* ТЁМНАЯ ТЕМА. Не инверсия бумаги (это дало бы негатив светокопии и
   убило синьку), а смена носителя: та же калька на подсвеченном столе.
   Ступени фона идут ВВЕРХ по светлоте, линейки светлее фона, синька
   вытянута по светлоте с сохранением тона (~202°).
   Контраст проверен формулой: текст 12.7:1, второстепенный 8.0,
   ссылки 6.5, синька 7.3 — все выше порога 4.5. */
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]){
  --paper:#1b1f20; --paper-2:#212527; --paper-3:#272c2e;
  --graphite:#dde2e0; --graphite-2:#aeb6b4;
  --alum:#7d858a; --alum-dark:#9aa3a8;
  --blueprint:#7fb2cf;
  --line:#343a3c; --line-2:#434a4c;
  --plate-bg:#23282a;
  --foot-bg:#141718; --foot-fg:#c6cbc9; --foot-mute:#8d9593;
  --foot-line:#2a2f31; --sel-fg:#10161a;
  /* штриховка на тёмном тонет при .26 */
  --hatch-op:.36;
  /* снимки сняты на светлом фоне: гасим форсаж, не затемняем материал */
  --img-filter:brightness(.92) contrast(1.02);
  --foot-hover:#f2f5f4;
  --plate-shadow:0 2px 18px rgba(0,0,0,.32);
 }
}
:root[data-theme="dark"]{
  --paper:#1b1f20; --paper-2:#212527; --paper-3:#272c2e;
  --graphite:#dde2e0; --graphite-2:#aeb6b4;
  --alum:#7d858a; --alum-dark:#9aa3a8;
  --blueprint:#7fb2cf;
  --line:#343a3c; --line-2:#434a4c;
  --plate-bg:#23282a;
  --foot-bg:#141718; --foot-fg:#c6cbc9; --foot-mute:#8d9593;
  --foot-line:#2a2f31; --sel-fg:#10161a;
  --hatch-op:.36;
  --img-filter:brightness(.92) contrast(1.02);
  --foot-hover:#f2f5f4;
  --plate-shadow:0 2px 18px rgba(0,0,0,.32);
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}