/* Галерея систем. Палитра та же, что на главной: сайт и визуализации
   должны читаться как одно изделие. */

.viz-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.viz-chip{
  appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--dim);font:inherit;font-size:13px;padding:7px 14px;border-radius:2px;
  cursor:pointer;transition:border-color .16s,color .16s,background .16s;
}
.viz-chip:hover{color:var(--ink);border-color:#3a3f52}
.viz-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}

.viz-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
}
.viz-tile{
  position:relative;margin:0;border:1px solid var(--line);background:var(--bg2);
  border-radius:2px;overflow:hidden;transition:border-color .18s,transform .18s;
}
.viz-tile:hover{border-color:#3a3f52}
.viz-canvas{
  display:block;width:100%;aspect-ratio:4/3;background:var(--bg);
}
/* Запасной вариант для браузеров без aspect-ratio. */
@supports not (aspect-ratio:1){ .viz-canvas{height:171px} }

.viz-cap{
  display:flex;align-items:baseline;gap:9px;padding:10px 12px 12px;
  border-top:1px solid var(--line2);
}
.viz-num{
  font:11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--faint);
  letter-spacing:.06em;padding-top:2px;
}
.viz-title{font-size:14px;font-weight:600;color:var(--ink);flex:1;line-height:1.3}
.viz-kind{font-size:11px;color:var(--faint);letter-spacing:.09em;text-transform:uppercase}

.viz-open{
  position:absolute;inset:0;border:0;background:transparent;cursor:pointer;
  appearance:none;padding:0;
}
.viz-open:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.viz-broken{opacity:.25}

/* ---------- Развёрнутый просмотр ---------- */

.viz-over{
  position:fixed;inset:0;z-index:60;background:rgba(5,6,11,.97);
  display:flex;align-items:stretch;
}
.viz-over[hidden]{display:none}
.viz-over-canvas{flex:1;min-width:0;display:block;background:var(--bg)}
.viz-info{
  width:330px;flex:none;padding:34px 28px;overflow-y:auto;
  border-left:1px solid var(--line);
}
.viz-info-kind{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  margin-bottom:10px;
}
.viz-info-title{margin:0 0 14px;font-size:27px;line-height:1.1;letter-spacing:-.02em}
.viz-info-note{margin:0;color:#b9b6ae;font-size:14.5px;line-height:1.6}
.viz-map{
  margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:12.5px;
}
.viz-map dt{color:var(--faint);letter-spacing:.02em}
.viz-map dt::after{content:" →";color:#3a3f52}
.viz-map dd{margin:0;color:#cfcbc2}
.viz-close{
  position:absolute;top:18px;right:18px;z-index:2;
  appearance:none;border:1px solid var(--line);background:rgba(5,6,11,.8);
  color:var(--dim);font:inherit;font-size:12.5px;padding:8px 15px;border-radius:2px;
  cursor:pointer;
}
.viz-close:hover{color:var(--ink);border-color:#3a3f52}

@media (max-width:820px){
  .viz-over{flex-direction:column}
  .viz-over-canvas{flex:none;height:52vh;width:100%}
  .viz-info{width:auto;border-left:0;border-top:1px solid var(--line);padding:22px}
  .viz-info-title{font-size:22px}
}

/* ---------- Живая витрина на главной ---------- */

.sys-live{
  position:relative;border:1px solid var(--line);background:var(--bg2);
  border-radius:2px;overflow:hidden;
}
.sys-live canvas{display:block;width:100%;aspect-ratio:16/9;background:var(--bg)}
@supports not (aspect-ratio:1){ .sys-live canvas{height:280px} }
.sys-live-tag{
  position:absolute;left:12px;bottom:11px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);pointer-events:none;
  background:rgba(5,6,11,.6);padding:4px 8px;border-radius:2px;
}

/* Обложка. Раньше здесь лежало видео, и правило object-fit растягивало
   его по экрану. Холст сам знает свой размер в пикселях, поэтому ему
   нужен только размер на странице. */
canvas.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;opacity:.42;display:block;
}

/* ---------- Панель звука ---------- */

.viz-bar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;padding:13px 0;margin-bottom:24px;
  background:linear-gradient(180deg,rgba(5,6,11,.97) 72%,rgba(5,6,11,0));
}
.viz-play{
  appearance:none;border:1px solid var(--accent);background:var(--accent);color:#fff;
  font:inherit;font-size:14px;font-weight:600;padding:11px 22px;border-radius:2px;
  cursor:pointer;flex:none;
}
.viz-play:hover{background:var(--accent-dim);border-color:var(--accent-dim)}
.viz-play.on{background:transparent;color:var(--ink);border-color:var(--line)}
.viz-tracks{display:flex;gap:7px;flex-wrap:wrap}
.viz-track{
  appearance:none;border:1px solid var(--line);background:transparent;color:var(--dim);
  font:inherit;font-size:13px;padding:8px 13px;border-radius:2px;cursor:pointer;
  transition:color .16s,border-color .16s;
}
.viz-track:hover{color:var(--ink);border-color:#3a3f52}
.viz-track.on{color:var(--ink);border-color:var(--accent)}
.viz-meter{
  flex:1;min-width:120px;height:3px;background:var(--line2);border-radius:2px;
  overflow:hidden;
}
.viz-meter i{display:block;height:100%;width:0;background:var(--accent);transition:width .08s linear}
.viz-hint{font-size:12.5px;color:var(--faint);flex-basis:100%}

/* ---------- Страница каталога ---------- */

.sys-nav{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--max);margin:0 auto;width:100%;padding:24px 28px;
  border-bottom:1px solid var(--line);
}
.sys-intro{padding:64px 0 44px}
.sys-h1{
  margin:0;font-size:clamp(38px,7vw,86px);line-height:.98;letter-spacing:-.035em;
  font-weight:800;
}
.sys-intro .lede{max-width:60ch;margin-top:26px}
.sys-note{
  margin:22px 0 0;color:var(--faint);font-size:13.5px;max-width:60ch;
}
.sys-note b{
  color:var(--dim);font-weight:600;border:1px solid var(--line);border-radius:2px;
  padding:1px 6px;font-size:12px;
}
.sys-foot{
  border-top:1px solid var(--line);margin-top:70px;padding:34px 0 60px;
  color:var(--faint);font-size:13.5px;
}
.sys-foot p{margin:0 0 10px}
.sys-foot a{color:var(--dim);text-decoration:none}
.sys-foot a:hover{color:var(--ink)}

/* Переход из витрины в полный каталог. */
.sys-more{max-width:520px;margin:12px auto 0}