<!-- === МАРКЕР: CSS СТИЛИ НАЧАЛО === -->
<!-- Zerkalius Hub (index) — v0.076. Точка входа: ссылки на все страницы проекта.
     Маркер версии стоит ЗДЕСЬ, а не первой строкой: первую занимает маркер патчера.
     v0.004: живой фон — обои oboi/Zerkalius-oboi.html в iframe; кнопки: флагман, сетка лаборатории, строка знака.
     v0.005: с кнопки цельного Fold снят номер версии — он устаревал при каждом бампе файла.
     v0.006: ссылка на Zazerkalius — новый интерфейс «истинного» Зеркалиуса (первой в лаборатории).
     v0.007: кнопка «Обои Lively» — все сцены обоев со звуком и записью (lively/Zerkalius-lively.html).
     v0.008: флагман «Zerkalius» ведёт на Zerkalius-code.html; прежний флагман (Zerkalius-genezis.html) — в лаборатории под именем «Genezis»;
             номер версии на тёмной плашке — на живых обоях его не было видно.
     v0.009: кнопки переливаются цветами обоев, каждая со своей фазы.
     v0.010: имена наоборот — флагман (Zerkalius-code.html) подписан «Genezis», в лаборатории Zerkalius-genezis.html — «Zerkalius».
     v0.011: окончательно — флагман (Zerkalius-code.html) подписан «Code», в лаборатории Zerkalius-genezis.html — «Genezis».
     v0.012: лаборатория в порядке создания страниц (по первому появлению в git).
     v0.013: в «Знаке и записях» только Борт-журнал и Обои; Октаэдр и Обои Lively — в лабораторию, по дате.
     v0.014: Fold цельный и Fold · v1.115 — из лаборатории в новую панель «🗄 Архив».
     v0.015: панель «Архив» снята, а сами страницы (Zerkalius-fold.html и папка fold\) вынесены из сайта в archive\_retired\.
     v0.016: XOR Engine снят туда же — кнопка убрана, Zerkalius-xor-engine.html в archive\_retired\.
     v0.029: в Черновиках — «Triangle» (Zerkalius-treugolnik.html), отдельная страница треугольника, заведена 2026-09-24.
     v0.030: «Triangle» — из Черновиков во вторую главную кнопку, под Code.
     v0.031: «Results» (rezultaty/Zerkalius-rezultaty.html) — третья главная кнопка, под Triangle: витрина результатов.
     v0.032: «Compare» (sravnenie/Zerkalius-sravnenie.html) в «Знаке и записях» — одинаковые фигуры в двух наборах таблиц .tsv.
     v0.033: «Code» — из главных кнопок первым в Черновики; главные теперь Triangle и Results.
     v0.034: «WebGL Engine» (Zerkalius-genezis-webgl.html) снят — мёртвая ветка Genezis, страница в archive\_retired\.
     v0.035: «Results» переименован в «Битмультфильмы» (Bit Cartoons); между Triangle и ним — бегущие вниз стрелки.
     v0.036: стрелки дёргаются вниз-вверх рывками, и при «меньше движения» тоже.
     v0.037: «Cone» (zazerkalius/Zerkalius-konus.html) в Черновиках, сразу за Zazerkalius — ◯ Конус отдельной страницей.
     v0.038: живой фон — крутящийся конус-октаэдр Zazerkalius (zazerkalius/…?solo=cone&bg=1) вместо обоев Серпинского; старые обои —
             по кнопке «Обои»; надпись Zerkalius ⇄ Зеркалиус рисует теперь сам хаб (#hubTitle), обои её больше не дают.
     v0.039: «может, название не нужно? … мешает — лучше убери» — большой надписи над конусом нет (для поисковиков — скрытый h1, как был).
     v0.040: «сюда напиши Зеркалиус» — кнопка Zerkalius-code.html в Черновиках подписана Zerkalius / Зеркалиус (была Code / Код).
     v0.042: «Зазеркалиус — под Треугольник, Битмультфильмы — в Записи, из Черновиков убрать Конус»: главные — Треугольник и Зазеркалиус,
             стрелки Треугольник → Битмультфильмы сняты (вели к уехавшей кнопке); Битмультфильмы — в «Знак и записи»; Cone — из Черновиков.
     v0.043: «добавить кнопку в Хаб — Звук»: ♫ Звук в правом нижнем углу — звучит живой фон (строки подряд), головки видны на конусе и
             в двух пирамидах Серпинского по бокам (Zazerkalius v0.381); фон получил allow="autoplay", иначе звук в нём не пускают.
     v0.044: «её наверх посередине и мигающей, когда звук идёт»: ♫ Звук — вверху по центру, пока звучит — рамка мигает.
     v0.045: по снимку «v0.043» — «это вниз»: номер версии — внизу по центру экрана.
     v0.046: по снимку «♫ Звук ■» — «оставь только символ музыки, без рамки»: один ♫ без рамки и фона; звучит — бирюзовый, мигает свечением.
     v0.047: «головку по столбцам» — звук фона в две головки: строки подряд + столбцы сверху вниз (Zazerkalius v0.383, «стр+стл»).
     v0.048: «в одну строку» — Triangle и Зазеркалиус рядом (.mainrow).
     v0.049: «перемести Черновики вниз, но не ниже номера версии» — Черновики последними, под «Знаком и записями»; снизу у хаба
             запас не меньше 44 px, чтобы нижняя панель не заезжала на номер версии (он прибит к низу экрана).
     v0.050: «2 и более значков, каждый отдельно вкл/выкл» — вместо одного ♫ два: ♫ строки (бирюза) и ♪ столбцы (бас, золото),
             каждый включает свою головку звука фона (Zazerkalius v0.387).
     v0.051: «пусть все кнопки меню будут затемнены, пока не включится музыка, и любой щелчок по странице включает все ноты, если ни одна
             не включена»; «значки нот пониже и побольше». Браузер не даёт звуку начаться без щелчка, поэтому первый щелчок в хабе
             (и по кнопке меню тоже) не уводит со страницы, а включает обе головки; кнопки светлеют, когда фон ответил, что звучит
             (или через 1,5 с, если фон молчит, чтобы меню не осталось запертым). Ноты — 40 px, под надписью Zerkalius.
     v0.052: «да, если в кеше нет ничего, то так» — притушенное меню только у того, у кого музыка ещё ни разу не звучала: как только
             фон ответил «звучит», в localStorage ложится zerk_hub_snd = 1, и дальше хаб открывается сразу светлым, щелчки не перехватывает.
     v0.053: по снимку номера версии — «наверх»: номер — вверху по центру (ноты с v0.051 стоят под надписью, верх свободен).
     v0.054: «добавь ещё нот — До Ре Ми Фа Соль Ля Си, серыми, не включёнными, при включении — цветные», «разве не 7 всего нот в музыке?» —
             семь значков-нот: До (бывший ♫, строки подряд), Ре (бывший ♪, столбцы, бас), Ми, Фа, Соль, Ля, Си — у каждой своя головка
             звука фона (Zazerkalius v0.389). Выключенная — серая, включённая горит своим цветом радуги, тем же, что её бит на конусе.
     v0.055: «кнопки хаба не делать активными, пока все ноты не включить (в первый раз)» — меню притушено и не нажимается, пока хоть раз
             не загорятся все семь нот разом; тогда — отметка zerk_hub_all7 в localStorage, и дальше меню живое сразу.
     v0.056: «нужна и пауза при клике на странице, и плей — после паузы с того же момента, а сброс как-то иначе»: щелчок по пустому месту —
             пауза / дальше (звук и кручение конуса), правый щелчок по пустому месту — сброс: все семь нот с начала (Zazerkalius v0.392).
     v0.057: по снимку «До Ре Ми Фа Соль Ля Си» — «также на англ»: ноты — такая же строка, как кнопки: язык меняется вместе со сбоем,
             по-английски буквами C D E F G A B.
     v0.058: «адаптировать к телефону нажатие кнопок нот»: касание — сразу (touch-action: manipulation — без ожидания двойного касания),
             без синей вспышки и без «залипшего» наведения (подсветка при наведении — только где есть мышь); палец — не меньше 44 px;
             долгое нажатие не зовёт меню и выделение; на узком экране ноты мельче — в одну строку.
     v0.059: по снимку треугольника бит — «расположи ноты стрелкой вверх; при смене англ/рус все должны стоять на местах; крутящийся конус
             пока отключи»: ноты — треугольником 1 + 2 + 4 (До; Ре Ми; Фа Соль Ля Си — как дерево длительностей), у каждой постоянная
             ширина (Соль ↔ G ничего не сдвигает); фон-конус спрятан (visibility: hidden) — звук играет в нём же, поэтому он загружен.
     v0.060: «1-2-3-1 — такой треугольник-стрелка»: ряды 1, 2, 3 и древко 1 — До; Ре Ми; Фа Соль Ля; Си (под Соль).
     v0.061: «на хаб надо видеозапись»: ⏺ в правом верхнем углу — ролик кадра формата устройства (телефон 1080×1920, компьютер
             1920×1080): стрелка нот, как горят и мигают, и конус, если он виден; звук нот — прямо из фона (Zazerkalius v0.394).
             И meta viewport: без неё телефон рисовал хаб шириной 980 px, уменьшенным (ноты мелкие, правила узкого экрана спали).
     v0.062: по снимку «D» — «D = Ре?» → «да» на «писать слогами»: по-английски ноты — не буквами C D E F G A B, а слогами латиницей:
             Do Re Mi Fa Sol La Si.
     v0.063: «ноты обрамить каждую ромбом, чтобы в общем получилась [стрелка]» — каждая нота в ромбе, ромбы стыкуются рёбрами (ряд заходит
             в ряд наполовину), нажимается сам ромб. И телефон: «все кнопки в столбик по 1 или по 2 и вниз, чтобы их не видно было, внизу
             стрелки двигаются вниз, мигают; на экране по центру ноты и Серпинский (один — по центру); телефон по горизонту — кнопки тоже
             за экраном, два Серпинских прижаты к своим сторонам» — первый экран телефона: #hubSier (свой холст) + ноты, ниже — меню.
     v0.064: по снимку «Черновиков» у Kubits — «сюда прошлую версию Хаба, где крутящийся есть, с нотами»: кнопка «Хаб с конусом» последней в
             Черновиках → Zerkalius-hub-konus.html, замороженная копия хаба v0.058 (конус виден, семь нот в ряд).
     v0.065: «треугольник должен быть выполнен из бит-ромбов, а не квадратов»: бит Серпинского — ромб. Стоя — ромбы 60°/120° ребро к ребру
             (ряд заходит в ряд наполовину, как ноты), треугольник равносторонний; лёжа — ромбы в клетках, касаются вершинами.
     v0.066: по снимку «лёжа» — «тот треугольник — левый и правый»: лёжа у краёв — два таких же равносторонних треугольника из ромбов
             ребро к ребру, как стоя (прямоугольный из ромбов ребро к ребру не сложить — строки перекашиваются, рисунок ломается).
     v0.067: «а если треугольники … катетами вдоль вертикали», по показу — «поменять местами»: лёжа треугольники на боку — вершина у своего
             края экрана, основание к нотам; «кнопки прямо вниз, большие группы разделить»: на телефоне меню — одним столбцом, Черновики —
             по 5 с просветом; «запустить нажатием — отправить в бесконечность»: нажатая кнопка улетает вдаль и тает в точке, потом страница.
     v0.068: «из хаба убери смену языков, пока оставь только рус буквы»: все подписи — русские (и в разметке, чтобы до скрипта не
             мелькал английский), строки больше не переключаются; сбойные полосы остались, без смены языка.
     v0.070: «в черн[овики]» — кнопка «Пирамида» (oktaedr/Zerkalius-piramida.html: сверху 1, под ней 3, 6, 10… — тетраэдры с октаэдрами
             гранями друг к другу).
     v0.071: «Просмотр GIF» (prosmotr/Zerkalius-prosmotr.html) в «Знаке и записях», за Битмультфильмами: покадровый просмотр
             GIF, через 2 / 4 / 8, участки и склейка одним GIF.
     v0.072: «убери блокировку кнопок, и при любом нажатии запускай все ноты сразу, и в комп. версии не видно треугольника почему-то»:
             меню не запирается (замок v0.055 снят, притушенного меню больше нет); первое нажатие где угодно — и по ноте, и по кнопке меню — включает
             все семь нот разом (фон — Zazerkalius v0.514); Серпинский из ромбов (#hubSier) — и на компьютере: один, по центру во всю высоту, фоном
             за нотами и меню, приглушённо; звучащие биты горят цветом своих нот.
     v0.073: «убери включение по щелчку 7 нот; изначально пусть все неактивны, и только при нажатии начинает играть та, на которую нажал»:
             первый щелчок больше ничего не включает; нота включает и выключает только себя; щелчок по пустому месту — пауза / дальше, только
             когда что-то звучит.
     v0.074: «не видно бегающего бита по треугольнику»: хаб, открытый файлом (file://), не мог читать фон — звучащие биты фон теперь шлёт сам
             (Zazerkalius v0.522); на компьютере треугольник бледнее битами, а бегущий бит — во всю яркость (прежде весь холст был вполсилы);
             «убери выделение текста кнопок» — текст хаба не выделяется. -->
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">   <!-- v0.061: без неё телефон рисовал хаб шириной 980 px, уменьшенным — ноты мелкие, правила узкого экрана не срабатывали -->
    <title>Zerkalius Control Hub — v0.076</title>
    <!-- v0.041, «oktaedr — лого на сайт»: знак Zerkalius — значком вкладки; на остальных страницах его ставит _js/hub-link.js -->
    <link rel="icon" type="image/svg+xml" href="oktaedr/zerkalius-mark.svg">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');

        html, body { height: 100%; }
        body {
            background: #050505;
            color: #00ff66;
            font-family: 'Consolas', 'Roboto Mono', monospace;
            margin: 0;
            overflow: hidden;
        }

        /* Живой фон: обои Zerkalius. Кликам не мешает — события проходят насквозь */
        #bg {
            position: fixed; inset: 0; width: 100%; height: 100%;
            border: 0; z-index: 0; pointer-events: none;
            visibility: hidden;   /* v0.059, «крутящийся конус пока отключи»: не виден, но работает — звук нот играет в нём */
        }

        /* Всё содержимое — поверх фона. Надпись Zerkalius рисуют сами обои, сверху */
        /* v0.048: две главные кнопки — в одну строку (узко — переносятся) */
        .mainrow { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
        .hub {
            position: relative; z-index: 1;
            height: 100vh; box-sizing: border-box;
            display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
            padding: 0 24px max(6vh, 44px);   /* v0.049: снизу — не меньше 44 px: под нижней панелью номер версии (.ver, bottom 10px) */
            gap: 22px;
        }

        /* Заголовок для программ чтения и поисковиков; на экране надпись дают обои */
        h1 {
            position: absolute; width: 1px; height: 1px; overflow: hidden;
            clip: rect(0 0 0 0); white-space: nowrap; margin: 0;
        }
        /* v0.038: надпись сверху — прежде её рисовали обои; теперь фон — конус, надпись даёт хаб. Переливается, как кнопки */
        #hubTitle {
            position: fixed; left: 0; right: 0; top: 5vh; z-index: 1; pointer-events: none; text-align: center;
            font: bold clamp(44px, 10vw, 150px)/1 Consolas, "Roboto Mono", monospace; letter-spacing: .04em;
            color: transparent; background: linear-gradient(90deg, #ff5f6d, #ffc371, #6ee7a0, #22d3ee, #b98cf0, #ff5f6d);
            background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
            filter: drop-shadow(0 0 3px #000) drop-shadow(0 0 18px rgba(255, 209, 102, .35));
            animation: hubTitleHue 14s linear infinite;
        }
        @keyframes hubTitleHue { to { background-position: 300% 0; } }
        /* v0.076, по снимку «Сцены 1» из «△ Сетки» Zazerkalius (надпись из треугольников) — «в хаб надо как-то закинуть»: надпись — на прежнем месте
           заголовка (сверху, 5vh, ряд высотой clamp(44px, 10vw, 150px) — под ним ноты). Треугольники — маской (SVG, каждый чуть сжат к своему центру —
           швы между ними), заливка — та же переливающаяся радуга, что была у прежней надписи (#hubTitle, снята в v0.039) */
        #hubLogo { position: fixed; left: 50%; top: 5vh; transform: translateX(-50%); z-index: 1; pointer-events: none; height: clamp(44px, 10vw, 150px);
                   width: min(92vw, 820px); display: flex; align-items: center; justify-content: center;
                   filter: drop-shadow(0 0 3px #000) drop-shadow(0 0 14px rgba(255, 209, 102, .3)); }
        #hubLogo > i { display: block; width: 100%; aspect-ratio: 77 / 6.93;
                       background: linear-gradient(90deg, #ff5f6d, #ffc371, #6ee7a0, #22d3ee, #b98cf0, #ff5f6d); background-size: 300% 100%;
                       -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2077%206.93%22%3E%3Cpath%20d=%22M0.14,0.08L1.86,0.08L1.00,1.57ZM1.14,1.65L2.86,1.65L2.00,0.16ZM2.14,0.08L3.86,0.08L3.00,1.57ZM3.14,1.65L4.86,1.65L4.00,0.16ZM4.14,0.08L5.86,0.08L5.00,1.57ZM62.14,0.08L63.86,0.08L63.00,1.57ZM2.14,3.38L3.86,3.38L3.00,1.89ZM3.14,1.81L4.86,1.81L4.00,3.30ZM8.14,3.38L9.86,3.38L9.00,1.89ZM9.14,1.81L10.86,1.81L10.00,3.30ZM10.14,3.38L11.86,3.38L11.00,1.89ZM11.14,1.81L12.86,1.81L12.00,3.30ZM12.14,3.38L13.86,3.38L13.00,1.89ZM16.14,3.38L17.86,3.38L17.00,1.89ZM17.14,1.81L18.86,1.81L18.00,3.30ZM18.14,3.38L19.86,3.38L19.00,1.89ZM19.14,1.81L20.86,1.81L20.00,3.30ZM24.14,3.38L25.86,3.38L25.00,1.89ZM25.14,1.81L26.86,1.81L26.00,3.30ZM26.14,3.38L27.86,3.38L27.00,1.89ZM27.14,1.81L28.86,1.81L28.00,3.30ZM30.14,3.38L31.86,3.38L31.00,1.89ZM31.14,1.81L32.86,1.81L32.00,3.30ZM32.14,3.38L33.86,3.38L33.00,1.89ZM33.14,1.81L34.86,1.81L34.00,3.30ZM34.14,3.38L35.86,3.38L35.00,1.89ZM38.14,3.38L39.86,3.38L39.00,1.89ZM39.14,1.81L40.86,1.81L40.00,3.30ZM42.14,3.38L43.86,3.38L43.00,1.89ZM43.14,1.81L44.86,1.81L44.00,3.30ZM46.14,3.38L47.86,3.38L47.00,1.89ZM47.14,1.81L48.86,1.81L48.00,3.30ZM48.14,3.38L49.86,3.38L49.00,1.89ZM49.14,1.81L50.86,1.81L50.00,3.30ZM50.14,3.38L51.86,3.38L51.00,1.89ZM54.14,3.38L55.86,3.38L55.00,1.89ZM55.14,1.81L56.86,1.81L56.00,3.30ZM60.14,3.38L61.86,3.38L61.00,1.89ZM61.14,1.81L62.86,1.81L62.00,3.30ZM64.14,3.38L65.86,3.38L65.00,1.89ZM65.14,1.81L66.86,1.81L66.00,3.30ZM68.14,3.38L69.86,3.38L69.00,1.89ZM69.14,1.81L70.86,1.81L70.00,3.30ZM72.14,3.38L73.86,3.38L73.00,1.89ZM73.14,1.81L74.86,1.81L74.00,3.30ZM74.14,3.38L75.86,3.38L75.00,1.89ZM75.14,1.81L76.86,1.81L76.00,3.30ZM1.14,5.12L2.86,5.12L2.00,3.63ZM2.14,3.54L3.86,3.54L3.00,5.03ZM7.14,5.12L8.86,5.12L8.00,3.63ZM8.14,3.54L9.86,3.54L9.00,5.03ZM9.14,5.12L10.86,5.12L10.00,3.63ZM11.14,5.12L12.86,5.12L12.00,3.63ZM12.14,3.54L13.86,3.54L13.00,5.03ZM17.14,5.12L18.86,5.12L18.00,3.63ZM18.14,3.54L19.86,3.54L19.00,5.03ZM23.14,5.12L24.86,5.12L24.00,3.63ZM24.14,3.54L25.86,3.54L25.00,5.03ZM25.14,5.12L26.86,5.12L26.00,3.63ZM29.14,5.12L30.86,5.12L30.00,3.63ZM30.14,3.54L31.86,3.54L31.00,5.03ZM31.14,5.12L32.86,5.12L32.00,3.63ZM33.14,5.12L34.86,5.12L34.00,3.63ZM34.14,3.54L35.86,3.54L35.00,5.03ZM37.14,5.12L38.86,5.12L38.00,3.63ZM38.14,3.54L39.86,3.54L39.00,5.03ZM39.14,5.12L40.86,5.12L40.00,3.63ZM40.14,3.54L41.86,3.54L41.00,5.03ZM41.14,5.12L42.86,5.12L42.00,3.63ZM45.14,5.12L46.86,5.12L46.00,3.63ZM46.14,3.54L47.86,3.54L47.00,5.03ZM47.14,5.12L48.86,5.12L48.00,3.63ZM49.14,5.12L50.86,5.12L50.00,3.63ZM50.14,3.54L51.86,3.54L51.00,5.03ZM53.14,5.12L54.86,5.12L54.00,3.63ZM54.14,3.54L55.86,3.54L55.00,5.03ZM59.14,5.12L60.86,5.12L60.00,3.63ZM60.14,3.54L61.86,3.54L61.00,5.03ZM63.14,5.12L64.86,5.12L64.00,3.63ZM64.14,3.54L65.86,3.54L65.00,5.03ZM67.14,5.12L68.86,5.12L68.00,3.63ZM68.14,3.54L69.86,3.54L69.00,5.03ZM72.14,3.54L73.86,3.54L73.00,5.03ZM73.14,5.12L74.86,5.12L74.00,3.63ZM0.14,6.85L1.86,6.85L1.00,5.36ZM1.14,5.28L2.86,5.28L2.00,6.77ZM2.14,6.85L3.86,6.85L3.00,5.36ZM3.14,5.28L4.86,5.28L4.00,6.77ZM6.14,6.85L7.86,6.85L7.00,5.36ZM7.14,5.28L8.86,5.28L8.00,6.77ZM10.14,6.85L11.86,6.85L11.00,5.36ZM11.14,5.28L12.86,5.28L12.00,6.77ZM16.14,6.85L17.86,6.85L17.00,5.36ZM17.14,5.28L18.86,5.28L18.00,6.77ZM18.14,6.85L19.86,6.85L19.00,5.36ZM19.14,5.28L20.86,5.28L20.00,6.77ZM22.14,6.85L23.86,6.85L23.00,5.36ZM23.14,5.28L24.86,5.28L24.00,6.77ZM24.14,6.85L25.86,6.85L25.00,5.36ZM28.14,6.85L29.86,6.85L29.00,5.36ZM29.14,5.28L30.86,5.28L30.00,6.77ZM31.14,5.28L32.86,5.28L32.00,6.77ZM32.14,6.85L33.86,6.85L33.00,5.36ZM36.14,6.85L37.86,6.85L37.00,5.36ZM37.14,5.28L38.86,5.28L38.00,6.77ZM40.14,6.85L41.86,6.85L41.00,5.36ZM41.14,5.28L42.86,5.28L42.00,6.77ZM44.14,6.85L45.86,6.85L45.00,5.36ZM45.14,5.28L46.86,5.28L46.00,6.77ZM48.14,6.85L49.86,6.85L49.00,5.36ZM49.14,5.28L50.86,5.28L50.00,6.77ZM52.14,6.85L53.86,6.85L53.00,5.36ZM53.14,5.28L54.86,5.28L54.00,6.77ZM54.14,6.85L55.86,6.85L55.00,5.36ZM55.14,5.28L56.86,5.28L56.00,6.77ZM58.14,6.85L59.86,6.85L59.00,5.36ZM59.14,5.28L60.86,5.28L60.00,6.77ZM63.14,5.28L64.86,5.28L64.00,6.77ZM64.14,6.85L65.86,6.85L65.00,5.36ZM65.14,5.28L66.86,5.28L66.00,6.77ZM66.14,6.85L67.86,6.85L67.00,5.36ZM67.14,5.28L68.86,5.28L68.00,6.77ZM70.14,6.85L71.86,6.85L71.00,5.36ZM71.14,5.28L72.86,5.28L72.00,6.77ZM72.14,6.85L73.86,6.85L73.00,5.36ZM73.14,5.28L74.86,5.28L74.00,6.77Z%22/%3E%3C/svg%3E") center / contain no-repeat;
                       mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2077%206.93%22%3E%3Cpath%20d=%22M0.14,0.08L1.86,0.08L1.00,1.57ZM1.14,1.65L2.86,1.65L2.00,0.16ZM2.14,0.08L3.86,0.08L3.00,1.57ZM3.14,1.65L4.86,1.65L4.00,0.16ZM4.14,0.08L5.86,0.08L5.00,1.57ZM62.14,0.08L63.86,0.08L63.00,1.57ZM2.14,3.38L3.86,3.38L3.00,1.89ZM3.14,1.81L4.86,1.81L4.00,3.30ZM8.14,3.38L9.86,3.38L9.00,1.89ZM9.14,1.81L10.86,1.81L10.00,3.30ZM10.14,3.38L11.86,3.38L11.00,1.89ZM11.14,1.81L12.86,1.81L12.00,3.30ZM12.14,3.38L13.86,3.38L13.00,1.89ZM16.14,3.38L17.86,3.38L17.00,1.89ZM17.14,1.81L18.86,1.81L18.00,3.30ZM18.14,3.38L19.86,3.38L19.00,1.89ZM19.14,1.81L20.86,1.81L20.00,3.30ZM24.14,3.38L25.86,3.38L25.00,1.89ZM25.14,1.81L26.86,1.81L26.00,3.30ZM26.14,3.38L27.86,3.38L27.00,1.89ZM27.14,1.81L28.86,1.81L28.00,3.30ZM30.14,3.38L31.86,3.38L31.00,1.89ZM31.14,1.81L32.86,1.81L32.00,3.30ZM32.14,3.38L33.86,3.38L33.00,1.89ZM33.14,1.81L34.86,1.81L34.00,3.30ZM34.14,3.38L35.86,3.38L35.00,1.89ZM38.14,3.38L39.86,3.38L39.00,1.89ZM39.14,1.81L40.86,1.81L40.00,3.30ZM42.14,3.38L43.86,3.38L43.00,1.89ZM43.14,1.81L44.86,1.81L44.00,3.30ZM46.14,3.38L47.86,3.38L47.00,1.89ZM47.14,1.81L48.86,1.81L48.00,3.30ZM48.14,3.38L49.86,3.38L49.00,1.89ZM49.14,1.81L50.86,1.81L50.00,3.30ZM50.14,3.38L51.86,3.38L51.00,1.89ZM54.14,3.38L55.86,3.38L55.00,1.89ZM55.14,1.81L56.86,1.81L56.00,3.30ZM60.14,3.38L61.86,3.38L61.00,1.89ZM61.14,1.81L62.86,1.81L62.00,3.30ZM64.14,3.38L65.86,3.38L65.00,1.89ZM65.14,1.81L66.86,1.81L66.00,3.30ZM68.14,3.38L69.86,3.38L69.00,1.89ZM69.14,1.81L70.86,1.81L70.00,3.30ZM72.14,3.38L73.86,3.38L73.00,1.89ZM73.14,1.81L74.86,1.81L74.00,3.30ZM74.14,3.38L75.86,3.38L75.00,1.89ZM75.14,1.81L76.86,1.81L76.00,3.30ZM1.14,5.12L2.86,5.12L2.00,3.63ZM2.14,3.54L3.86,3.54L3.00,5.03ZM7.14,5.12L8.86,5.12L8.00,3.63ZM8.14,3.54L9.86,3.54L9.00,5.03ZM9.14,5.12L10.86,5.12L10.00,3.63ZM11.14,5.12L12.86,5.12L12.00,3.63ZM12.14,3.54L13.86,3.54L13.00,5.03ZM17.14,5.12L18.86,5.12L18.00,3.63ZM18.14,3.54L19.86,3.54L19.00,5.03ZM23.14,5.12L24.86,5.12L24.00,3.63ZM24.14,3.54L25.86,3.54L25.00,5.03ZM25.14,5.12L26.86,5.12L26.00,3.63ZM29.14,5.12L30.86,5.12L30.00,3.63ZM30.14,3.54L31.86,3.54L31.00,5.03ZM31.14,5.12L32.86,5.12L32.00,3.63ZM33.14,5.12L34.86,5.12L34.00,3.63ZM34.14,3.54L35.86,3.54L35.00,5.03ZM37.14,5.12L38.86,5.12L38.00,3.63ZM38.14,3.54L39.86,3.54L39.00,5.03ZM39.14,5.12L40.86,5.12L40.00,3.63ZM40.14,3.54L41.86,3.54L41.00,5.03ZM41.14,5.12L42.86,5.12L42.00,3.63ZM45.14,5.12L46.86,5.12L46.00,3.63ZM46.14,3.54L47.86,3.54L47.00,5.03ZM47.14,5.12L48.86,5.12L48.00,3.63ZM49.14,5.12L50.86,5.12L50.00,3.63ZM50.14,3.54L51.86,3.54L51.00,5.03ZM53.14,5.12L54.86,5.12L54.00,3.63ZM54.14,3.54L55.86,3.54L55.00,5.03ZM59.14,5.12L60.86,5.12L60.00,3.63ZM60.14,3.54L61.86,3.54L61.00,5.03ZM63.14,5.12L64.86,5.12L64.00,3.63ZM64.14,3.54L65.86,3.54L65.00,5.03ZM67.14,5.12L68.86,5.12L68.00,3.63ZM68.14,3.54L69.86,3.54L69.00,5.03ZM72.14,3.54L73.86,3.54L73.00,5.03ZM73.14,5.12L74.86,5.12L74.00,3.63ZM0.14,6.85L1.86,6.85L1.00,5.36ZM1.14,5.28L2.86,5.28L2.00,6.77ZM2.14,6.85L3.86,6.85L3.00,5.36ZM3.14,5.28L4.86,5.28L4.00,6.77ZM6.14,6.85L7.86,6.85L7.00,5.36ZM7.14,5.28L8.86,5.28L8.00,6.77ZM10.14,6.85L11.86,6.85L11.00,5.36ZM11.14,5.28L12.86,5.28L12.00,6.77ZM16.14,6.85L17.86,6.85L17.00,5.36ZM17.14,5.28L18.86,5.28L18.00,6.77ZM18.14,6.85L19.86,6.85L19.00,5.36ZM19.14,5.28L20.86,5.28L20.00,6.77ZM22.14,6.85L23.86,6.85L23.00,5.36ZM23.14,5.28L24.86,5.28L24.00,6.77ZM24.14,6.85L25.86,6.85L25.00,5.36ZM28.14,6.85L29.86,6.85L29.00,5.36ZM29.14,5.28L30.86,5.28L30.00,6.77ZM31.14,5.28L32.86,5.28L32.00,6.77ZM32.14,6.85L33.86,6.85L33.00,5.36ZM36.14,6.85L37.86,6.85L37.00,5.36ZM37.14,5.28L38.86,5.28L38.00,6.77ZM40.14,6.85L41.86,6.85L41.00,5.36ZM41.14,5.28L42.86,5.28L42.00,6.77ZM44.14,6.85L45.86,6.85L45.00,5.36ZM45.14,5.28L46.86,5.28L46.00,6.77ZM48.14,6.85L49.86,6.85L49.00,5.36ZM49.14,5.28L50.86,5.28L50.00,6.77ZM52.14,6.85L53.86,6.85L53.00,5.36ZM53.14,5.28L54.86,5.28L54.00,6.77ZM54.14,6.85L55.86,6.85L55.00,5.36ZM55.14,5.28L56.86,5.28L56.00,6.77ZM58.14,6.85L59.86,6.85L59.00,5.36ZM59.14,5.28L60.86,5.28L60.00,6.77ZM63.14,5.28L64.86,5.28L64.00,6.77ZM64.14,6.85L65.86,6.85L65.00,5.36ZM65.14,5.28L66.86,5.28L66.00,6.77ZM66.14,6.85L67.86,6.85L67.00,5.36ZM67.14,5.28L68.86,5.28L68.00,6.77ZM70.14,6.85L71.86,6.85L71.00,5.36ZM71.14,5.28L72.86,5.28L72.00,6.77ZM72.14,6.85L73.86,6.85L73.00,5.36ZM73.14,5.28L74.86,5.28L74.00,6.77Z%22/%3E%3C/svg%3E") center / contain no-repeat;
                       animation: hubTitleHue 14s linear infinite; }
        @media (prefers-reduced-motion: reduce) { #hubLogo > i { animation: none; } }
        @media (prefers-reduced-motion: reduce) { #hubTitle { animation: none; } }
        .ver {
            font-size: 11px; letter-spacing: 3px; color: #9fffc8;
            text-shadow: 0 0 6px #000;
            /* v0.008: плашка — на бегущих цифрах обоев голый номер терялся */
            background: rgba(0,0,0,.78); border: 1px solid rgba(0,255,102,.35); border-radius: 3px; padding: 2px 8px 2px 11px;
            /* v0.045, «это вниз»: номер — внизу по центру экрана (наверху теперь ♫ Звук) */
            position: fixed; left: 50%; top: 8px; transform: translateX(-50%); z-index: 5;   /* v0.053, «наверх» */
        }

        /* v0.017: «тормоза при наведении на кнопку». У кнопок было своё размытие фона (backdrop-filter) поверх
           живых обоев — браузер размывал их заново на каждом кадре, а у кнопок лаборатории размытие сидело ещё и
           внутри размытой панели. Наведение добавляло увеличение и переход «всего подряд» на четверть секунды,
           включая широкое свечение. Теперь у кнопок размытия нет (фон чуть плотнее), плавно меняются только
           цвет и сдвиг, а свечение включается сразу. Размытие у панелей осталось — оно одно и не вложенное. */
        .menu-btn {
            display: block;
            text-align: center;
            text-decoration: none;
            border-radius: 6px;
            transition: none;   /* v0.019: наведение — мгновенно; плавный переход казался вялой реакцией */
            box-sizing: border-box;
        }

        /* Флагман */
        .menu-btn.main-engine {
            width: 340px;
            padding: 18px;
            font-size: 22px;
            font-weight: bold;
            letter-spacing: 4px;
            border: 2px solid #00ff66;
            color: #00ff66;
            background: rgba(0, 0, 0, 0.7);
            box-shadow: 0 0 15px rgba(0, 255, 102, 0.35);
        }
        .menu-btn.main-engine:hover {
            background: #00ff66;
            color: #000;
            box-shadow: 0 0 25px #00ff66;
            transform: scale(1.02);
        }

        /* Панели разделов: полупрозрачное стекло поверх обоев */
        .panel {
            background: rgba(0, 0, 0, 0.72);
            border: 1px solid rgba(0, 255, 102, 0.18);
            border-radius: 10px;
            padding: 14px 16px 16px;
            /* v0.019: размытие обоев под панелями снято — оно пересчитывалось на каждом кадре обоев;
               вместо него фон плотнее */
        }
        .panel-title {
            font-size: 11px;
            color: #6fbf91;
            text-transform: uppercase;
            letter-spacing: 4px;
            margin: 0 0 12px;
            font-weight: bold;
            text-align: center;
            user-select: none;
        }

        /* v0.043: ♫ Звук живого фона; v0.044 — вверху по центру, пока звучит — рамка мигает */
        /* v0.050: два значка рядом — ♫ строки и ♪ столбцы, каждый своей головкой */
        /* v0.051, «значки нот пониже и побольше»: под надписью Zerkalius (она сверху, 5vh, высотой в clamp ниже), 40 px */
        /* v0.054: семь нот словами (До…Си) — 30 px, в строку, на узком экране переносятся; выключенная — серая, включённая — своим цветом --c */
        #hubSndBox { position: fixed; left: 50%; top: calc(5vh + clamp(44px, 10vw, 150px) + 12px); transform: translateX(-50%); z-index: 5;
                     display: flex; flex-direction: column; align-items: center; width: max-content; max-width: calc(100vw - 32px); font-size: 30px; }
        /* v0.060, «1-2-3-1 — такой треугольник-стрелка»: ряды 1, 2, 3 — наконечник, четвёртый — древко под серединой.
           v0.063, «ноты обрамить каждую ромбом, чтобы в общем получилась»: каждая нота — в ромбе (--dw × --dh), ромбы в ряду касаются боковыми
           вершинами, ряд заходит в ряд на полромба — наконечник складывается из ромбов ребро к ребру; Си — древко, касается Соль вершиной.
           Ромб — clip-path, поэтому и нажимается только ромб (углы соседних не мешают). Рамка — фон кнопки, середина — тёмный ::before */
        #hubSndBox .nrow { display: flex; justify-content: center; gap: 0; font-size: .7em; --dw: 4.9em; --dh: 3.1em; }
        #hubSndBox .nrow.n2, #hubSndBox .nrow.n3 { margin-top: calc(var(--dh) / -2); }
        .hubSnd { position: relative; isolation: isolate; width: var(--dw); height: var(--dh); padding: 0; text-align: center; white-space: nowrap;
                  font: bold 1em/1 system-ui, sans-serif; cursor: pointer; color: #7d8388; border: none; background: #4a5056;
                  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); text-shadow: 0 0 6px #000, 0 0 3px #000; }   /* v0.054 — серая, пока выключена */
        .hubSnd::before { content: ''; position: absolute; inset: 2px; z-index: -1; background: rgba(6, 8, 10, .92); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
        .hubSnd.glitch::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transform: none; }   /* v0.067: сбой смены языка не режет середину ромба (иначе ромб на миг серел полосами) */
        @media (hover: hover) { .hubSnd:hover { color: #c9ced2; background: #7d8388; } }   /* v0.058: на пальце наведение «залипало» */
        /* v0.058: касание — сразу, без вспышки, без меню долгого нажатия и выделения текста */
        .hubSnd { touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
        @media (pointer: coarse) {   /* v0.058: палец; v0.063 — ромбы по ширине экрана */
            #hubSndBox { font-size: clamp(20px, 6.4vw, 30px); max-width: calc(100vw - 16px); }
        }
        .hubSnd.on { color: var(--c); background: var(--c); animation: hub-snd-blink 1.1s ease-in-out infinite; }
        /* v0.061: ⏺ видеозапись хаба — правый верхний угол; идёт запись — красная, мигает */
        #hubRec { position: fixed; right: 10px; top: 6px; z-index: 6; font: 22px/1 system-ui, sans-serif; padding: 4px 8px; cursor: pointer; color: #7d8388;
                  background: none; border: none; text-shadow: 0 0 6px #000; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
        @media (hover: hover) { #hubRec:hover { color: #ff6b7a; } }
        #hubRec.on { color: #ff4d5e; animation: hub-rec-blink 1s ease-in-out infinite; }
        @keyframes hub-rec-blink { 50% { opacity: .4; } }
        #hubSndBox.paused .hubSnd.on { animation: none; opacity: .8; }   /* v0.056: пауза — ноты горят, но не мигают */
        /* v0.055: щелчок по запертому меню — серые ноты вспыхивают своим цветом (включи нас) */
        #hubSndBox.nudge .hubSnd:not(.on) { animation: hub-snd-nudge .42s ease-in-out 3; }
        @keyframes hub-snd-nudge { 50% { color: var(--c); text-shadow: 0 0 16px var(--c), 0 0 4px #000; transform: scale(1.15); } }
        body.hush .hub a.menu-btn { pointer-events: auto; cursor: not-allowed; }
        @keyframes hub-snd-blink { 0%, 100% { opacity: 1; text-shadow: 0 0 14px var(--c), 0 0 4px #000; } 50% { opacity: .45; text-shadow: 0 0 2px var(--c), 0 0 4px #000; } }   /* v0.054: свечение — цветом ноты */
        /* v0.051: пока музыка не включилась — меню притушено; первый щелчок включает звук, меню светлеет */
        .hub .mainrow, .hub .panel { transition: opacity .6s; }
        body.hush .hub .mainrow, body.hush .hub .panel { opacity: .28; }
        body.hush { cursor: pointer; }
        /* v0.067, «запустить нажатием — отправить в бесконечность»: нажатая кнопка вспыхивает и улетает вдаль — к середине экрана (--lx, --ly),
           сжимаясь в точку и тая; страница открывается, когда долетела */
        .menu-btn.launch { position: relative; z-index: 20; pointer-events: none; animation: hub-launch .65s cubic-bezier(.55, 0, .9, .45) forwards; }
        @keyframes hub-launch { 0% { transform: none; opacity: 1; } 22% { transform: scale(1.08); opacity: 1; filter: brightness(1.7); }
                                100% { transform: translate(var(--lx, 0), var(--ly, -30vh)) scale(.02); opacity: 0; filter: brightness(2.2) blur(1px); } }
        /* Лаборатория — сетка карточек */
        .grid {
            display: grid;
            grid-template-columns: repeat(5, 170px);
            gap: 10px;
        }
        /* Знак и записи — одна строка */
        .row {
            display: flex; gap: 10px; justify-content: center;
        }

        .menu-btn.draft-btn {
            padding: 11px 8px;
            font-size: 14px;
            border: 1px solid rgba(0, 255, 102, 0.22);
            color: #9fdcb8;
            background: rgba(0, 20, 8, 0.6);
        }
        .row .menu-btn.draft-btn { width: 170px; }
        .menu-btn.draft-btn:hover {
            border-color: #00ff66;
            color: #00ff66;
            background: rgba(0, 255, 102, 0.10);
            transform: translateY(-2px);
            box-shadow: 0 0 12px rgba(0, 255, 102, 0.35);
        }

        /* v0.009: кнопки переливаются теми же цветами, что цифры обоев (зелёный, жёлтый, фиолетовый,
           синий), каждая со своей случайной фазы — не в такт (фазу раздаёт скрипт внизу). Под мышью
           перелив снимается, и кнопка загорается своим обычным зелёным. */
        @keyframes hue-draft {
            0%, 100% { color: #9fdcb8; border-color: rgba(0, 255, 102, 0.35); }
            25%      { color: #ffe08a; border-color: rgba(255, 204, 0, 0.45); }
            50%      { color: #e3a8ff; border-color: rgba(204, 51, 255, 0.45); }
            75%      { color: #a8c6ff; border-color: rgba(64, 128, 255, 0.5); }
        }
        @keyframes hue-main {
            0%, 100% { color: #00ff66; border-color: #00ff66; box-shadow: 0 0 18px rgba(0, 255, 102, 0.5); }
            25%      { color: #ffcc00; border-color: #ffcc00; box-shadow: 0 0 18px rgba(255, 204, 0, 0.5); }
            50%      { color: #d24dff; border-color: #d24dff; box-shadow: 0 0 18px rgba(204, 51, 255, 0.5); }
            75%      { color: #4d8dff; border-color: #4d8dff; box-shadow: 0 0 18px rgba(64, 128, 255, 0.55); }
        }
        /* v0.035: стрелки от Треугольника к Битмультфильмам (слово пользователя «сделай стрелки от Треуг — к Результатам»):
           три дорожки во всю ширину главной кнопки, по каждой вниз бегут шевроны; цвет переливается, как у кнопок.
           Отрицательные поля съедают общий зазор .hub, иначе между кнопками стало бы вдвое просторнее. */
        .flow {
            width: 340px; height: 40px; margin: -12px 0; position: relative;
            display: flex; justify-content: space-around; pointer-events: none;
            animation: hue-flow 12s ease-in-out infinite;
        }
        .flow svg { width: 22px; height: 40px; overflow: visible; filter: drop-shadow(0 0 4px currentColor); }
        .flow line { stroke: currentColor; stroke-width: 1.5; opacity: .35; }
        /* v0.036: «оживи вниз-вверх, пусть дёргаются». Вместо плавного бега вниз — рывки: пара шевронов разом
           прыгает вниз и отскакивает вверх, с короткими замираниями; у каждой дорожки свой темп и фаза, чтобы не
           дёргались хором. «Меньше движения» стрелки больше не останавливает — как и смену языка (v0.028): на Windows
           Server оно включено по умолчанию, и стрелки там стояли мёртвыми. */
        .flow path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
                     animation: flow-jerk 1.25s cubic-bezier(.2, 1.7, .45, 1) infinite; }
        .flow path:nth-of-type(2) { translate: 0 9px; opacity: .55; }
        .flow svg:nth-child(1) path { animation-duration: 1.1s; animation-delay: -.35s; }
        .flow svg:nth-child(2) path { animation-duration: 1.35s; }
        .flow svg:nth-child(3) path { animation-duration: .95s; animation-delay: -.6s; }
        @keyframes flow-jerk {
            0%   { transform: translateY(0); }
            9%   { transform: translateY(20px); }
            16%  { transform: translateY(5px); }
            24%  { transform: translateY(18px); }
            33%  { transform: translateY(0); }
            45%  { transform: translateY(0); }
            51%  { transform: translateY(22px); }
            57%  { transform: translateY(11px); }
            63%  { transform: translateY(22px); }
            74%  { transform: translateY(2px); }
            82%  { transform: translateY(15px); }
            100% { transform: translateY(0); }
        }
        @keyframes hue-flow {
            0%, 100% { color: #00ff66; } 25% { color: #ffcc00; } 50% { color: #d24dff; } 75% { color: #4d8dff; }
        }
        .menu-btn.draft-btn { animation: hue-draft 14s ease-in-out infinite; }
        .menu-btn.main-engine { animation: hue-main 12s ease-in-out infinite; }
        .menu-btn:hover { animation: none; }

        /* v0.018: сбойные полосы, как в обоях (v0.020 — построчно, через весь экран, см. скрипт внизу): на 3 кадра срываются в сторону
           горизонтальные полосы. Полоса — копия надписи (data-text, раздаёт скрипт внизу) на фоне кнопки,
           обрезанная clip-path по высоте и сдвинутая по X. Места и сдвиги на каждом кадре новые — их задаёт
           скрипт через --g1t/--g1b/--g1x и --g2… Псевдоэлементы живут только на время сбоя. */
        .menu-btn, .panel-title { position: relative; }
        .menu-btn.glitch::before, .menu-btn.glitch::after, .panel-title.glitch::before, .panel-title.glitch::after {
            content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
            display: flex; align-items: center; justify-content: center;
            background: inherit; color: inherit; border-radius: inherit; letter-spacing: inherit;
        }
        .glitch::before { clip-path: inset(var(--g1t) 0 var(--g1b) 0); transform: translateX(var(--g1x)); }
        .glitch::after  { clip-path: inset(var(--g2t) 0 var(--g2b) 0); transform: translateX(var(--g2x)); }
        .panel-title.glitch::before, .panel-title.glitch::after { background: #030805; }   /* v0.023: и названия групп */
        .menu-btn.main-engine.glitch::before, .menu-btn.main-engine.glitch::after { background: #000; }
        .menu-btn.draft-btn.glitch::before, .menu-btn.draft-btn.glitch::after { background: #00140a; }

        /* Узкий экран: лаборатория в 2 столбца */
        @media (max-width: 960px) {
            .grid { grid-template-columns: repeat(2, 160px); }
            .hub { justify-content: center; overflow-y: auto; padding-top: 28vh; }
            body { overflow: auto; }
        }
        /* v0.063, телефон: первый экран — ноты и Серпинский по центру (#hubSier — свой холст хаба), кнопки меню — ниже, за краем экрана, в столбик
           по 1–2; внизу первого экрана — стрелки вниз, бегут и мигают (щелчок — к меню). По горизонту — так же, два Серпинских у своих краёв */
        /* v0.074, по снимку «Треугольник» с выделенной надписью — «убери выделение текста кнопок»: в хабе текст не выделяется (полей ввода нет) */
        body, .menu-btn, .panel-title { user-select: none; -webkit-user-select: none; }
        #hubSier, #hubDown { display: none; }
        /* v0.072, «в комп. версии не видно треугольника»: на компьютере #hubSier — фоном во весь экран (за нотами и меню), приглушённо */
        #hubSier { display: block; position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }   /* v0.074: бледнее — сами биты (бегущий — во всю яркость) */
        @media (pointer: coarse) and (max-width: 960px) {
            html, body { height: auto; }
            body { overflow-x: hidden; overflow-y: auto; }
            #hubSier { display: block; position: absolute; left: 0; top: 0; width: 100vw; height: 100svh; z-index: 1; pointer-events: none; opacity: 1; }
            #hubSndBox { position: absolute; top: 55svh; }
            .hub { height: auto; margin-top: 100svh; justify-content: flex-start; overflow: visible; padding: 28px 12px 64px; }
            .mainrow { flex-direction: column; align-items: center; gap: 14px; }
            .menu-btn.main-engine { width: min(340px, 86vw); }
            /* v0.067, «кнопки прямо вниз, большие группы разделить»: меню — одним столбцом; в Черновиках после каждой пятой — просвет */
            .grid, .row { display: flex; flex-direction: column; align-items: center; gap: 10px; }
            .grid > a, .row > a { width: min(340px, 86vw); flex: 0 0 auto; }
            .grid > a:nth-of-type(5n):not(:last-of-type) { margin-bottom: 22px; }
            #hubDown { display: block; position: absolute; left: 50%; top: calc(100svh - 64px); transform: translateX(-50%); z-index: 6; background: none; border: none;
                       color: #9fffc8; font: 30px/0.55 system-ui, sans-serif; padding: 6px 16px; cursor: pointer; text-shadow: 0 0 8px rgba(0, 255, 102, .6);
                       animation: hub-down 1.3s ease-in-out infinite; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
        }
        @media (pointer: coarse) and (max-width: 960px) and (orientation: landscape) {
            #hubSndBox { top: 50svh; transform: translate(-50%, -50%); }
        }
        @keyframes hub-down { 0% { transform: translate(-50%, -6px); opacity: .25; } 50% { opacity: 1; } 100% { transform: translate(-50%, 10px); opacity: .25; } }
    </style>
</head>
<body>
    <!-- Живой фон: обои Zerkalius (папка oboi\, заведено 2026-09-21) -->
    <!-- v0.038: живой фон — конус Zazerkalius (3D, зеркало вниз, свет, крутится); прежние обои — кнопка «Обои» -->
    <iframe id="bg" src="zazerkalius/Zerkalius-zazerkalius.html?solo=cone&amp;bg=1" title="Конус Zerkalius" tabindex="-1" aria-hidden="true" allow="autoplay"></iframe>
    <!-- v0.043: ♫ Звук живого фона -->
    <!-- v0.050, «2 и более значков, каждый отдельно вкл/выкл»: ♫ — строчная головка (бирюза), ♪ — столбцовая (бас, золото) -->
    <!-- v0.054: семь нот — До…Си; у каждой своя головка звука фона и свой цвет (--c) -->
    <!-- v0.063: телефон — Серпинский первого экрана и стрелки вниз к меню -->
    <canvas id="hubSier" aria-hidden="true"></canvas>
    <button id="hubDown" type="button" title="Вниз — к кнопкам">⌄<br>⌄</button>
    <!-- v0.061: ⏺ видеозапись хаба -->
    <button id="hubRec" type="button" title="⏺ Видео хаба: ролик в формате устройства (телефон — 1080×1920, компьютер — 1920×1080) — ноты, как горят, и их звук; конус — если он виден. Ещё щелчок — стоп, файл скачивается">⏺</button>
    <div id="hubLogo" aria-hidden="true" title="Zazerkalius"><i></i></div>   <!-- v0.076: надпись из треугольников (сцена 1 «△ Сетки») -->
    <div id="hubSndBox">
        <div class="nrow n1">
            <button class="hubSnd" data-h="r" type="button" data-ru="До" data-en="Do" style="--c:#ff5f6d" title="До: головка звука фона — строки подряд, слева направо; звучит от ноты до. Щелчок — вкл / выкл, отдельно от остальных">До</button>
        </div>
        <div class="nrow n2">
            <button class="hubSnd" data-h="c" type="button" data-ru="Ре" data-en="Re" style="--c:#ff9f43" title="Ре: головка звука фона — столбцы сверху вниз, октавой ниже — бас; звучит от ноты ре. Щелчок — вкл / выкл, отдельно от остальных">Ре</button>
            <button class="hubSnd" data-h="mi" type="button" data-ru="Ми" data-en="Mi" style="--c:#ffe066" title="Ми: головка звука фона — строки задом наперёд — с конца поля, справа налево; звучит от ноты ми. Щелчок — вкл / выкл, отдельно от остальных">Ми</button>
        </div>
        <div class="nrow n3">
            <button class="hubSnd" data-h="fa" type="button" data-ru="Фа" data-en="Fa" style="--c:#7ee787" title="Фа: головка звука фона — столбцы снизу вверх; звучит от ноты фа. Щелчок — вкл / выкл, отдельно от остальных">Фа</button>
            <button class="hubSnd" data-h="sol" type="button" data-ru="Соль" data-en="Sol" style="--c:#4dd4ff" title="Соль: головка звука фона — диагональ ↘ — каждый шаг следующая строка и следующий бит; звучит от ноты соль. Щелчок — вкл / выкл, отдельно от остальных">Соль</button>
            <button class="hubSnd" data-h="la" type="button" data-ru="Ля" data-en="La" style="--c:#6b8cff" title="Ля: головка звука фона — диагональ ↙ — строки снизу вверх; звучит от ноты ля. Щелчок — вкл / выкл, отдельно от остальных">Ля</button>
        </div>
        <div class="nrow n4">
            <button class="hubSnd" data-h="si" type="button" data-ru="Си" data-en="Si" style="--c:#c38cf5" title="Си: головка звука фона — случайный бит поля; звучит от ноты си. Щелчок — вкл / выкл, отдельно от остальных">Си</button>
        </div>
    </div>

    <div class="hub">
        <h1>Zerkalius Hub</h1>
        <div class="ver">v0.076</div>

        <!-- v0.030: Треугольник — вторая главная кнопка, под Code (слово пользователя «треугольник в хаб»);
             v0.033: Code ушёл в Черновики — Треугольник первый (слово пользователя «перенеси в черновики первым») -->
        <!-- v0.048, по снимку «Triangle / Зазеркалиус» — «в одну строку»: главные кнопки — рядом -->
        <div class="mainrow">
        <a href="Zerkalius-treugolnik.html" class="menu-btn main-engine" data-en="Triangle" data-ru="Треугольник">Треугольник</a>
        <!-- v0.042: Зазеркалиус — вторая главная кнопка, под Треугольником (слово пользователя «под треугольник»); прежде — в Черновиках -->
        <a href="zazerkalius/Zerkalius-zazerkalius.html" class="menu-btn main-engine" data-en="Zazerkalius" data-ru="Зазеркалиус">Зазеркалиус</a>
        </div>

        <!-- Знак и записи (папка oktaedr\), заведено 2026-09-20; обои — 2026-09-21 -->
        <div class="panel">
            <div class="panel-title" data-en="◇ Sign &amp; Records" data-ru="◇ Знак и записи">◇ Знак и записи</div>
            <div class="row">
                <a href="Zerkalius-dnevnik.html" class="menu-btn draft-btn" data-en="Logbook" data-ru="Борт-журнал">Борт-журнал</a>
                <a href="oboi/Zerkalius-oboi.html" class="menu-btn draft-btn" data-en="Wallpaper" data-ru="Обои">Обои</a>
                <!-- v0.027: исследование цикла Аниматрицы (папка issledovanie\), 2026-09-24 -->
                <a href="issledovanie/Zerkalius-issledovanie.html" class="menu-btn draft-btn" data-en="Research" data-ru="Исследование">Исследование</a>
                <!-- v0.032: сравнение таблиц фигур .tsv (папка sravnenie\), 2026-09-25 -->
                <a href="sravnenie/Zerkalius-sravnenie.html" class="menu-btn draft-btn" data-en="Compare" data-ru="Сравнение">Сравнение</a>
                <!-- v0.042: Битмультфильмы — из главных кнопок сюда («Битмультфильмы — в Записи») -->
                <a href="rezultaty/Zerkalius-rezultaty.html" class="menu-btn draft-btn" data-en="Bit Cartoons" data-ru="Битмультфильмы">Битмультфильмы</a>
                <!-- v0.071: просмотр и склейка GIF (папка prosmotr\), 2026-09-29 -->
                <a href="prosmotr/Zerkalius-prosmotr.html" class="menu-btn draft-btn" data-en="GIF Viewer" data-ru="Просмотр GIF">Просмотр GIF</a>
            </div>
        </div>

        <!-- v0.049, «перемести Черновики вниз, но не ниже номера версии»: Черновики — последними -->
        <!-- Черновики (до v0.018 — «Лаборатория (Черновики)») — с v0.012 в порядке создания (по первому появлению в git) -->
        <div class="panel">
            <div class="panel-title" data-en="🔬 Drafts" data-ru="🔬 Черновики">🔬 Черновики</div>
            <div class="grid">
                <!-- v0.033: Code — первым в Черновиках (до этого флагман хаба, v0.008–0.032); остальные — по порядку создания -->
                <a href="Zerkalius-code.html" class="menu-btn draft-btn" data-en="Zerkalius" data-ru="Зеркалиус">Зеркалиус</a>
                <a href="Zerkalius-genezis.html" class="menu-btn draft-btn" data-en="Genezis" data-ru="Генезис">Генезис</a>
                <a href="Zerkalius-gpu.html" class="menu-btn draft-btn" data-en="GPU Core + Synth" data-ru="Ядро GPU + синт">Ядро GPU + синт</a>
                <a href="Zerkalius-grid-module.html" class="menu-btn draft-btn" data-en="Grid Module" data-ru="Модуль сетки">Модуль сетки</a>
                <a href="Zerkalius-kubits.html" class="menu-btn draft-btn" data-en="Kubits" data-ru="Кубиты">Кубиты</a>
                <a href="fold-layers/Zerkalius-layers.html" class="menu-btn draft-btn" data-en="Fold Layers" data-ru="Слои сгиба">Слои сгиба</a>
                <a href="Zerkalius-ascii-art.html" class="menu-btn draft-btn" data-en="ASCII Art" data-ru="ASCII-арт">ASCII-арт</a>
                <a href="oktaedr/Zerkalius-oktaedr.html" class="menu-btn draft-btn" data-en="Granidus" data-ru="Гранидус">Гранидус</a>
                <!-- v0.042: Зазеркалиус — в главные; Cone (zazerkalius/Zerkalius-konus.html) убран из Черновиков, сама страница жива -->
                <a href="lively/Zerkalius-lively.html" class="menu-btn draft-btn" data-en="Lively Wallpaper" data-ru="Обои Lively">Обои Lively</a>
                <!-- v0.064: прошлый хаб — с крутящимся конусом и нотами (замороженная копия v0.058) -->
                <a href="Zerkalius-hub-konus.html" class="menu-btn draft-btn" data-en="Hub + Cone" data-ru="Хаб с конусом">Хаб с конусом</a>
                <!-- v0.070: пирамида 1, 3, 6, 10… из тетраэдров и октаэдров, гранями друг к другу -->
                <a href="oktaedr/Zerkalius-piramida.html" class="menu-btn draft-btn" data-en="Pyramid" data-ru="Пирамида">Пирамида</a>
            </div>
        </div>

    </div>
    <script>
        // v0.009: своя случайная фаза перелива у каждой кнопки — чтобы не мигали хором.
        document.querySelectorAll('.menu-btn').forEach(b => {
            b.style.animationDelay = (-Math.random() * 14).toFixed(2) + 's';
        });
        // v0.023: строка всегда целиком на одном языке. v0.024: в разметке подписи английские (до скрипта не мелькает
        // вперемешку). v0.025: «при старте должны быть оба языка» — строки (и надпись обоев, см. ниже) получают язык
        // поочерёдно сверху вниз со случайного начала, так что с первого кадра видны и английские, и русские.
        // data-text — надпись для сбойных полос (v0.018).
        document.querySelectorAll('.menu-btn, .panel-title, .hubSnd').forEach(b => { b.dataset.text = b.textContent.trim(); b.dataset.lang = 'en'; });   // v0.057: и ноты

        // v0.018: сбойные полосы у кнопок — как в обоях. v0.020: не по одной кнопке, а ПОСТРОЧНО, как в обоях:
        // полоса идёт через весь экран на своей высоте и срывает вбок кусок каждой кнопки, которую пересекает.
        // На кадр — три полосы высотой 3–14 px, у каждой свой сдвиг 6–20 px; у кнопки полос не больше двух
        // (::before и ::after); сбой длится три кадра. Случайный сбой: раз в ~0,12 с с шансом 30% — в среднем
        // раз в 0,4 с. v0.028: «меньше движения» в системе гасит только полосы; язык меняется по-прежнему.
        // v0.022: названия по-английски / по-русски меняются ПОСТРОЧНО И ВМЕСТЕ СО СБОЕМ (вместо v0.021, где у
        // каждой кнопки была своя фаза): раз в ~2,5 с случайная строка кнопок получает сбой — полосы только в её
        // высоте, — и на втором кадре сбоя все её кнопки разом переключают язык. v0.023: названия групп
        // («Черновики», «Знак и записи») — такие же строки и меняются так же.
        (function () {
            // v0.028: прежде «меньше движения» выключало весь этот блок разом — и полосы, и смену языка, и
            // надпись обоев; на Windows Server визуальные эффекты выключены по умолчанию, и хаб там стоял
            // молча английским. Теперь тихий режим гасит только полосы: язык по строкам меняется всегда.
            const CALM = !!(window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches);
            const btns = Array.from(document.querySelectorAll('.menu-btn, .panel-title, .hubSnd'));   // v0.023: и названия групп; v0.057 — и ноты (v0.062: Do Re Mi… / До Ре Ми…)
            let busy = false;
            const rowsNow = () => {   // строки — по верхнему краю кнопок (пересчёт на каждый сбой: окно могли сжать)
                const m = new Map();
                btns.forEach(b => { const r = b.getBoundingClientRect(), k = Math.round(r.top / 4);
                    if (!m.has(k)) m.set(k, { top: r.top, bottom: r.bottom, list: [] });
                    const row = m.get(k); row.bottom = Math.max(row.bottom, r.bottom); row.list.push(b); });
                return Array.from(m.values());
            };
            const frame = (y0, y1) => {
                const rects = btns.map(b => b.getBoundingClientRect());
                const bands = [0, 1, 2].map(() => {
                    const h = 3 + Math.random() * 11, y = y0 + Math.random() * Math.max(0, y1 - y0 - h);
                    return { y0: y, y1: y + h, dx: (Math.random() < 0.5 ? -1 : 1) * (6 + Math.random() * 14) };
                });
                btns.forEach((b, k) => {
                    const r = rects[k];
                    const hit = b.matches(':hover') ? [] : bands.filter(g => g.y1 > r.top && g.y0 < r.bottom).slice(0, 2);
                    if (!hit.length) { b.classList.remove('glitch'); return; }
                    hit.forEach((g, n) => {
                        b.style.setProperty(`--g${n + 1}t`, Math.max(0, g.y0 - r.top).toFixed(1) + 'px');
                        b.style.setProperty(`--g${n + 1}b`, Math.max(0, r.bottom - g.y1).toFixed(1) + 'px');
                        b.style.setProperty(`--g${n + 1}x`, g.dx.toFixed(1) + 'px');
                    });
                    if (hit.length < 2) b.style.setProperty('--g2t', '100%');   // вторая полоса не нужна — прячем
                    b.classList.add('glitch');
                });
            };
            const setLang = (b, lang) => {
                if (!b.dataset.en || !b.dataset.ru) return;
                const txt = b.dataset[lang]; b.textContent = txt; b.dataset.text = txt; b.dataset.lang = lang;
            };
            // v0.025: надпись обоев (Zerkalius ⇄ Зеркалиус) — тоже «строка». Обои с того же сайта, их функция
            // zerkSetTitle сама меняет надпись и пускает по ней сбойные полосы. Пока обои не загрузились — ждём.
            const bg = document.getElementById('bg');
            // v0.026: не прямой вызов, а сообщение — с диска (file://) хаб и обои для браузера разные сайты, прямой
            // вызов запрещён, и надпись не менялась. Обои сами шлют zerkReady, когда загрузились целиком.
            const hubTitle = document.getElementById('hubTitle');   // v0.038: надпись теперь в самом хабе
            const TITLE = { lang: 'en', set(lang) { this.lang = lang; if (hubTitle) hubTitle.textContent = lang === 'ru' ? 'Зеркалиус' : 'Zerkalius';
                try { if (bg && bg.contentWindow) bg.contentWindow.postMessage({ zerkTitle: lang === 'ru' ? 'Зеркалиус' : 'Zerkalius' }, '*'); } catch (e) {} } };
            // старт: строки сверху вниз и надпись обоев — поочерёдно en / ru, со случайного начала
            const r0 = Math.random() < 0.5 ? 0 : 1;
            // v0.068, «из хаба убери смену языков, пока оставь только рус буквы»: всё — по-русски, и больше не переключается
            btns.forEach(b => setLang(b, 'ru'));
            TITLE.lang = 'ru';
            const titleStart = () => TITLE.set(TITLE.lang);
            window.addEventListener('message', e => { if (bg && e.source === bg.contentWindow && e.data && e.data.zerkReady) titleStart(); });
            // v0.043: ♫ Звук живого фона — сообщение в фон; фон отвечает, звучит ли (zerkSndOn), — по нему горит кнопка
            /* v0.051, «все кнопки меню затемнены, пока не включится музыка; любой щелчок по странице включает все ноты, если ни одна не
               включена»: body.hush — меню притушено. Первый щелчок где угодно (кроме самих нот — они включают свою головку) никуда не ведёт,
               а шлёт фону { zerkSnd: true } — обе головки. Фон мог ещё не дочитаться — тогда повтор раз в 0,5 с (повтор безвреден: звучит —
               ничего не меняет), пока фон не ответит. Меню светлеет, когда фон ответил «звучит», или через 1,5 с — чтобы не остаться запертым */
            /* v0.055, «кнопки хаба не делать активными, пока все ноты не включить (в первый раз)»: меню притушено и НЕ нажимается, пока хоть раз
               не загорятся все семь нот разом. Первый щелчок по странице, как прежде, включает До и Ре; щелчок по притушенной кнопке меню никуда
               не ведёт — серые (ещё не включённые) ноты вспыхивают (.nudge), подсказка без текста. Все семь горят — меню живое, в localStorage
               zerk_hub_all7 = 1, и дальше хаб открывается сразу живым (ноты потом можно гасить — меню не запирается). Новая отметка вместо
               zerk_hub_snd (v0.052: «хоть раз звучала»), чтобы через это прошли все. Фон не ответил ни разу за 3 с (звука нет) — меню отпирается,
               чтобы не остаться запертым навсегда */
            /* v0.072, «убери блокировку кнопок»: меню живое сразу — замок v0.055 снят */
            let unlocked = true;
            let started = false, tries = 0, heard = false, nudgeT = 0, hubLive = false;
            const unlock = () => { if (unlocked) return; unlocked = true; document.body.classList.remove('hush'); try { localStorage.setItem('zerk_hub_all7', '1'); } catch (e) {} };
            const wake = () => { heard = true; };
            const fallback = () => setTimeout(() => { if (!heard) unlock(); }, 3000);
            const sendAll = () => { if (heard || tries++ > 12) return; try { bg.contentWindow.postMessage({ zerkSnd: true }, '*'); } catch (e) {} setTimeout(sendAll, 500); };
            const nudge = () => { const b = document.getElementById('hubSndBox'); if (!b) return; b.classList.remove('nudge'); void b.offsetWidth; b.classList.add('nudge'); clearTimeout(nudgeT); nudgeT = setTimeout(() => b.classList.remove('nudge'), 1300); };
            /* v0.056, «нужна и пауза при клике на странице, и плей — после паузы с того же момента, а сброс как-то иначе»: щелчок по пустому
               месту (не по нотам, кнопкам и ссылкам) — пауза / дальше: фон сам знает, звучит ли, и отвечает (zerkSndPaused — ноты горят без
               мигания). Правый щелчок по пустому месту — сброс: все семь нот, звук с начала, конус с начального положения. Самый первый
               щелчок, как прежде, включает До и Ре */
            const post = (m) => { try { bg.contentWindow.postMessage(m, '*'); } catch (e) {} };
            document.addEventListener('click', e => {
                const t = e.target, note = t.closest && t.closest('.hubSnd'), link = t.closest && t.closest('a, button');
                if (!e.isTrusted) return;   // v0.061: щелчки из кода (скачивание файла записи) замок не трогает
                if (t.closest && t.closest('#hubRec, #hubDown')) return;   // v0.061: ⏺ работает и при запертом меню; v0.063 — и стрелки вниз
                /* v0.072, «при любом нажатии запускай все ноты сразу»: первое нажатие — и по ноте, и по кнопке меню — включает все семь (фон на
                   { zerkSnd: true } включает все, Zazerkalius v0.514); нота при этом не переключается сама, кнопка меню ведёт дальше, как обычно */
                /* v0.073, «убери включение по щелчку 7 нот; изначально пусть все неактивны, и только при нажатии начинает играть та, на которую нажал»:
                   нота — включает и выключает только себя (её onclick); кнопка меню — просто ведёт дальше; пустое место — пауза / дальше, только
                   если что-то звучит (из тишины ничего не включает) */
                if (note || link) return;
                if (bg && hubLive) post({ zerkSndToggle: true });
            }, true);
            /* v0.067, «запустить нажатием — отправить в бесконечность»: обычный щелчок по кнопке меню (замок уже открыт — запертое меню
               щелчок гасит раньше) — кнопка улетает вдаль к середине экрана, потом переход. Ctrl, Shift, средняя кнопка — как обычно, без полёта.
               Вернулись «назад» (страница из кэша) — кнопки на местах */
            document.addEventListener('click', e => {
                const a = e.target.closest && e.target.closest('a.menu-btn'); if (!a || e.defaultPrevented) return;
                if (e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey || a.target === '_blank') return;
                e.preventDefault(); if (a.classList.contains('launch')) return;
                const r = a.getBoundingClientRect();
                a.style.setProperty('--lx', (innerWidth / 2 - (r.left + r.width / 2)) + 'px'); a.style.setProperty('--ly', (innerHeight * 0.42 - (r.top + r.height / 2)) + 'px');
                a.classList.add('launch'); setTimeout(() => { location.href = a.href; }, 650);
            });
            window.addEventListener('pageshow', () => document.querySelectorAll('.menu-btn.launch').forEach(b => b.classList.remove('launch')));
            document.addEventListener('contextmenu', e => {
                if (e.target.closest && e.target.closest('a, button')) return;
                e.preventDefault(); started = true; if (bg) post({ zerkSndReset: true });
            }, true);
            // v0.050: два значка — ♫ строки и ♪ столбцы; каждый шлёт { zerkSndHead, on }, фон отвечает, какие головки звучат (zerkSndR / zerkSndC)
            { const sbs = Array.from(document.querySelectorAll('.hubSnd'));
              if (sbs.length && bg) { sbs.forEach(b => { b.onclick = () => { try { bg.contentWindow.postMessage({ zerkSndHead: b.dataset.h, on: !b.classList.contains('on') }, '*'); } catch (e) {} }; });
                window.addEventListener('message', e => { if (e.source === bg.contentWindow && e.data && e.data.zerkSndOn !== undefined) {
                  const d = e.data, hs = Array.isArray(d.zerkSndHeads) ? d.zerkSndHeads : (d.zerkSndOn ? ['r', 'c'] : []);   // v0.054: какие из семи звучат
                  sbs.forEach(b => b.classList.toggle('on', hs.includes(b.dataset.h))); hubLive = !!d.zerkSndOn;   /* v0.073: звучит ли что-то (пауза — тоже) */ document.getElementById('hubSndBox').classList.toggle('paused', !!d.zerkSndPaused); wake(); if (sbs.every(b => b.classList.contains('on'))) unlock(); } }); } }   // v0.055: горят все семь — меню живое
            if (bg) { bg.addEventListener('load', () => setTimeout(titleStart, 300)); setTimeout(titleStart, 1500); }   // запасной путь
            const glitch = (y0, y1, mid) => {
                if (CALM) { if (mid) mid(); return; }   // v0.028: тихий режим — язык меняется сразу, без полос
                busy = true; let frames = 3;
                const step = () => {
                    if (frames-- <= 0) { btns.forEach(b => b.classList.remove('glitch')); busy = false; return; }
                    if (frames === 1 && mid) mid();   // второй кадр — смена языка прямо «сквозь» сбой
                    frame(y0, y1);
                    requestAnimationFrame(() => requestAnimationFrame(step));   // кадр сбоя держится два экранных кадра
                };
                step();
            };
            let nextFlip = performance.now() + 2500;
            setInterval(() => {
                if (busy || document.hidden) return;
                const now = performance.now();
                if (now >= nextFlip) {
                    nextFlip = now + 2000 + Math.random() * 1000;
                    // v0.025: очередь надписи обоев. v0.026: её доля — четверть, а не 1/(строк+1): при семи-восьми
                    // строках надпись менялась раз в ~20 с, и казалось, что не меняется вовсе.
                    // v0.068: смены языка нет — строка только вздрагивает сбоем, подписи остаются русскими
                    const rows = rowsNow(); const row = rows[Math.floor(Math.random() * rows.length)];
                    if (row) return glitch(row.top, row.bottom);
                }
                if (CALM || Math.random() > 0.30) return;   // v0.028: в тихом режиме случайных сбоев нет
                const rs = btns.map(b => b.getBoundingClientRect());
                glitch(Math.min(...rs.map(r => r.top)), Math.max(...rs.map(r => r.bottom)));
            }, 120);

            /* v0.061, «на хаб надо видеозапись»: страницу хаба (кнопки — не холст) браузер снять не даёт, поэтому кадр рисуется заново на
               своём холсте — формата устройства, как у конуса в Zazerkalius v0.393: телефон — 1080×1920, компьютер — 1920×1080. В кадре —
               стрелка нот (их места, цвет, мигание и свечение — как на экране, по getComputedStyle), под ней — конус, если он виден
               (#bg не спрятан). Звук — дорожка «♫ Звука» фона напрямую (zzSndStream, Zazerkalius v0.394): без захвата экрана и вопросов.
               Файл — .mp4, если браузер пишет mp4, иначе .webm */
            /* v0.063: Серпинский первого экрана телефона — свой холст #hubSier (фон-конус спрятан). Строки — Паскаль по модулю 2, 64 штуки, как в
               фоне, поэтому головки звука фона (zzSndHeads: [строка, бит, номер ноты]) ложатся на те же биты и горят цветом своей ноты.
               Стоя — один треугольник по центру (строки по середине — равнобедренный), в верхней половине; лёжа — два прямоугольных у своих
               краёв, гипотенузой к нотам (как пирамиды у конуса, Zazerkalius v0.395). Рисуется, только пока холст виден (телефон) */
            const sier = document.getElementById('hubSier'), sg = sier && sier.getContext('2d');
            /* v0.074, «не видно бегающего бита по треугольнику»: хаб, открытый файлом, не может читать фон (другой «адрес») — фон присылает
               звучащие биты сообщением { zerkHeads } */
            let hubHeads = null;
            window.addEventListener('message', e => { if (bg && e.source === bg.contentWindow && e.data && 'zerkHeads' in e.data) hubHeads = e.data.zerkHeads; });
            const PR = ['1']; while (PR.length < 64) { const q = PR[PR.length - 1]; let nx = '1'; for (let i = 1; i < q.length; i++) nx += q[i - 1] !== q[i] ? '1' : '0'; PR.push(nx + '1'); }
            const noteCol = Array.from(document.querySelectorAll('.hubSnd')).map(b => b.style.getPropertyValue('--c'));
            const sierDraw = () => {
                if (!sier || getComputedStyle(sier).display === "none") return false;
                const dpr = window.devicePixelRatio || 1, W = sier.clientWidth, H = sier.clientHeight; if (!W || !H) return false;
                let hd = null; try { hd = bg && bg.contentWindow && bg.contentWindow.zzSndHeads; } catch (e) {}
                if (!hd) hd = hubHeads;   /* v0.074: открыт файлом — фон прочитать нельзя, звучащие биты он шлёт сам (zerkHeads) */
                /* v0.075, «индекс тоже — тормозит он на мобиле»: треугольник перерисовывался 30 раз в секунду, даже когда ничего не менялось (с тенью-свечением
                   у звучащих бит) — теперь только когда сменились размер или звучащие биты */
                const key = W + 'x' + H + '@' + dpr + '|' + PR.length + '|' + JSON.stringify(hd || null);
                if (key === sierDraw.k) return true; sierDraw.k = key;
                if (sier.width !== Math.round(W * dpr) || sier.height !== Math.round(H * dpr)) { sier.width = Math.round(W * dpr); sier.height = Math.round(H * dpr); }
                sg.setTransform(dpr, 0, 0, dpr, 0, 0); sg.clearRect(0, 0, W, H);
                const heads = new Map((hd || []).map(([r, j, kd]) => [r + ':' + j, noteCol[kd | 0] || '#22d3ee']));
                const desk = !matchMedia('(pointer: coarse) and (max-width: 960px)').matches;   // v0.072: компьютер — один по центру, во всю высоту
                const N = PR.length, land = W > H && !desk, bw = document.getElementById('hubSndBox').getBoundingClientRect().width;
                /* v0.065, «треугольник должен быть выполнен из бит-ромбов, а не квадратов»: бит — ромб шириной dw и высотой dh с центром в spots(r, j).
                   Стоя — ромбы 60°/120° (dh = √3·dw) ребро к ребру: ряд заходит в ряд наполовину (шаг рядов dh/2), как ноты, — треугольник
                   равносторонний. Лёжа строки не сдвигаются (прямоугольные треугольники) — ромб в своей клетке, соседи касаются вершинами */
                let dw, dh, spots, side = false;
                if (!land) { const top = desk ? H * 0.03 : H * 0.07, hMax = desk ? H * 0.94 : H * 0.42; dw = Math.min(W * 0.94 / N, hMax / ((N + 1) * 0.866)); dh = dw * 1.732;
                    const cx = W / 2, y0 = top + (hMax - (N + 1) * dh / 2) / 2 + dh / 2;
                    spots = [(r, j) => [cx - r * dw / 2 + j * dw, y0 + r * dh / 2]]; }
                else {   /* v0.067, «а если треугольники для левого расположить катетами вдоль вертикали левой…» и по показу — «поменять местами»: тот же
                            равносторонний из ромбов, но на боку — вершина у своего края экрана (◀ слева, ▶ справа), основание к нотам; ромбы повёрнуты с ним */
                    dw = Math.min(H * 0.9 / N, Math.max(2, (W - bw - 40) / 2 / ((N + 1) * 0.866))); dh = dw * 1.732; side = true;
                    const m = 6, cy = H / 2, xl = m + dh / 2, xr = W - m - dh / 2;
                    spots = [(r, j) => [xl + r * dh / 2, cy - r * dw / 2 + j * dw], (r, j) => [xr - r * dh / 2, cy - r * dw / 2 + j * dw]]; }
                const rhomb = (x, y, k) => { const a = (side ? dh : dw) * k / 2, b = (side ? dw : dh) * k / 2; sg.beginPath(); sg.moveTo(x, y - b); sg.lineTo(x + a, y); sg.lineTo(x, y + b); sg.lineTo(x - a, y); sg.closePath(); sg.fill(); };
                for (let r = 0; r < N; r++) { const row = PR[r];
                    for (let j = 0; j < row.length; j++) { const hc = heads.get(r + ':' + j), on = row[j] === '1', k = hc || on ? 0.9 : 0.36;
                        sg.fillStyle = hc || '#9fffc8'; sg.globalAlpha = hc ? 1 : (on ? 0.78 : 0.14) * (desk ? 0.5 : 1);
                        if (hc) { sg.shadowColor = hc; sg.shadowBlur = 8; }
                        for (const f of spots) { const [x, y] = f(r, j); rhomb(x, y, k); }
                        if (hc) sg.shadowBlur = 0; } }
                sg.globalAlpha = 1; return true;
            };
            { let last = 0; const loop = (t) => { if (t - last > 33 && window.scrollY < innerHeight) { last = t; sierDraw(); } requestAnimationFrame(loop); }; requestAnimationFrame(loop); }
            { const dn = document.getElementById('hubDown'); if (dn) dn.onclick = () => document.querySelector('.hub').scrollIntoView({ behavior: 'smooth' }); }

            { const rb = document.getElementById('hubRec'), box = document.getElementById('hubSndBox');
              let hrec = null, hT = 0;
              const mob = () => { try { return (navigator.userAgentData && navigator.userAgentData.mobile) || /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent)
                || (matchMedia('(pointer: coarse)').matches && Math.min(screen.width, screen.height) < 900); } catch (e) { return false; } };
              const cv = document.createElement('canvas'), g = cv.getContext('2d');
              const draw = () => {
                const W = cv.width, H = cv.height;
                g.globalAlpha = 1; g.shadowBlur = 0; g.fillStyle = '#000'; g.fillRect(0, 0, W, H);
                if (bg && getComputedStyle(bg).visibility !== 'hidden') {   // конус — если его видно на странице
                  try { const c = bg.contentDocument && bg.contentDocument.getElementById('coneCv');
                    if (c && c.width) { const s = Math.max(W / c.width, H / c.height); g.drawImage(c, (W - c.width * s) / 2, (H - c.height * s) / 2, c.width * s, c.height * s); } } catch (e) {}
                }
                const n = box.getBoundingClientRect(); if (!n.width) return;
                let k = Math.min(W * 0.8 / n.width, H * 0.6 / n.height), ox = W / 2 - (n.left + n.width / 2) * k, oy = H / 2 - (n.top + n.height / 2) * k;
                if (sier && getComputedStyle(sier).display !== 'none' && sier.width) {   // v0.063: телефон — весь первый экран (Серпинский и ноты) в кадр
                  const sw = sier.clientWidth, sh = sier.clientHeight, sy = window.scrollY; k = Math.min(W / sw, H / sh); ox = (W - sw * k) / 2; oy = (H - sh * k) / 2 + sy * k;
                  g.drawImage(sier, ox, oy - sy * k, sw * k, sh * k);
                }
                g.textAlign = 'center'; g.textBaseline = 'middle';
                box.querySelectorAll('.hubSnd').forEach(b => {
                  const r = b.getBoundingClientRect(), cs = getComputedStyle(b), on = b.classList.contains('on');
                  g.globalAlpha = +cs.opacity || 1;
                  { const x = r.left * k + ox, y = r.top * k + oy, w = r.width * k, h = r.height * k;   // v0.063: ромб ноты
                    g.shadowBlur = 0; g.strokeStyle = cs.backgroundColor; g.lineWidth = 2 * k; g.beginPath(); g.moveTo(x + w / 2, y); g.lineTo(x + w, y + h / 2); g.lineTo(x + w / 2, y + h); g.lineTo(x, y + h / 2); g.closePath(); g.stroke(); }
                  g.fillStyle = cs.color;
                  g.shadowColor = on ? b.style.getPropertyValue('--c') : '#000'; g.shadowBlur = (on ? 16 : 6) * k;
                  g.font = `bold ${parseFloat(cs.fontSize) * k}px system-ui, sans-serif`;
                  g.fillText(b.textContent, (r.left + r.width / 2) * k + ox, (r.top + r.height / 2) * k + oy);
                });
                g.globalAlpha = 1; g.shadowBlur = 0;
              };
              const idle = 'Видео хаба: ролик в формате устройства (телефон — 1080×1920, компьютер — 1920×1080) — ноты, как горят, и их звук; конус — если он виден. Ещё щелчок — стоп, файл скачивается';
              if (rb) rb.onclick = () => {
                if (hrec) { hrec.stop(); return; }
                if (!cv.captureStream || typeof MediaRecorder === 'undefined') { rb.title = '⏺ Этот браузер не умеет записывать видео'; return; }
                const m = mob(); cv.width = m ? 1080 : 1920; cv.height = m ? 1920 : 1080; draw();
                const stream = cv.captureStream(30);
                try { const st = bg && bg.contentWindow.zzSndStream && bg.contentWindow.zzSndStream(), at = st && st.getAudioTracks()[0]; if (at) stream.addTrack(at.clone()); } catch (e) {}
                const aud = stream.getAudioTracks().length > 0;
                const mime = (aud ? ['video/mp4;codecs=avc1.42E01E,mp4a.40.2', 'video/mp4', 'video/webm;codecs=vp9,opus', 'video/webm;codecs=vp8,opus', 'video/webm']
                  : ['video/mp4;codecs=avc1.42E01E', 'video/mp4', 'video/webm;codecs=vp9', 'video/webm']).find(x => MediaRecorder.isTypeSupported(x)) || '';
                const mp4 = mime.startsWith('video/mp4'), chunks = [], r = hrec = new MediaRecorder(stream, mime ? { mimeType: mime, videoBitsPerSecond: 8e6 } : undefined), t0 = Date.now();
                r.ondataavailable = (e) => { if (e.data && e.data.size) chunks.push(e.data); };
                r.onstop = () => {
                  clearInterval(hT); stream.getTracks().forEach(tr => tr.stop()); hrec = null; rb.classList.remove('on'); rb.textContent = '⏺'; rb.title = '⏺ ' + idle;
                  const blob = new Blob(chunks, { type: mp4 ? 'video/mp4' : 'video/webm' }), a = document.createElement('a'), d = new Date(), p2 = (x) => String(x).padStart(2, '0');
                  a.href = URL.createObjectURL(blob); a.download = `Zerkalius-hub-${d.getFullYear()}${p2(d.getMonth() + 1)}${p2(d.getDate())}-${p2(d.getHours())}${p2(d.getMinutes())}${p2(d.getSeconds())}.${mp4 ? 'mp4' : 'webm'}`;
                  document.body.appendChild(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(a.href), 5000);
                };
                r.start(1000); rb.classList.add('on'); rb.textContent = '⏹';
                const loop = () => { if (hrec !== r) return; draw(); requestAnimationFrame(loop); }; requestAnimationFrame(loop);
                const tick = () => { const s = Math.floor((Date.now() - t0) / 1000); rb.title = `⏹ Идёт запись${aud ? ' со звуком' : ''} ${cv.width}×${cv.height} — ${String(Math.floor(s / 60)).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}. Щелчок — стоп и файл`; };
                tick(); hT = setInterval(tick, 1000);
              };
            }
        })();
    </script>
</body>
</html>
 <!-- === МАРКЕР: CSS СТИЛИ КОНЕЦ === -->