/* Единая шапка лендинга и конструктора.
   Разметку собирает nav.js, вид описан здесь — иначе он расходится
   от страницы к странице, как было до объединения.

   Порядок подключения обязателен:
     tokens.css → собственный <style> страницы → nav.css
   Первым токены: их значения должны быть видны и странице, и шапке, но
   уступать тем, что страница переопределила у себя. Последним nav.css:
   правила одинаковой силы, побеждает последний.

   Зависимость от tokens.css жёсткая — размеры, поля и скругления здесь
   заданы токенами, без запасных значений. Запасные значения означали бы
   вторую копию шкалы, а расходятся такие копии молча. Если файл не
   подключить, шапка теряет поля и скругления: var не резолвится, свойство
   отбрасывается целиком. Ровно это и случилось на внутренних страницах,
   где стояла только nav.css. */

/* Одна линейка высот: ссылка, кнопка и аватар — по 40px. Раньше было три
   разных (38 у бургера, ~36 у ссылки, 36 у аватара) и нечётные поля 9 и 3.
   40 складывается из строки 24 и поля 8 сверху и снизу, аватар — из 32 и
   поля 4. Плюс поле таблетки 8 сверху и снизу даёт шапку ровно 56. */
.nav{position:fixed;z-index:30;top:var(--space-24);left:50%;transform:translateX(-50%);
  box-sizing:border-box;height:56px;display:flex;align-items:center;
  gap:var(--space-4);padding:0 var(--space-8);border-radius:var(--r-pill);white-space:nowrap}
/* Высоту задаём числом, а не полями: у кнопки есть рамка, и при одинаковых
   полях она выходила на два пикселя выше ссылок. С фиксированной высотой
   рамка укладывается внутрь, а вертикальное поле получается центрированием —
   его не нужно ни считать, ни записывать нечётным числом. */
.nav .link,.nav .nav-cta,.nav .nav-me,.nav .logo{box-sizing:border-box;height:40px;
  display:inline-flex;align-items:center}

/* ——— Объём шапки ———
   Плоская таблетка превращается в гнутую пластину светом, а не геометрией.
   Выгибать силуэт при высоте 52px бессмысленно: дуга в три-четыре пикселя
   на глаз не читается, зато ломает и тень, и скругления. А распределение
   бликов глаз разбирает мгновенно.
   Четыре слоя:
   1. Блик вдоль гребня — узкая светлая полоса в верхней трети. Так выглядит
      цилиндр, освещённый сверху: максимум не на самом краю, а чуть ниже.
   2. Затемнение к торцам по горизонтали. Вот это и говорит, что полоса гнутая
      поперёк: у цилиндра края уходят от света и темнеют.
   3. Кромка: светлая линия сверху, тёмная снизу — это толщина пластины.
   4. Тень в два слоя — плотная у основания и широкая рассеянная,
      иначе предмет висит без веса.
   Селектор в два класса: .glass описан в стилях каждой страницы и иначе
   перебивал бы фон и тени. */
.nav.glass{
  /* Подложку берём из токенов, а не белым напрямую: на тёмных экранах они
     тёмные, и зашитый белый выбеливал шапку целиком — ссылки цвета --ink-2
     оказывались светло-серыми по белому и пропадали.
     Объём дают три накладки поверх: блик по гребню, затемнение к торцам и
     кромка. Все три работают и по светлому, и по тёмному, потому что заданы
     прозрачным белым и прозрачным чёрным, а не конкретными цветами. */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.30) 16%,
      rgba(255,255,255,.04) 46%,
      rgba(0,0,0,0) 72%,
      rgba(0,0,0,.05) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 9%,
      rgba(0,0,0,0) 91%, rgba(0,0,0,.10) 100%),
    linear-gradient(180deg,var(--glass-strong),var(--glass));
  border:1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-inner),
    inset 0 -1px 0 rgba(0,0,0,.14),
    inset 0 -7px 14px -9px rgba(0,0,0,.22),
    0 2px 4px -2px rgba(14,17,22,.16),
    0 14px 30px -14px rgba(14,17,22,.30)}
