[html]<div style="background-color: #3E2723; padding: 25px; border-radius: 12px; font-family: sans-serif; color: #F4EBE1; max-width: 400px; margin: 0 auto; text-align: center;">
<h3 style="color: #FFF8E1; margin-bottom: 20px;"><b>Интерактивный симулятор «Шага Юя»</b></h3>
<!-- Скрытые триггеры шагов -->
<style>
.yubug-radio { display: none !important; }
.yubug-cell { display: block; padding: 20px 0; background-color: #2D1A12; border: 2px solid #5D4037; border-radius: 8px; font-size: 18px; font-weight: bold; color: #FFF8E1; cursor: pointer; transition: background 0.2s, color 0.2s; }
.yubug-cell:hover { background-color: #4E342E; }
.yubug-hint { display: none; background-color: #4E342E; padding: 12px; border-radius: 6px; border: 1px solid #5D4037; font-size: 14px; margin-top: 25px; line-height: 1.5; }
/* Начальное состояние инфо-панели */
#step-init { display: block; }
/* Логика подсветки ячеек и вывода троичных кодов по цепочке */
#r-s1:checked ~ .yubug-grid .c-1 { background-color: #1976D2; color: #FFF8E1; border-color: #64B5F6; }
#r-s1:checked ~ #step-init { display: none; }
#r-s1:checked ~ #step-1 { display: block; }
#r-s2:checked ~ .yubug-grid .c-2 { background-color: #D32F2F; color: #FFF8E1; border-color: #E57373; }
#r-s2:checked ~ #step-init { display: none; }
#r-s2:checked ~ #step-2 { display: block; }
#r-s3:checked ~ .yubug-grid .c-3 { background-color: #1976D2; color: #FFF8E1; border-color: #64B5F6; }
#r-s3:checked ~ #step-init { display: none; }
#r-s3:checked ~ #step-3 { display: block; }
#r-s4:checked ~ .yubug-grid .c-4 { background-color: #D32F2F; color: #FFF8E1; border-color: #E57373; }
#r-s4:checked ~ #step-init { display: none; }
#r-s4:checked ~ #step-4 { display: block; }
#r-s5:checked ~ .yubug-grid .c-5 { background-color: #4CAF50; color: #FFF8E1; border-color: #81C784; }
#r-s5:checked ~ #step-init { display: none; }
#r-s5:checked ~ #step-5 { display: block; }
#r-s6:checked ~ .yubug-grid .c-6 { background-color: #D32F2F; color: #FFF8E1; border-color: #E57373; }
#r-s6:checked ~ #step-init { display: none; }
#r-s6:checked ~ #step-6 { display: block; }
#r-s7:checked ~ .yubug-grid .c-7 { background-color: #1976D2; color: #FFF8E1; border-color: #64B5F6; }
#r-s7:checked ~ #step-init { display: none; }
#r-s7:checked ~ #step-7 { display: block; }
#r-s8:checked ~ .yubug-grid .c-8 { background-color: #D32F2F; color: #FFF8E1; border-color: #E57373; }
#r-s8:checked ~ #step-init { display: none; }
#r-s8:checked ~ #step-8 { display: block; }
#r-s9:checked ~ .yubug-grid .c-9 { background-color: #1976D2; color: #FFF8E1; border-color: #64B5F6; }
#r-s9:checked ~ #step-init { display: none; }
#r-s9:checked ~ #step-9 { display: block; }
</style>
<input type="radio" name="yubug" id="r-s1" class="yubug-radio">
<input type="radio" name="yubug" id="r-s2" class="yubug-radio">
<input type="radio" name="yubug" id="r-s3" class="yubug-radio">
<input type="radio" name="yubug" id="r-s4" class="yubug-radio">
<input type="radio" name="yubug" id="r-s5" class="yubug-radio">
<input type="radio" name="yubug" id="r-s6" class="yubug-radio">
<input type="radio" name="yubug" id="r-s7" class="yubug-radio">
<input type="radio" name="yubug" id="r-s8" class="yubug-radio">
<input type="radio" name="yubug" id="r-s9" class="yubug-radio">
<!-- Сетка квадрата Ло-Шу (4-9-2 / 3-5-7 / 8-1-6) -->
<div class="yubug-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 auto;">
<div><label for="r-s4" class="yubug-cell c-4">4</label></div>
<div><label for="r-s9" class="yubug-cell c-9">9</label></div>
<div><label for="r-s2" class="yubug-cell c-2">2</label></div>
<div><label for="r-s3" class="yubug-cell c-3">3</label></div>
<div><label for="r-s5" class="yubug-cell c-5">5</label></div>
<div><label for="r-s7" class="yubug-cell c-7">7</label></div>
<div><label for="r-s8" class="yubug-cell c-8">8</label></div>
<div><label for="r-s1" class="yubug-cell c-1">1</label></div>
<div><label for="r-s6" class="yubug-cell c-6">6</label></div>
</div>
<!-- Динамические текстовые блоки -->
<div id="step-init" class="yubug-hint">
<b>Начало ритуала:</b> Найдите точку старта Вселенной. Сделайте первый шаг — кликните на ячейку <b>1</b>!
</div>
<div id="step-1" class="yubug-hint">
<b>Шаг 1 выполнен!</b> Код: <span style="color:#FFCC80; font-weight:bold;">(0, T)</span><br>
Система запущена в минимальном импульсе. Теперь прыгайте по диагонали в правый верхний угол — на ячейку <b>2</b>!
</div>
<div id="step-2" class="yubug-hint">
<b>Шаг 2 выполнен!</b> Код: <span style="color:#FFCC80; font-weight:bold;">(1, T)</span><br>
Первый инверсионный скачок разрядов. Перемещайтесь налево-вниз — на ячейку <b>3</b>!
</div>
<div id="step-3" class="yubug-hint">
<b>Шаг 3 выполнен!</b> Код: <span style="color:#FFCC80; font-weight:bold;">(T, 1)</span><br>
Младший разряд вышел в плюс. Двигайтесь строго вверх — на ячейку <b>4</b>!
</div>
<div id="step-4" class="yubug-hint">
<b>Шаг 4 выполнен!</b> Код: <span style="color:#FFCC80; font-weight:bold;">(0, 1)</span><br>
Пик положительной полуволны достигнут. Время обнуления — шагайте в самый центр, на ячейку <b>5</b>!
</div>
<div id="step-5" class="yubug-hint">
<b>Шаг 5: Центральный ноль!</b> Код: <span style="color:#81C784; font-weight:bold;">(0, 0)</span><br>
Абсолютная аннигиляция хаоса. Ноги сошлись вместе. Выходим из мертвой точки в правый нижний угол — на ячейку <b>6</b>!
</div>
<div id="step-6" class="yubug-hint">
<b>Шаг 6 выполнен!</b> Код: <span style="color:#FFCC80; font-weight:bold;">(1, T)</span><br>
Вторая петля, проваливаемся в отрицательную полуволну. Двигайтесь строго вверх — на ячейку <b>7</b>!
</div>
<div id="step-7" class="yubug-hint">
<b>Шаг 7 выполнен!</b> Код: <span style="color:#FFCC80; font-weight:bold;">(1, 0)</span><br>
Старший разряд держит минус. Перекрестный шаг налево-вниз — на ячейку <b>8</b>!
</div>
<div id="step-8" class="yubug-hint">
<b>Шаг 8 выполнен!</b> Код: <span style="color:#FFCC80; font-weight:bold;">(T, T)</span><br>
Младший разряд упал на минимум. Финальный аккорд — шагайте строго вверх, на ячейку <b>9</b>!
</div>
<div id="step-9" class="yubug-hint" style="border-color: #81C784; background-color: #1B5E20;">
🎉 <b>Ритуал завершен!</b> Код девятки: <span style="color:#FFF8E1; font-weight:bold;">(1, 1)</span><br>
Дискретная синусоида сделала полный оборот и идеально закольцевалась. Хаос укрощен чистой троичной логикой!
</div>
</div>
[/html]