:root {
    --фон: #eef0f2; --панель: #ffffff; --текст: #1d2125; --тихий: #5f6870; --линия: #d7dbe0;
    --акцент: #e8590c; --кнопка: #1d2125; --кнопка-текст: #ffffff;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; background: var(--фон); color: var(--текст);
    font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
  body { display: flex; flex-direction: column; overflow: hidden; }
  header { display: flex; align-items: center; gap: 12px; padding: 10px 16px;
    padding-top: max(10px, env(safe-area-inset-top)); background: var(--панель); border-bottom: 1px solid var(--линия); }
  header h1 { margin: 0; font-size: 17px; font-weight: 700; flex: 1; }
  header .шаг { color: var(--тихий); font-size: 14px; white-space: nowrap; }
  #сцена { flex: 1; position: relative; min-height: 0; overflow: hidden; touch-action: none; }
  #сцена canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
  #лучи { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  #выноски { position: absolute; inset: 0; pointer-events: none; }
  .выноска { position: absolute; left: 0; top: 0; padding: 4px 9px; border-radius: 12px; color: #fff;
    font: 600 13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; white-space: nowrap; }
  .подсказка { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-size: 12px;
    color: var(--тихий); background: rgba(255,255,255,.8); padding: 3px 10px; border-radius: 12px; pointer-events: none; }
  .инструменты { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 8px; }
  .инструменты button { width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--линия);
    background: var(--панель); font-size: 18px; cursor: pointer; color: var(--текст); }
  .инструменты button[aria-pressed="true"] { background: var(--кнопка); color: var(--кнопка-текст); }
  footer { background: var(--панель); border-top: 1px solid var(--линия); padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  #текст { margin: 0 0 12px; font-size: 15px; min-height: 3.6em; max-height: 9.5em; overflow-y: auto; }
  #текст b { color: var(--акцент); }
  .навигация { display: flex; gap: 10px; align-items: center; }
  .навигация button { height: 48px; border-radius: 10px; border: 0; font-size: 16px; font-weight: 600; cursor: pointer; }
  #назад { width: 64px; background: var(--фон); color: var(--текст); }
  #вперёд { flex: 1; background: var(--кнопка); color: var(--кнопка-текст); }
  #назад:disabled, #вперёд:disabled { opacity: .35; cursor: default; }
  .точки { display: flex; gap: 5px; justify-content: center; margin-bottom: 10px; flex-wrap: wrap; }
  .точки button { width: 26px; height: 26px; border-radius: 13px; border: 1px solid var(--линия);
    background: var(--панель); font-size: 12px; color: var(--тихий); cursor: pointer; padding: 0; }
  .точки button.тек { background: var(--кнопка); color: var(--кнопка-текст); border-color: var(--кнопка); }
  .ошибка { padding: 24px 16px; }
  .список { list-style: none; margin: 0; padding: 8px 16px; overflow-y: auto; height: 100%;
    columns: 2 160px; column-gap: 24px; }
  .список li { padding: 10px 0; border-bottom: 1px solid var(--линия); break-inside: avoid; }
  .список a { color: var(--текст); font-weight: 600; text-decoration: none; font-size: 17px; }
  .список span { color: var(--тихий); font-size: 13px; margin-left: 6px; }
  @media (min-width: 900px) {          /* компьютер: сцена слева, шаги справа */
    body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto minmax(0, 1fr); }
    header { grid-column: 1 / -1; }
    #сцена { grid-column: 1; grid-row: 2; }
    footer { grid-column: 2; grid-row: 2; border-top: 0; border-left: 1px solid var(--линия);
      display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; }
    #текст { max-height: none; flex: 1; font-size: 16px; }
  }