<!-- === МАРКЕР: CSS СТИЛИ НАЧАЛО === -->
<!-- Zerkalius Hub (index) — v0.114. Точка входа: ссылки на все страницы проекта.
     v0.114: масштаб доступен всегда; ⌂ возвращает рисунок и ось; биты запускаются из верхней полосы.
     v0.113: кнопка «Маятник» в Черновиках — XOR-маятник из Excel (mayatnik/).
     v0.112: автоповорот линии зеркала; отдельные скорости зеркала и 3D до ×1000; кэш исходных битов.
     v0.109: «Код» — прежняя страница Code, «Зеркалиус» — три зеркала.
     v0.107: ровные кнопки, ссылка на окно «Зеркалиус», компактные ромбы настроек и PNG рядом с видео.
     v0.106: главные кнопки «Треугольник» и «Зазеркалиус» — вверху левого меню.
     v0.105: своя картинка под зеркалом и чёткий PNG 2K / 4K / 8K с перерисовкой ромбов и цифр.
     v0.104: переключатель «Исходный / Серпинский», одно зеркало и наклон битов для сравнения узоров.
     v0.103: переключаемый световой след единиц вниз по двум диагоналям, сквозь 0 и 1, без изменения битов.
     v0.102: одна передвижная линия зеркалит весь треугольник и окраску; ромб двигает ось, ручка меняет наклон, правый щелчок включает / выключает; отдельный наклон битов 0 и 1.
     v0.101: меню слева, две главные кнопки вдоль левой грани треугольника; на узком экране кнопки выровнены влево.
     v0.100: кнопки в боковой лесенке, треугольник свободен; все названия ромбическими битами.
     v0.099: без второй «1»; нот-«галстука» нет — вершина пускает окраску вниз по соседним единицам (1 / 2 / 4 / 8 строк в секунду), каждая строка звучит нотой.
     v0.098: ноты стартуют «галстуком» (До–Фа по вертикали, Соль справа, Ля — острие, Си справа выше); с правого края вверх нота встаёт на левую 1 строкой выше — по кругу.
     v0.097: ноты ходят, не меняя треугольник: на 1 — вниз-вправо, на 0 — вверх-вправо; за краем нота пропадает, её можно запустить снова.
     v0.096: «Гранидус» → «Бирамида» — кнопка Черновиков (oktaedr/Zerkalius-oktaedr.html) переименована вместе со страницей.
     v0.095: цветные ноты вверх-вправо по очереди, не поворачивая; встреченные 1 — ниже вправо. На краю — замкнутый обмен, кнопка идёт с нотой.
     v0.094: семь нот на 1 / 1 / 11 / 111; по очереди вниз на 1, вверх на 0. Треугольник у верха; цветная надпись — маленькая кнопка меню.
     v0.093: «убери доп. разноцветный треугольник с фона» — кнопки «все 7 нот» нет; ноты — по две цветные ячейки на единицах треугольника; в ромбах — цифры.
     v0.092: фон — 71 строка последовательности из _pzl.txt, общий набор с Зазеркалиусом и Синхрофазотроном.
     v0.091: кнопка Синхрофазотрона — битовая надпись ромбами на треугольной сетке, как заголовок страницы (2026-10-10).
     v0.090: «Синхрофазотрон» (sinhrofazotron/, 2026-10-10) — Соляриус отдельной страницей; кнопка — последней в Черновиках.
     v0.089: мобильные ссылки открываются сразу; скрытый звуковой движок загружается только по нажатию ноты. Фоновая ромбосетка снята.
     Маркер версии стоит ЗДЕСЬ, а не первой строкой: первую занимает маркер патчера.
     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.114</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 {
            position: relative;
            display: flow-root;   /* отступ меню на телефоне остаётся внутри фона, не сдвигает весь 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: 12px; top: 10px; transform: none; z-index: 8; pointer-events: auto; height: 44px;
                   width: min(32vw, 224px); padding: 3px 8px; border: 1px solid #385449; border-radius: 4px; background: #000b; cursor: pointer; 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)); }
        /* v0.077, по снимку «◇ Ромбоидов» Zazerkalius — «как тебе отправить для вставки в индекс хаб», «для хаба Зеркалиус», «да, делай и волну»: надпись —
           «Зеркалиус» строками пиксельного шрифта «Аа» (Zazerkalius v0.848, со строчными), бит — ромб из двух треугольников, ряды вбок «←» — как в окне
           «◇ Ромбоиды» («◇ бит», «▵ каждый»). Рисуется на холсте (#hubLogoCv, скрипт в конце страницы): единицы — светлые, нули — серые, по каждому
           треугольнику тёмная грань; волна — полоса света бежит слева направо, единицы под ней загораются цветами радуги прежней надписи */
        #hubLogoCv { display: block; width: 100%; height: 100%; }
        @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; right: 12px; bottom: 8px; z-index: 5;   /* v0.094: верх занят семью нотами */
        }

        /* 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);
        }

        /* v0.079, по снимку главных кнопок — «эти кнопки в Хабе тоже надо сделать из ромбов — текст»: надпись «Треугольник» / «Зазеркалиус» — строками
           шрифта «Аа» Zazerkalius, бит — ромб (▲ + ▼, чуть сжат к своему центру — швы), ряды вбок «←», как надпись «Зеркалиус» над нотами. Ромбы — маской
           (SVG собирает скрипт в конце страницы), заливка — цвет кнопки (currentColor): перелив hue-main и чёрный при наведении работают как прежде.
           Сбойные полосы этих двух кнопок не трогают — полоса рисует текст буквами */
        .menu-btn.main-engine.rmbOn { padding: 14px 18px; font-size: 0; letter-spacing: 0; }
        /* v0.084, по снимку «△ Сетки» Zazerkalius с двумя фигурами — «сделай такие границы, форму для кнопок», «это две кнопки, вытянутые 4 грани, трапеции»:
           главные кнопки — трапеции с боками под 60°, рамка — один ряд треугольников по краю (каждый чуть сжат к центру — швы). «Треугольник» — узким краем
           вверх (как ▲), «Зазеркалиус» — зеркально, узким вниз (как ▼). Размеры по сетке: сторона треугольника s = ширина / m (целое m), высота — 4 ряда
           (2√3·s), скос — 2s; всё считает скрипт (mainFrame) и кладёт в --bh, --px, --cp (форма), --fm (маска рамки). Рамка — цветом кнопки (currentColor) */
        .menu-btn.main-engine.rmbOn.fmOn { border: none; border-radius: 0; display: flex; align-items: center; height: var(--bh); padding: 0 var(--px); clip-path: var(--cp); }
        .menu-btn.main-engine.rmbOn.fmOn::before { content: ''; position: absolute; inset: 0; background: currentColor; pointer-events: none;
            -webkit-mask: var(--fm) 0 0 / 100% 100% no-repeat; mask: var(--fm) 0 0 / 100% 100% no-repeat; }
        /* v0.085, по снимку кнопки v0.084 — «да, обеим кнопкам такую, только это просто обводка нужна; оставь внутреннюю, а сами треугольники не нужны»:
           обе кнопки — одна трапеция узким краем вверх; рамки из треугольников нет, осталась её внутренняя граница — тонкая обводка цветом кнопки.
           Кнопка обрезана по этой границе (--cp), обводка — маска --fm (контур, 2 px внутрь); места по сетке те же */
        .menu-btn.main-engine .rmbTxt { display: block; width: 100%; background: currentColor;
            -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }

        /* Панели разделов: полупрозрачное стекло поверх обоев */
        .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.083, на v0.081–v0.082 — «лучше в этот треугольник», «7 строк — как раз 0-треугольник, первый из 7 строк нулей, перевёрнутый, как раз 7 нот; пусть
           прям биты-ноты стекают вниз через узкое место — вершину треугольника — и только отсюда выходят в общий треугольник»; «треугольник ниже» (под надпись).
           Кнопка «все 7 нот» #hubAll — первая перевёрнутая дырка Серпинского (строки 8–14 при 64): по строке на ноту, сверху До (7 бит) … внизу Си (1 бит).
           Сама кнопка прозрачна (форма — clip-path по контуру дырки, ставит скрипт), всё видимое рисует холст #hubFly: цветные биты, их сток через вершину
           вниз, в общий треугольник, серая дырка с мигающей границей, пока ноты звучат (пауза — граница не мигает); второе нажатие — биты стекают обратно.
           Семь отдельных нот при этом спрятаны (body.allMode); лёжа на телефоне — прежняя стрелка нот. Меню — на прежнем месте */
        /* v0.085, на v0.083 — «сейчас они как и раньше с вершины начинают движение; надо, чтобы отсюда прямо эти же ромбы уходили, по одному за одно нажатие,
           по 1 ноте, по кругу: 7 нажатий — семь нот вылетело, потом следующие»: нажатие выпускает один бит дырки — по кругу До, Ре … Си (из каждой строки —
           ближний к середине), потом второй круг из оставшихся, и так все 28. Первый бит ноты включает её звук; бит идёт к вершине дырки и оттуда летит прямо
           в свою бегущую головку в треугольнике и сливается с ней. Ушедший бит оставляет серое место; граница дырки мигает, пока что-то звучит. Дырка пуста —
           нажатие выключает все ноты, биты возвращаются на места */
        #hubAll, #hubFly { display: none; }
        #hubAll { position: fixed; z-index: 5; padding: 0; border: none; background: transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
        #hubFly { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 6; pointer-events: none; }
        body.allMode #hubAll, body.allMode #hubFly { display: block; }
        body.allMode #hubSndBox { display: none; }
        @media (hover: hover) { #hubAll:not(.on):hover + #hubFly { filter: brightness(1.35); } }
        /* v0.093, «убери этот доп. разноцветный треугольник с фона, а на единицах треугольника на некоторых поставь по 2 цветные ячейки для каждой ноты»:
           кнопки «все 7 нот» (дырка с 28 цветными битами) больше нет; ноты — 14 ячеек на единицах фонового треугольника, по две на ноту: на строках
           N·(t+1)/8 (До сверху … Си снизу) — крайняя левая и крайняя правая единица. Видно — холст #hubNoteCv, нажимается — кнопка .hubNoteCell над ячейкой */
        body.allMode #hubAll, body.allMode #hubFly { display: none !important; }
        #hubNoteCv { display: none; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 6; pointer-events: none; }
        .hubNoteCell { display: none; position: fixed; z-index: 7; padding: 0; border: none; background: transparent; cursor: pointer; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
                       touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; }
        body.allMode #hubNoteCv, body.allMode .hubNoteCell { display: block; }
        /* v0.099: скорость окраски — подпись рядом с вершиной, без ромба */
        .hubNoteCell.hubFloodSpeed { clip-path: none; font: 700 12px/22px system-ui, sans-serif; color: #9fffc8; background: rgba(6, 8, 10, .7); border: 1px solid #2c5a45; border-radius: 0; text-align: center; padding: 0; }
        /* 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; }
        /* v0.091: Синхрофазотрон — битовая надпись (как в шапке страницы) во всю кнопку */
        .menu-btn.sfz-btn { display: flex; align-items: center; justify-content: center; padding: 6px 10px; grid-column: span 2; }   /* «повыше, в длину бы»: на две колонки */
        .menu-btn.sfz-btn svg.sfzlogo { display: block; width: 100%; height: auto; }
        .menu-btn.sfz-btn:hover svg.sfzlogo .s1 { fill: #7fb0ee; }
        .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; }
            #hubAll { position: absolute; } #hubFly { position: absolute; height: 100svh; }   /* v0.081: там же, где треугольник */
            #hubNoteCv { position: absolute; height: 100svh; } .hubNoteCell { position: absolute; }   /* v0.093: ноты-ячейки — там же, где треугольник */
            #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; } }

        /* v0.100: меню — боковая лесенка, у рисунка своя свободная область. */
        @media (min-width: 1101px) {
            .hub { position: fixed; top: 72px; left: 10px; right: auto; bottom: 32px; width: 280px; height: auto;
                   align-items: stretch; justify-content: flex-start; padding: 6px 8px 16px; gap: 20px;
                   overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #385449 #050505; }
            .hub .mainrow, .hub .grid, .hub .row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
            .hub .mainrow { position: static; pointer-events: auto; gap: 12px; }
            .hub .mainrow > a { margin-left: 0; }
            .hub .panel { padding: 0; border: 0; border-radius: 0; background: none; }
            .hub .panel-title { text-align: left; letter-spacing: 2px; margin: 0 0 10px 8px; }
            .hub .menu-btn { width: 226px; min-width: 0; flex: 0 0 auto; }
            .hub .grid > a:nth-of-type(4n+2), .hub .row > a:nth-of-type(4n+2) { margin-left: 8px; }
            .hub .grid > a:nth-of-type(4n+3), .hub .row > a:nth-of-type(4n+3) { margin-left: 16px; }
            .hub .grid > a:nth-of-type(4n), .hub .row > a:nth-of-type(4n) { margin-left: 24px; }
        }
        .hub .menu-btn .hub-grid-text { display: block; width: 100%; height: 27px;
            background: linear-gradient(90deg, #ff5f6d, #ffc371, #6ee7a0, #22d3ee, #b98cf0);
            -webkit-mask: var(--menu-glyph) center / contain no-repeat; mask: var(--menu-glyph) center / contain no-repeat;
            pointer-events: none; }
        .hub .menu-btn.draft-btn { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 12px; }
        .hub .menu-btn:focus-visible { outline: 2px solid #9fffc8; outline-offset: 3px; }
        @media (max-width: 1100px) {
            html, body { height: auto; }
            body { overflow-x: hidden; overflow-y: auto; }
            #hubSier { position: absolute; width: 100vw; height: 100svh; z-index: 1; }
            #hubAll, #hubFly, #hubNoteCv, .hubNoteCell { position: absolute; }
            #hubFly, #hubNoteCv { height: 100svh; }
            .hub { position: relative; height: auto; margin-top: 100svh; justify-content: flex-start;
                   overflow: visible; padding: 28px 12px 64px; gap: 24px; align-items: flex-start; }
            .hub .mainrow { flex-direction: column; align-items: flex-start; gap: 14px; }
            .hub .grid, .hub .row { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
            .hub .grid > a, .hub .row > a, .hub .mainrow > a { width: min(340px, 82vw); flex: 0 0 auto; }
            .hub .grid > a:nth-of-type(even), .hub .row > a:nth-of-type(even) { margin-left: 16px; }
            .hub .grid > a:nth-of-type(5n):not(:last-of-type) { margin-bottom: 16px; }
            #hubDown { display: block; position: absolute; left: 50%; top: calc(100svh - 64px); transform: translateX(-50%);
                       z-index: 6; border: none; background: none; color: #9fffc8; font: 30px/0.55 system-ui, sans-serif;
                       padding: 6px 16px; cursor: pointer; touch-action: manipulation; }
        }

        /* v0.102: одна передвижная ось отражает весь живой рисунок. */
        #hubMirror { z-index: 9; pointer-events: none; overflow: hidden; user-select: none; }
        .hubMirrorLine { position: absolute; height: 20px; pointer-events: auto; touch-action: none; cursor: move; transform-origin: center; }
        .hubMirrorLine::before { content: ''; position: absolute; left: 0; right: 0; top: 9px;
            border-top: 1px dashed #70e0d7; filter: drop-shadow(0 0 3px #22d3ee); opacity: .65; pointer-events: none; }
        #hubMirror.off .hubMirrorLine::before { opacity: .2; }
        .hubMirrorHandle { position: absolute; left: 50%; top: -6px; width: 32px; height: 32px;
            padding: 0; border: 0; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); background: #225e58;
            color: #9fffc8; font: bold 20px/1 system-ui, sans-serif; cursor: move; touch-action: none; }
        .hubMirrorTurn { position: absolute; top: 3px; width: 14px; height: 14px; padding: 0;
            border: 1px solid #9fffc8; border-radius: 50%; background: #225e58; cursor: grab; touch-action: none; }
        .hubMirrorHandle:focus-visible, .hubMirrorTurn:focus-visible { background: #806520; outline: 2px solid #ffd166; outline-offset: 3px; }
        .hubMirrorSettings { width: 226px; box-sizing: border-box; padding: 10px; border: 1px solid #2c5a45;
            color: #9fffc8; background: #07120e; font: 12px/1.4 system-ui,sans-serif; }
        .hubMirrorSettings label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; white-space: nowrap; }
        .hubMirrorSettings input[type=range] { width: 90px; min-width: 0; flex: 1; accent-color: #70e0d7; }
        .hubMirrorSettings output { width: 32px; text-align: right; }
        .hubMirrorSettings select { flex: 1; min-width: 0; padding: 4px; border: 1px solid #385449; background: #0a2019; color: #9fffc8; font: inherit; }
        .hubMirrorSettings button { border: 1px solid #385449; padding: 5px; color: #9fffc8; background: #0a2019; cursor: pointer; font: inherit; }
        .hubImageTools { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #385449; }
        .hubImageTools [hidden] { display: none; }
        .hubImageTools label { margin: 0; }
        .hubImageStatus { overflow-wrap: anywhere; color: #7aa996; font-size: 11px; }
        .hubImageTools button:disabled { opacity: .55; cursor: wait; }
        .hubPictureMode .hubNoteCell, .hubPictureMode #hubNoteCv { display: none; }

        /* v0.107: общая левая граница и ширина меню; компактные ромбы настроек. */
        .hub .mainrow, .hub .grid, .hub .row, .hub .panel { width:100%; box-sizing:border-box; }
        .hub .menu-btn { box-sizing:border-box; width:100%!important; margin-left:0!important; }
        .hubMirrorSettings { display:grid; grid-template-columns:repeat(3,48px); gap:2px; width:156px; padding:4px; align-items:start; position:relative; overflow:visible; }
        .hubMirrorSettings .hubRhomb, .hubMirrorSettings .hubTilt > summary, #hubRec, #hubPNG { box-sizing:border-box; display:flex; align-items:center; justify-content:center; width:48px; height:48px; padding:0; margin:0; border:0; border-radius:0; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); background:#17372c; color:#9fffc8; font:15px/1.1 system-ui,sans-serif; cursor:pointer; touch-action:manipulation; }
        .hubMirrorSettings .hubRhomb:has(input:checked) { background:#286650; color:#dcffee; }
        .hubMirrorSettings .hubRhomb input[type=checkbox] { position:absolute; opacity:0; width:32px; height:32px; cursor:pointer; }
        .hubMirrorSettings .hubRhomb select { width:48px; height:48px; padding:0; border:0; background:transparent; color:inherit; text-align:center; appearance:none; cursor:pointer; }
        .hubMirrorSettings select option { background:#0a2019; }
        .hubNoteCell { z-index:12; }
        .hubTilt { position:relative; width:48px; }
        .hubTilt > summary { list-style:none; flex-direction:column; font-size:12px!important; }
        .hubTilt > summary::-webkit-details-marker { display:none; }
        .hubTilt > summary output { width:auto; text-align:center; pointer-events:none; }
        .hubTilt:first-of-type > label { left:0; }
        .hubTilt > label { position:absolute; top:50px; left:-52px; width:148px; margin:0; padding:8px; box-sizing:border-box; background:#0a2019; border:1px solid #385449; z-index:15; }
        .hubImageTools { display:contents; }
        .hubMirrorSettings [hidden] { display:none!important; }
        .hubImageStatus { grid-column:1/-1; font-size:10px; line-height:1.2; }
        #hubRec, #hubPNG { position:fixed; top:6px; z-index:20; }
        #hubRec { right:8px; background:#34252e; font-size:22px; }
        #hubPNG { right:58px; background:#253950; font-size:11px; }
        .hubMirrorSettings .hubRhomb:focus-within, .hubTilt > summary:focus-visible, #hubPNG:focus-visible, #hubRec:focus-visible { background:#4b6350; outline:none; }
        @media(max-width:1100px) { .hub { width:100%; box-sizing:border-box; } .hub .panel { padding:0; border:0; background:none; } }

        /* v0.109: free-standing diamonds and equally spaced trapezoid links. */
        .hubMirrorSettings{border:0!important;background:none!important;padding:0;width:148px;gap:2px}
        .hub .mainrow,.hub .grid,.hub .row{gap:8px!important}
        .hub .menu-btn{height:46px!important;min-height:46px!important;padding:8px 18px!important;border-radius:0!important;border:0!important;clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 100%,0 100%)!important;transform:none!important;box-shadow:none!important;display:flex!important;align-items:center;justify-content:center}
        .hub .menu-btn::after{content:''!important;position:absolute;inset:0!important;background:currentColor!important;pointer-events:none;transform:none!important;opacity:.8!important;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 254 46' preserveAspectRatio='none'%3E%3Cpath d='M18 .7H236L253 45.3H1Z' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center/100% 100% no-repeat!important;clip-path:none!important}
        .hub .menu-btn::before{display:none!important}
        .hubTilt>label{border:0;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%,0 50%)}
        .hubViewRotation{grid-column:1/-1;width:144px!important;height:20px;margin:0;accent-color:#70e0d7}
        .hubMirrorSettings .hubRhomb[aria-pressed=true]{background:#286650;color:#fff}
        #hubZoom{position:fixed;right:6px;top:50%;transform:translateY(-50%);z-index:25;display:flex;flex-direction:column;align-items:center;gap:3px;font:10px/1 monospace;color:#ddd}
        #hubZoom button{--zoom-color:#70e0d7;width:48px;height:48px;padding:0;border:0;border-radius:0;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);color:#edf3ff;font:700 22px/1 monospace;cursor:pointer;background:color-mix(in srgb,var(--zoom-color) 22%,transparent)}
        #hubZoom .hub-zoom-minus{--zoom-color:#d99a4a}#hubZoom .hub-zoom-plus{--zoom-color:#6da4e7}
        #hubZoom button:hover,#hubZoom button:focus-visible{background:color-mix(in srgb,var(--zoom-color) 42%,transparent)}#hubZoom button:disabled{opacity:.3;cursor:default}
        #hubZoom output{cursor:pointer;font-variant-numeric:tabular-nums}
        body.hubCanvasUnlocked{touch-action:none}
        .hubMirrorHandle{display:none!important}
        /* v0.112: canvas controls live above the field, independent of menu scroll. */
        #hubFieldTools.hubMirrorSettings{position:fixed;left:318px;top:8px;z-index:24;display:flex;flex-wrap:wrap;align-items:flex-start;gap:2px;width:calc(100vw - 430px);max-width:700px;padding:0;overflow:visible}
        #hubFieldTools .hubRhomb,#hubFieldTools .hubTilt{flex:0 0 48px}
        #hubFieldTools .hubFlip,#hubFieldTools .hubFloodControl{white-space:pre-line;font-size:12px}
        #hubFieldTools .hubFloodControl[aria-pressed=true]{background:#297966;color:#fff;filter:drop-shadow(0 0 5px #70e0d7)}
        #hubFieldTools .hubViewRotation{order:2;flex:0 0 144px;align-self:center}
        #hubFieldTools .hubViewRotationControl{order:2;flex:0 0 156px;display:flex;flex-direction:column;gap:2px;margin:0;padding:0;color:#9fffc8;font:11px/1.2 system-ui,sans-serif}
        #hubFieldTools .hubViewRotationControl .hubViewRotation{flex:0 0 auto;width:156px!important;touch-action:none}
        #hubFieldTools .hubMirrorSpinControl,#hubFieldTools .hubFlipControl{order:2;display:flex;align-items:center;gap:4px;flex:0 0 208px}
        #hubFieldTools .hubMirrorSpeedControl{display:flex;flex-direction:column;gap:2px;width:156px;margin:0;color:#9fffc8;font:11px/1.2 system-ui,sans-serif}
        #hubFieldTools .hubMirrorSpeed{width:156px;height:20px;margin:0;accent-color:#70e0d7;touch-action:none}
        #hubFieldTools .hubMirrorSpin{white-space:pre-line;font-size:12px}
        #hubFieldTools .hubImageStatus{order:3;flex:0 0 100%;width:100%;margin:0}
        .hub{scrollbar-width:none!important}.hub::-webkit-scrollbar{display:none;width:0;height:0}
        @media(max-width:1100px){#hubFieldTools.hubMirrorSettings{position:absolute;left:12px;top:68px;width:calc(100% - 24px);max-width:none}}
    </style>
<script src="_js/hub-perf.js?v=1"></script>
<script src="_js/initial-rows.js?v=2"></script>
<script src="_js/hub-menu-grid.js?v=100"></script>
<script src="_js/hub-mirror.js?v=114"></script>
<script src="_js/hub-rhomb-music.js?v=6"></script>
<script src="_js/hub-image.js?v=2"></script>
<script src="_js/hub-view.js?v=114"></script>
</head>
<body>
    <!-- Живой фон: обои Zerkalius (папка oboi\, заведено 2026-09-21) -->
    <!-- v0.038: живой фон — конус Zazerkalius (3D, зеркало вниз, свет, крутится); прежние обои — кнопка «Обои» -->
    <iframe id="bg" data-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>
    <!-- v0.081: одна кнопка «все 7 нот» — ромб в центральной дырке треугольника; её цветные ромбы — на холсте #hubFly (идёт сразу за кнопкой: наведение подсвечивает его) -->
    <button id="hubAll" type="button" aria-label="Все семь нот" title="Все семь нот: щелчок — звучат все (ромбы разлетаются), ещё щелчок — тишина (ромбы слетаются назад)"></button><canvas id="hubFly" 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>
    <button id="hubLogo" type="button" aria-label="Зеркалиус — к меню" title="Зеркалиус — к меню"><canvas id="hubLogoCv" aria-hidden="true"></canvas></button>
    <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.114</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" id="pnSign">
            <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" id="pnDraft">
            <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="Code" data-ru="Код">Код</a>
                <a href="zazerkalius/Zerkalius-zazerkalius.html#zerkalius" 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="Bipyramid" 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>
                <!-- v0.090: Синхрофазотрон — Соляриус (окно конуса Zazerkalius) отдельной страницей, 2026-10-10 -->
                <!-- v0.092: кнопка — та же битовая надпись, что в шапке страницы; data-en / data-ru сняты намеренно: смена языка пишет textContent и стёрла бы картинку -->
                <a href="sinhrofazotron/Zerkalius-sinhrofazotron.html" class="menu-btn draft-btn sfz-btn" aria-label="Синхрофазотрон"><svg class="sfzlogo" viewBox="-0.1 -0.1 181.2 19.25" role="img" aria-label="Синхрофазотрон"><title>Синхрофазотрон</title><defs><clipPath id="sfzlcHub"><path d="M0,0L170,0L181,19.05L11,19.05Z"/></clipPath></defs><path class="s0" fill="#12161f" d="M0,0L170,0L181,19.05L11,19.05Z"/><path class="s1" fill="#4f8fdc" d="M5,1.73H11L12,3.46H6ZM4,3.46H6L7,5.2H5ZM12,3.46H14L15,5.2H13ZM80,3.46H82L83,5.2H81ZM5,5.2H7L8,6.93H6ZM17,5.2H19L20,6.93H18ZM25,5.2H27L28,6.93H26ZM29,5.2H31L32,6.93H30ZM37,5.2H39L40,6.93H38ZM41,5.2H43L44,6.93H42ZM49,5.2H51L52,6.93H50ZM53,5.2H61L62,6.93H54ZM67,5.2H73L74,6.93H68ZM79,5.2H85L86,6.93H80ZM91,5.2H97L98,6.93H92ZM103,5.2H109L110,6.93H104ZM115,5.2H121L122,6.93H116ZM125,5.2H135L136,6.93H126ZM137,5.2H145L146,6.93H138ZM151,5.2H157L158,6.93H152ZM161,5.2H163L164,6.93H162ZM169,5.2H171L172,6.93H170ZM6,6.93H8L9,8.66H7ZM18,6.93H20L21,8.66H19ZM24,6.93H28L29,8.66H25ZM30,6.93H32L33,8.66H31ZM38,6.93H40L41,8.66H39ZM44,6.93H46L47,8.66H45ZM48,6.93H50L51,8.66H49ZM54,6.93H56L57,8.66H55ZM62,6.93H64L65,8.66H63ZM66,6.93H68L69,8.66H67ZM74,6.93H76L77,8.66H75ZM78,6.93H80L81,8.66H79ZM82,6.93H84L85,8.66H83ZM86,6.93H88L89,8.66H87ZM98,6.93H100L101,8.66H99ZM102,6.93H104L105,8.66H103ZM110,6.93H112L113,8.66H111ZM114,6.93H116L117,8.66H115ZM122,6.93H124L125,8.66H123ZM130,6.93H132L133,8.66H131ZM138,6.93H140L141,8.66H139ZM146,6.93H148L149,8.66H147ZM150,6.93H152L153,8.66H151ZM158,6.93H160L161,8.66H159ZM162,6.93H164L165,8.66H163ZM170,6.93H172L173,8.66H171ZM7,8.66H9L10,10.39H8ZM19,8.66H21L22,10.39H20ZM23,8.66H25L26,10.39H24ZM27,8.66H29L30,10.39H28ZM31,8.66H41L42,10.39H32ZM47,8.66H49L50,10.39H48ZM55,8.66H57L58,10.39H56ZM63,8.66H65L66,10.39H64ZM67,8.66H69L70,10.39H68ZM75,8.66H77L78,10.39H76ZM79,8.66H81L82,10.39H80ZM83,8.66H85L86,10.39H84ZM87,8.66H89L90,10.39H88ZM93,8.66H101L102,10.39H94ZM107,8.66H111L112,10.39H108ZM115,8.66H117L118,10.39H116ZM123,8.66H125L126,10.39H124ZM131,8.66H133L134,10.39H132ZM139,8.66H141L142,10.39H140ZM147,8.66H149L150,10.39H148ZM151,8.66H153L154,10.39H152ZM159,8.66H161L162,10.39H160ZM163,8.66H173L174,10.39H164ZM8,10.39H10L11,12.12H9ZM16,10.39H18L19,12.12H17ZM20,10.39H24L25,12.12H21ZM28,10.39H30L31,12.12H29ZM32,10.39H34L35,12.12H33ZM40,10.39H42L43,12.12H41ZM46,10.39H48L49,12.12H47ZM50,10.39H52L53,12.12H51ZM56,10.39H58L59,12.12H57ZM64,10.39H66L67,12.12H65ZM68,10.39H70L71,12.12H69ZM76,10.39H78L79,12.12H77ZM80,10.39H82L83,12.12H81ZM84,10.39H86L87,12.12H85ZM88,10.39H90L91,12.12H89ZM92,10.39H94L95,12.12H93ZM100,10.39H102L103,12.12H101ZM104,10.39H106L107,12.12H105ZM112,10.39H114L115,12.12H113ZM116,10.39H118L119,12.12H117ZM124,10.39H126L127,12.12H125ZM132,10.39H134L135,12.12H133ZM140,10.39H142L143,12.12H141ZM148,10.39H150L151,12.12H149ZM152,10.39H154L155,12.12H153ZM160,10.39H162L163,12.12H161ZM164,10.39H166L167,12.12H165ZM172,10.39H174L175,12.12H173ZM11,12.12H17L18,13.86H12ZM21,12.12H23L24,13.86H22ZM29,12.12H31L32,13.86H30ZM33,12.12H35L36,13.86H34ZM41,12.12H43L44,13.86H42ZM45,12.12H47L48,13.86H46ZM53,12.12H55L56,13.86H54ZM57,12.12H65L66,13.86H58ZM71,12.12H77L78,13.86H72ZM83,12.12H89L90,13.86H84ZM95,12.12H103L104,13.86H96ZM107,12.12H113L114,13.86H108ZM119,12.12H125L126,13.86H120ZM133,12.12H135L136,13.86H134ZM141,12.12H149L150,13.86H142ZM155,12.12H161L162,13.86H156ZM165,12.12H167L168,13.86H166ZM173,12.12H175L176,13.86H174ZM58,13.86H60L61,15.59H59ZM86,13.86H88L89,15.59H87ZM142,13.86H144L145,15.59H143ZM59,15.59H61L62,17.32H60ZM87,15.59H89L90,17.32H88ZM143,15.59H145L146,17.32H144Z"/><path class="sg" fill="none" stroke="#4a5263" stroke-width=".12" clip-path="url(#sfzlcHub)" d="M1,1.73H171M2,3.46H172M3,5.2H173M4,6.93H174M5,8.66H175M6,10.39H176M7,12.12H177M8,13.86H178M9,15.59H179M10,17.32H180M0,0L11,19.05M2,0L13,19.05M4,0L15,19.05M6,0L17,19.05M8,0L19,19.05M10,0L21,19.05M12,0L23,19.05M14,0L25,19.05M16,0L27,19.05M18,0L29,19.05M20,0L31,19.05M22,0L33,19.05M24,0L35,19.05M26,0L37,19.05M28,0L39,19.05M30,0L41,19.05M32,0L43,19.05M34,0L45,19.05M36,0L47,19.05M38,0L49,19.05M40,0L51,19.05M42,0L53,19.05M44,0L55,19.05M46,0L57,19.05M48,0L59,19.05M50,0L61,19.05M52,0L63,19.05M54,0L65,19.05M56,0L67,19.05M58,0L69,19.05M60,0L71,19.05M62,0L73,19.05M64,0L75,19.05M66,0L77,19.05M68,0L79,19.05M70,0L81,19.05M72,0L83,19.05M74,0L85,19.05M76,0L87,19.05M78,0L89,19.05M80,0L91,19.05M82,0L93,19.05M84,0L95,19.05M86,0L97,19.05M88,0L99,19.05M90,0L101,19.05M92,0L103,19.05M94,0L105,19.05M96,0L107,19.05M98,0L109,19.05M100,0L111,19.05M102,0L113,19.05M104,0L115,19.05M106,0L117,19.05M108,0L119,19.05M110,0L121,19.05M112,0L123,19.05M114,0L125,19.05M116,0L127,19.05M118,0L129,19.05M120,0L131,19.05M122,0L133,19.05M124,0L135,19.05M126,0L137,19.05M128,0L139,19.05M130,0L141,19.05M132,0L143,19.05M134,0L145,19.05M136,0L147,19.05M138,0L149,19.05M140,0L151,19.05M142,0L153,19.05M144,0L155,19.05M146,0L157,19.05M148,0L159,19.05M150,0L161,19.05M152,0L163,19.05M154,0L165,19.05M156,0L167,19.05M158,0L169,19.05M160,0L171,19.05M162,0L173,19.05M164,0L175,19.05M166,0L177,19.05M168,0L179,19.05M170,0L181,19.05M2,0L-9,19.05M4,0L-7,19.05M6,0L-5,19.05M8,0L-3,19.05M10,0L-1,19.05M12,0L1,19.05M14,0L3,19.05M16,0L5,19.05M18,0L7,19.05M20,0L9,19.05M22,0L11,19.05M24,0L13,19.05M26,0L15,19.05M28,0L17,19.05M30,0L19,19.05M32,0L21,19.05M34,0L23,19.05M36,0L25,19.05M38,0L27,19.05M40,0L29,19.05M42,0L31,19.05M44,0L33,19.05M46,0L35,19.05M48,0L37,19.05M50,0L39,19.05M52,0L41,19.05M54,0L43,19.05M56,0L45,19.05M58,0L47,19.05M60,0L49,19.05M62,0L51,19.05M64,0L53,19.05M66,0L55,19.05M68,0L57,19.05M70,0L59,19.05M72,0L61,19.05M74,0L63,19.05M76,0L65,19.05M78,0L67,19.05M80,0L69,19.05M82,0L71,19.05M84,0L73,19.05M86,0L75,19.05M88,0L77,19.05M90,0L79,19.05M92,0L81,19.05M94,0L83,19.05M96,0L85,19.05M98,0L87,19.05M100,0L89,19.05M102,0L91,19.05M104,0L93,19.05M106,0L95,19.05M108,0L97,19.05M110,0L99,19.05M112,0L101,19.05M114,0L103,19.05M116,0L105,19.05M118,0L107,19.05M120,0L109,19.05M122,0L111,19.05M124,0L113,19.05M126,0L115,19.05M128,0L117,19.05M130,0L119,19.05M132,0L121,19.05M134,0L123,19.05M136,0L125,19.05M138,0L127,19.05M140,0L129,19.05M142,0L131,19.05M144,0L133,19.05M146,0L135,19.05M148,0L137,19.05M150,0L139,19.05M152,0L141,19.05M154,0L143,19.05M156,0L145,19.05M158,0L147,19.05M160,0L149,19.05M162,0L151,19.05M164,0L153,19.05M166,0L155,19.05M168,0L157,19.05M170,0L159,19.05M172,0L161,19.05M174,0L163,19.05M176,0L165,19.05M178,0L167,19.05M180,0L169,19.05M182,0L171,19.05"/></svg></a>
                <!-- v0.113: Маятник — XOR-маятник из Excel (ТРЕУГСЖАТИЯ) отдельной страницей, 2026-10-11 -->
                <a href="mayatnik/Zerkalius-mayatnik.html" class="menu-btn draft-btn" data-en="Pendulum" data-ru="Маятник">Маятник</a>
            </div>
        </div>

    </div>
    <script>
        /* v0.079: надписи главных кнопок ромбами — строки «Аа» Zazerkalius (rmbTextRows, без рамки нулей): 9 рядов (7 — буквы, 2 — хвосты «р» и «у»)
           по 64 бита. Ряд ниже — на полклетки левее. Маска — SVG, по ромбу на бит */
        (() => {
            const ROWS = {"tri":["1111100000000000000000000000000000000000000000000000000000000000","0010000000000000000000000000000000000000000000000000000000000000","0010001111000111001000101111100111000011101000001000101000101001","0010001000101000101000101000001000100100101000001000101001101010","0010001000101111101000101000001000100100101111001111101010101100","0010001000101000001000101000001000100100101000101000101100101010","0010001111000111000111101000000111001000101111001000101000101001","0000001000000000000000100000000000000000000000000000000000000000","0000001000000000000111000000000000000000000000000000000000000000"],"zaz":["0111000000000000000000000000000000000000000000000000000000000000","1000100000000000000000000000000000000000000000000000000000000000","0000100111000111000111001111001001001110000111010001010001001110","0011000000101000101000101000101010000001001001010011010001010000","0000100111100011001111101000101100001111001001010101010001010000","1000101000101000101000001000101010010001001001011001010001010001","0111000111100111000111001111001001001111010001010001001111001110","0000000000000000000000001000000000000000000000000000000001000000","0000000000000000000000001000000000000000000000000000001110000000"]};
            const K = Math.sqrt(3) / 2, Z = 0.8, f = (v) => +v.toFixed(3);
            const svg = (R) => {
                const n = R.length, c = R[0].length, W = c + (n - 1) / 2 + 0.5, H = n * K; let d = '';
                R.forEach((r, i) => { const y0 = i * K, sh = (n - 1 - i) / 2;
                    for (let j = 0; j < c; j++) { if (r[j] !== '1') continue;
                        const x0 = sh + j, mx = x0 + 0.75, my = y0 + K / 2, q = (x, y) => f(mx + (x - mx) * Z) + ' ' + f(my + (y - my) * Z);
                        d += 'M' + q(x0, y0 + K) + 'L' + q(x0 + 0.5, y0) + 'L' + q(x0 + 1.5, y0) + 'L' + q(x0 + 1, y0 + K) + 'Z'; } });
                return { W, H, url: 'url("data:image/svg+xml,' + encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${f(W)} ${f(H)}"><path d="${d}"/></svg>`) + '")' };
            };
            /* v0.084: трапеция главной кнопки по сетке равносторонних треугольников со стороной s (ряд rh = s·√3/2, 4 ряда, скос 2s).
               v0.085: от рамки осталась её внутренняя граница — трапеция между рядами 1 и 3: сверху от 2,5s до w − 2,5s, снизу от 1,5s до w − 1,5s */
            const SQ3 = Math.sqrt(3);
            const mainFrame = (a) => {
                const set = () => {
                    const w = a.offsetWidth; if (!w) return;
                    const m = Math.max(6, Math.round(w / (68 / (2 * SQ3)))), s = w / m, rh = s * SQ3 / 2, h = 4 * rh;
                    const P = [[2.5 * s, rh], [w - 2.5 * s, rh], [w - 1.5 * s, 3 * rh], [1.5 * s, 3 * rh]], pts = P.map(([x, y]) => f(x) + ',' + f(y)).join(' ');
                    const svgF = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${f(w)} ${f(h)}" preserveAspectRatio="none"><polygon points="${pts}" fill="none" stroke="#fff" stroke-width="4" stroke-linejoin="miter"/></svg>`;
                    a.style.setProperty('--fm', 'url("data:image/svg+xml,' + encodeURIComponent(svgF) + '")');
                    a.style.setProperty('--bh', f(h) + 'px'); a.style.setProperty('--px', f(3 * s) + 'px');
                    a.style.setProperty('--cp', 'polygon(' + P.map(([x, y]) => f(x) + 'px ' + f(y) + 'px').join(', ') + ')');
                    a.classList.add('fmOn');
                };
                set(); if (window.ResizeObserver) new ResizeObserver(set).observe(a); else addEventListener('resize', set);
            };
            [['Zerkalius-treugolnik.html', 'tri'], ['zazerkalius/Zerkalius-zazerkalius.html', 'zaz']].forEach(([href, k]) => {
                const a = document.querySelector(`.menu-btn.main-engine[href="${href}"]`); if (!a) return;
                const m = svg(ROWS[k]), sp = document.createElement('span');
                sp.className = 'rmbTxt'; sp.style.setProperty('--m', m.url); sp.style.aspectRatio = f(m.W) + ' / ' + f(m.H);
                a.setAttribute('aria-label', a.textContent.trim()); a.textContent = ''; a.appendChild(sp); a.classList.add('rmbOn');
                mainFrame(a);
            });
        })();
        window.hubMenuGrid();
        // 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:not(.rmbOn), .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:not(.rmbOn), .panel-title, .hubSnd'));   // v0.079: кроме кнопок с надписью ромбами   // 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 — ноты горят без
               мигания). Правый щелчок по пустому месту — сброс: все семь нот, звук с начала, конус с начального положения. Самый первый
               щелчок, как прежде, включает До и Ре */
            // v0.089: до первой ноты тяжёлая страница конуса не загружается; команды ждут её готовности.
            let bgReady = false;
            const bgQueue = [];
            window.addEventListener('message', e => {
                if (!bg || e.source !== bg.contentWindow || !e.data || !e.data.zerkReady) return;
                bgReady = true;
                for (const m of bgQueue.splice(0)) bg.contentWindow.postMessage(m, '*');
            });
            // v0.099, «пусть первая 1 будет, а вторая удали»: в треугольнике хаба нет второй «1» (строки 2 начальной последовательности) — 1, 11, 111…
            const HUB_ROWS = ZZ_INITIAL_ROWS.filter((_, i) => i !== 1);
            const SERP_ROWS = ['1'];
            for (let r = 1; r < HUB_ROWS.length; r++) {
                const prev = SERP_ROWS[r - 1]; let next = '';
                for (let j = 0; j <= r; j++) next += Number(prev[j - 1] || '0') ^ Number(prev[j] || '0');
                SERP_ROWS.push(next);
            }
            const ROW_PATTERNS = { base: HUB_ROWS, serp: SERP_ROWS };
            const music = HubRhombMusic(ROW_PATTERNS[window.HubMirror.state.pattern], data => window.dispatchEvent(new CustomEvent('hubmusic', { detail: data })));
            const post = m => music.send(m);
            // Доступный запуск остаётся в полосе даже при сдвиге вершины за край поля.
            let floodPlay, floodSpeed;
            document.addEventListener('DOMContentLoaded',()=>{
                const tools=document.getElementById('hubFieldTools');
                const control=(text,label,action)=>{const b=document.createElement('button');b.type='button';b.className='hubRhomb hubFloodControl';b.textContent=text;b.title=label;b.setAttribute('aria-label',label);b.onclick=action;tools.append(b);return b;};
                floodPlay=control('Биты\n▶','Пуск / пауза битов',()=>post(hubLive?{zerkSndToggle:true}:{zerkFlood:true}));floodPlay.setAttribute('aria-pressed','false');
                floodSpeed=control('1/с','Скорость битов',()=>{const i=FLOOD_SPEEDS.indexOf(NOTES.speed);post({zerkFloodSpeed:FLOOD_SPEEDS[(i+1)%FLOOD_SPEEDS.length]});});
                control('Биты\n■','Остановить биты и вернуть к началу',()=>post({zerkSndReset:true}));
            },{once:true});
            let resumeFlood=false;
            window.addEventListener('hubmotionpause',e=>{if(e.detail.paused){resumeFlood=hubLive&&!document.getElementById('hubSndBox').classList.contains('paused');if(resumeFlood)post({zerkSndToggle:true});}else{if(resumeFlood&&hubLive&&document.getElementById('hubSndBox').classList.contains('paused'))post({zerkSndToggle:true});resumeFlood=false;}});
            window.addEventListener('hubpattern', () => music.setRows(ROW_PATTERNS[window.HubMirror.state.pattern]));
            document.getElementById('hubLogo').onclick = () => document.querySelector('.hub').scrollIntoView({ behavior: 'smooth' });
            document.addEventListener('click', e => {
                const t = e.target, note = t.closest && t.closest('.hubSnd'), link = t.closest && t.closest('a, button');
                if (t.closest && t.closest('.hubMirrorSettings')) return;
                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;
                // Общая пауза поля — двойным щелчком; одиночный не мешает переносить рисунок.
            }, 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;
                // Касание и «меньше движения»: обычный переход без ожидания полёта кнопки.
                if (matchMedia('(pointer: coarse)').matches || matchMedia('(prefers-reduced-motion: reduce)').matches) 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 = () => { const on = !b.classList.contains('on'); b.classList.toggle('on', on); post({ zerkSndHead: b.dataset.h, on }); }; });
                window.addEventListener('hubmusic', e => { if (e.detail.zerkSndOn !== undefined) {
                  const d = e.detail, 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');
            /* v0.074, «не видно бегающего бита по треугольнику»: хаб, открытый файлом, не может читать фон (другой «адрес») — фон присылает
               звучащие биты сообщением { zerkHeads } */
            let hubHeads = null;
            window.addEventListener('hubmusic', e => { hubHeads = e.detail.zerkHeads; PR = e.detail.zerkRows; });
            let PR = ROW_PATTERNS[window.HubMirror.state.pattern].slice();   // v0.104: зеркало и окраска используют один выбранный узор
            const noteCol = Array.from(document.querySelectorAll('.hubSnd')).map(b => b.style.getPropertyValue('--c'));
            /* v0.083: кнопка «все 7 нот» — первая перевёрнутая дырка треугольника (см. стили #hubAll). При N строках дырка — строки R0 = N/8 … R0 + S − 1,
               S = N/8 − 1 (при 64 — 8…14, семь строк); в строке R0 + t бит j = 1 + t + c, c < S − t; нота бита — t (До сверху, Си — вершина). Бит в решётке —
               (r, x), x = j − r/2: на холсте (cx + x·dw, y0 + r·dh/2).
               v0.085: бит выпускается по одному (ALL.queue — по кругу строк, в строке — от середины); путь: по решётке к вершине (за строку — на полклетки вбок),
               потом прямо к своей головке звука (ALL.heads — [строка, бит, нота] из фона, та же решётка), следя за ней, и гаснет в ней. st бита: in — на месте,
               fly — летит, out — ушёл, back — возвращается */
            const sndBox = document.getElementById('hubSndBox'), allBtn = document.getElementById('hubAll'), fly = document.getElementById('hubFly'), fg = fly && fly.getContext('2d');
            const mainRow = document.querySelector('.hub .mainrow');
            const IDS = ['r', 'c', 'mi', 'fa', 'sol', 'la', 'si'];   // головки фона по нотам: До … Си
            const ALL = { cells: [], queue: [], poly: [], live: false, paused: false, heads: null, raf: 0, W: 0, H: 0, dpr: 1, cx: 0, y0: 0, dw: 0, dh: 0, vr: 0, X: null, Y: null };
            const A_STEP = 0.06, A_FLY = 0.75, A_BACK = 0.35, A_GAP = 0.035;
            const allOff = () => { document.body.classList.remove('allMode'); if (mainRow) mainRow.style.gap = ''; };
            const allPt = (r, x) => [ALL.cx + x * ALL.dw, ALL.y0 + r * ALL.dh / 2];
            const allDia = (x, y, k) => { const a = ALL.dw * k / 2, b = ALL.dh * k / 2; fg.beginPath(); fg.moveTo(x, y - b); fg.lineTo(x + a, y); fg.lineTo(x, y + b); fg.lineTo(x - a, y); fg.closePath(); fg.fill(); };
            const allPost = post;
            const allRelease = (c, now) => {
                const path = [[c.r, c.x]]; let r = c.r, x = c.x, alt = Math.random() < 0.5 ? 1 : -1;
                while (r < ALL.vr) { const d = x > 0 ? -0.5 : x < 0 ? 0.5 : (alt = -alt) * 0.5; r++; x += d; path.push([r, x]); }
                Object.assign(c, { st: 'fly', path, t0: now });
            };
            const allRefill = (now) => { let i = 0; ALL.queue.slice().reverse().forEach(c => { if (c.st !== 'in') Object.assign(c, { st: 'back', t0: now + (i++) * A_GAP * 1000 }); }); };
            const allHead = (t) => { const h = (ALL.heads || []).find(q => (q[2] | 0) === t); return h && ALL.X ? [ALL.X(h[0], h[1]), ALL.Y(h[0])] : null; };
            const allDraw = (now) => {
                if (!fg) return false; const { W, H, dpr } = ALL; let busy = ALL.live;
                fg.setTransform(dpr, 0, 0, dpr, 0, 0); fg.clearRect(0, 0, W, H);
                fg.fillStyle = 'rgba(58, 63, 68, .92)';
                for (const c of ALL.cells) if (c.st !== 'in') { const [x, y] = allPt(c.r, c.x); allDia(x, y, 0.94); }   // ушедшие — серые места
                if (ALL.live) {   // что-то звучит — граница дырки мигает (на паузе — ровная)
                    const P = ALL.poly; fg.beginPath(); P.forEach(([x, y], i) => i ? fg.lineTo(x, y) : fg.moveTo(x, y)); fg.closePath();
                    const bl = ALL.paused ? 0.6 : 0.5 + 0.5 * Math.sin(now / 1100 * 2 * Math.PI);
                    fg.lineWidth = Math.max(1.5, ALL.dw * 0.12); fg.strokeStyle = `rgba(230, 236, 240, ${(0.25 + 0.75 * bl).toFixed(3)})`; fg.stroke();
                }
                for (const c of ALL.cells) {
                    const col = noteCol[c.t] || '#9fffc8';
                    if (c.st === 'in') { fg.fillStyle = col; const [x, y] = allPt(c.r, c.x); allDia(x, y, 0.86); continue; }
                    if (c.st === 'back') {
                        const u = (now - c.t0) / 1000 / A_BACK; busy = true; if (u <= 0) continue;
                        if (u >= 1) { c.st = 'in'; } fg.fillStyle = col; const [x, y] = allPt(c.r, c.x); allDia(x, y, 0.86 * Math.min(1, u)); continue;
                    }
                    if (c.st !== 'fly') continue;
                    busy = true;
                    const tau = (now - c.t0) / 1000, tA = (c.path.length - 1) * A_STEP;
                    let px, py, al = 1;
                    if (tau < tA) { const sI = tau / A_STEP, i = Math.floor(sI), f = sI - i, a = c.path[i], b = c.path[Math.min(i + 1, c.path.length - 1)];
                        [px, py] = allPt(a[0] + (b[0] - a[0]) * f, a[1] + (b[1] - a[1]) * f); }
                    else {
                        const u = Math.min(1, (tau - tA) / A_FLY), e = u * u * (3 - 2 * u), v = c.path[c.path.length - 1], [vx, vy] = allPt(v[0], v[1]);
                        const tg = allHead(c.t) || allPt(v[0] + 6, v[1]);
                        px = vx + (tg[0] - vx) * e; py = vy + (tg[1] - vy) * e; al = u < 0.8 ? 1 : (1 - u) / 0.2;
                        if (u >= 1) { c.st = 'out'; continue; }
                    }
                    fg.globalAlpha = al; fg.fillStyle = col; fg.shadowColor = col; fg.shadowBlur = ALL.dw * 0.7; allDia(px, py, 0.9); fg.shadowBlur = 0; fg.globalAlpha = 1;
                }
                return busy;
            };
            const allLoop = (now) => { ALL.raf = allDraw(now) ? requestAnimationFrame(allLoop) : 0; };
            const allKick = () => { if (!ALL.raf) ALL.raf = requestAnimationFrame(allLoop); };
            const allPlace = (X, Y, dw, dh, W, H, dpr, desk) => {
                const N = PR.length, R0 = Math.floor(N / 8), S = 7;
                if (!allBtn || !fg || S < 1 || S * dw < (desk ? 36 : 30)) { allOff(); return false; }   // v0.087: на телефоне — от 30 px (iPhone 390 — 40)
                document.body.classList.add('allMode');
                Object.assign(ALL, { W, H, dpr, cx: X(0, 0), y0: Y(0), dw, dh, vr: R0 + S - 1, X, Y });
                const old = new Map(ALL.cells.map(c => [c.r + ':' + c.x, c]));
                ALL.cells = [];
                for (let t = 0; t < S; t++) for (let c = 0; c < S - t; c++) { const r = R0 + t, x = 1 + t + c - (PR[r].length - 1) / 2;
                    ALL.cells.push(old.get(r + ':' + x) || { r, x, t: Math.min(6, t), st: 'in' }); }
                const rows = []; ALL.cells.forEach(c => (rows[c.t] = rows[c.t] || []).push(c)); rows.forEach(R => R.sort((a, b) => Math.abs(a.x) - Math.abs(b.x)));
                ALL.queue = []; for (let k = 0; ; k++) { let any = false; rows.forEach(R => { if (R && R[k]) { ALL.queue.push(R[k]); any = true; } }); if (!any) break; }
                const xl = X(R0, 1) - dw / 2, xr = X(R0, S) + dw / 2, yt = Y(R0) - dh / 2, yb = Y(R0 + S - 1) + dh / 2;
                ALL.poly = [];   // контур дырки: зубцы верхнего ряда и нижняя вершина
                for (let c = 0; c < S; c++) { ALL.poly.push([X(R0, 1 + c) - dw / 2, Y(R0)], [X(R0, 1 + c), Y(R0) - dh / 2]); }
                ALL.poly.push([xr, Y(R0)], [X(R0 + S - 1, S), yb]);
                const w = xr - xl, h = yb - yt;
                Object.assign(allBtn.style, { left: xl.toFixed(1) + 'px', top: yt.toFixed(1) + 'px', width: w.toFixed(1) + 'px', height: h.toFixed(1) + 'px',
                    clipPath: 'polygon(' + ALL.poly.map(([x, y]) => ((x - xl) / w * 100).toFixed(2) + '% ' + ((y - yt) / h * 100).toFixed(2) + '%').join(', ') + ')' });
                if (mainRow) {   // ряд главных кнопок заходит на дырку — кнопки расступаются, пропуская её посередине
                    const m = mainRow.getBoundingClientRect(); mainRow.style.gap = desk && m.height && yb > m.top - 4 && yt < m.bottom + 4 ? (w + 28).toFixed(0) + 'px' : '';
                }
                if (fly.width !== Math.round(W * dpr) || fly.height !== Math.round(H * dpr)) { fly.width = Math.round(W * dpr); fly.height = Math.round(H * dpr); }
                if (!ALL.raf) allDraw(performance.now()); return true;
            };
            if (allBtn) allBtn.onclick = () => {
                const now = performance.now(), c = ALL.queue.find(q => q.st === 'in');
                /* v0.086: нота начинает путь прямо из-под вершины дырки — фон ставит её головку на бит from (Zazerkalius v0.852): строка под вершиной,
                   на полклетки в сторону, откуда пришёл бит */
                if (c) { const first = !ALL.cells.some(q => q.t === c.t && q.st !== 'in'); allRelease(c, now);
                    if (first) { const r = ALL.vr + 1, x = c.x > 0 ? 0.5 : -0.5; allPost({ zerkSndHead: IDS[c.t], on: true, from: [r, Math.round(x + r / 2)] }); } }
                else { allPost({ zerkSnd: false }); allRefill(now); }   // все вышли — тишина, биты возвращаются
                allKick();
            };
            /* v0.093: ноты — по две ячейки на единицах фонового треугольника (см. стили .hubNoteCell). Ячейка нажата — её нота включается и стартует
               прямо из этого бита (from — как у прежней кнопки «все 7 нот»), ещё раз — выключается. Горит — цветом ноты, мигает, пока звучит */
            const NOTES = { cells: [], on: new Set(), paused: false, raf: 0, W: 0, H: 0, dpr: 1, dw: 0, dh: 0, cv: null, g: null, speed: 1 };
            const TRACE = { paths: [], started: performance.now(), active: false };
            NOTES.cv = document.createElement('canvas'); NOTES.cv.id = 'hubNoteCv'; NOTES.cv.setAttribute('aria-hidden', 'true');
            (fly || sier || document.body).after(NOTES.cv); NOTES.g = NOTES.cv.getContext('2d');
            const noteNames = Array.from(document.querySelectorAll('.hubSnd')).map(b => b.dataset.ru || b.textContent.trim());
            const noteDark = (hex) => { const m = /^#([0-9a-f]{6})$/i.exec(hex || ''); if (!m) return hex; const v = parseInt(m[1], 16), k = 0.42, bg = [11, 13, 16];   // v0.098: цвет ноты ближе к фону
                return 'rgb(' + [(v >> 16) & 255, (v >> 8) & 255, v & 255].map((c, i) => Math.round(c * k + bg[i] * (1 - k))).join(',') + ')'; };
            /* v0.099, «пусть первая 1 будет, а вторая удали; первую оставь на месте; при нажатии на неё она падает вниз на 11 между ними и все смежные
               единицы вниз толкает (вернее окраску — биты на месте) с разными скоростями» → «вершина вместо нот», «переключатель». Семи нот («галстука»)
               больше нет: кнопка — вершина треугольника (её 1 стоит на месте), рядом — скорость 1 / 2 / 4 / 8 строк в секунду. Окраска стекает
               (hub-rhomb-music.js v0.005): горящие ячейки строки — цветом своей ноты, ромб крупнее обычного, с рамкой */
            const FLOOD_SPEEDS = [1, 2, 4, 8];
            const noteDrawCore = (now, output = null) => {
                const g = output ? output.canvas.getContext('2d') : NOTES.g; if (!g) return false;
                const { W, H, dw, dh } = NOTES, dpr = output ? output.scale : NOTES.dpr, left = output ? output.left : 0, live = NOTES.on.size > 0;
                g.setTransform(dpr, 0, 0, dpr, -left * dpr, 0); g.clearRect(0, 0, W, H);
                if (window.HubImage.active) return false;
                for (const c of NOTES.cells) {
                    g.save(); g.translate(c.x, c.y); g.rotate(window.HubMirror.bitAngle(c.bit || '1')); g.translate(-c.x, -c.y);
                    const col = noteCol[c.t] || '#9fffc8', lit = c.front || (c.apex && live), bl = lit && !NOTES.paused ? 0.55 + 0.45 * Math.sin(now / 1100 * 2 * Math.PI) : 1;
                    const a = dw * 1.18 / 2, b = dh * 1.18 / 2, dark = noteDark(col);
                    g.globalAlpha = lit ? 0.75 + 0.25 * bl : 0.95; g.fillStyle = dark; g.shadowColor = col; g.shadowBlur = lit ? dw * 0.6 * dpr : 0;
                    g.beginPath(); g.moveTo(c.x, c.y - b); g.lineTo(c.x + a, c.y); g.lineTo(c.x, c.y + b); g.lineTo(c.x - a, c.y); g.closePath(); g.fill();
                    g.shadowBlur = 0; g.strokeStyle = col; g.lineWidth = Math.max(1, dw * 0.09); g.lineJoin = 'round'; g.stroke(); g.globalAlpha = 1;
                    if (dw * (output ? dpr : 1) >= 7) { g.fillStyle = col; g.font = `bold ${Math.max(output ? 1 : 6, dw * 0.66).toFixed(1)}px system-ui, sans-serif`; g.textAlign = 'center'; g.textBaseline = 'middle'; g.fillText(c.bit || '1', c.x, c.y + dw * 0.04); }
                    g.restore();
                }
                if (window.HubMirror.state.trace) {
                    if (!TRACE.active) { TRACE.started = now; TRACE.active = true; }
                    const tail = 8, elapsed = (now - TRACE.started) / 1000 * 6;
                    TRACE.paths.forEach((path, index) => {
                        const head = Math.floor((elapsed + index * 3) % (path.length + tail)), col = index ? '#ffd166' : '#70e0d7';
                        for (let k = tail - 1; k >= 0; k--) {
                            const point = path[head - k]; if (!point) continue;
                            const [x, y] = point, a = dw * .46, b = dh * .46;
                            g.save(); g.translate(x, y); g.rotate(window.HubMirror.bitAngle('1'));
                            g.globalAlpha = (1 - k / tail) * .85; g.fillStyle = col; g.shadowColor = col; g.shadowBlur = (k ? 2 : 8) * dpr;
                            g.beginPath(); g.moveTo(0, -b); g.lineTo(a, 0); g.lineTo(0, b); g.lineTo(-a, 0); g.closePath(); g.fill();
                            if (dw * (output ? dpr : 1) >= 7) { g.shadowBlur = 0; g.fillStyle = '#06150d'; g.font = `bold ${Math.max(output ? 1 : 6, dw * .66).toFixed(1)}px system-ui,sans-serif`; g.textAlign = 'center'; g.textBaseline = 'middle'; g.fillText('1', 0, dw * .04); }
                            g.restore();
                        }
                    });
                } else TRACE.active = false;
                window.HubView.source(output ? output.canvas : NOTES.cv,output ? {left,scale:dpr}:null); window.HubMirror.reflect(output ? output.canvas : NOTES.cv, output ? { left, scale: dpr } : null); window.HubView.paint(output ? output.canvas : NOTES.cv,output ? {left,scale:dpr}:null);
                return (live && !NOTES.paused) || window.HubMirror.state.trace;
            };
            const noteDraw = (...args) => window.hubPerfMeasure ? window.hubPerfMeasure('noteDraw', () => noteDrawCore(...args)) : noteDrawCore(...args);
            const noteLoop = (now) => { NOTES.raf = window.scrollY < NOTES.H && noteDraw(now) ? requestAnimationFrame(noteLoop) : 0; };
            const noteKick = () => { if (!NOTES.raf) NOTES.raf = requestAnimationFrame(noteLoop); };
            window.addEventListener('scroll', () => { if (window.scrollY < NOTES.H && (NOTES.on.size || window.HubMirror.state.trace)) noteKick(); }, { passive: true });
            const reflectNotes = () => {
                for (const original of document.querySelectorAll('.hubNoteCell[data-note=apex],.hubNoteCell[data-note=speed]')) {
                    const x = parseFloat(original.style.left), y = parseFloat(original.style.top), w = parseFloat(original.style.width), h = parseFloat(original.style.height);
                    const reflected = window.HubMirror.point(x + w / 2, y + h / 2);
                    let copy = document.querySelector('.hubNoteCell[data-note="' + original.dataset.note + '-mirror"]');
                    if (!reflected || !window.HubMirror.contains(reflected[0], reflected[1], w, h) || Math.abs(reflected[0] - x - w / 2) + Math.abs(reflected[1] - y - h / 2) < 1) { copy?.remove(); continue; }
                    if (!copy) { copy = original.cloneNode(true); copy.dataset.note += '-mirror'; copy.onclick = original.onclick; original.after(copy); }
                    if(original.dataset.note==='apex')copy.setAttribute('aria-pressed',String(NOTES.on.size>0));
                    copy.style.left = (reflected[0] - w / 2).toFixed(1) + 'px'; copy.style.top = (reflected[1] - h / 2).toFixed(1) + 'px'; window.HubView.apply(copy);
                }
            };
            const notePlace = (X, Y, dw, dh, W, H, dpr) => {
                document.body.classList.add('allMode');
                TRACE.paths = [Math.floor(PR.length / 6), Math.floor(PR.length / 3)].map(start => {
                    const path = [];
                    for (let r = start; r < PR.length; r++) { const j = r - start; if (j < PR[r].length) path.push([X(r, j), Y(r)]); }
                    return path;
                });
                const cells = [{ t: 0, r: 0, j: 0, bit: '1', x: X(0, 0), y: Y(0), apex: true }];
                (hubHeads || []).forEach(h => { if (h[0] > 0) cells.push({ t: h[2] | 0, r: h[0], j: h[1], bit: h[3] || '1', x: X(h[0], h[1]), y: Y(h[0]), front: true }); });
                Object.assign(NOTES, { cells, W, H, dpr, dw, dh, X, Y });
                const ax = cells[0].x, ay = cells[0].y, key = ax.toFixed(1) + ',' + ay.toFixed(1) + '|' + dw.toFixed(2) + '|' + NOTES.speed;
                if (NOTES.key !== key) { NOTES.key = key;
                    document.querySelectorAll('.hubNoteCell').forEach(b => b.remove());
                    const hit = Math.max(dw * 1.3, 22), hitH = Math.max(dh * 1.3, 22);
                    const apex = document.createElement('button'); apex.type = 'button'; apex.className = 'hubNoteCell'; apex.dataset.note = 'apex';
                    apex.title = 'Вершина: щелчок — окраска стекает вниз по соседним единицам, строка за строкой, каждая строка звучит нотой (До…Си по кругу); ещё щелчок — стоп. Биты не меняются';
                    apex.setAttribute('aria-label', 'Вершина — пустить окраску вниз');
                    apex.setAttribute('aria-pressed',String(NOTES.on.size>0));
                    Object.assign(apex.style, { left: (ax - hit / 2).toFixed(1) + 'px', top: (ay - hitH / 2).toFixed(1) + 'px', width: hit.toFixed(1) + 'px', height: hitH.toFixed(1) + 'px' });
                    apex.onclick = () => { post({ zerkFlood: true }); noteKick(); };
                    NOTES.cv.after(apex);
                    const sp = document.createElement('button'); sp.type = 'button'; sp.className = 'hubNoteCell hubFloodSpeed'; sp.dataset.note = 'speed';
                    sp.textContent = NOTES.speed + '/с'; sp.title = 'Скорость окраски: строк в секунду (1 → 2 → 4 → 8 → 1)'; sp.setAttribute('aria-label', 'Скорость: ' + NOTES.speed + ' строк в секунду');
                    Object.assign(sp.style, { left: (ax + dw * 1.6).toFixed(1) + 'px', top: (ay - 11).toFixed(1) + 'px', width: '34px', height: '22px' });
                    sp.onclick = () => { const i = FLOOD_SPEEDS.indexOf(NOTES.speed); NOTES.speed = FLOOD_SPEEDS[(i + 1) % FLOOD_SPEEDS.length]; post({ zerkFloodSpeed: NOTES.speed }); sierDraw.k = ''; NOTES.key = ''; };
                    apex.after(sp);
                }
                reflectNotes();
                if (NOTES.cv.width !== Math.round(W * dpr) || NOTES.cv.height !== Math.round(H * dpr)) { NOTES.cv.width = Math.round(W * dpr); NOTES.cv.height = Math.round(H * dpr); }
                document.querySelectorAll('.hubNoteCell,#hubAll,#hubFly').forEach(window.HubView.apply);if (!NOTES.raf && noteDraw(performance.now())) noteKick(); return true;
            };
            window.addEventListener('hubmusic', e => {
                const d = e.detail;
                NOTES.on = new Set(d.zerkSndOn ? ['flood'] : []); NOTES.paused = !!d.zerkSndPaused;
                if(d.zerkFloodSpeed&&NOTES.speed!==d.zerkFloodSpeed){NOTES.speed=d.zerkFloodSpeed;NOTES.key='';sierDraw.k='';}
                if(floodPlay){floodPlay.textContent='Биты\n'+(d.zerkSndOn&&!d.zerkSndPaused?'Ⅱ':'▶');floodPlay.setAttribute('aria-pressed',String(d.zerkSndOn&&!d.zerkSndPaused));floodPlay.title=d.zerkSndOn&&!d.zerkSndPaused?'Биты звучат — поставить на паузу':d.zerkSndPaused?'Продолжить биты с этой строки':'Запустить биты с вершины';floodSpeed.textContent=NOTES.speed+'/с';}
                // v0.107: музыка меняет только слой звучащих битов; фон треугольника уже готов.
                if(NOTES.X&&NOTES.Y){NOTES.cells=[{t:0,r:0,j:0,bit:'1',x:NOTES.X(0,0),y:NOTES.Y(0),apex:true},...(d.zerkHeads||[]).filter(h=>h[0]>0).map(h=>({t:h[2]|0,r:h[0],j:h[1],bit:h[3]||'1',x:NOTES.X(h[0],h[1]),y:NOTES.Y(h[0]),front:true}))];}
                document.querySelectorAll('.hubNoteCell[data-note=apex],.hubNoteCell[data-note=apex-mirror]').forEach(b=>b.setAttribute('aria-pressed',String(!!d.zerkSndOn)));noteDraw(performance.now());noteKick();
            });
            const sierBase = document.createElement('canvas'), sierSource = document.createElement('canvas');
            const finishSier = (canvas, output) => {
                if (!output) {
                    if (sierBase.width !== canvas.width || sierBase.height !== canvas.height) { sierBase.width = canvas.width; sierBase.height = canvas.height; }
                    const g = sierBase.getContext('2d'); g.clearRect(0, 0, sierBase.width, sierBase.height); g.drawImage(canvas, 0, 0);
                    sierDraw.view = window.HubView.revision;
                    sierDraw.mirror = window.HubMirror.revision;
                }
                window.HubView.paint(canvas, output ? { left: output.left, scale: output.scale } : null, output ? null : sierBase); return true;
            };
            const finishSource = (canvas, output) => {
                window.HubView.source(canvas, output ? { left: output.left, scale: output.scale } : null);
                if (!output) {
                    if (sierSource.width !== canvas.width || sierSource.height !== canvas.height) { sierSource.width = canvas.width; sierSource.height = canvas.height; }
                    const g = sierSource.getContext('2d'); g.clearRect(0, 0, sierSource.width, sierSource.height); g.drawImage(canvas, 0, 0);
                }
                window.HubMirror.reflect(canvas, output ? { left: output.left, scale: output.scale } : null); return finishSier(canvas, output);
            };
            const sierDrawCore = (output = null) => {
                if (!sier || getComputedStyle(sier).display === "none") return false;
                const dpr = output ? output.scale : window.devicePixelRatio || 1, W = sier.clientWidth, H = sier.clientHeight; if (!W || !H) return false;
                const canvas = output ? output.canvas : sier, sg = canvas.getContext('2d'), left = output ? output.left : 0;
                let hd = null; try { hd = bg && bg.contentWindow && bg.contentWindow.zzSndHeads; } catch (e) {}
                if (!hd) hd = hubHeads;   /* v0.074: открыт файлом — фон прочитать нельзя, звучащие биты он шлёт сам (zerkHeads) */
                ALL.heads = hd;   // v0.085: куда лететь выпущенному биту
                /* v0.075, «индекс тоже — тормозит он на мобиле»: треугольник перерисовывался 30 раз в секунду, даже когда ничего не менялось (с тенью-свечением
                   у звучащих бит) — v0.107: фон обновляется только при изменении геометрии, узора или зеркала */
                const lgEl = document.getElementById('hubLogoCv'), lgB = lgEl ? Math.round(lgEl.getBoundingClientRect().bottom + window.scrollY) : 0, mrT = mainRow ? Math.round(mainRow.getBoundingClientRect().top) : 0;   // v0.083
                const fieldTools=document.getElementById('hubFieldTools'), fieldTop=Math.min(H*.55,Math.max(8,Math.ceil((fieldTools?.getBoundingClientRect().bottom||0)+(matchMedia('(max-width:1100px)').matches?scrollY:0))+12));
                const key = W + 'x' + H + '@' + dpr + '|' + PR.length + '|' + lgB + '|' + mrT + '|' + fieldTop + '|' + [window.HubMirror.state.pattern,window.HubMirror.state.zero,window.HubMirror.state.one].join(',') + '|' + window.HubImage.revision + '|' + window.HubView.sourceShift().join(',');
                if (!output) { if (key === sierDraw.k) {
                    if (sierDraw.mirror !== window.HubMirror.revision) { sg.save(); sg.setTransform(1,0,0,1,0,0); sg.clearRect(0,0,canvas.width,canvas.height); sg.drawImage(sierSource,0,0); sg.restore(); window.HubMirror.reflect(canvas); reflectNotes(); noteDraw(performance.now()); return finishSier(canvas, null); }
                    if (sierDraw.view !== window.HubView.revision) { window.HubView.paint(canvas, null, sierBase); sierDraw.view = window.HubView.revision; } return true;
                } sierDraw.k = key; }
                if (!output && (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, -left * dpr, 0); sg.clearRect(0, 0, W, H);
                const heads = new Map((output ? hd || [] : []).map(([r, j, kd]) => [r + ':' + j, noteCol[kd | 0] || '#22d3ee']));
                const desk = !matchMedia('(max-width: 1100px)').matches;   // v0.072: компьютер — один по центру, во всю высоту
                if (!output) window.HubMirror.place(desk ? 300 : 0, desk ? W - 300 : W, H);
                if (window.HubImage.active) {
                    if (!output) { NOTES.g.clearRect(0, 0, NOTES.cv.width, NOTES.cv.height); document.querySelectorAll('.hubNoteCell').forEach(b => b.remove()); NOTES.key = ''; }
                    window.HubImage.draw(sg, desk ? 300 : 0, desk ? W - 300 : W, H);
                    return finishSource(canvas, output);
                }
                const N = PR.length, land = false; if (land) allOff();   // v0.081: лёжа — ноты, как прежде, между двумя треугольниками
                const bw = sndBox.getBoundingClientRect().width;
                /* v0.065, «треугольник должен быть выполнен из бит-ромбов, а не квадратов»: бит — ромб шириной dw и высотой dh с центром в spots(r, j).
                   Стоя — ромбы 60°/120° (dh = √3·dw) ребро к ребру: ряд заходит в ряд наполовину (шаг рядов dh/2), как ноты, — треугольник
                   равносторонний. Лёжа строки не сдвигаются (прямоугольные треугольники) — ромб в своей клетке, соседи касаются вершинами */
                let dw, dh, spots, side = false;
                /* v0.083, «треугольник ниже»: верх — под надписью «Зеркалиус», низ — на прежнем месте (компьютер — 97 % высоты, телефон — 49 %) */
                /* v0.087, «проверь на телефон версию»: телефон стоя держал треугольник в 49 % высоты (под ним — ноты), и дырка выходила меньше порога —
                   на iPhone кнопки не было вовсе (ноты по-старому), на Pixel — 39 px. В режиме одной кнопки нот нет — треугольник до 90 % высоты */
                if (!land) { const top = fieldTop, fieldW = desk ? W - 300 : W, fit = b => Math.min(fieldW * 0.94 / N, (b - top) / ((N + 1) * 0.866));
                    dw = fit(H * 0.97); dh = dw * 1.732;
                    const cx = (desk ? 300 : 0) + fieldW / 2, y0 = top + dh / 2;
                    spots = [(r, j) => [cx - (PR[r].length - 1) * dw / 2 + j * dw, y0 + r * dh / 2]];
                    if (!output) notePlace((r, j) => cx - (PR[r].length - 1) * dw / 2 + j * dw, (r) => y0 + r * dh / 2, dw, dh, W, H, dpr); }   // v0.093: ноты — ячейки на единицах (вместо дырки «все 7 нот»)
                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 = xl + Math.floor((W - m - dh / 2 - xl) / dh) * dh;   // оба треугольника на одной решётке
                    spots = [(r, j) => [xl + r * dh / 2, cy - (PR[r].length - 1) * dw / 2 + j * dw], (r, j) => [xr - r * dh / 2, cy - (PR[r].length - 1) * dw / 2 + j * dw]]; }
                if(!output)window.HubMirror.setBitCenters(PR.flatMap((row,r)=>[...row].flatMap((_,j)=>spots.map(f=>{const [x,y]=f(r,j);return [left+x,y];}))));
                const rhomb = (x, y, k, bit) => {
                    const a = (side ? dh : dw) * k / 2, b = (side ? dw : dh) * k / 2, angle = window.HubMirror.bitAngle(bit);
                    const co = Math.cos(angle), si = Math.sin(angle), point = (dx, dy) => [x + dx * co - dy * si, y + dx * si + dy * co];
                    sg.beginPath(); sg.moveTo(...point(0, -b)); sg.lineTo(...point(a, 0)); sg.lineTo(...point(0, b)); sg.lineTo(...point(-a, 0)); sg.closePath(); sg.fill();
                };
                const bitDigit = (bit, x, y) => {
                    const angle = window.HubMirror.bitAngle(bit);
                    if (!angle) { sg.fillText(bit, x, y + fs * .06); return; }
                    sg.save(); sg.translate(x, y); sg.rotate(angle); sg.fillText(bit, 0, fs * .06); sg.restore();
                };
                /* v0.093, «а в ромбы поставь цифры»: в ромбе единицы — «1» тёмным, на месте нуля — бледный «0» (видна вся строка последовательности);
                   цифры — только когда ромб не мельче 7 px, иначе их не прочесть */
                const digits = (side ? dh : dw) * (output ? dpr : 1) >= 7, fs = Math.max(output ? 1 : 6, Math.min(dw, dh) * 0.62);
                if (digits) { sg.font = `bold ${fs.toFixed(1)}px system-ui, sans-serif`; sg.textAlign = 'center'; sg.textBaseline = 'middle'; }
                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';
                        if (!hc && !on) { sg.globalAlpha = desk ? 0.11 : 0.18; sg.fillStyle = '#9fffc8'; for (const f of spots) { const [x, y] = f(r, j); rhomb(x, y, 0.9, '0'); } if (digits) { sg.globalAlpha = desk ? 0.35 : 0.5; for (const f of spots) { const [x, y] = f(r, j); bitDigit('0', x, y); } } continue; }
                        sg.fillStyle = hc || '#9fffc8'; sg.globalAlpha = hc ? 1 : 0.78 * (desk ? 0.5 : 1);
                        if (hc) { sg.shadowColor = hc; sg.shadowBlur = 8 * dpr; }
                        for (const f of spots) { const [x, y] = f(r, j); rhomb(x, y, 0.9, row[j]); }
                        if (hc) sg.shadowBlur = 0;
                        if (digits) { sg.globalAlpha = hc ? 1 : (desk ? 0.75 : 0.95); sg.fillStyle = '#06150d'; for (const f of spots) { const [x, y] = f(r, j); bitDigit(row[j], x, y); } } } }
                sg.globalAlpha = 1; return finishSource(canvas, output);
            };
            const sierDraw = (...args) => window.hubPerfMeasure ? window.hubPerfMeasure('sierDraw', () => sierDrawCore(...args)) : sierDrawCore(...args);
            window.addEventListener('hubview',()=>{sierDraw();noteDraw(performance.now());});
            window.addEventListener('hubimage', () => {
                music.setRows(ROW_PATTERNS[window.HubMirror.state.pattern]); sierDraw.k = ''; sierDraw();
            });
            window.hubRenderPNG = (longSide) => {
                sierDraw.k = ''; if (!sierDraw()) throw new Error('No drawing area');
                const left = matchMedia('(max-width: 1100px)').matches ? 0 : 300;
                const width = sier.clientWidth - left, height = sier.clientHeight;
                // Bound temporary canvases on phones; report the actual PNG dimensions in the controls.
                const scale = Math.min(longSide / Math.max(width, height), Math.sqrt(32000000 / (width * height)));
                const canvas = document.createElement('canvas'); canvas.width = Math.round(width * scale); canvas.height = Math.round(height * scale);
                const layer = document.createElement('canvas'); layer.width = canvas.width; layer.height = canvas.height;
                const g = canvas.getContext('2d'), options = { canvas: layer, scale, left };
                try {
                    g.fillStyle = '#000'; g.fillRect(0, 0, canvas.width, canvas.height);
                    if (!sierDraw(options)) throw new Error('No drawing'); g.drawImage(layer, 0, 0);
                    if (!window.HubImage.active) { noteDraw(performance.now(), options); g.drawImage(layer, 0, 0); }
                    return canvas;
                } finally { layer.width = 0; layer.height = 0; }
            };
            { 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 = Array.from(box.querySelectorAll('.hubSnd')).map(b => b.getBoundingClientRect()).reduce((u, r) => !u ? { left: r.left, top: r.top, right: r.right, bottom: r.bottom }
                  : { left: Math.min(u.left, r.left), top: Math.min(u.top, r.top), right: Math.max(u.right, r.right), bottom: Math.max(u.bottom, r.bottom) }, null);   // v0.080: ноты в треугольнике — коробка нулевая, берём сами ноты
                const sierOn = sier && getComputedStyle(sier).display !== 'none' && sier.width;
                if ((!n || n.right <= n.left) && !sierOn) return;   // v0.081: ноты спрятаны (одна кнопка) — кадр по треугольнику
                let k = 1, ox = 0, oy = 0;
                if (n && n.right > n.left) { n.width = n.right - n.left; n.height = n.bottom - n.top; 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 (sierOn) {   // 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);
                  const fl = document.getElementById('hubFly');   // v0.083: кнопка «все 7 нот» и сток бит — всё на холсте #hubFly
                  if (fl && fl.width && getComputedStyle(fl).display !== 'none') g.drawImage(fl, ox, oy - sy * k, sw * k, sh * k);
                  if (NOTES.cv.width) g.drawImage(NOTES.cv, 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'); if (!r.width) return;
                  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 = music.stream(), 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>
<script>
/* v0.077: надпись «Зеркалиус» ромбами — строки поля из «Аа» Zazerkalius (rmbTextRows("Зеркалиус"), 11 строк по 54 бита: 7 рядов букв, 2 — хвосты «р» и «у»,
   по строке нулей сверху и снизу). Бит — ромб из ▲ и ▼, следующий ряд — на полклетки левее (ряды «← вбок»), отсюда наклон букв. Волна — полоса света:
   идёт 3,6 с слева направо, потом пауза 2,4 с; при «меньше движения» в системе — без волны */
(() => {
  const ROWS = ["000000000000000000000000000000000000000000000000000000","001110000000000000000000000000000000000000000000000000","010001000000000000000000000000000000000000000000000000","000001001110011110010010011100001110100010100010011100","000110010001010001010100000010010010100110100010100000","000001011111010001011000011110010010101010100010100000","010001010000010001010100100010010010110010100010100010","001110001110011110010010011110100010100010011110011100","000000000000010000000000000000000000000000000010000000","000000000000010000000000000000000000000000011100000000","000000000000000000000000000000000000000000000000000000"];
  const cv = document.getElementById("hubLogoCv"); if (!cv) return;
  const box = cv.parentElement, R = ROWS.length, C = ROWS[0].length, K = Math.sqrt(3) / 2;
  const W0 = C + (R - 1) / 2 + 0.5, H0 = R * K;   // ширина и высота в сторонах треугольника
  const HUES = [[255, 95, 109], [255, 195, 113], [110, 231, 160], [34, 211, 238], [185, 140, 240], [255, 95, 109]];
  const hue = (f) => { f = (f % 1 + 1) % 1 * (HUES.length - 1); const i = Math.floor(f), t = f - i, a = HUES[i], b = HUES[i + 1]; return a.map((v, j) => v + (b[j] - v) * t); };
  const mix = (a, b, t) => a.map((v, j) => v + (b[j] - v) * t), css = (c) => "rgb(" + c.map(Math.round).join(",") + ")";
  let s = 10, ox = 0, oy = 0, dpr = 1;
  function fit(){
    const r = box.getBoundingClientRect(); dpr = Math.min(2, window.devicePixelRatio || 1);
    s = Math.min(r.width / W0, r.height / H0); const w = W0 * s, hh = H0 * s;
    cv.style.width = w + "px"; cv.style.height = hh + "px"; cv.width = Math.round(w * dpr); cv.height = Math.round(hh * dpr); ox = 0; oy = 0;
  }
  /* v0.078, по снимку прежней надписи — «убери фон у надписи, и цветной сделай, как было тут», «и волну я не вижу»: без подложки нулей и без граней —
     только треугольники единиц, каждый чуть сжат к своему центру (швы, как у надписи v0.076), цветом переливающейся радуги (полный круг за 14 с, как
     прежде). Волна — полоса, в которой треугольники светлеют почти до белого и дорастают до целых; идёт всегда (прежде её глушила настройка системы
     «меньше движения» — у пользователя её не было видно) */
  const SH = 0.84;   // доля размера треугольника вне волны
  function tri(g, ax, ay, bx, by, cx, cy, k){ const mx = (ax + bx + cx) / 3, my = (ay + by + cy) / 3, q = (u, m) => m + (u - m) * k;
    g.beginPath(); g.moveTo(q(ax, mx), q(ay, my)); g.lineTo(q(bx, mx), q(by, my)); g.lineTo(q(cx, mx), q(cy, my)); g.closePath(); g.fill(); }
  function draw(p, ph){   // p — где полоса волны (0…1 по ширине, вне — волны нет), ph — сдвиг радуги (0…1)
    const g = cv.getContext("2d"); g.setTransform(dpr, 0, 0, dpr, 0, 0); g.clearRect(0, 0, cv.width, cv.height);
    const h = s * K, band = 0.13, WH = [255, 255, 255];
    for (let i = 0; i < R; i++) {
      const y0 = oy + i * h, sh = (R - 1 - i) * s / 2;   // нижний ряд левее верхнего на полклетки за ряд
      for (let j = 0; j < C; j++) {
        if (ROWS[i][j] !== "1") continue;
        const x0 = ox + sh + j * s, f = (x0 + s * 0.75) / (W0 * s);
        const k = Math.max(0, 1 - Math.abs(f - p) / band), kk = k * k * (3 - 2 * k);
        g.fillStyle = css(mix(hue(f - ph), WH, kk * 0.65));
        const z = SH + (1 - SH) * kk;
        tri(g, x0, y0 + h, x0 + s / 2, y0, x0 + s, y0 + h, z);   // ▲
        tri(g, x0 + s / 2, y0, x0 + 1.5 * s, y0, x0 + s, y0 + h, z);   // ▼
      }
    }
  }
  fit(); draw(-1, 0);
  let ph0 = 0;
  if (window.ResizeObserver) new ResizeObserver(() => { fit(); draw(-1, ph0); }).observe(box); else addEventListener("resize", () => { fit(); draw(-1, ph0); });
  const GO = 2600, REST = 1400; let last = 0, t0 = performance.now();
  function tick(now){
    requestAnimationFrame(tick);
    if (document.hidden || now - last < 33) return; last = now;   // ~30 кадров в секунду; вкладка спрятана — не рисуем
    const t = (now - t0) % (GO + REST); ph0 = ((now - t0) / 14000) % 1;
    draw(t < GO ? -0.15 + 1.3 * t / GO : -1, ph0);
  }
  requestAnimationFrame(tick);
})();
</script>
</body>
</html>
 <!-- === МАРКЕР: CSS СТИЛИ КОНЕЦ === -->