/* Знак и начерк — два файла, а не один локап: в новом наборе они и поставлены
   порознь, и по отдельности нужны в разных местах. Расстояние между ними
   задаём здесь, а не внутри картинки, — так его можно поправить, не трогая
   исходники.

   Высоты связаны, а не подобраны на глаз. Общая горизонталь — верх и база
   прописных: у знака это вырезанное «AE» внутри плашки, у начерка — буквы
   A/L/T. Обмер файлов: «AE» занимает 599 из 1000 высоты плашки, прописные —
   510 из 540 высоты начерка. Приравниваем эти два отрезка, и направляющие
   сходятся. Оба отрезка отцентрованы в своих файлах с точностью до 0,5
   единицы, так что align-items:center ставит их на одну линию.

   Высоты ставим целыми чётными числами, а не считаем формулой. Формула
   height:calc(--logo-h * 599/1000 * 540/510) давала 17.75px и 19.02px —
   дробь в системе, где вся шкала целая. Точного совпадения на целых числах
   не существует: отношение 0.6342 несоизмеримо с шагом шкалы. Поэтому берём
   пары, где остаток меньше трети пикселя, и он не виден:
     28 / 18 — «AE» 16.77, прописные 17.00, расхождение 0.23px
     32 / 20 — «AE» 19.17, прописные 18.89, расхождение 0.28px
   Пара задаётся двумя переменными, потому что размер локапа меняется целиком,
   а не по одной половине. */
.logo-lockup{display:flex;align-items:center;gap:var(--space-12);
  --logo-h:28px; --logo-word-h:18px}
.logo-lockup img{display:block;width:auto}
.logo-lockup .logo-mark{height:var(--logo-h)}
.logo-lockup .logo-word{height:var(--logo-word-h)}
/* Слева отступ такой же, как горизонтальный отступ ссылок (14px): тогда
   от края таблетки до знака и от последней ссылки до края — поровну.
   Плотнее нельзя: знак — сплошной квадрат, он прижимается к кромке
   заметнее, чем буква. */
.nav .logo{padding:0 var(--space-12) 0 var(--space-16)}
.nav .link{padding:0 var(--space-16);border-radius:var(--r-pill);
  font-size:var(--size-14);line-height:var(--lh-16);color:var(--ink-2);
  transition:background-color var(--dur-fast),color var(--dur-fast)}
