:root {
  --bg: #000; --ink: #e8e6e1; --dim: #6a6a6a; --faint: #2a2a2a; --sig: #ff5a1f;
  --mono: ui-monospace, 'Cascadia Mono', 'JetBrains Mono', Consolas, monospace;
  --sans: 'Segoe UI Variable Display', 'Segoe UI', system-ui, sans-serif;
  --gut: 32px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color-scheme: dark; scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font: 12px/1.6 var(--mono); min-height: 100vh; }
a { color: inherit; text-decoration: none; }
a:hover { color: #fff; }
code { font-family: var(--mono); }
.lbl { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--dim); }
.dim { color: #8a8a8a; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gut); }
:focus-visible { outline: 1px solid var(--sig); outline-offset: 2px; }
/* внешняя ссылка: обычная → под углом. Символ ↗ в браузере на Windows рисовался цветным эмодзи */
.ne { display: inline-block; transform: rotate(-45deg); }

/* шапка */
.top { display: flex; justify-content: space-between; align-items: center; padding: 24px var(--gut); border-bottom: 1px solid var(--faint); position: relative; z-index: 5; }
body[data-page="hall"] .top { position: absolute; inset: 0 0 auto 0; border: 0; }
.brand { font-size: 13px; letter-spacing: .5em; color: #fff; }
.top-l { display: flex; gap: 18px; align-items: baseline; }
.top-r { display: flex; gap: 22px; align-items: center; white-space: nowrap; }
.langs b { color: #fff; font-weight: 400; }
.sw { display: inline-block; width: 26px; height: 12px; border: 1px solid #444; border-radius: 7px; vertical-align: middle; position: relative; margin: 0 4px; }
.sw::after { content: ''; position: absolute; top: 1px; width: 8px; height: 8px; border-radius: 50%; transition: left .2s; }
.sw.is-hall::after { left: 1px; background: #fff; }
.sw.is-console::after { left: 15px; background: var(--sig); }

/* статусы и версии */
.st { color: #555; }
.st-live { color: var(--sig); }
.ver { color: #444; }
.ver-live { color: var(--sig); }

/* Зал: первый экран */
.hero { position: relative; height: 100vh; min-height: 560px; overflow: hidden; }
#hero-obj { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-lead { position: absolute; left: var(--gut); top: 50%; transform: translateY(-50%); max-width: 300px; color: #999; line-height: 1.7; }
.hero-lead .lbl { margin-bottom: 10px; }
.hero-list { position: absolute; left: var(--gut); bottom: 30px; list-style: none; line-height: 2; }
.hero-list b { color: #fff; font-weight: 400; }
.mark::before { content: '○'; color: #444; }
.hero-list a.on .mark::before { content: '●'; color: #fff; }
.hero-list a.on[data-status="live"] .mark::before { color: var(--sig); }
.signal { position: absolute; right: var(--gut); bottom: 30px; text-align: right; line-height: 1.8; }
.hero-down { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); }

/* секции */
.sec { border-top: 1px solid var(--faint); padding: 70px 0 40px; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; }
.rows { border-top: 1px solid var(--faint); }
.row { display: grid; grid-template-columns: 60px 150px 1fr 150px 110px 30px; align-items: center; height: 130px; border-bottom: 1px solid var(--faint); transition: background .2s; }
.row:hover { background: #0a0a0a; }
.mini { width: 150px; height: 130px; }
.row-name { display: flex; flex-direction: column; gap: 4px; }
.big { font: 300 30px/1.1 var(--sans); letter-spacing: -.01em; }
.row-ver { display: flex; flex-direction: column; gap: 4px; font-size: 22px; }
.arr { color: #333; transition: transform .2s, color .2s; }
.row:hover .arr { color: #fff; transform: translateX(4px); }

/* лента */
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.filters[hidden] { display: none; }
.filters button { background: none; border: 1px solid var(--faint); color: #777; font: inherit; padding: 5px 10px; cursor: pointer; border-radius: 2px; }
.filters button.on { border-color: #fff; color: #fff; }
.feed { border-top: 1px solid var(--faint); }
.frow { display: grid; grid-template-columns: 120px 110px 80px 1fr 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--faint); }
.frow[hidden] { display: none; }
.frow time { color: #666; }
.ftype { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: #666; }
.ftype-release { color: var(--sig); }
.ftitle { font: 16px/1.4 var(--sans); }
.farr { color: #444; }
.empty { padding: 16px 0; }
.empty[hidden] { display: none; }

/* подвал */
.foot-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; line-height: 1.9; }
.foot-grid p { margin-top: 10px; max-width: 280px; }
.foot-grid .right { text-align: right; }
.foot-grid .right p { margin-left: auto; }

/* лента целиком, заметка */
.page { padding: 60px 0 80px; }
.h1 { font: 300 48px/1.1 var(--sans); letter-spacing: -.02em; }
.note .h1 { margin: 14px 0 24px; }
.note-meta { margin-top: 30px; }
.prose { font: 16px/1.65 var(--sans); color: #ccc; max-width: 680px; }
.prose p, .prose ul, .prose ol, .prose pre { margin-bottom: 1em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose code { font-size: .9em; color: #fff; }
.prose pre { background: #0a0a0a; border: 1px solid var(--faint); padding: 12px; overflow-x: auto; }

/* экспонат */
.exhibit { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 70px); }
.ex-left { border-right: 1px solid var(--faint); }
.ex-sticky { position: sticky; top: 0; height: calc(100vh - 70px); }
#big-obj { position: absolute; inset: 0; width: 100%; height: 100%; }
.plaque { position: absolute; left: var(--gut); bottom: 30px; border-left: 1px solid #444; padding-left: 12px; line-height: 1.8; }
.shape-note { position: absolute; right: var(--gut); bottom: 30px; }
.ex-right { padding: 48px 48px 80px; }
.ex-title { font: 300 64px/1.05 var(--sans); letter-spacing: -.03em; margin-top: 10px; }
.ex-desc { font: 17px/1.55 var(--sans); color: #bbb; margin-top: 14px; max-width: 520px; }
.btns { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.btn { border: 1px solid #333; padding: 10px 16px; color: #999; }
.btn-main { border-color: #fff; color: var(--ink); }
.install { margin-top: 30px; border: 1px solid var(--faint); display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; }
.copy { background: none; border: 1px solid #333; color: #999; font: inherit; padding: 4px 10px; cursor: pointer; }
.copy.done { color: var(--sig); }
.spec { margin-top: 36px; }
.spec > div:not(.lbl) { display: grid; grid-template-columns: 120px 1fr; padding: 9px 0; border-bottom: 1px solid var(--faint); }
.spec > div:not(.lbl) > span:first-child { color: var(--dim); }
.history { margin-top: 40px; }
.history > .lbl { margin-bottom: 10px; }
.rel { border-bottom: 1px solid var(--faint); }
.rel summary { display: grid; grid-template-columns: 110px 1fr 20px; padding: 13px 0; cursor: pointer; list-style: none; }
.rel summary::-webkit-details-marker { display: none; }
.rel summary::after { content: '+'; color: #555; }
.rel[open] summary::after { content: '−'; }
.rel summary time { color: #666; }
.rel .prose { padding: 0 0 14px 110px; font-size: 14px; }
.tag { color: #ddd; }
.rel:first-of-type .tag { color: var(--sig); }
.tag.pre::after { content: ' pre'; color: #555; }
.commits { list-style: none; border-top: 1px solid var(--faint); }
.commits li { border-bottom: 1px solid var(--faint); padding: 10px 0; }
.commits code { color: var(--sig); margin-right: 8px; }
.commits time { color: #666; margin-left: 8px; }
.ex-nav { display: flex; justify-content: space-between; margin-top: 50px; padding-top: 18px; border-top: 1px solid var(--faint); }

/* Пульт */
.console { display: grid; grid-template-columns: 320px 1fr; grid-template-rows: 1fr auto; gap: 20px; padding: 20px var(--gut); min-height: calc(100vh - 70px);
  background-image: linear-gradient(#111 1px, transparent 1px), linear-gradient(90deg, #111 1px, transparent 1px); background-size: 32px 32px; }
.channels { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--faint); border: 1px solid var(--faint); align-self: start; }
.ch { background: #0a0a0a; padding: 10px 12px; height: 80px; display: flex; flex-direction: column; gap: 2px; }
.ch.is-active { background: #171717; }
.ch-name { font-size: 13px; }
.ch .ver { font-size: 16px; }
.panels { border: 1px solid var(--faint); background: #0a0a0a; padding: 16px 18px; }
.panel + .panel { margin-top: 30px; }
.js .panel + .panel { margin-top: 0; }
.panel-name { font: 300 32px/1.2 var(--sans); margin: 4px 0 8px; }
.panel-meta { display: flex; gap: 40px; margin: 18px 0; }
.big-ver { font-size: 26px; }
.hist { list-style: none; }
.hist li { padding: 6px 0; border-bottom: 1px solid var(--faint); }
.hist time { color: #666; margin-left: 8px; }
.fp { border-collapse: collapse; margin: 12px 0; width: 100%; }
.fp td { padding: 5px 0; border-bottom: 1px solid var(--faint); vertical-align: top; word-break: break-all; }
.fp td:first-child { color: var(--dim); width: 110px; }
.term { grid-column: 1 / -1; border: 1px solid var(--faint); background: #050505; padding: 10px 12px; }
.term-log { max-height: 180px; overflow-y: auto; color: #999; white-space: pre-wrap; }
.term-row, .qc-row { display: flex; gap: 8px; margin-top: 6px; }
.term-row label, .qc-row label { color: var(--sig); }
.term-row input, .qc-row input { flex: 1; background: none; border: 0; outline: 0; color: #fff; font: inherit; }
.keys { margin-top: 6px; }

/* быстрая консоль */
.qc { position: fixed; inset: 0 0 auto 0; height: 0; overflow: hidden; background: rgba(5, 5, 5, .97); border-bottom: 1px solid #333; transition: height .25s; z-index: 20; }
.qc.qc-open { height: 240px; }
.qc-in { padding: 14px var(--gut); height: 100%; display: flex; flex-direction: column; }
.qc-log { flex: 1; overflow-y: auto; color: #888; white-space: pre-wrap; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .qc, .row, .arr, .sw::after { transition: none; }
}

/* узкие экраны */
@media (max-width: 860px) {
  :root { --gut: 16px; }
  .top-r { gap: 12px; letter-spacing: .15em; }
  .crumb { display: none; }
  .hero-lead { top: 90px; transform: none; }
  .signal { left: var(--gut); right: var(--gut); bottom: 20px; text-align: left; }
  .hero-list { bottom: 84px; }
  .hero-down { display: none; }
  .row { grid-template-columns: 44px 70px 1fr auto; height: auto; padding: 12px 0; gap: 8px; }
  .mini { width: 70px; height: 61px; }
  .row-st, .arr { display: none; }
  .big { font-size: 22px; }
  .row-ver { font-size: 14px; }
  .frow { grid-template-columns: 90px 1fr 20px; row-gap: 2px; }
  .fprod, .ftype { display: none; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-grid .right { text-align: left; }
  .foot-grid .right p { margin-left: 0; }
  .exhibit { grid-template-columns: 1fr; }
  .ex-left { border-right: 0; border-bottom: 1px solid var(--faint); }
  .ex-sticky { position: relative; height: 60vh; }
  .ex-right { padding: 32px var(--gut) 60px; }
  .ex-title { font-size: 44px; }
  .rel .prose { padding-left: 0; }
  .console { grid-template-columns: 1fr; }
  .term { position: sticky; bottom: 0; }
  .keys { display: none; }
}