/* Локальные декоративные шрифты: страница больше не зависит от Google Fonts */
@font-face {
  font-family: "Audiowide";
  src: url("fonts/audiowide-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Caveat";
  src: url("fonts/caveat-700-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "New Rocker";
  src: url("fonts/new-rocker-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Permanent Marker";
  src: url("fonts/permanent-marker-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
      /* Оттенки трёх временных областей: от прошлого к будущему становятся темнее */
      --past-violet: #8998f2;
      --present-violet: #7988e2;
      --future-violet: #6978d1;
      /* Старые имена оставлены для остальных элементов композиции */
      --violet: var(--past-violet);
      --violet-light: var(--past-violet);
      --heading-blue: #147bea;
      --paper: #d6e7f2;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      max-width: 100%;
      min-height: 100%;
      overflow-x: hidden;
      overflow-x: clip;
    }

    body {
      display: grid;
      place-items: center;
      margin: 0;
      padding: 0;
      background: #121827;
    }

    .poster {
      position: relative;
      width: min(100%, 920px);
      max-width: 100%;
      flex: 0 0 auto;
      aspect-ratio: 920 / 880;
      overflow: hidden;
      color: #050609;
      background:
        repeating-linear-gradient(0deg, rgb(255 255 255 / 4%) 0 1px, rgb(20 67 153 / 3%) 1px 3px),
        repeating-linear-gradient(90deg, transparent 0 3px, rgb(255 255 255 / 3%) 3px 5px),
        linear-gradient(180deg, #7898d9 0%, #5db2db 38%, #1bd5e1 100%);
      box-shadow: 0 0 0 4px #050911;
      container-type: inline-size;
    }

    /* На компьютере постер целиком помещается и по ширине, и по высоте окна.
       Пропорция 920 / 880 сохраняется, поэтому элементы внутри не искажаются. */
    @media (min-width: 769px) {
      .poster {
        width: min(
          920px,
          calc(100vw - 8px),
          calc((100vh - 8px) * 1.04545)
        );
        width: min(
          920px,
          calc(100vw - 8px),
          calc((100dvh - 8px) * 1.04545)
        );
      }
    }

    .poster::after {
      position: absolute;
      inset: 0;
      z-index: 20;
      pointer-events: none;
      opacity: .24;
      background-image:
        radial-gradient(ellipse at center, transparent 48%, rgb(7 34 101 / 22%) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
      content: "";
      mix-blend-mode: multiply;
    }

    .banner {
      position: absolute;
      top: 1.4%;
      left: 3.25%;
      width: 93.7%;
      height: 12.5%;
      padding: 2.9% 3% .6%;
      text-align: center;
      background:
        radial-gradient(
          ellipse at 27% 16%,
          rgb(255 255 255 / 72%) 0%,
          rgb(255 255 255 / 20%) 34%,
          transparent 57%
        ),
        linear-gradient(
          155deg,
          #edf7fc 0%,
          #d5e8f4 48%,
          #a9cce3 100%
        );
      clip-path: polygon(0 0, 96% 0, 100% 50%, 96% 100%, 0 100%);
      /* Объёмная тень повторяет форму стрелки вместе с наконечником */
      filter:
        drop-shadow(0.25cqw 0.6cqw 0.35cqw rgba(34, 67, 125, 0.28))
        drop-shadow(0.7cqw 1.35cqw 1.25cqw rgba(18, 43, 100, 0.34));
    }

    .banner::before {
      position: absolute;
      /* Положение исходной голубой полоски внутри стрелки */
      top: 0;
      left: 0;
      /* Полоска тянется на всю ширину стрелки */
      width: 100%;
      /* Толщина полоски */
      height: 8%;
      background: #75b8e1;
      content: "";
    }

    h1 {
      margin: 0;
      color: var(--heading-blue);
      font: 400 3.65vw/1 "Audiowide", "Arial Black", sans-serif;
      font: 400 3.65cqw/1 "Audiowide", "Arial Black", sans-serif;
      letter-spacing: .035em;
      text-transform: uppercase;
      text-shadow: .22cqw .12cqw 0 #7256df;
      white-space: nowrap;
    }

    .banner-subtitles {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin-top: 1.15%;
      color: #064fc4;
      font: 700 2.5vw/1 Georgia, "Times New Roman", serif;
      font: 700 2.5cqw/1 Georgia, "Times New Roman", serif;
    }

    .columns {
      position: absolute;
      top: 18.7%;
      left: 3.25%;
      display: grid;
      grid-template-columns: 1fr .9fr 1fr;
      gap: 1.15%;
      width: 93.7%;
      height: 28%;
    }

    .column {
      --column-color: var(--past-violet);
      position: relative;
      min-width: 0;
      display: flex;
      /* Ненавязчивый объём: светлый внутренний блик сверху и мягкая тень снизу */
      box-shadow:
        inset 0 0.7cqw 1.2cqw rgba(255, 255, 255, 0.1),
        0 0.8cqw 1.5cqw rgba(36, 42, 110, 0.16);
      flex-direction: column;
      align-items: center;
      background: var(--column-color);
      font: 700 3vw/1.15 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
      font: 700 2.8cqw/1.15 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
      text-align: center;
    }

    .column::after {
      position: absolute;
      bottom: -7.2%;
      left: calc(50% - 1.5cqw);
      width: 3cqw;
      height: 7.4%;
      background: var(--column-color);
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      content: "";
    }

    .past {
      --column-color: var(--past-violet);
      z-index: 3;
      padding-top: 5%;
      gap: 4.3%;
    }

    /* The first two Past forms read as a compact pair. */
    .past > .tense-option:first-child { margin-bottom: -.65cqw; }

    .present {
      --column-color: var(--present-violet);
      z-index: 2;
      padding-top: 19.7%;
      gap: 4.5%;
    }

    .future {
      --column-color: var(--future-violet);
      z-index: 1;
      padding-top: 5%;
    }

    /* Общий внешний вид всех перекрывающихся плашек */
    .pill {
      /* Позволяет задавать положение плашки относительно её обычного места */
      position: relative;
      /* Размещает плашки поверх основных фиолетовых колонок */
      z-index: 2;
      /* Включает Grid, чтобы легко выровнять текст по центру */
      display: grid;
      /* Выравнивает текст одновременно по горизонтали и вертикали */
      place-items: center;
      /* Минимальная высота плашки; увеличение значения делает её выше */
      min-height: 4cqw;
      /* Свободное пространство слева и справа от текста */
      padding: 0 2cqw;
      /* Цвет фона плашки */
      background: var(--violet-light);
      /* Делает края полностью овальными */
      border-radius:  35%;
      /* Запрещает перенос текста на новую строку */
      white-space: nowrap;
    }

    /* Плашки Present Perfect в колонке прошлого */
    .perfect-pill {
      /* Ширина относительно ширины колонки: больше 100% означает шире колонки */
      width: 140%;
      /* Сдвиг вправо: меньше 50% — левее, больше 50% — правее */
      transform: translateX(35%);
    }


    /* Отдельная увеличенная ширина для длинной надписи Present P2erfect Continuous */
    .perfect-continuous-pill {
      width: 140%;
      transform: translateX(35%);
      margin-top: 2.8cqw;
    }

    /* Отдельные настройки плашки Present Simple */
    .present-simple-pill {
      /* Ширина относительно ширины центральной колонки */
      width: 140%;
      /* Горизонтальный сдвиг: меньше 50% — левее, больше 50% — правее */
      /* немного вверх */
      transform: translate(40%, -0.5cqw); 
      /* Размер текста можно менять независимо от остальных плашек */
      margin-bottom: 2.5cqw;
    }

    /* Отдельные настройки плашки Present Continuous */
    .present-continuous-pill {
      /* Ширина относительно ширины центральной колонки */
      width: 140%;
      /* Независимый горизонтальный сдвиг этой плашки */
      transform: translateX(40%);
    }


    .future-lines {
      position: absolute;
      top: 65%;
      left: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .28cqw;
      line-height: 1.05;
    }

    /* Will и be about to располагаются рядом в первой строке */
    .future-option-row,
    .condition-options {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 1.1cqw;
      white-space: nowrap;
    }

    /* Условные конструкции занимают две строки и наследуют стандартный шрифт таблицы */

    /* Общий контейнер нижней композиции: круга, плюса, минуса и вопросительного знака */
    .bottom-content {
      position: absolute;
      inset: 0;
      /* Меняйте только это значение, чтобы двигать все нижние элементы одновременно:
         отрицательное значение поднимает их, положительное — опускает */
      transform: translateY(-3cqw);
    }

    .pronoun-circle {
      position: absolute;
      top: 52.45%;
      left: 5.1%;
      width: 44.5%;
      aspect-ratio: 1;
      border-radius: 50%;
      /* Объём круга: свет сверху слева и более глубокий цвет снизу справа */
      background:
        radial-gradient(circle at 30% 24%, rgb(255 255 255 / 30%) 0 5%, transparent 34%),
        radial-gradient(circle at 34% 28%, #7fa2e4 0%, #5679c0 52%, #010612 100%);
      box-shadow:
        1.3cqw 1.6cqw 2.6cqw rgb(35 54 126 / 30%),
        inset 1cqw 1.1cqw 1.8cqw rgb(255 255 255 / 22%),
        inset -1.2cqw -1.4cqw 2cqw rgb(39 56 139 / 28%);
    }

    .pronoun {
      position: absolute;
      z-index: 2;
      padding: 0;
      border: 0;
      color: inherit;
      background: transparent;
      line-height: 1;
      white-space: nowrap;
    }

    button.pronoun { cursor: pointer; }
    button.pronoun:hover { color: #172d78; }
    button.pronoun:focus-visible {
      outline: .35cqw solid white;
      outline-offset: .4cqw;
      border-radius: .5cqw;
    }

    .i {
      top: 23%;
      left: 13%;
      /* По умолчанию большая I чёрная */
      color: #050609;
      font: 400 27vw/.8 Georgia, serif;
      font: 400 27cqw/.8 Georgia, serif;
      transform: scaleX(.47);
      transform-origin: left center;
    }

    /* После нажатия и перехода в режим выбора времени I становится белой */
    .i.practice-pronoun-active {
      color: white;
    }

    .he {
      top: 18%;
      left: 40%;
      font: 700 7.1vw/1 "Caveat", cursive;
      font: 700 7.1cqw/1 "Caveat", cursive;
    }

    .we {
      top: 22%;
      left: 65%;
      font: 400 6.6vw/1 "New Rocker", fantasy;
      font: 400 6.6cqw/1 "New Rocker", fantasy;
    }

    .they {
      top: 41%;
      left: 34%;
      font: 700 6.6vw/1 "Caveat", cursive;
      font: 700 6.6cqw/1 "Caveat", cursive;
    }

    .it {
      top: 44%;
      left: 68%;
      font: 400 6.5vw/1 "New Rocker", fantasy;
      font: 400 6.5cqw/1 "New Rocker", fantasy;
      text-transform: uppercase;
    }

    .she {
      top: 67%;
      left: 36%;
      font: 400 5.1vw/1 "Permanent Marker", cursive;
      font: 400 5.1cqw/1 "Permanent Marker", cursive;
      text-transform: uppercase;
    }

    .you {
      top: 62%;
      left: 67%;
      font: 700 7vw/1 "Caveat", cursive;
      font: 700 7cqw/1 "Caveat", cursive;
    }

    /* Общая панель примеров для любого выбранного местоимения */
    /* Отключённый карточный вариант сохранён для повторного использования. */
    .auxiliary-card {
      width: 20cqw;
      padding: 1.1cqw 1.35cqw;
      border: .14cqw solid rgb(255 255 255 / 48%);
      border-radius: 1.2cqw;
      background: rgb(223 235 255 / 94%);
      box-shadow: 0 .7cqw 1.8cqw rgb(7 16 57 / 38%);
      font-size: 1.55cqw;
      line-height: 1.28;
    }

    .example-panel {
      position: absolute;
      inset: 0;
      /* Панель располагается выше кликабельного He, чтобы кнопка Return не перекрывалась */
      z-index: 3;
      display: none;
      font: 700 1.85vw/1.2 Georgia, "Times New Roman", serif;
      font: 700 1.85cqw/1.2 Georgia, "Times New Roman", serif;
      text-align: center;
    }

    /* После клика скрываем остальные местоимения */
    .pronoun-circle.examples-open .pronoun:not(.is-active) {
      visibility: hidden;
      opacity: 0;
    }

    /* Показываем только панель выбранного местоимения */
    .example-panel.is-open {
      display: block;
      animation: show-he-examples .28s ease-out both;
    }

    @keyframes show-he-examples {
      from { opacity: 0; transform: scale(.97); }
      to { opacity: 1; transform: scale(1); }
    }

    .pronoun-example {
      position: absolute;
      max-width: 39%;
      text-shadow: 0 .12cqw .2cqw rgb(255 255 255 / 18%);
    }

    /* Кнопка возвращает первоначальный список местоимений */
    .return-button {
      position: absolute;
      /* Кнопка всегда закреплена по центру у нижнего края круга */
      top: auto;
      right: auto;
      bottom: 4%;
      left: 50%;
      z-index: 4;
      display: inline-flex;
      align-items: center;
      gap: .45cqw;
      min-height: 3.1cqw;
      padding: .5cqw 1.05cqw .5cqw .65cqw;
      border: .22cqw solid rgb(255 255 255 / 78%);
      border-radius: 999px;
      color: white;
      background: linear-gradient(135deg, #ff82cf 0%, #ff4aae 55%, #dc2f91 100%);
      box-shadow:
        0 .45cqw 1cqw rgb(87 25 104 / 28%),
        inset 0 .18cqw .25cqw rgb(255 255 255 / 34%);
      cursor: pointer;
      font: 900 1.2vw/1 Arial, sans-serif;
      font: 900 1.2cqw/1 Arial, sans-serif;
      letter-spacing: .035em;
      text-transform: uppercase;
      transform: translateX(-50%);
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }

    /* Круглая часть кнопки со стрелкой */
    .return-button::before {
      display: grid;
      place-items: center;
      width: 1.75cqw;
      aspect-ratio: 1;
      border-radius: 50%;
      color: #e33799;
      background: white;
      content: "↶";
      font-size: 1.35vw;
      font-size: 1.35cqw;
      line-height: 1;
      /* Клик по стрелке передаётся самой кнопке */
      pointer-events: none;
    }

    .return-button:hover {
      filter: brightness(1.06);
      transform: translateX(-50%) translateY(-.2cqw) scale(1.03);
      box-shadow:
        0 .7cqw 1.25cqw rgb(87 25 104 / 34%),
        inset 0 .18cqw .25cqw rgb(255 255 255 / 40%);
    }

    .return-button:active {
      transform: translateX(-50%) translateY(.08cqw) scale(.98);
      box-shadow: 0 .2cqw .5cqw rgb(87 25 104 / 26%);
    }

    .return-button:focus-visible { outline: .35cqw solid white; outline-offset: .2cqw; }

    .math {
      position: absolute;
      inset: 0;
      color: #6c78db;
      font-family: Arial, sans-serif;
      font-weight: 900;
    }

    .plus {
      position: absolute;
      top: 53.5%;
      left: 59.7%;
      width: 13.2%;
      height: 13.2%;
    }

    .plus::before,
    .plus::after,
    .minus::after {
      position: absolute;
      border-radius: 999px;
      background: currentColor;
      content: "";
    }

    .plus::before {
      top: 41%;
      left: 0;
      width: 100%;
      height: 18%;
    }

    .plus::after {
      top: 0;
      left: 41%;
      width: 18%;
      height: 100%;
    }

    .minus {
      position: absolute;
      top: 62.2%;
      left: 83.5%;
      width: 13.5%;
      height: 5%;
    }

    .minus::after {
      inset: 33% 0;
    }

    .question {
      position: absolute;
      top: 71.4%;
      left: 67.3%;
      font-size: 20vw;
      font-size: 20cqw;
      line-height: .8;
      font-weight: 700
    }

    /* Панель визуального редактора расположения примеров */
    /* Кнопки времён выглядят как прежние надписи до активации режима I */
    .tense-option { border: 0; color: inherit; font: inherit; line-height: inherit; }
    .tense-option:not(.pill) { padding: 0; background: transparent; }
    .tense-option:disabled { color: inherit; cursor: default; opacity: 1; }

    /* Плашка с цельной надписью и двумя независимыми зонами нажатия */
    .split-pill {
      --split-left-color: var(--past-violet);
      --split-right-color: var(--present-violet);
      position: relative;
      isolation: isolate;
      overflow: hidden;
      /* Основной плавный переход между цветами соседних колонок */
      background: linear-gradient(
        90deg,
        var(--split-left-color) 0%,
        var(--split-right-color) 100%
      );
      /* Без внутренних теней: края точно совпадают с цветами колонок */
      box-shadow: none;
    }

    /* Световой шов состоит из двух частей и исчезает возле надписи */
    .split-pill::before,
    .split-pill::after {
      position: absolute;
      left: 50%;
      z-index: 4;
      width: max(1px, 0.1cqw);
      height: 27%;
      background: linear-gradient(
        to bottom,
        rgb(255 255 255 / 38%),
        rgb(234 242 255 / 96%)
      );
      box-shadow:
        0 0 0.2cqw rgb(235 242 255 / 95%),
        0 0 0.55cqw rgb(183 205 255 / 78%);
      content: "";
      pointer-events: none;
      transform: translateX(-50%);
    }

    .split-pill::before {
      top: 0;
    }

    .split-pill::after {
      bottom: 0;
      background: linear-gradient(
        to bottom,
        rgb(234 242 255 / 96%),
        rgb(255 255 255 / 38%)
      );
    }

    /* Present Perfect соединяет цвет колонки прошлого с цветом настоящего */
    .perfect-pill,
    .perfect-continuous-pill {
      --split-left-color: var(--past-violet);
      --split-right-color: var(--present-violet);
    }

    /* Present Simple и Present Continuous соединяют настоящее с будущим */
    .present-simple-pill,
    .present-continuous-pill {
      --split-left-color: var(--present-violet);
      --split-right-color: var(--future-violet);
    }

    /* Левая и правая половины полностью заполняют плашку */
    .split-pill .split-pill-side {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 1;
      width: 50%;
      border-radius: 0;
    }

    /* Левая половина относится к более раннему столбцу */
    .split-pill .split-pill-left {
      left: 0;
      background: transparent;
    }

    /* Правая половина относится к следующему столбцу */
    .split-pill .split-pill-right {
      right: 0;
      background: transparent;
    }

    /* Надпись лежит поверх обеих половин и остаётся визуально цельной */
    .split-pill-label {
      position: relative;
      /* Надпись должна оставаться выше активных половин-кнопок с z-index: 5 */
      z-index: 6;
      pointer-events: none;
      white-space: nowrap;
      transition: color .16s ease, filter .16s ease, text-shadow .16s ease;
    }

    /* В активном режиме подсвечивается цельная надпись, а размеры не меняются */
    body.pronoun-practice-mode .split-pill-label {
      text-shadow:
        0 0 .28cqw rgb(255 255 255 / 92%),
        0 0 .75cqw rgb(194 242 255 / 72%);
    }

    body.pronoun-practice-mode .split-pill-side:hover ~ .split-pill-label,
    body.pronoun-practice-mode .split-pill-side:focus-visible ~ .split-pill-label {
      color: #102a7b;
      filter: brightness(1.14);
      text-shadow:
        0 0 .35cqw white,
        0 0 1.1cqw rgb(194 242 255 / 95%);
    }

    body.pronoun-practice-mode .tense-option {
      position: relative;
      z-index: 5;
      cursor: pointer;
      text-shadow:
        0 0 .28cqw rgb(255 255 255 / 92%),
        0 0 .75cqw rgb(194 242 255 / 72%);
      transition: color .16s ease, filter .16s ease, text-shadow .16s ease;
    }

    /* Сохраняем абсолютное положение половин после активации режима времён */
    body.pronoun-practice-mode .split-pill-side {
      position: absolute;
      transition: background-color .16s ease;
    }

    /* Подсвечивается только та половина, на которую можно нажать */
    body.pronoun-practice-mode .split-pill-side:hover,
    body.pronoun-practice-mode .split-pill-side:focus-visible {
      background-color: rgb(255 255 255 / 18%);
    }

    body.pronoun-practice-mode .tense-option:hover {
      color: #102a7b;
      filter: brightness(1.14);
      text-shadow:
        0 0 .35cqw white,
        0 0 1.1cqw rgb(194 242 255 / 95%);
    }
    body.pronoun-practice-mode .tense-option:focus-visible {
      outline: .3cqw solid white;
      outline-offset: .3cqw;
      border-radius: 999px;
    }
    body.pronoun-practice-mode .practice-pronoun-active {
      color: white;
      filter: drop-shadow(0 0 1.2cqw rgb(255 255 255 / 78%));
    }

    /* Подсказка после выбора I */
    .practice-hint {
      position: absolute;
      right: 2%;
      bottom: 2%;
      left: auto;
      z-index: 80;
      display: none;
      align-items: center;
      gap: clamp(4px, 1cqw, 12px);
      padding:
        clamp(4px, 1cqw, 10px)
        clamp(6px, 1.5cqw, 18px);
      border: 1px solid rgb(255 255 255 / 56%);
      border-radius: clamp(8px, 2cqw, 999px);
      color: white;
      background: rgb(25 38 102 / 90%);
      box-shadow: 0 10px 28px rgb(11 20 74 / 28%);
      font: 700 clamp(6px, 1.5vw, 14px)/1.2 Arial, sans-serif;
      font: 700 clamp(6px, 1.5cqw, 14px)/1.2 Arial, sans-serif;
      backdrop-filter: blur(10px);
      box-sizing: border-box;
      width: fit-content;
      max-width: 60%;
      text-align: center;
      white-space: normal;
    }
    .practice-hint span {
      min-width: 0;
      white-space: normal;
      overflow-wrap: break-word;
    }
    body.pronoun-practice-mode .practice-hint { display: flex; }

    /* Модальное окно с примерами предложений */
    .tense-dialog {
      --dialog-zoom-compensation: 1;
      position: fixed;
      top: 50%;
      left: 50%;
      width: min(680px, calc(100vw - 28px));
      max-height: calc(100vh - 28px);
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      overflow: auto;
      border: 1px solid rgb(255 255 255 / 60%);
      border-radius: 26px;
      color: #101735;
      background: linear-gradient(155deg, #eefaff, #d9eafa);
      box-shadow: 0 28px 80px rgb(8 18 62 / 48%);
      transform: translate(-50%, -50%) scale(var(--dialog-zoom-compensation));
      transform-origin: center;
    }
    .tense-dialog[open] { animation: open-tense-dialog .22s ease-out both; }
    .tense-dialog::backdrop { background: rgb(10 20 57 / 58%); backdrop-filter: blur(4px); }
    /* Запасной режим для Safari без HTMLDialogElement.showModal() */
    .tense-dialog.dialog-fallback-open {
      position: fixed;
      z-index: 1001;
      display: block;
      margin: 0;
    }
    body.dialog-fallback-open::before {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgb(10 20 57 / 58%);
      content: '';
    }
    @keyframes open-tense-dialog {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .dialog-heading {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      padding: 24px 26px 16px;
      color: white;
      background: linear-gradient(135deg, #6474d6, #5366c9);
    }
    .dialog-kicker {
      display: block;
      margin-bottom: 5px;
      color: #bdf8fa;
      font: 800 12px/1 Arial, sans-serif;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .dialog-heading h2 { margin: 0; font: 800 clamp(24px, 4vw, 36px)/1.1 Georgia, serif; }
    .dialog-close {
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      width: 42px;
      height: 42px;
      padding: 0 0 3px;
      border: 2px solid rgb(255 255 255 / 82%);
      border-radius: 50%;
      color: white;
      background: linear-gradient(145deg, #7888e7 0%, #586bd1 52%, #4355b5 100%);
      box-shadow:
        0 7px 16px rgb(25 35 105 / 32%),
        inset 0 2px 3px rgb(255 255 255 / 32%);
      cursor: pointer;
      font: 600 29px/1 Arial, sans-serif;
      text-shadow: 0 2px 3px rgb(31 41 105 / 34%);
      transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
    }
    .dialog-close:hover {
      filter: brightness(1.12);
      transform: rotate(90deg) scale(1.06);
      box-shadow:
        0 9px 20px rgb(25 35 105 / 38%),
        0 0 0 4px rgb(255 255 255 / 14%),
        inset 0 2px 3px rgb(255 255 255 / 38%);
    }
    .dialog-close:active {
      filter: brightness(.96);
      transform: rotate(90deg) scale(.96);
      box-shadow: 0 3px 8px rgb(25 35 105 / 30%);
    }
    .dialog-close:focus-visible {
      outline: 3px solid white;
      outline-offset: 3px;
    }
    .dialog-note { margin: 0; padding: 17px 26px 0; color: #52617d; font: 600 14px/1.4 Arial, sans-serif; }
    .admin-edit-hint {
      display: none;
      margin: 12px 26px 0;
      padding: 9px 12px;
      border-radius: 10px;
      color: #334078;
      background: #eef0ff;
      font: 700 12px/1.35 Arial, sans-serif;
    }
    body.admin-mode .admin-edit-hint { display: block; }
    .sentence-examples { display: grid; gap: 12px; padding: 18px 26px 28px; }
    [hidden] { display: none !important; }
    .simple-tense-patterns,
    .continuous-tense-patterns {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 7px;
      padding: 12px 26px 18px;
    }
    .simple-context-switch {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 3px;
      padding: 3px;
      border: 1px solid rgb(101 117 214 / 16%);
      border-radius: 12px;
      background: rgb(101 117 214 / 9%);
    }
    .simple-context-switch button {
      min-height: 34px;
      padding: 6px 12px;
      border: 0;
      border-radius: 9px;
      color: #68728d;
      background: transparent;
      cursor: pointer;
      font: 900 10px/1 Arial, sans-serif;
      letter-spacing: .1em;
      text-transform: uppercase;
      transition: color .18s ease, background .18s ease, box-shadow .18s ease;
    }
    .simple-context-switch button.is-active {
      color: white;
      background: linear-gradient(135deg, #6575d6, #5366c9);
      box-shadow: 0 4px 10px rgb(62 76 164 / 22%);
    }
    .simple-context-switch button:focus-visible { outline: 3px solid rgb(101 117 214 / 30%); outline-offset: 2px; }
    .highlighted-time-phrase {
      display: inline-block;
      margin-left: .18em;
      padding: .12em .42em .18em;
      border-radius: 999px;
      color: #4e5fc5;
      background: #e8ebff;
      box-shadow: inset 0 0 0 1px rgb(101 117 214 / 14%);
      animation: reveal-time-phrase .22s ease-out both;
    }
    @keyframes reveal-time-phrase {
      from { opacity: 0; transform: translateX(-5px) scale(.96); }
      to { opacity: 1; transform: translateX(0) scale(1); }
    }
    .comparison-card {
      border: 1px solid rgb(75 91 153 / 15%);
      border-radius: 14px;
      background: rgb(255 255 255 / 48%);
      box-shadow: 0 4px 12px rgb(53 67 123 / 7%);
    }
    .comparison-heading {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 6px 8px 4px;
      color: #66718d;
    }
    .comparison-heading .sentence-symbol { width: 24px; border-radius: 7px; font-size: 15px; }
    .affirmative-comparison .comparison-heading .sentence-symbol { background: #3ebd88; }
    .negative-comparison .comparison-heading .sentence-symbol { background: #eb668c; }
    .question-comparison .comparison-heading .sentence-symbol { background: #6575d6; }
    .comparison-heading strong { font: 800 10px/1 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
    .comparison-row,
    .do-row-slot .sentence-card {
      display: grid;
      grid-template-columns: 35px minmax(0, 1fr) 32px;
      gap: 7px;
      align-items: center;
      min-height: 38px;
      margin: 0 6px 5px;
      padding: 4px 8px;
      border: 0;
      border-radius: 11px;
      background: white;
      box-shadow: 0 3px 10px rgb(53 67 123 / 7%);
    }
    .comparison-row p { margin: 0; font: 700 clamp(14px, 2.2vw, 17px)/1.25 Georgia, serif; }
    .model-badge,
    .do-row-slot .sentence-card::before { margin: 0; color: #35a87a; font: 900 9px/1 Arial, sans-serif; letter-spacing: .08em; }
    .model-badge,
    .do-row-slot .sentence-card::before { white-space: nowrap; }
    .time-badge { color: #35a87a; }
    .future-badge { color: #6575d6; }
    .continuous-tense-patterns .comparison-row {
      grid-template-columns: 58px minmax(0, 1fr) 32px;
      column-gap: 11px;
    }
    .do-row-slot .sentence-card::before { color: #6575d6; content: attr(data-model); }
    .do-row-slot .sentence-card strong { display: none; }
    .do-row-slot .sentence-card .sentence-symbol { display: none; }
    .do-row-slot .sentence-card p { font-size: clamp(14px, 2.2vw, 17px); }
    .comparison-row .audio-button,
    .do-row-slot .audio-button { width: 31px; }
    .comparison-row .audio-button::before,
    .do-row-slot .audio-button::before { width: 14px; height: 14px; }
    .comparison-row .audio-button::after,
    .do-row-slot .audio-button::after { right: 4px; width: 7px; height: 12px; }
    .sentence-card {
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr) 44px;
      gap: 14px;
      align-items: center;
      padding: 15px 17px;
      border: 1px solid rgb(75 91 153 / 16%);
      border-radius: 17px;
      background: white;
      box-shadow: 0 7px 18px rgb(53 67 123 / 9%);
    }
    .sentence-symbol {
      display: grid;
      place-items: center;
      width: 42px;
      aspect-ratio: 1;
      border-radius: 13px;
      color: white;
      font: 900 24px/1 Arial, sans-serif;
    }
    .affirmative-card .sentence-symbol { background: #3ebd88; }
    .negative-card .sentence-symbol { background: #eb668c; }
    .question-card .sentence-symbol { background: #6575d6; }
    .sentence-card strong {
      display: block;
      margin-bottom: 4px;
      color: #66718d;
      font: 800 11px/1 Arial, sans-serif;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .sentence-card p { margin: 0; font: 700 clamp(17px, 2.8vw, 22px)/1.3 Georgia, serif; }
    /* Кнопка озвучивания предложения */
    .audio-button {
      position: relative;
      display: grid;
      place-items: center;
      width: 42px;
      aspect-ratio: 1;
      padding: 0;
      border: 1px solid rgb(101 117 214 / 28%);
      border-radius: 50%;
      color: #6575d6;
      background: #f1f3ff;
      box-shadow: 0 4px 11px rgb(53 67 123 / 13%);
      cursor: pointer;
      transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
    }
    /* Значок динамика сделан стилями, поэтому отдельная картинка не нужна */
    .audio-button::before {
      content: '';
      width: 18px;
      height: 18px;
      background: currentColor;
      clip-path: polygon(0 35%, 28% 35%, 64% 5%, 64% 95%, 28% 65%, 0 65%);
    }
    .audio-button::after {
      content: '';
      position: absolute;
      right: 6px;
      width: 9px;
      height: 15px;
      border-right: 2px solid currentColor;
      border-radius: 0 50% 50% 0;
    }
    .audio-button:hover {
      color: white;
      background: #6575d6;
      box-shadow: 0 6px 15px rgb(71 85 175 / 28%);
      transform: translateY(-1px);
    }
    .audio-button:disabled {
      opacity: .35;
      box-shadow: none;
      cursor: not-allowed;
      transform: none;
    }
    .audio-button:focus-visible {
      outline: 3px solid rgb(101 117 214 / 35%);
      outline-offset: 3px;
    }
    /* Во время воспроизведения динамик заменяется знаком паузы */
    .audio-button.is-playing {
      color: white;
      background: #eb668c;
      border-color: #eb668c;
      box-shadow: 0 0 0 5px rgb(235 102 140 / 14%);
    }
    .audio-button.is-playing::before {
      width: 14px;
      height: 17px;
      background: linear-gradient(90deg, currentColor 0 36%, transparent 36% 64%, currentColor 64%);
      clip-path: none;
    }
    .audio-button.is-playing::after { display: none; }

    @media (max-width: 520px) {
      /* Увеличенная кликабельная область Return для управления пальцем */
      .return-button {
        min-height: 25px;
        gap: max(.45cqw, 2px);
        padding: max(.4cqw, 2px) max(.85cqw, 4px) max(.4cqw, 2px) max(.55cqw, 3px);
        border-width: max(.22cqw, 1px);
        font-size: max(1.25cqw, 8px);
      }
      .return-button::before {
        width: max(2.35cqw, 14px);
        font-size: max(1.7cqw, 10px);
      }
      /* Невидимая зона вокруг компактной кнопки облегчает нажатие пальцем */
      .return-button::after {
        position: absolute;
        inset: -6px;
        content: '';
      }
      .practice-hint {
        right: 2%;
        bottom: 2%;
        width: fit-content;
        max-width: 60%;
        border-radius: 1.8cqw;
      }
      .dialog-heading { padding: 20px 18px 14px; }
      .dialog-note { padding: 14px 18px 0; }
      .sentence-examples { padding: 15px 18px 20px; }
      .sentence-card { grid-template-columns: 38px minmax(0, 1fr) 40px; gap: 10px; padding: 13px; }
      .sentence-symbol { width: 36px; border-radius: 11px; }
      .audio-button { width: 40px; }
      .simple-tense-patterns,
      .continuous-tense-patterns { gap: 6px; padding: 9px 18px 14px; }
      .shows-simple-tense-patterns .dialog-heading h2 { font-size: 23px; }
      .shows-simple-tense-patterns .dialog-note { padding: 9px 18px 0; font-size: 12px; }
      .shows-simple-tense-patterns .dialog-heading { padding: 14px 18px 9px; }
      .comparison-row,
      .do-row-slot .sentence-card { min-height: 37px; margin: 0 5px 4px; padding: 4px 7px; }
    }

    .editor-toolbar {
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: 100;
      display: none;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 8px;
      max-width: min(560px, calc(100vw - 32px));
      padding: 10px;
      border: 1px solid rgb(255 255 255 / 35%);
      border-radius: 16px;
      background: rgb(15 24 48 / 88%);
      box-shadow: 0 10px 30px rgb(0 0 0 / 28%);
      backdrop-filter: blur(10px);
      font-family: Arial, sans-serif;
    }

    /* Панель появляется только при открытии страницы в режиме администратора */
    .editor-toolbar.is-visible,
    body.admin-mode .editor-toolbar { display: flex; }

    .editor-button {
      padding: 9px 13px;
      border: 1px solid rgb(255 255 255 / 24%);
      border-radius: 10px;
      color: white;
      background: #5664c9;
      cursor: pointer;
      font-size: 13px;
      font-weight: 700;
    }

    .editor-button:hover { background: #6877dc; }
    .editor-button:active:not(:disabled) {
      transform: translateY(2px) scale(.98);
      box-shadow: inset 0 2px 5px rgb(0 0 0 / 24%);
    }
    .editor-button:focus-visible { outline: 3px solid white; outline-offset: 2px; }
    .editor-button.is-active { color: #17204c; background: #76e1e6; }
    .editor-button.editor-save { background: #d63b98; }
    .editor-button.editor-reset { background: #8c3f62; }
    .editor-button.editor-examples-save { background: #198d82; }
    .editor-button.editor-audio-generate { background: #3979aa; }
    .editor-button.editor-examples-save.has-changes {
      background: #e05c91;
      box-shadow: 0 0 0 3px rgb(255 255 255 / 18%);
    }
    .editor-button.editor-save.has-changes {
      background: #e05c91;
      box-shadow: 0 0 0 3px rgb(255 255 255 / 18%);
    }
    .editor-button.editor-audio-generate.has-changes {
      background: #3979aa;
      box-shadow: 0 0 0 3px rgb(255 255 255 / 18%);
    }
    .editor-audio-status {
      flex-basis: 100%;
      margin: 0;
      color: #d9faff;
      font: 700 12px/1.35 Arial, sans-serif;
      text-align: right;
    }
    .editor-audio-status:empty { display: none; }
    .editor-audio-status.is-error { color: #ffb8ca; }
    /* Неактивная кнопка показывает, что сейчас для неё нет изменений */
    .editor-button:disabled,
    .editor-button:disabled:hover {
      border-color: rgb(255 255 255 / 10%);
      color: rgb(255 255 255 / 44%);
      background: #3d455d;
      box-shadow: none;
      cursor: not-allowed;
      filter: saturate(.35);
    }
    /* Состояние фактической записи файла на Node-сервер */
    .editor-button.is-saving,
    .editor-button.is-saving:hover {
      color: white;
      background: #bd4f9b;
      box-shadow: 0 0 0 3px rgb(255 255 255 / 18%);
      cursor: wait;
      filter: none;
    }
    .editor-status {
      display: none;
      flex-basis: 100%;
      margin: 0;
      color: #d9faff;
      font-size: 12px;
      text-align: right;
    }

    body.edit-mode .editor-status,
    body.admin-mode .editor-status { display: block; }

    /* В админке редактируемое предложение выделяется мягкой рамкой. */
    body.admin-mode .sentence-card p[contenteditable="true"] {
      min-height: 1.3em;
      padding: 5px 7px;
      margin: -5px -7px;
      border: 1px dashed rgb(101 117 214 / 42%);
      border-radius: 8px;
      cursor: text;
      transition: background .15s ease, border-color .15s ease;
    }
    body.admin-mode .sentence-card p[contenteditable="true"]:hover {
      background: rgb(101 117 214 / 7%);
    }
    body.admin-mode .sentence-card p[contenteditable="true"]:focus {
      border-color: #6575d6;
      outline: 3px solid rgb(101 117 214 / 13%);
      background: white;
    }
    body.edit-mode .pronoun-example {
      padding: .35cqw .55cqw;
      border: .18cqw dashed rgb(255 255 255 / 85%);
      border-radius: .55cqw;
      background: rgb(255 255 255 / 14%);
      cursor: grab;
      touch-action: none;
      user-select: none;
    }

    body.edit-mode .pronoun-example.is-dragging {
      z-index: 20;
      cursor: grabbing;
      background: rgb(255 255 255 / 30%);
      box-shadow: 0 .5cqw 1.2cqw rgb(28 32 93 / 28%);
    }

    /* Ручка изменения ширины текстового блока */
    .example-resize-handle {
      position: absolute;
      top: 50%;
      right: -.75cqw;
      display: none;
      width: 1.35cqw;
      height: 2.8cqw;
      border: .18cqw solid white;
      border-radius: 999px;
      background: #ff55b3;
      box-shadow: 0 .2cqw .5cqw rgb(42 25 94 / 30%);
      cursor: ew-resize;
      transform: translateY(-50%);
      touch-action: none;
    }

    body.edit-mode .example-resize-handle { display: block; }

    /* Мобильная админка: панель находится под постером и не перекрывает полотно */
    @media (max-width: 768px) {
      body.admin-mode {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        min-height: 100%;
      }

      body.admin-mode .editor-toolbar {
        position: static;
        right: auto;
        bottom: auto;
        flex-direction: column;
        flex-wrap: nowrap;
        width: calc(100% - 24px);
        max-width: 520px;
        box-sizing: border-box;
        margin: 16px auto 24px;
        padding: 12px;
      }

      body.admin-mode .editor-button {
        width: 100%;
        min-height: 42px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
      }

      /* На телефоне явно повторяем состояния общей логики кнопок.
         JavaScript остаётся единым с десктопом, поэтому состояния не расходятся. */
      body.admin-mode .editor-button.has-changes:not(:disabled) {
        color: white;
        background: #e05c91;
        box-shadow: 0 0 0 3px rgb(255 255 255 / 18%);
      }

      body.admin-mode .editor-button:active:not(:disabled) {
        background: #c94783;
        transform: translateY(2px) scale(.985);
        box-shadow: inset 0 2px 6px rgb(0 0 0 / 28%);
      }

      body.admin-mode .editor-button.is-saving,
      body.admin-mode .editor-button.is-saving:hover {
        color: white;
        background: #bd4f9b;
        cursor: wait;
        filter: none;
      }

      body.admin-mode .editor-button:disabled,
      body.admin-mode .editor-button:disabled:hover {
        color: rgb(255 255 255 / 44%);
        background: #3d455d;
        box-shadow: none;
        transform: none;
        cursor: not-allowed;
        filter: saturate(.35);
      }

      body.admin-mode .editor-status {
        width: 100%;
        text-align: center;
      }

      body.admin-mode .editor-audio-status {
        width: 100%;
        text-align: center;
      }
    }

    @media (max-aspect-ratio: 920 / 880) {
      body {
        align-items: start;
      }
    }

    /* Alternative canvas: every pronoun lives on its own dimensional orb. */
    body.orb-view .poster { aspect-ratio: 920 / 880; }
    body.orb-view .columns,
    body.orb-feature-view .columns {
      top: 17cqw;
      height: calc(26.75cqw + 2.25%);
    }
    body.orb-view .past > .tense-option:last-child { transform: translateY(-.7cqw); }
    body.orb-view .future-lines { transform: translateY(-.7cqw); }
    body.orb-view .bottom-content { transform: none; }

    body.orb-view .pronoun-circle {
      --planet-size: 18cqw;
      top: 49.5cqw;
      left: 4%;
      width: 92%;
      height: 42cqw;
      aspect-ratio: auto;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    body.orb-view .pronoun {
      display: grid;
      place-items: center;
      width: var(--planet-size);
      height: var(--planet-size);
      border: .18cqw solid rgb(216 244 255 / 46%);
      border-radius: 50%;
      color: #08132f;
      background:
        radial-gradient(circle at 31% 23%, white 0 3%, rgb(255 255 255 / 72%) 4%, transparent 18%),
        radial-gradient(circle at 34% 29%, #b9f4ff 0%, #67cfe6 28%, #527bd0 62%, #17275f 87%, #09122f 100%);
      box-shadow:
        inset 1.2cqw 1.1cqw 2cqw rgb(255 255 255 / 32%),
        inset -1.3cqw -1.5cqw 2.1cqw rgb(5 12 53 / 48%),
        0 1.5cqw 2.2cqw rgb(19 37 103 / 38%);
      font: 700 5.7cqw/1 "Caveat", cursive;
      text-transform: none;
      transform: none;
      transform-origin: center;
      transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
    }

    body.orb-view button.pronoun:hover {
      color: #071435;
      filter: saturate(1.12) brightness(1.06);
      transform: translateY(-.7cqw) scale(1.035);
      box-shadow: inset 1.2cqw 1.1cqw 2cqw rgb(255 255 255 / 38%), inset -1.3cqw -1.5cqw 2.1cqw rgb(5 12 53 / 48%), 0 2.1cqw 2.8cqw rgb(19 37 103 / 44%);
    }

    body.orb-view .pronoun.i { top: 0; left: 5%; font: 400 8.5cqw/1 Georgia, serif; }
    body.orb-view .pronoun.he { top: 4cqw; left: 26%; font-size: 5.1cqw; }
    body.orb-view .pronoun.she { top: -1cqw; left: 51%; font: 400 3.65cqw/1 "Permanent Marker", cursive; text-transform: uppercase; }
    body.orb-view .pronoun.we { top: 5cqw; left: 76%; font: 400 4.6cqw/1 "New Rocker", fantasy; }
    body.orb-view .pronoun.they { top: 23cqw; left: 7%; font-size: 4.6cqw; }
    body.orb-view .pronoun.it { top: 19cqw; left: 38%; font: 400 4.6cqw/1 "New Rocker", fantasy; text-transform: uppercase; }
    body.orb-view .pronoun.you { top: 24cqw; left: 67%; font-size: 5.3cqw; }

    body.orb-view .satellite-system {
      position: absolute;
      z-index: 3;
      width: 21cqw;
      height: 18cqw;
      pointer-events: none;
    }

    body.orb-view .satellite-system::before {
      position: absolute;
      top: 1.5cqw;
      left: -.8cqw;
      width: 20cqw;
      height: 12cqw;
      border: .14cqw solid rgb(222 247 255 / 36%);
      border-radius: 50%;
      content: "";
      transform: rotate(-18deg);
      box-shadow: 0 0 .8cqw rgb(191 240 255 / 18%);
    }

    body.orb-view .satellite {
      position: absolute;
      display: grid;
      place-items: center;
      width: 5.2cqw;
      height: 5.2cqw;
      padding: .25cqw;
      border: .14cqw solid rgb(237 251 255 / 55%);
      border-radius: 50%;
      color: #102052;
      background:
        radial-gradient(circle at 30% 24%, white 0 4%, rgb(255 255 255 / 64%) 5%, transparent 20%),
        radial-gradient(circle at 35% 30%, #e7fbff 0%, #92e8f1 31%, #8295e5 67%, #34477f 100%);
      box-shadow: inset .6cqw .6cqw 1cqw rgb(255 255 255 / 28%), inset -.7cqw -.8cqw 1cqw rgb(20 31 84 / 35%), 0 .8cqw 1.25cqw rgb(18 38 100 / 34%);
      font: 700 1.65cqw/1 Arial, sans-serif;
      text-align: center;
      cursor: pointer;
      pointer-events: auto;
      transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
    }

    body.orb-view button.satellite:hover {
      filter: brightness(1.1) saturate(1.12);
      transform: translateY(-.25cqw) scale(1.06);
    }

    body.orb-view button.satellite:focus-visible {
      outline: .28cqw solid white;
      outline-offset: .18cqw;
    }

    .satellite-dialog {
      position: fixed;
      width: min(420px, calc(100vw - 32px));
      min-height: 250px;
      padding: 0;
      border: 1px solid rgb(211 244 255 / 68%);
      border-radius: 28px;
      background: linear-gradient(145deg, #eefbff, #bcd9ef);
      box-shadow: 0 28px 80px rgb(5 12 35 / 48%), inset 0 1px 0 white;
    }

    .satellite-dialog::backdrop {
      background: rgb(5 10 28 / 62%);
      backdrop-filter: blur(5px);
    }

    .satellite-dialog-close {
      position: absolute;
      top: 14px;
      right: 14px;
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      color: #304579;
      background: rgb(255 255 255 / 62%);
      cursor: pointer;
      font: 400 27px/1 Arial, sans-serif;
    }

    .satellite-dialog-close:hover { color: white; background: #6575d6; }
    .satellite-dialog-content { min-height: 250px; }

    body.orb-view .satellite:nth-child(1) { top: 0; right: 1.5cqw; }
    body.orb-view .satellite:nth-child(2) { top: 6.2cqw; right: -.2cqw; }
    body.orb-view .satellite:nth-child(3) { top: 12.2cqw; right: 2.5cqw; }
    body.orb-view .i-satellites { top: 0; left: 5%; }
    body.orb-view .he-satellites { top: 4cqw; left: 26%; }
    body.orb-view .she-satellites { top: -1cqw; left: 51%; }
    body.orb-view .we-satellites { top: 5cqw; left: 76%; }
    body.orb-view .they-satellites { top: 23cqw; left: 7%; }
    body.orb-view .it-satellites { top: 19cqw; left: 38%; }
    body.orb-view .you-satellites { top: 24cqw; left: 67%; }
    body.orb-view .it-satellites .satellite,
    body.orb-view .you-satellites .satellite { top: 4.5cqw; right: 0; width: 6cqw; height: 6cqw; }

    /* Every little system has its own orbit and satellite rhythm. */
    body.orb-view .he-satellites::before { transform: rotate(24deg) scaleY(.78); }
    body.orb-view .she-satellites::before { transform: rotate(-33deg) scaleX(.88); }
    body.orb-view .we-satellites::before { transform: rotate(13deg) scaleY(1.08); }
    body.orb-view .they-satellites::before { transform: rotate(31deg) scaleX(.92); }
    body.orb-view .it-satellites::before { transform: rotate(-28deg) scaleY(.8); }
    body.orb-view .you-satellites::before { transform: rotate(38deg) scaleX(.86); }

    body.orb-view .he-satellites .satellite:nth-child(1) { top: 11.5cqw; right: 3cqw; }
    body.orb-view .he-satellites .satellite:nth-child(2) { top: 4cqw; right: -1cqw; }
    body.orb-view .he-satellites .satellite:nth-child(3) { top: -.8cqw; right: 5.5cqw; }
    body.orb-view .she-satellites .satellite:nth-child(1) { top: 10.5cqw; right: 9.5cqw; }
    body.orb-view .she-satellites .satellite:nth-child(2) { top: 8cqw; right: -.4cqw; }
    body.orb-view .she-satellites .satellite:nth-child(3) { top: -.6cqw; right: 1.8cqw; }
    body.orb-view .we-satellites .satellite:nth-child(1) { top: -.8cqw; right: 4.5cqw; }
    body.orb-view .we-satellites .satellite:nth-child(2) { top: 9cqw; right: 8.5cqw; }
    body.orb-view .we-satellites .satellite:nth-child(3) { top: 11cqw; right: -.5cqw; }
    body.orb-view .they-satellites .satellite:nth-child(1) { top: 10cqw; right: 1cqw; }
    body.orb-view .they-satellites .satellite:nth-child(2) { top: 3.5cqw; right: -1cqw; }
    body.orb-view .they-satellites .satellite:nth-child(3) { top: -1cqw; right: 7cqw; }
    body.orb-view .it-satellites .satellite { top: 10cqw; right: 2cqw; }
    body.orb-view .you-satellites .satellite { top: -.8cqw; right: 3cqw; }

    /* Compact molecular clusters: satellites almost touch their planet. */
    body.orb-view .satellite-system::before { display: none; }
    body.orb-view .we-satellites { left: 76%; }
    body.orb-view .satellite {
      right: auto;
      width: 7cqw;
      height: 7cqw;
      font-size: 2cqw;
    }

    body.orb-view .i-satellites .satellite:nth-child(1) { top: -2.5cqw; left: -.8cqw; right: auto; }
    body.orb-view .i-satellites .satellite:nth-child(2) { top: 4.2cqw; left: -5.2cqw; right: auto; }
    body.orb-view .i-satellites .satellite:nth-child(3) { top: 11.8cqw; left: -2.7cqw; right: auto; }
    body.orb-view .he-satellites .satellite:nth-child(1) { top: 9cqw; left: -1cqw; right: auto; }
    body.orb-view .he-satellites .satellite:nth-child(2) { top: -1.2cqw; left: 9.2cqw; right: auto; }
    body.orb-view .he-satellites .satellite:nth-child(3) { top: 8.8cqw; left: 11.2cqw; right: auto; }
    body.orb-view .she-satellites .satellite:nth-child(1) { top: -.5cqw; left: -1cqw; right: auto; }
    body.orb-view .she-satellites .satellite:nth-child(2) { top: -1.2cqw; left: 9.2cqw; right: auto; }
    body.orb-view .she-satellites .satellite:nth-child(3) { top: 8.5cqw; left: 11.2cqw; right: auto; }
    body.orb-view .we-satellites .satellite:nth-child(1) { top: -1.2cqw; left: 1.8cqw; right: auto; }
    body.orb-view .we-satellites .satellite:nth-child(2) { top: -.2cqw; left: 10.3cqw; right: auto; }
    body.orb-view .we-satellites .satellite:nth-child(3) { top: 9.2cqw; left: 11.2cqw; right: auto; }
    body.orb-view .they-satellites .satellite:nth-child(1) { top: .5cqw; left: -4.6cqw; right: auto; }
    body.orb-view .they-satellites .satellite:nth-child(2) { top: 12.5cqw; left: 4.5cqw; right: auto; }
    body.orb-view .they-satellites .satellite:nth-child(3) { top: 1.8cqw; left: 14cqw; right: auto; }
    body.orb-view .it-satellites .satellite { top: 8.5cqw; left: 11.2cqw; right: auto; width: 6.3cqw; height: 6.3cqw; }
    body.orb-view .you-satellites .satellite { top: -1cqw; left: 11.8cqw; right: auto; width: 6.3cqw; height: 6.3cqw; }

    body.orb-view .math { display: none; }
    body.orb-view .practice-hint { bottom: 2.2cqw; }

    body.orb-view .pronoun-circle.examples-open {
      top: 48cqw;
      left: 9%;
      width: 82%;
      height: 43cqw;
      border: .2cqw solid rgb(220 246 255 / 34%);
      border-radius: 7cqw;
      background: linear-gradient(145deg, rgb(126 211 238 / 74%), rgb(67 100 190 / 82%));
      box-shadow: inset 1cqw 1cqw 2cqw rgb(255 255 255 / 18%), 0 2cqw 3cqw rgb(16 35 94 / 32%);
    }

    body.orb-view .pronoun-circle.examples-open .satellite-system { display: none; }
    body.orb-view .poster:has(.pronoun-circle.examples-open) { aspect-ratio: 920 / 880; }

    body.orb-view .pronoun-circle.examples-open .pronoun.is-active {
      top: 2cqw;
      left: 50%;
      width: 10cqw;
      height: 10cqw;
      font-size: 3.4cqw;
      transform: translateX(-50%);
    }

    body.orb-view .example-panel { inset: 7cqw 3% 1%; }

    @media (min-width: 769px) {
      body.orb-view .poster {
        width: min(920px, calc(100vw - 8px), calc((100dvh - 8px) * 1.04545));
      }
    }

    /* Separate playful page: one sphere bursts into the planet layout. */
    body.orb-feature-view .pronoun,
    body.orb-feature-view .pronoun-circle,
    body.orb-feature-view .satellite-system {
      transition:
        top .9s cubic-bezier(.2, .8, .2, 1),
        left .9s cubic-bezier(.2, .8, .2, 1),
        right .9s cubic-bezier(.2, .8, .2, 1),
        width .9s cubic-bezier(.2, .8, .2, 1),
        height .9s cubic-bezier(.2, .8, .2, 1),
        opacity .45s ease,
        transform .9s cubic-bezier(.2, .8, .2, 1),
        border-radius .7s ease,
        background .7s ease,
        box-shadow .7s ease;
    }

    body.orb-feature-view:not(.orb-view) .satellite-system { display: none; }
    body.orb-feature-view:not(.orb-view) .pronoun-circle {
      transform: scale(.9);
      transform-origin: center;
    }

    body.orb-feature-view:not(.orb-view) .planet-burst-trigger {
      z-index: 30;
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
    }

    .planet-burst-trigger {
      position: absolute;
      top: 52.45%;
      left: 5.1%;
      z-index: 12;
      display: grid;
      place-items: end center;
      width: 44.5%;
      aspect-ratio: 1;
      padding: 0 0 3.4cqw;
      border: 0;
      border-radius: 50%;
      color: white;
      background: transparent;
      cursor: pointer;
      transform: scale(.9);
      transform-origin: center;
    }

    .planet-burst-trigger span {
      padding: .65cqw 1.15cqw;
      border: .15cqw solid rgb(255 255 255 / 58%);
      border-radius: 999px;
      background: rgb(20 39 101 / 58%);
      box-shadow: 0 .5cqw 1.2cqw rgb(10 24 76 / 25%);
      font: 700 1.55cqw/1 system-ui, sans-serif;
      letter-spacing: .02em;
      backdrop-filter: blur(5px);
      animation: burst-invitation 1.3s ease-in-out infinite alternate;
    }

    .planet-burst-trigger:hover span { background: rgb(80 96 205 / 82%); }
    .planet-burst-trigger:focus-visible { outline: .35cqw solid white; outline-offset: .35cqw; }
    body.orb-feature-view.orb-view .planet-burst-trigger,
    body.orb-feature-view.is-recombining .planet-burst-trigger {
      opacity: 0;
      pointer-events: none;
    }

    .gravity-well {
      position: absolute;
      right: 2.2cqw;
      bottom: 2.2cqw;
      z-index: 35;
      display: grid;
      place-items: center;
      width: 7.5cqw;
      height: 7.5cqw;
      padding: 0;
      border: 0;
      border-radius: 50%;
      opacity: 0;
      background:
        radial-gradient(circle, #02030a 0 23%, #18215b 25% 34%, #7b60df 42%, #37d8e7 54%, transparent 66%),
        conic-gradient(from 15deg, transparent, #85f4ff, #7058d4, transparent 72%);
      box-shadow: 0 0 1.5cqw rgb(87 224 245 / 48%), inset 0 0 1cqw #050715;
      cursor: pointer;
      pointer-events: none;
      transform: scale(.25) rotate(-80deg);
      transition: opacity .3s ease, transform .55s cubic-bezier(.2, 1.4, .3, 1), filter .2s ease;
    }

    body.orb-feature-view.orb-view.pronoun-practice-mode .gravity-well,
    body.orb-feature-view.orb-view:has(.pronoun-circle.examples-open) .gravity-well {
      opacity: 0;
      pointer-events: none;
      transform: scale(.25) rotate(80deg);
    }

    .gravity-well::before,
    .gravity-well::after {
      position: absolute;
      border: .24cqw solid rgb(135 232 255 / 58%);
      border-radius: 50%;
      content: "";
    }

    .gravity-well::before { inset: -.8cqw .2cqw; transform: rotate(28deg); }
    .gravity-well::after { inset: .3cqw -1cqw; transform: rotate(-24deg); }
    .gravity-well span { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #000; box-shadow: 0 0 .7cqw #000; }

    body.orb-feature-view.orb-view .gravity-well,
    body.orb-feature-view.is-recombining .gravity-well {
      opacity: 1;
      pointer-events: auto;
      transform: scale(1) rotate(0);
      animation: gravity-spin 4.5s linear infinite;
    }

    .gravity-well:hover { filter: brightness(1.3) saturate(1.2); }
    .gravity-well:focus-visible { outline: .32cqw solid white; outline-offset: .45cqw; }

    body.orb-feature-view.is-recombining .gravity-well {
      animation: gravity-pull .5s ease-in-out infinite alternate;
    }

    body.orb-feature-view.is-recombining .satellite {
      animation: satellite-sucked .48s cubic-bezier(.7, 0, 1, .4) both;
    }

    body.orb-feature-view.is-bursting .pronoun {
      animation: planet-pop .9s cubic-bezier(.15, .8, .2, 1) both;
    }

    body.orb-feature-view.is-bursting .pronoun:nth-of-type(2) { animation-delay: .04s; }
    body.orb-feature-view.is-bursting .pronoun:nth-of-type(3) { animation-delay: .08s; }
    body.orb-feature-view.is-bursting .pronoun:nth-of-type(4) { animation-delay: .12s; }
    body.orb-feature-view.is-bursting .pronoun:nth-of-type(5) { animation-delay: .16s; }
    body.orb-feature-view.is-bursting .pronoun:nth-of-type(6) { animation-delay: .2s; }
    body.orb-feature-view.is-bursting .pronoun:nth-of-type(7) { animation-delay: .24s; }

    body.orb-feature-view.is-bursting .satellite {
      animation: satellite-pop .55s .62s cubic-bezier(.2, 1.45, .4, 1) both;
    }

    @keyframes planet-pop {
      0% { filter: brightness(1.8); }
      55% { filter: brightness(1.15); transform: scale(1.13) rotate(-3deg); }
      100% { filter: none; transform: none; }
    }

    @keyframes satellite-pop {
      from { opacity: 0; transform: scale(.15); }
      to { opacity: 1; transform: scale(1); }
    }

    @keyframes burst-invitation {
      from { transform: translateY(0) scale(1); }
      to { transform: translateY(-.25cqw) scale(1.04); }
    }

    @keyframes gravity-spin {
      to { transform: scale(1) rotate(360deg); }
    }

    @keyframes gravity-pull {
      from { transform: scale(1) rotate(0); filter: brightness(1); }
      to { transform: scale(1.18) rotate(80deg); filter: brightness(1.5); }
    }

    @keyframes satellite-sucked {
      0% { opacity: 1; transform: scale(1) rotate(0); }
      65% { opacity: .7; transform: scale(.55) rotate(160deg); }
      100% { opacity: 0; transform: scale(0) rotate(320deg); }
    }