.nav .link:hover{background:var(--glass-strong);color:var(--ink)}
/* где ты сейчас — подсвечиваем тем же стеклом, что и наведение */
.nav .link[aria-current="page"]{background:var(--glass-strong);color:var(--ink)}
/* единственное основное действие в шапке — уйти в конструктор */
.nav .nav-cta{margin-left:var(--space-4);padding:0 var(--space-16);
  border-radius:var(--r-pill);font-size:var(--size-14);line-height:var(--lh-16);font-weight:500;
  color:var(--btn-ink,#fff);
  background:linear-gradient(180deg,var(--glass-dark-strong,rgba(14,17,22,.88)),var(--glass-dark,rgba(14,17,22,.78)));
  border:1px solid var(--glass-dark-edge,rgba(255,255,255,.22));
  box-shadow:inset 0 1px 0 var(--glass-dark-inner,rgba(255,255,255,.3));
  transition:transform .3s cubic-bezier(.22,1.2,.36,1)}
.nav .nav-cta:hover{transform:translateY(-1px)}
.nav .nav-cta[aria-current="page"]{opacity:.55;pointer-events:none}

/* ——— Заголовок экрана ———
   Тот же приём, что в секциях лендинга: первая строка пиксельным шрифтом,
   вторая антиквой. До этого на каждом экране заголовок был свой — Inter
   плюс серый курсив, и страницы не выглядели одной семьёй.
   Кегли взяты с лендинга один в один: 32 пиксельная, 40 антиква. */
/* капс, как у заголовков разделов на лендинге (.h-sec): внутренние экраны
   набирались строчными и выпадали из общей семьи */
.h2l{margin:0;display:grid;justify-items:start;gap:8px;letter-spacing:-.02em;
  text-transform:uppercase;font-weight:400}
.h2l .h-pix{font-family:var(--font-pixel,"Press Start 2P",monospace);font-weight:400;
  font-size:var(--size-32);line-height:var(--lh-32);letter-spacing:0}
.h2l .h-ser{font-family:var(--font-serif,"Libertinus Serif",Georgia,serif);font-weight:400;
  font-size:var(--size-40);line-height:var(--lh-40)}
.h2l.center{justify-items:center;text-align:center}
@media (max-width:760px){
  .h2l .h-pix{font-size:var(--size-20);line-height:var(--lh-20)}
  .h2l .h-ser{font-size:var(--size-24);line-height:var(--lh-24)}
}

/* ——— Пиксельные облака ———
   Тот же знак, что на лендинге: assets/hero-pixels.svg. Кладём двумя полосами
   сверху и снизу, а не на весь экран — середина остаётся чистой под контент.
   Слой живёт внутри .space, который есть на всех экранах потока. */
.space::before,.space::after{content:"";position:absolute;left:-4%;right:-4%;height:44vh;
  background-image:url(assets/hero-pixels.svg);background-repeat:no-repeat;background-size:cover;
  opacity:.5;pointer-events:none}
/* лендинг рисует облака сам, в секциях .pix-bg — второй слой ему не нужен */
.space[data-plain]::before,.space[data-plain]::after{content:none}
.space::before{top:0;background-position:center top}
.space::after{bottom:0;background-position:center bottom;transform:scaleX(-1)}
@media (max-width:760px){
  .space::before,.space::after{height:28vh;opacity:.42}
}

/* ——— Вход и аватар ———
   Пока не вошёл — в шапке «Войти». Вошёл — круглая аватарка, она же вход
   в мастерскую. «Собрать кадр» из шапки убран: действие живёт на лендинге
   и в каталоге, а в шапке нужен тот, кто ты. */
.nav .nav-me{gap:var(--space-8);margin-left:var(--space-4);
  padding:0 var(--space-12) 0 var(--space-4);
  border-radius:var(--r-pill);font-size:var(--size-14);font-weight:500;color:var(--ink);
  background:var(--glass-strong);transition:transform .3s cubic-bezier(.22,1.2,.36,1)}
.nav .nav-me:hover{transform:translateY(-1px)}
.nav .nav-me img{width:32px;height:32px;border-radius:50%;object-fit:cover;object-position:50% 22%;display:block}

/* модалка входа — одна на все страницы, собирается nav.js */
.auth{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px}
.auth[hidden]{display:none}
.auth-bg{position:absolute;inset:0;background:rgba(14,17,22,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.auth-card{position:relative;z-index:1;width:100%;max-width:400px;padding:var(--space-32);border-radius:28px;
  background:var(--surface,#fff);box-shadow:0 32px 64px -24px rgba(14,17,22,.42)}
.auth-card h2{margin:0;font-size:var(--size-24);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.auth-sub{margin:var(--space-8) 0 var(--space-24);font-size:var(--size-14);line-height:1.45;color:var(--ink-2)}
.auth-x{position:absolute;right:16px;top:16px;width:32px;height:32px;border:0;cursor:pointer;
  border-radius:var(--r-pill);display:grid;place-items:center;background:var(--bg,#EDEFF3);color:var(--ink)}
.auth-x svg{width:16px;height:16px}
.auth-f{display:grid;gap:6px;margin-bottom:12px}
.auth-f[hidden]{display:none}   /* свой display перебивает [hidden] браузера */
.auth-f span{font-size:var(--size-12);color:var(--ink-3)}
.auth-f input{height:48px;padding:0 var(--space-16);border-radius:var(--r-16);font:inherit;font-size:var(--size-16);color:var(--ink);
  background:var(--bg,#EDEFF3);border:1px solid transparent;transition:border-color .25s,background-color .25s}
.auth-f input:focus{outline:none;border-color:var(--ink);background:var(--surface,#fff)}
.auth-go{width:100%;height:56px;margin-top:var(--space-8);border:0;cursor:pointer;border-radius:var(--r-pill);
  font:inherit;font-size:var(--size-16);font-weight:500;background:var(--btn,#0E1116);color:var(--btn-ink,#fff);
  transition:transform .35s cubic-bezier(.22,1.2,.36,1)}
.auth-go:hover{transform:translateY(-2px)}
.auth-alt{margin:var(--space-16) 0 0;text-align:center;font-size:var(--size-12);color:var(--ink-2)}
.auth-alt button{border:0;background:none;padding:0;cursor:pointer;font:inherit;color:var(--ink);
  border-bottom:1px solid var(--ink)}
.auth-note{margin:var(--space-16) 0 0;font-size:var(--size-12);line-height:1.5;color:var(--ink-3);text-align:center}

/* ——— Знак действия в кнопке ———
   Вместо линейной стрелки — пиксельный треугольник, тот же знак, что стоит
   между снимками и персонажем в хиро: кнопки начинают говорить на языке
   лендинга. Прижат к правому краю, поэтому справа кнопке добавлено поле. */
.btn-main,.head-act,.go{position:relative;padding-right:var(--space-40)}
.go{padding-right:0}                      /* подпись по центру, поле не нужно */
.btn-main::after,.head-act::after,.go::after{content:"";position:absolute;
  right:var(--space-16);top:50%;translate:0 -50%;width:8px;height:14px;
  background:currentColor;opacity:.85;
  -webkit-mask:url(assets/tri-right.svg) no-repeat center/contain;
  mask:url(assets/tri-right.svg) no-repeat center/contain;
  transition:transform .3s cubic-bezier(.22,1.2,.36,1),opacity .3s ease}
.btn-main:hover::after,.head-act:hover::after,.go:hover::after{transform:translateX(4px);opacity:1}
.go:disabled::after{opacity:.4}
.head-act::after{right:var(--space-16)}
/* у кнопки со своей иконкой треугольник не нужен — иначе их две */
.btn-main:has(> svg)::after,.go:has(> svg)::after{content:none}
.btn-main:has(> svg),.go:has(> svg){padding-right:24px}
@media (prefers-reduced-motion:reduce){
  .btn-main::after,.head-act::after,.go::after{transition:none}
}

/* ——— Шаги потока ———
   Указатель, а не переключатель. Раньше на каждом экране это была стеклянная
   пилюля с залитым пунктом — под такой же пилюлей шапки; форма обещала клик,
   которого нет. Контейнер убран: цифра, подпись, подчёркивание у текущего.
   Кликаются только пройденные «Фото» и «Стиль» — это места, куда есть смысл
   вернуться. «Синтез» не кликается никогда: это процесс. */
/* ——— Индикатор шагов ———
   Отрезок на каждый шаг и одна строка подписи. Раньше здесь был ряд номеров
   с названиями: он занимал три строки на телефоне, а состояние передавал
   только тоном серого — активный шаг ничем не выделялся, кроме того что он
   не серый. Полоса показывает долю пути формой, а не цветом, и укладывается
   в две строки.
   Названия пройденных шагов полоса не показывает, но возврат к ним остаётся:
   их отрезки — ссылки. Полоса 4px как цель для клика не годится, поэтому у
   ссылки высота 16px, а видимая часть нарисована внутри. */
.steps{display:grid;gap:var(--space-8);width:min(320px,100%);margin-top:var(--space-24)}
.steps .track{display:flex;gap:var(--space-4);margin:0;padding:0;list-style:none}
.steps .track > *{flex:1;height:16px;display:grid;align-items:center;min-width:0}
.steps .track > * > i{display:block;height:4px;border-radius:2px;background:var(--hair);
  transition:background-color var(--dur-base,300ms) var(--ease,ease)}
.steps .track > .done > i,.steps .track > .on > i{background:var(--ink)}
.steps .track a:hover > i,.steps .track a:focus-visible > i{background:var(--ink-2)}
.steps .cap{display:flex;align-items:baseline;gap:var(--space-8);
  font-size:var(--size-12);line-height:var(--lh-12);color:var(--ink-2)}
.steps .cap .num{font-variant-numeric:tabular-nums}
.steps .cap .of{color:var(--ink-3)}
.steps .cap b{font-weight:500;color:var(--ink);letter-spacing:var(--track-caps,.06em);text-transform:uppercase}

/* якорные разделы: шапка висит поверх, иначе заголовок уезжает ей под низ */
#about,#how,#scenes,#styles,#privacy{scroll-margin-top:var(--space-96)}

/* ——— Бургер и выпадающее меню ———
   На широком экране ссылки лежат в самой шапке, бургер и меню не нужны. */
.nav-burger{display:none;flex:none;width:40px;height:40px;margin-left:var(--space-4,4px);
  border:0;padding:0;cursor:pointer;border-radius:var(--r-pill);place-items:center;
  background:var(--glass-strong);color:var(--ink)}
.nav-burger svg{width:20px;height:20px}
.nav-menu{display:none}

@media (max-width:760px){
  /* без space-between: логотип слева, аватарка и бургер держатся вместе справа.
     Раньше три видимых элемента расползались по всей ширине шапки. */
  .nav{top:10px;width:calc(100% - 20px);gap:0}
  /* ссылки уезжают в выпадающее меню, в самой шапке их нет */
  .nav > .link{display:none}
  /* бургер у самого правого края, аватарка слева от него */
  .nav .nav-cta,.nav .nav-me{order:1;margin-left:auto}
  .nav-burger{display:grid;order:2;margin-left:var(--space-4,4px)}
  /* у аватарки на телефоне остаётся только снимок: почта туда не влезает */
  .nav .nav-me{padding:var(--space-4)}
  .nav .nav-me span{display:none}

  .nav-menu{display:grid;position:absolute;left:0;right:0;top:calc(100% + 8px);
    padding:var(--space-8);border-radius:var(--r-24);gap:var(--space-4);
    background:var(--surface,#fff);box-shadow:0 24px 48px -20px rgba(24,32,48,.32);
    animation:nav-drop .22s cubic-bezier(.16,1,.3,1)}
  .nav-menu[hidden]{display:none}
  .nav-menu .link{display:block;width:100%;padding:var(--space-12) var(--space-16);border-radius:var(--r-16);border:0;
    background:none;font:inherit;font-size:var(--size-16);color:var(--ink);text-align:left;cursor:pointer}
  .nav-menu .link[aria-current="page"]{background:var(--glass-strong)}
  /* второй ярус — служебные разделы, тоном тише главных */
  .nav-sep{height:1px;margin:var(--space-4) var(--space-12);background:var(--hair)}
  .nav-menu .nav-sep ~ .link{font-size:var(--size-14);color:var(--ink-2)}
}
@keyframes nav-drop{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.nav-menu{animation:none}}
@media (prefers-reduced-motion:reduce){
  .nav .link,.nav .nav-cta{transition:none}
}