<!-- === МАРКЕР: CSS СТИЛИ НАЧАЛО === -->
<!-- Zerkalius Хаб с конусом — ЗАМОРОЖЕННАЯ копия хаба v0.058 (index.html из git, 6168563), заведена 2026-09-28 по слову пользователя
     «сюда [в Черновики] прошлую версию Хаба, где крутящийся есть, с нотами»: конус-фон виден, семь нот в ряд. Не правится и не версионируется —
     это снимок; живой хаб — index.html. Ниже — история хаба до v0.058 как была.
     Zerkalius Hub (index) — v0.058. Точка входа: ссылки на все страницы проекта.
     Маркер версии стоит ЗДЕСЬ, а не первой строкой: первую занимает маркер патчера.
     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;
             долгое нажатие не зовёт меню и выделение; на узком экране ноты мельче — в одну строку. -->
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Zerkalius Хаб с конусом — v0.058</title>
    <!-- v0.041, «oktaedr — лого на сайт»: знак Zerkalius — значком вкладки; на остальных страницах его ставит _js/hub-link.js -->
    <link rel="icon" type="image/svg+xml" href="oktaedr/zerkalius-mark.svg">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');

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

        /* Живой фон: обои Zerkalius. Кликам не мешает — события проходят насквозь */
        #bg {
            position: fixed; inset: 0; width: 100%; height: 100%;
            border: 0; z-index: 0; pointer-events: none;
        }

        /* Всё содержимое — поверх фона. Надпись 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; } }
        @media (prefers-reduced-motion: reduce) { #hubTitle { animation: none; } }
        .ver {
            font-size: 11px; letter-spacing: 3px; color: #9fffc8;
            text-shadow: 0 0 6px #000;
            /* v0.008: плашка — на бегущих цифрах обоев голый номер терялся */
            background: rgba(0,0,0,.78); border: 1px solid rgba(0,255,102,.35); border-radius: 3px; padding: 2px 8px 2px 11px;
            /* v0.045, «это вниз»: номер — внизу по центру экрана (наверху теперь ♫ Звук) */
            position: fixed; left: 50%; top: 8px; transform: translateX(-50%); z-index: 5;   /* v0.053, «наверх» */
        }

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

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

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

        /* v0.043: ♫ Звук живого фона; v0.044 — вверху по центру, пока звучит — рамка мигает */
        /* v0.050: два значка рядом — ♫ строки и ♪ столбцы, каждый своей головкой */
        /* v0.051, «значки нот пониже и побольше»: под надписью Zerkalius (она сверху, 5vh, высотой в clamp ниже), 40 px */
        /* v0.054: семь нот словами (До…Си) — 30 px, в строку, на узком экране переносятся; выключенная — серая, включённая — своим цветом --c */
        #hubSndBox { position: fixed; left: 50%; top: calc(5vh + clamp(44px, 10vw, 150px) + 12px); transform: translateX(-50%); z-index: 5;
                     display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; width: max-content; max-width: calc(100vw - 32px); }
        .hubSnd { padding: 2px 6px; font: bold 30px/1 system-ui, sans-serif; cursor: pointer;
                  color: #7d8388; background: none; border: none; text-shadow: 0 0 6px #000, 0 0 3px #000; }   /* v0.046: без рамки; v0.054 — серая, пока выключена */
        @media (hover: hover) { .hubSnd:hover { color: #c9ced2; text-shadow: 0 0 10px var(--c), 0 0 3px #000; } }   /* 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: палец — место не меньше 44 px, ноты по ширине экрана */
            .hubSnd { min-width: 44px; min-height: 44px; padding: 6px 4px; font-size: clamp(20px, 6.2vw, 30px); }
            #hubSndBox { gap: 2px 2px; max-width: calc(100vw - 16px); }
        }
        .hubSnd.on { color: var(--c); animation: hub-snd-blink 1.1s ease-in-out infinite; }
        #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; }
        /* Лаборатория — сетка карточек */
        .grid {
            display: grid;
            grid-template-columns: repeat(5, 170px);
            gap: 10px;
        }
        /* Знак и записи — одна строка */
        .row {
            display: flex; gap: 10px; justify-content: center;
        }

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

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

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

        /* Узкий экран: лаборатория в 2 столбца */
        @media (max-width: 960px) {
            .grid { grid-template-columns: repeat(2, 160px); }
            .hub { justify-content: center; overflow-y: auto; padding-top: 28vh; }
            body { overflow: auto; }
        }
    </style>
</head>
<body>
    <!-- Живой фон: обои Zerkalius (папка oboi\, заведено 2026-09-21) -->
    <!-- v0.038: живой фон — конус Zazerkalius (3D, зеркало вниз, свет, крутится); прежние обои — кнопка «Обои» -->
    <iframe id="bg" src="zazerkalius/Zerkalius-zazerkalius.html?solo=cone&amp;bg=1" title="Конус Zerkalius" tabindex="-1" aria-hidden="true" allow="autoplay"></iframe>
    <!-- v0.043: ♫ Звук живого фона -->
    <!-- v0.050, «2 и более значков, каждый отдельно вкл/выкл»: ♫ — строчная головка (бирюза), ♪ — столбцовая (бас, золото) -->
    <!-- v0.054: семь нот — До…Си; у каждой своя головка звука фона и свой цвет (--c) -->
    <div id="hubSndBox">
        <button class="hubSnd" data-h="r" type="button" data-ru="До" data-en="C" style="--c:#ff5f6d" title="До: головка звука фона — строки подряд, слева направо; звучит от ноты до. Щелчок — вкл / выкл, отдельно от остальных">До</button>
        <button class="hubSnd" data-h="c" type="button" data-ru="Ре" data-en="D" style="--c:#ff9f43" title="Ре: головка звука фона — столбцы сверху вниз, октавой ниже — бас; звучит от ноты ре. Щелчок — вкл / выкл, отдельно от остальных">Ре</button>
        <button class="hubSnd" data-h="mi" type="button" data-ru="Ми" data-en="E" style="--c:#ffe066" title="Ми: головка звука фона — строки задом наперёд — с конца поля, справа налево; звучит от ноты ми. Щелчок — вкл / выкл, отдельно от остальных">Ми</button>
        <button class="hubSnd" data-h="fa" type="button" data-ru="Фа" data-en="F" style="--c:#7ee787" title="Фа: головка звука фона — столбцы снизу вверх; звучит от ноты фа. Щелчок — вкл / выкл, отдельно от остальных">Фа</button>
        <button class="hubSnd" data-h="sol" type="button" data-ru="Соль" data-en="G" style="--c:#4dd4ff" title="Соль: головка звука фона — диагональ ↘ — каждый шаг следующая строка и следующий бит; звучит от ноты соль. Щелчок — вкл / выкл, отдельно от остальных">Соль</button>
        <button class="hubSnd" data-h="la" type="button" data-ru="Ля" data-en="A" style="--c:#6b8cff" title="Ля: головка звука фона — диагональ ↙ — строки снизу вверх; звучит от ноты ля. Щелчок — вкл / выкл, отдельно от остальных">Ля</button>
        <button class="hubSnd" data-h="si" type="button" data-ru="Си" data-en="B" style="--c:#c38cf5" title="Си: головка звука фона — случайный бит поля; звучит от ноты си. Щелчок — вкл / выкл, отдельно от остальных">Си</button>
    </div>

    <div class="hub">
        <h1>Zerkalius Hub</h1>
        <div class="ver">v0.058 · с конусом</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="Треугольник">Triangle</a>
        <!-- v0.042: Зазеркалиус — вторая главная кнопка, под Треугольником (слово пользователя «под треугольник»); прежде — в Черновиках -->
        <a href="zazerkalius/Zerkalius-zazerkalius.html" class="menu-btn main-engine" data-en="Zazerkalius" data-ru="Зазеркалиус">Zazerkalius</a>
        </div>

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

        <!-- v0.049, «перемести Черновики вниз, но не ниже номера версии»: Черновики — последними -->
        <!-- Черновики (до v0.018 — «Лаборатория (Черновики)») — с v0.012 в порядке создания (по первому появлению в git) -->
        <div class="panel">
            <div class="panel-title" data-en="🔬 Drafts" data-ru="🔬 Черновики">🔬 Drafts</div>
            <div class="grid">
                <!-- v0.033: Code — первым в Черновиках (до этого флагман хаба, v0.008–0.032); остальные — по порядку создания -->
                <a href="Zerkalius-code.html" class="menu-btn draft-btn" data-en="Zerkalius" data-ru="Зеркалиус">Zerkalius</a>
                <a href="Zerkalius-genezis.html" class="menu-btn draft-btn" data-en="Genezis" data-ru="Генезис">Genezis</a>
                <a href="Zerkalius-gpu.html" class="menu-btn draft-btn" data-en="GPU Core + Synth" data-ru="Ядро GPU + синт">GPU Core + Synth</a>
                <a href="Zerkalius-grid-module.html" class="menu-btn draft-btn" data-en="Grid Module" data-ru="Модуль сетки">Grid Module</a>
                <a href="Zerkalius-kubits.html" class="menu-btn draft-btn" data-en="Kubits" data-ru="Кубиты">Kubits</a>
                <a href="fold-layers/Zerkalius-layers.html" class="menu-btn draft-btn" data-en="Fold Layers" data-ru="Слои сгиба">Fold Layers</a>
                <a href="Zerkalius-ascii-art.html" class="menu-btn draft-btn" data-en="ASCII Art" data-ru="ASCII-арт">ASCII Art</a>
                <a href="oktaedr/Zerkalius-oktaedr.html" class="menu-btn draft-btn" data-en="Octahedron" data-ru="Октаэдр">Octahedron</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 Wallpaper</a>
            </div>
        </div>

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

        // v0.018: сбойные полосы у кнопок — как в обоях. v0.020: не по одной кнопке, а ПОСТРОЧНО, как в обоях:
        // полоса идёт через весь экран на своей высоте и срывает вбок кусок каждой кнопки, которую пересекает.
        // На кадр — три полосы высотой 3–14 px, у каждой свой сдвиг 6–20 px; у кнопки полос не больше двух
        // (::before и ::after); сбой длится три кадра. Случайный сбой: раз в ~0,12 с с шансом 30% — в среднем
        // раз в 0,4 с. v0.028: «меньше движения» в системе гасит только полосы; язык меняется по-прежнему.
        // v0.022: названия по-английски / по-русски меняются ПОСТРОЧНО И ВМЕСТЕ СО СБОЕМ (вместо v0.021, где у
        // каждой кнопки была своя фаза): раз в ~2,5 с случайная строка кнопок получает сбой — полосы только в её
        // высоте, — и на втором кадре сбоя все её кнопки разом переключают язык. v0.023: названия групп
        // («Черновики», «Знак и записи») — такие же строки и меняются так же.
        (function () {
            // v0.028: прежде «меньше движения» выключало весь этот блок разом — и полосы, и смену языка, и
            // надпись обоев; на Windows Server визуальные эффекты выключены по умолчанию, и хаб там стоял
            // молча английским. Теперь тихий режим гасит только полосы: язык по строкам меняется всегда.
            const CALM = !!(window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches);
            const btns = Array.from(document.querySelectorAll('.menu-btn, .panel-title, .hubSnd'));   // v0.023: и названия групп; v0.057 — и ноты (C D E F G A B / До…Си)
            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;
            rowsNow().sort((a, b) => a.top - b.top).forEach((row, i) => { const lang = (i + r0) % 2 ? 'ru' : 'en'; row.list.forEach(b => setLang(b, lang)); });
            TITLE.lang = r0 ? 'en' : '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 с (звука нет) — меню отпирается,
               чтобы не остаться запертым навсегда */
            let unlocked = false; try { unlocked = localStorage.getItem('zerk_hub_all7') === '1'; } catch (e) {}
            if (!unlocked) document.body.classList.add('hush');
            let started = false, tries = 0, heard = false, nudgeT = 0;
            const unlock = () => { if (unlocked) return; unlocked = true; document.body.classList.remove('hush'); try { localStorage.setItem('zerk_hub_all7', '1'); } catch (e) {} };
            const wake = () => { heard = true; };
            const fallback = () => setTimeout(() => { if (!heard) unlock(); }, 3000);
            const sendAll = () => { if (heard || tries++ > 12) return; try { bg.contentWindow.postMessage({ zerkSnd: true }, '*'); } catch (e) {} setTimeout(sendAll, 500); };
            const nudge = () => { const b = document.getElementById('hubSndBox'); if (!b) return; b.classList.remove('nudge'); void b.offsetWidth; b.classList.add('nudge'); clearTimeout(nudgeT); nudgeT = setTimeout(() => b.classList.remove('nudge'), 1300); };
            /* v0.056, «нужна и пауза при клике на странице, и плей — после паузы с того же момента, а сброс как-то иначе»: щелчок по пустому
               месту (не по нотам, кнопкам и ссылкам) — пауза / дальше: фон сам знает, звучит ли, и отвечает (zerkSndPaused — ноты горят без
               мигания). Правый щелчок по пустому месту — сброс: все семь нот, звук с начала, конус с начального положения. Самый первый
               щелчок, как прежде, включает До и Ре */
            const post = (m) => { try { bg.contentWindow.postMessage(m, '*'); } catch (e) {} };
            document.addEventListener('click', e => {
                const t = e.target, note = t.closest && t.closest('.hubSnd'), link = t.closest && t.closest('a, button');
                if (note) { if (!started) { started = true; fallback(); } return; }
                if (link) {
                    if (unlocked) return;
                    e.preventDefault(); e.stopPropagation();
                    if (!started) { started = true; if (bg) sendAll(); fallback(); } else nudge();
                    return;
                }
                if (!started) { started = true; if (bg) sendAll(); fallback(); return; }
                if (bg) post({ zerkSndToggle: true });
            }, true);
            document.addEventListener('contextmenu', e => {
                if (e.target.closest && e.target.closest('a, button')) return;
                e.preventDefault(); started = true; if (bg) post({ zerkSndReset: true });
            }, true);
            // v0.050: два значка — ♫ строки и ♪ столбцы; каждый шлёт { zerkSndHead, on }, фон отвечает, какие головки звучат (zerkSndR / zerkSndC)
            { const sbs = Array.from(document.querySelectorAll('.hubSnd'));
              if (sbs.length && bg) { sbs.forEach(b => { b.onclick = () => { try { bg.contentWindow.postMessage({ zerkSndHead: b.dataset.h, on: !b.classList.contains('on') }, '*'); } catch (e) {} }; });
                window.addEventListener('message', e => { if (e.source === bg.contentWindow && e.data && e.data.zerkSndOn !== undefined) {
                  const d = e.data, hs = Array.isArray(d.zerkSndHeads) ? d.zerkSndHeads : (d.zerkSndOn ? ['r', 'c'] : []);   // v0.054: какие из семи звучат
                  sbs.forEach(b => b.classList.toggle('on', hs.includes(b.dataset.h))); 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 с, и казалось, что не меняется вовсе.
                    if (Math.random() < 0.25) return TITLE.set(TITLE.lang === 'ru' ? 'en' : 'ru');
                    const rows = rowsNow(); const row = rows[Math.floor(Math.random() * rows.length)];
                    if (row) {
                        const lang = row.list[0].dataset.lang === 'ru' ? 'en' : 'ru';   // вся строка — на один язык
                        return glitch(row.top, row.bottom, () => row.list.forEach(b => setLang(b, lang)));
                    }
                }
                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);
        })();
    </script>
</body>
</html>
 <!-- === МАРКЕР: CSS СТИЛИ КОНЕЦ === -->