/* PPKLink — витрина. ПРИБОРНЫЙ ОТСЕК — единственная тёмная секция страницы:
   фото участка и окно рабочего места с вкладками экранов. Ниже — ролики.
   ⚠ Токены заданы АБСОЛЮТНЫМИ значениями: в тёмной теме страницы отсек
   остаётся ровно таким же, а не «инвертируется дважды». Набор тот же, что у
   тёмной темы в tokens.css. */
.device-sec{padding:var(--sec-node) 0;
  --canvas:#0D0E11;--surface:#191A20;--field:#212228;--tint:#26272E;--hair:#2C2E36;--border:#3B3D47;
  --text:#EEEFF3;--mute:#A6A8B2;--faint:#8A8C96;--accent:#4D8DFF;--accent-hover:#6FA3FF;
  --accent-soft:#14223A;--accent-btn:#2E6FE0;--accent-text:#7FAEFF;
  --green:#4CC26E;--green-soft:#11301C;--green-deep:#7FDC9A;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -18px rgba(0,0,0,.8);
  background:var(--canvas);color:var(--text);color-scheme:dark}
/* окно рабочего места (фотография участка убрана по слову владельца 05.09.2026) */
.device{margin-top:36px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  overflow:hidden;box-shadow:0 40px 80px -50px rgba(0,0,0,.9)}
/* ⚠ Кадр экрана — РОВНО 1200 CSS-px, как ширина снимка ui_*.webp 1200w: при
   1184 (ширина .wrap) браузер сжимал картинку на 1,3 %, и буквы на снимках
   вставали неровно («Разд елит ель» — владелец, 06.09). Отсек выпускается за
   колонку на 9 px с каждой стороны: 1184 + 18 − 2 рамки = 1200. Выше 1700 px
   колонка 1360 — отсек остаётся 1202 и стоит по центру. На экранах с
   масштабом 125 % браузер берёт @md 1500w (1200 × 1,25) — тоже 1:1. */
@media(min-width:1240px) and (max-width:1699px){.device{margin-left:-9px;margin-right:-9px}}
@media(min-width:1700px){.device{max-width:1202px;margin-left:auto;margin-right:auto}}
.app-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--hair);
  background:var(--field)}
.app-dot{display:flex;gap:6px}
.app-dot i{width:9px;height:9px;border-radius:50%;background:var(--border)}
.app-title{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--mute);letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-clock{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--mute);flex:none}
/* вкладки — как рейка разделов в самой программе */
.tabs{display:flex;gap:2px;padding:8px 10px 0;border-bottom:1px solid var(--hair);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:none;background:none;font:inherit;font-size:13.5px;font-weight:500;color:var(--mute);
  padding:11px 16px;border-radius:9px 9px 0 0;cursor:pointer;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur)}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--accent);background:var(--field)}
/* ⚠ Панель фиксированной пропорции 4:3 (все снимки 1200×900): высота отсека
   не прыгает при переключении вкладок. */
.panel{position:relative;aspect-ratio:4/3;background:#0D0E11}
/* ⚠ display:block ниже перебивал бы атрибут hidden (у него специфичность
   ниже), и все пять снимков лежали стопкой — сверху оказывался последний. */
.panel .pane{position:absolute;inset:0;display:block}
.panel .pane[hidden]{display:none}
.panel picture{display:block;width:100%;height:100%}
.panel img{display:block;width:100%;height:100%;object-fit:contain}
.say{margin:0;padding:16px 18px 18px;display:grid;grid-template-columns:1fr;gap:6px;color:var(--mute);
  font-size:var(--fs-small);line-height:1.55;min-height:3.4em;border-top:1px solid var(--hair)}
.say b{color:var(--text)}
@media(max-width:520px){.app-title .station{display:none}}

/* ─── РОЛИКИ С ЛИНИИ ─────────────────────────────────────────────── */
.video{padding:var(--sec-narr) 0;border-top:1px solid var(--hair)}
.vids{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:32px}
.vid{position:relative;aspect-ratio:9/16;border-radius:var(--r-card);overflow:hidden;background:#111;
  box-shadow:var(--shadow)}
.vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-out)}
.vid:hover img{transform:scale(1.03)}
/* кнопка накрывает карточку целиком; ролик грузится только после нажатия */
.vid-btn{position:absolute;inset:0;border:0;padding:0;cursor:pointer;color:#fff;font:inherit;text-align:left;
  background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.74) 100%)}
.vid-play{position:absolute;left:50%;top:50%;width:58px;height:58px;transform:translate(-50%,-50%);
  border-radius:50%;background:rgba(255,255,255,.94);color:#1D1D1F;display:grid;place-items:center;
  transition:transform var(--dur) var(--ease-out)}
.vid-btn:hover .vid-play{transform:translate(-50%,-50%) scale(1.06)}
.vid-t{position:absolute;left:14px;right:14px;bottom:14px;font-size:13.5px;line-height:1.4;font-weight:600}
.vid-t small{display:block;font-family:"JetBrains Mono",monospace;font-weight:500;font-size:11px;color:#C9CCD6;
  margin-bottom:5px;letter-spacing:.04em}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-more{margin-top:22px}
.vid-more a{display:block;padding:6px 0}   /* цель касания не ниже 24 px */
@media(max-width:900px){.vids{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){
  .vids{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:0 18px 8px;
    margin:28px -18px 0;scrollbar-width:none}
  .vid{flex:0 0 72%;scroll-snap-align:start}
}