feat: галерея-слайдер, листалка в просмотрщике и TUI braille-спиннер

- case-media-slider: переиспользуемый слайдер (prev/next + точки, swipe, клавиатура, lazy)
- image-viewer: листалка prev/next в тулбаре как пилюли, пагинация-точки в тулбаре слева,
  группа масштаба (slider + текст) с gap 0.25rem, текст масштаба --text-muted/400
- tui-spinner: переиспользуемый braille-спиннер (чистый CSS), лоадер просмотрщика
- design-system.html: живой пример TUI braille-спиннера
- fix: удалён мёртвый textContent='Загрузка...', убивавший .tui-spinner при повторном открытии

src/pages/cases/design-system.html

@@ -765,6 +765,19 @@
         ></div>
         <p class="sg-label">.has-img-loading · .is-img-loading · .img-ph-demo (демо заглушки)</p>
 
+        <h3>TUI braille-спиннер</h3>
+        <p class="section__prose">
+          Загрузка тяжёлых изображений в просмотрщике (<code>.case-image-viewer</code>) показывается
+          моноширинным braille-спиннером — как в TUI. Чистый CSS, без JS: 10 кадров переключаются
+          через <code>steps()</code>-анимацию. Переиспользуемый класс <code>.tui-spinner</code>
+          (цвет — <code>--accent</code>, шрифт — системный mono).
+        </p>
+        <div class="sg-stack sg-stack--row sg-stack--center" style="gap: 1.5rem; padding: 1.25rem; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line); border-radius: var(--radius-card, 14px);">
+          <span class="tui-spinner" aria-label="Загрузка" role="status"><span>⠋</span><span>⠙</span><span>⠹</span><span>⠸</span><span>⠼</span><span>⠴</span><span>⠦</span><span>⠧</span><span>⠇</span><span>⠏</span></span>
+          <code class="tui-spinner-seq" style="font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; color: var(--text-muted); font-size: 0.95rem;">⠋ ⠙ ⠹ ⠸ ⠼ ⠴ ⠦ ⠧ ⠇ ⠏</code>
+        </div>
+        <p class="sg-label">.tui-spinner · кадры: ⠋ ⠙ ⠹ ⠸ ⠼ ⠴ ⠦ ⠧ ⠇ ⠏ · prefers-reduced-motion показывает ⠋</p>
+
         <h3>Карточка навыка</h3>
         <article class="skill-task-card">
           <p class="skill-task-card__task">skill-task-card__task — формулировка задачи от бизнеса.</p>
@@ -856,7 +869,7 @@
             Живой эталон со всеми вариантами — на отдельной странице; оттуда копируют куски при сборке нового кейса.
           </p>
           <p>
-            <a class="btn btn--secondary btn--flat" href="template-elements-demo/">Демо элементов кейса</a>
+            <a class="btn btn--secondary btn--flat" href="../template-elements-demo/">Демо элементов кейса</a>
           </p>
         </div>
 
@@ -867,7 +880,7 @@
             раскладка вынесены на отдельную страницу.
           </p>
           <p>
-            <a class="btn btn--secondary btn--flat" href="mini-projects-showcase/">Каталог карточек активности</a>
+            <a class="btn btn--secondary btn--flat" href="../mini-projects-showcase/">Каталог карточек активности</a>
           </p>
         </div>
       </div>