:root {
      --sky-top: #b7d8eb;
      --sky-bottom: #cfe7f3;

      /* курсор */

      /* форма */

      /* логотип в шапке: высота (ширина подстроится под ваш файл) */

      /* высота дуги солнца внизу экрана */
      --track-h: clamp(84px, 15vh, 140px);
      --city-h: clamp(84px, 16vh, 150px);   /* высота самых высоких домов */
      --horizon: calc(28px + env(safe-area-inset-bottom, 0px));   /* линия земли и горизонта */
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      min-height: 100%;
      margin: 0;
    }

    html {
      scroll-behavior: smooth;
      scroll-snap-type: y proximity;
    }

    html {
      background: #b7d8eb;   /* запасной цвет, пока не отрисовалось небо */
    }

    body {
      min-height: 100svh;
      overflow-x: hidden;
      color: var(--text);
      font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
      font-weight: 300;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
    }

    .title {
      margin: 0;
      font-weight: inherit;
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 0.35em;
      padding: 32px;
      text-align: center;
      text-transform: uppercase;
      font-size: clamp(22px, 3.15vw, 58px);
      line-height: 1.12;
      letter-spacing: 0.12em;
      white-space: nowrap;
    }

    .switcher {
      display: inline-grid;
      place-items: center end;
    }

    .switcher__word {
      grid-area: 1 / 1;
      will-change: opacity, transform, filter;
    }

    .switcher__word--dawn {
      animation: dawn 7s cubic-bezier(.65, 0, .35, 1) infinite;
    }

    .switcher__word--master {
      animation: master 7s cubic-bezier(.65, 0, .35, 1) infinite;
    }

    @keyframes dawn {
      0%, 40% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
      48%, 90% {
        opacity: 0;
        transform: translateY(-0.28em);
        filter: blur(5px);
      }
      98%, 100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
    }

    @keyframes master {
      0%, 40% {
        opacity: 0;
        transform: translateY(0.28em);
        filter: blur(5px);
      }
      48%, 90% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
      98%, 100% {
        opacity: 0;
        transform: translateY(-0.28em);
        filter: blur(5px);
      }
    }

    /* 22.10: если работает JS (app.js, AuroraSwitcher), слова меняет таймер —
       он ставит на .switcher класс switcher--js и атрибут data-word.
       Так смена слов не зависит от CSS-анимаций: их могут отключить
       «уменьшить движение», режим энергосбережения или блокировщик.
       Без JS остаются @keyframes выше. */
    .switcher--js .switcher__word {
      animation: none;
      display: block;
      transition:
        opacity 0.9s cubic-bezier(.65, 0, .35, 1),
        transform 1.1s cubic-bezier(.2, .8, .2, 1),
        filter 0.9s cubic-bezier(.65, 0, .35, 1),
        text-shadow 1.3s ease;
    }

    /* уходящее слово чуть поднимается и растворяется в размытии,
       приходящее поднимается снизу с мягким светом, как восход */
    .switcher--js .switcher__word--dawn {
      opacity: 1;
      transform: none;
      filter: none;
      text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }

    .switcher--js .switcher__word--master {
      opacity: 0;
      transform: translateY(0.34em) scale(0.97);
      filter: blur(7px);
      text-shadow: 0 0 28px rgba(255, 255, 255, 0.95);
      transition-delay: 0.18s;
    }

    .switcher--js[data-word="master"] .switcher__word--dawn {
      opacity: 0;
      transform: translateY(-0.34em) scale(1.02);
      filter: blur(7px);
      transition-delay: 0s;
    }

    .switcher--js[data-word="master"] .switcher__word--master {
      opacity: 1;
      transform: none;
      filter: none;
      text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }

    .switcher--js[data-word="dawn"] .switcher__word--dawn {
      transition-delay: 0.18s;
    }

    .switcher--js[data-word="dawn"] .switcher__word--master {
      transition-delay: 0s;
    }

    /* ---------- Шапка ---------- */




    /* встроенная иконка Авроры — показывается, пока нет своего логотипа */

    /* свой логотип: картинка logo.svg / logo.png */









    .brand:focus-visible,
    .site-nav a:focus-visible,
    .hero__cta:focus-visible,
    .stage-nav a:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 3px;
      border-radius: 8px;
    }

    /* ---------- Кнопка «Login» в шапке: вход в личный кабинет ---------- */

    .header-login-overlay {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background: rgba(20, 40, 60, 0.32);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
    }

    .header-login-overlay[hidden] { display: none; }

    .header-login-card {
      position: relative;
      width: min(100%, 360px);
      padding: 30px 28px 28px;
      border-radius: 22px;
      color: #ffffff;
      overflow: hidden;
      background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 40px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 40px),
        linear-gradient(45deg, #0C97FA 0%, #16E1F5 100%);
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.35),
        0 0 36px 2px rgba(22, 225, 245, 0.55),
        0 0 80px 12px rgba(12, 151, 250, 0.40);
    }

    .header-login-card__close {
      position: absolute;
      top: 14px;
      right: 16px;
      z-index: 3;
      width: 28px;
      height: 28px;
      border: none;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.18);
      color: #ffffff;
      font-size: 17px;
      line-height: 1;
      cursor: pointer;
    }

    /* ---------- тело формы: уходит на второй план, когда письмо отправлено ---------- */

    .header-login-body {
      opacity: 1;
      transform: scale(1) translateY(0);
      filter: blur(0);
      transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
    }

    .header-login-card.is-sent .header-login-body {
      opacity: 0.16;
      transform: scale(0.92) translateY(6px);
      filter: blur(3px);
      pointer-events: none;
      transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
    }

    .header-login-card h2 {
      margin: 4px 0 8px;
      font-size: 20px;
      font-weight: 400;
      letter-spacing: 0.02em;
    }

    .header-login-card p {
      margin: 0 0 20px;
      color: rgba(255, 255, 255, 0.86);
      font-size: 13.5px;
      line-height: 1.5;
    }

    .header-login-form {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .header-login-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .header-login-field span {
      color: rgba(255, 255, 255, 0.72);
      font-size: 11.5px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .header-login-field input {
      padding: 10px 12px;
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.16);
      color: #ffffff;
      font: inherit;
      font-size: 15px;
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .header-login-field input::placeholder { color: rgba(255, 255, 255, 0.6); }

    .header-login-field input:focus {
      border-color: rgba(255, 255, 255, 0.85);
      background: rgba(255, 255, 255, 0.22);
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
    }

    .header-login-submit {
      margin-top: 4px;
      padding: 11px 16px;
      border: none;
      border-radius: 999px;
      background: #ffffff;
      color: #0C97FA;
      font: inherit;
      font-size: 14.5px;
      font-weight: 500;
      letter-spacing: 0.04em;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
      transition: opacity 0.2s ease;
    }

    .header-login-submit:hover { opacity: 0.9; }
    .header-login-submit:disabled { opacity: 0.6; cursor: default; }

    .header-login-status {
      min-height: 1.3em;
      margin: 10px 0 0;
      color: rgba(255, 255, 255, 0.9);
      font-size: 13px;
      text-align: center;
    }

    .header-login-status.is-warning {
      display: inline-block;
      width: 100%;
      padding: 6px 10px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.92);
      color: #9a4a2c;
      box-sizing: border-box;
    }

    .header-login-legal {
      margin: 14px 0 0;
      font-size: 11.5px;
      line-height: 1.5;
      text-align: center;
      color: rgba(255, 255, 255, 0.75);
    }
    .header-login-legal a { color: #ffffff; text-decoration: underline; }

    /* ---------- «письмо отправлено»: проявляется поверх формы, в фокусе ---------- */

    .header-login-sent {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 30px;
      text-align: center;
      opacity: 0;
      transform: scale(0.94);
      pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .header-login-card.is-sent .header-login-sent {
      opacity: 1;
      transform: scale(1);
      pointer-events: auto;
      transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
    }

    .header-login-sent__icon {
      width: 56px;
      height: 56px;
      margin: 0 auto 18px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.22);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 30px 6px rgba(255, 255, 255, 0.55);
    }

    .header-login-sent__icon svg {
      width: 26px;
      height: 26px;
      fill: none;
      stroke: #ffffff;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .header-login-sent__text {
      margin: 0;
      font-size: 15.5px;
      font-weight: 500;
      line-height: 1.5;
      color: #ffffff;
      text-shadow: 0 0 18px rgba(255, 255, 255, 0.85), 0 0 36px rgba(22, 225, 245, 0.7);
    }

    /* ---------- Этапы ---------- */

    .stage {
      position: relative;
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: clamp(14px, 3vh, 30px);
      padding: 96px 16px calc(var(--track-h) + 56px);
      scroll-snap-align: start;
    }

    .stage__head {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
    }

    .stage__eyebrow {
      margin: 0;
      color: var(--ink-soft);
      font-size: 14px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
    }

    .stage__title {
      margin: 0;
      font-size: clamp(20px, 5vw, 34px);
      font-weight: inherit;
      letter-spacing: 0.12em;
      line-height: 1.15;
      text-transform: uppercase;
    }

    .hero__cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 30px;
      border: 1px solid var(--ink);
      border-radius: 999px;
      color: var(--ink);
      font-size: 16px;
      letter-spacing: 0.14em;
      text-decoration: none;
      transition: background-color 0.3s ease;
    }

    .hero__cta:hover {
      background: rgba(var(--surface-rgb), 0.4);
    }

    .hero__cta svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform 0.35s cubic-bezier(.2, .8, .2, 1);
    }

    .hero__cta:hover svg {
      transform: translateY(3px);
    }

    /* индикатор этапов справа */
    .stage-nav {
      position: fixed;
      top: 50%;
      right: clamp(12px, 2vw, 28px);
      z-index: 40;
      display: flex;
      flex-direction: column;
      gap: 6px;
      transform: translateY(-50%);
    }

    .stage-nav a {
      position: relative;
      display: block;
      width: 18px;
      height: 18px;
    }

    .stage-nav a::before {
      content: "";
      position: absolute;
      inset: 4px;
      border: 1px solid var(--ink);
      border-radius: 50%;
      transition: background-color 0.3s ease;
    }

    .stage-nav a[aria-current="true"]::before {
      background: var(--ink-solid);
    }

    @media (max-width: 700px) {
      .stage-nav {
        display: none;
      }
    }

    @media (max-width: 560px) {

      .site-nav__label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
      }

    }

    /* ---------- Небо и путь солнца (задний фон) ---------- */

    main {
      position: relative;
      z-index: 1;
    }

    /* цвета неба и положение свечения задаёт скрипт в зависимости от часа */
    .sky {
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      background:
        radial-gradient(
          ellipse 55vmax 42vmax at var(--sun-x, 8%) var(--sun-y, 100%),
          rgba(255, 250, 236, 0.62) 0%,
          rgba(255, 250, 236, 0.22) 42%,
          rgba(255, 250, 236, 0) 72%
        ),
        linear-gradient(
          180deg,
          var(--sky-top, #b7d8eb) 0%,
          var(--sky-mid, #c3dfef) 52%,
          var(--sky-bottom, #cfe7f3) 100%
        );
    }

    .sun-track {
      position: fixed;
      left: 50%;
      bottom: calc(var(--horizon) - 14px);
      z-index: -1;
      width: min(920px, calc(100vw - 2 * clamp(32px, 8vw, 96px)));
      height: calc(var(--track-h) + 14px);
      transform: translateX(-50%);
      pointer-events: none;
    }

    .sun-track__svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: var(--track-h);
      overflow: visible;
    }

    /* весь путь — точками, пройденная часть — сплошной нитью */
    .track-full {
      fill: none;
      stroke: rgba(var(--surface-rgb), 0.85);
      stroke-width: 1.5;
      stroke-dasharray: 0.1 7;
      stroke-linecap: round;
    }

    .track-done {
      fill: none;
      stroke: rgba(var(--surface-rgb), 0.98);
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .tick {
      position: absolute;
      top: 0;
      left: 0;
      width: 9px;
      height: 9px;
      margin: -4.5px 0 0 -4.5px;
      border: 1.4px solid rgba(var(--surface-rgb), 0.95);
      border-radius: 50%;
      transition: background-color 0.5s ease, opacity 0.5s ease;
    }

    .tick.is-passed {
      background: #fff;
    }

    .tick.is-planned {
      opacity: 0.5;
    }

    .sun {
      position: absolute;
      top: 0;
      left: 0;
      width: 26px;
      height: 26px;
      margin: -13px 0 0 -13px;
      border-radius: 50%;
      background: radial-gradient(circle at 38% 36%, #fffef7 0%, #fff1bd 48%, #ffe294 100%);
      box-shadow:
        0 0 14px 4px rgba(255, 238, 176, 0.7),
        0 0 44px 16px rgba(255, 246, 214, 0.5);
      will-change: transform;
    }

    .sun::after {
      content: "";
      position: absolute;
      inset: -16px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 242, 196, 0.5), rgba(255, 242, 196, 0) 68%);
      animation: sun-breathe 6s ease-in-out infinite;
    }

    @keyframes sun-breathe {
      0%, 100% {
        opacity: 0.55;
        transform: scale(0.92);
      }
      50% {
        opacity: 1;
        transform: scale(1.12);
      }
    }

    /* ---------- Стройка и город на линии горизонта ---------- */

    .city {
      position: fixed;
      right: 0;
      bottom: var(--horizon);
      left: 0;
      z-index: -1;
      height: var(--city-h);
      pointer-events: none;
    }

    .city__svg,
    .city__dozers {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .city-ground {
      stroke: rgba(var(--surface-rgb), 0.7);
      stroke-width: 1;
    }

    .bld {
      fill: rgba(var(--surface-rgb), 0.55);
      stroke: var(--ink-soft);
      stroke-opacity: 0.4;
      stroke-width: 1;
    }

    .bld--far {
      fill: rgba(var(--surface-rgb), 0.32);
      stroke: none;
    }

    .skel,
    .win {
      stroke: none;
    }

    .pat-line {
      fill: none;
      stroke: var(--ink-soft);
      stroke-opacity: 0.35;
      stroke-width: 1;
    }

    .pat-win {
      fill: rgba(var(--surface-rgb), 0.95);
    }

    /* башенные краны: тонкие линии, стрела медленно поворачивается */
    .crane__line {
      fill: none;
      stroke: var(--ink-soft);
      stroke-width: 1;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.85;
    }

    .crane__fill {
      fill: var(--ink-soft);
      opacity: 0.75;
    }

    .crane__jib {
      animation: crane-slew var(--slew, 14s) ease-in-out infinite alternate;
    }

    .crane__trolley {
      animation: crane-trolley 9s ease-in-out infinite alternate;
    }

    .crane__cable {
      transform-box: view-box;
      transform-origin: 46px 0;
      animation: crane-cable 7s ease-in-out infinite alternate;
    }

    .crane__load {
      animation: crane-load 7s ease-in-out infinite alternate;
    }

    @keyframes crane-slew {
      from { transform: scaleX(1); }
      to   { transform: scaleX(0.3); }
    }

    @keyframes crane-trolley {
      from { transform: translateX(0); }
      to   { transform: translateX(-22px); }
    }

    @keyframes crane-cable {
      from { transform: scaleY(0.7); }
      to   { transform: scaleY(1.15); }
    }

    @keyframes crane-load {
      from { transform: translateY(-6.6px); }
      to   { transform: translateY(3.3px); }
    }

    /* птица: пролетает слева направо в ранние часы (6:00 и 7:00) */
    .bird {
      position: fixed;
      top: clamp(96px, 24vh, 260px);
      left: 0;
      z-index: 4;
      pointer-events: none;
      opacity: 0;
      transition: opacity 1.4s ease;
      animation: bird-x 30s linear 2s infinite both;
    }

    html[data-hour="6"] .bird,
    html[data-hour="7"] .bird {
      opacity: 1;
    }

    /* сама птица кликабельна — кружок курсора над ней уже раскрывается как над кнопкой */
    .bird__btn {
      appearance: none;
      display: block;
      margin: -8px;
      padding: 8px;
      border: 0;
      background: none;
      pointer-events: auto;
      cursor: pointer;
    }

    .bird__btn:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 3px;
      border-radius: 10px;
    }

    .bird__svg {
      display: block;
      width: 40px;
      height: auto;
      overflow: visible;
      animation: bird-y 30s ease-in-out 2s infinite both;
    }

    .bird__svg path {
      fill: none;
      stroke: var(--ink-soft);
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .bird__body {
      fill: var(--ink-soft);
    }

    /* птицу трогают — она вздрагивает; крылья и полёт задают свой transform выше по дереву,
       поэтому дрожь вешаем на отдельную обёртку, чтобы анимации не конфликтовали */
    .bird__shake {
      display: block;
      transform-box: fill-box;
    }

    .bird--startled .bird__shake {
      animation: bird-shudder 0.5s ease;
    }

    @keyframes bird-shudder {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      15%  { transform: translate(-1.5px, -1px) rotate(-7deg); }
      30%  { transform: translate(1.5px, 1px) rotate(6deg); }
      45%  { transform: translate(-1.5px, 1px) rotate(-5deg); }
      60%  { transform: translate(1.5px, -1px) rotate(4deg); }
      80%  { transform: translate(-1px, 0) rotate(-2deg); }
    }

    /* белый кружок — реакция на клик, падает и тает */
    .bird__poop {
      fill: #fff;
      stroke: rgba(70, 100, 122, 0.25);
      stroke-width: 0.4;
      opacity: 0;
      transform-box: fill-box;
      transform-origin: center;
    }

    .bird--pooping .bird__poop {
      animation: bird-poop 0.9s cubic-bezier(.4, 0, .2, 1) both;
    }

    @keyframes bird-poop {
      0%   { opacity: 0; transform: translateY(0) scale(0.5); }
      12%  { opacity: 1; transform: translateY(1px) scale(1); }
      100% { opacity: 0; transform: translateY(20px) scale(0.75); }
    }

    .bird__wing {
      transform-box: view-box;
      transform-origin: 22px 11px;
    }

    .bird__wing--l {
      animation: flap-l 1.1s ease-in-out infinite alternate;
    }

    .bird__wing--r {
      animation: flap-r 1.1s ease-in-out infinite alternate;
    }

    @keyframes flap-l {
      from { transform: rotate(16deg); }
      to   { transform: rotate(-10deg); }
    }

    @keyframes flap-r {
      from { transform: rotate(-16deg); }
      to   { transform: rotate(10deg); }
    }

    /* полёт ~12 секунд, затем пауза до следующего пролёта */
    @keyframes bird-x {
      0%   { transform: translate3d(-8vw, 0, 0); }
      40%  { transform: translate3d(108vw, 0, 0); }
      100% { transform: translate3d(108vw, 0, 0); }
    }

    @keyframes bird-y {
      0%   { transform: translateY(26px); }
      10%  { transform: translateY(6px); }
      20%  { transform: translateY(22px); }
      30%  { transform: translateY(-8px); }
      40%  { transform: translateY(-30px); }
      100% { transform: translateY(-30px); }
    }

    /* гравюра (18.10): клик по чайке — эффект «вспышка молнии высвечивает
       линии гравюры прямо на сцене», не попап. Макет и обсуждение дизайна:
       https://claude.ai/artifact/D6r1am5cChnwuTq1f3qCVW
       Слой на весь экран (как раньше .planes), поверх сцены, под шапкой:
       .engraving__beam  — размытое световое пятно сверху по центру;
       .engraving__glow  — лёгкая подсветка всей сцены;
       .engraving__whiteout — ослепляющая вспышка (mix-blend: screen —
         подсвечивает, а не закрашивает);
       .engraving__art   — сама картинка (<img> внутри #engravingArt),
         две вспышки яркости (80%, затем 100%) и плавное затухание;
       .engraving__art-white — та же картинка маской (mask-mode: alpha,
         цвет маски не важен — только альфа-канал) залитой белым: чистым
         чёрным линиям brightness() не может добавить белизны (0 × что
         угодно = 0), поэтому пик вспышки белит их этим отдельным слоем.
       Запуск/тема/выбор размера — AuroraEngraving в app.js. */
    .engraving {
      position: fixed;
      inset: 0;
      z-index: 4;
      overflow: hidden;
      pointer-events: none;
    }

    .engraving__beam {
      position: absolute;
      top: -25%;
      left: 50%;
      width: 130%;
      height: 95%;
      transform: translateX(-50%);
      background: radial-gradient(closest-side, rgba(225, 238, 255, 0.95), rgba(225, 238, 255, 0.35) 45%, rgba(225, 238, 255, 0) 72%);
      filter: blur(32px);
      opacity: 0;
      mix-blend-mode: screen;
    }

    .engraving__beam.is-flashing {
      animation: engraving-beam-flash 2.6s cubic-bezier(.16, .6, .18, 1) both;
    }

    @keyframes engraving-beam-flash {
      0%   { opacity: 0; }
      6%   { opacity: 0.7; }
      14%  { opacity: 0.1; }
      22%  { opacity: 1; }
      32%  { opacity: 0.55; }
      50%  { opacity: 0.24; }
      70%  { opacity: 0.08; }
      100% { opacity: 0; }
    }

    .engraving__glow {
      position: absolute;
      inset: 0;
      background: radial-gradient(60% 55% at 50% 42%, rgba(210, 230, 255, 0.5), rgba(210, 230, 255, 0) 70%);
      opacity: 0;
      mix-blend-mode: screen;
    }

    .engraving__glow.is-flashing {
      animation: engraving-glow-flash 2.6s cubic-bezier(.16, .6, .18, 1) both;
    }

    @keyframes engraving-glow-flash {
      0%   { opacity: 0; }
      6%   { opacity: 0.6; }
      14%  { opacity: 0.08; }
      22%  { opacity: 0.75; }
      32%  { opacity: 0.4; }
      50%  { opacity: 0.2; }
      70%  { opacity: 0.08; }
      100% { opacity: 0; }
    }

    .engraving__whiteout {
      position: absolute;
      inset: 0;
      background: #fff;
      opacity: 0;
      mix-blend-mode: screen;
    }

    .engraving__whiteout.is-flashing {
      animation: engraving-whiteout-flash 2.6s cubic-bezier(.16, .6, .18, 1) both;
    }

    @keyframes engraving-whiteout-flash {
      0%   { opacity: 0; }
      5%   { opacity: 0.6; }
      9%   { opacity: 0.05; }
      20%  { opacity: 0.35; }
      24%  { opacity: 0.92; }
      30%  { opacity: 0.12; }
      40%  { opacity: 0.03; }
      100% { opacity: 0; }
    }

    .engraving__art {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      filter: brightness(1) drop-shadow(0 0 0 rgba(190, 220, 255, 0));
      pointer-events: none;
    }

    .engraving__art.is-flashing {
      animation: engraving-lightning 2.6s cubic-bezier(.16, .6, .18, 1) both;
    }

    @keyframes engraving-lightning {
      0%   { opacity: 0; filter: brightness(1) drop-shadow(0 0 0 rgba(190, 220, 255, 0)); }
      6%   { opacity: 0.8; filter: brightness(2.6) drop-shadow(0 0 30px rgba(190, 220, 255, 0.9)); }
      14%  { opacity: 0.3; filter: brightness(1.3) drop-shadow(0 0 10px rgba(190, 220, 255, 0.4)); }
      22%  { opacity: 1; filter: brightness(4.2) drop-shadow(0 0 55px rgba(200, 228, 255, 1)) drop-shadow(0 0 110px rgba(200, 228, 255, 0.6)); }
      32%  { opacity: 0.85; filter: brightness(2) drop-shadow(0 0 30px rgba(190, 220, 255, 0.55)); }
      50%  { opacity: 0.5; filter: brightness(1.25) drop-shadow(0 0 12px rgba(190, 220, 255, 0.3)); }
      70%  { opacity: 0.26; filter: brightness(1.1) drop-shadow(0 0 0 rgba(190, 220, 255, 0)); }
      100% { opacity: 0; filter: brightness(1) drop-shadow(0 0 0 rgba(190, 220, 255, 0)); }
    }

    .engraving__art-white {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background: #fff;
      opacity: 0;
      -webkit-mask-size: cover;
      mask-size: cover;
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-mode: alpha;
      mask-mode: alpha;
      mix-blend-mode: screen;
      pointer-events: none;
    }

    .engraving__art-white.is-flashing {
      animation: engraving-white-flash 2.6s cubic-bezier(.16, .6, .18, 1) both;
    }

    @keyframes engraving-white-flash {
      0%   { opacity: 0; }
      6%   { opacity: 0.95; }
      14%  { opacity: 0.08; }
      22%  { opacity: 1; }
      30%  { opacity: 0.25; }
      38%  { opacity: 0; }
      100% { opacity: 0; }
    }

    /* баннер-объявление (праздник) — яркая плашка в самом верху страницы;
       текст/логика — index.html и app.js (AuroraPlanAnnounce). Цвета
       фиксированные (не из темы), т.к. плашка праздничная и не должна
       зависеть от времени суток сцены.
       Шапка сайта (.site-header) — position: fixed и перекрывает начало
       страницы, поэтому баннер «прилипает» сразу под ней (position: sticky,
       отступ сверху — переменная --announce-top, её меряет и обновляет
       app.js по реальной высоте шапки — она меняется при скролле и на
       телефоне). z-index ниже, чем у шапки (50), — баннер не перекрывает её. */
    .announce {
      position: sticky;
      top: var(--announce-top, 72px);
      z-index: 49;
      overflow: hidden;
      background: linear-gradient(118deg, #ff3d77 0%, #ff6a3d 46%, #ffc93d 100%);
      box-shadow: 0 10px 30px rgba(190, 40, 90, 0.35);
      font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
    }

    .announce--hidden {
      display: none;
    }

    /* фаза «коротко»: 3 дня после праздника баннер показывает только одну
       строку с покачивающимся эмодзи — см. ANNOUNCE_PHASES в app.js */
    .announce--simple .announce__badge,
    .announce--simple .announce__detail {
      display: none;
    }

    .announce--simple .announce__inner {
      padding: 22px 32px;
      gap: 0;
    }

    .announce--simple .announce__title {
      font-size: 26px;
    }

    .announce__emoji {
      display: inline-block;
      animation: announce-wiggle 1.1s ease-in-out infinite;
    }

    .announce__emoji--2 {
      animation-delay: .3s;
    }

    @keyframes announce-wiggle {
      0%, 100% { transform: rotate(-9deg); }
      50% { transform: rotate(9deg); }
    }

    .announce__confetti {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .announce__dot {
      position: absolute;
      border-radius: 4px;
      animation: announce-bob 3.2s ease-in-out infinite;
    }

    .announce__dot--1 { top: 14%; left: 6%;  width: 14px; height: 14px; border-radius: 4px;  background: #fff3b0; animation-duration: 3.2s; }
    .announce__dot--2 { top: 62%; left: 3%;  width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: .85; animation-duration: 2.6s; animation-delay: .4s; }
    .announce__dot--3 { top: 30%; left: 13%; width: 9px;  height: 18px; border-radius: 3px; background: #7de0c3; transform: rotate(-24deg); animation-duration: 3.6s; animation-delay: .8s; }
    .announce__dot--4 { top: 70%; right: 22%; width: 13px; height: 13px; border-radius: 4px; background: #fff3b0; transform: rotate(-18deg); animation-duration: 2.9s; animation-delay: .9s; }
    .announce__dot--5 { top: 20%; right: 12%; width: 9px;  height: 17px; border-radius: 3px; background: #fff; opacity: .75; transform: rotate(30deg); animation-duration: 3.3s; animation-delay: .1s; }
    .announce__dot--6 { top: 66%; right: 8%;  width: 11px; height: 11px; border-radius: 50%; background: #ff8fb1; animation-duration: 2.7s; animation-delay: .7s; }
    .announce__dot--7 { top: 38%; right: 5%;  width: 12px; height: 12px; border-radius: 3px; background: #ffd23d; transform: rotate(22deg); animation-duration: 3.5s; animation-delay: .5s; }
    .announce__dot--8 { top: 10%; left: 23%; width: 11px; height: 11px; border-radius: 3px; background: #fff; opacity: .7; transform: rotate(40deg); animation-duration: 2.8s; animation-delay: 1s; }

    .announce__star {
      position: absolute;
      width: 30px;
      height: 30px;
      fill: #fff;
      opacity: .85;
      animation: announce-bob 3.4s ease-in-out infinite;
    }

    .announce__star--1 { top: 46%; left: 7%;  width: 34px; height: 34px; }
    .announce__star--2 { bottom: 12%; left: 33%; width: 26px; height: 26px; fill: #fff3b0; animation-delay: .6s; }
    .announce__star--3 { top: 8%; right: 34%; fill: #7de0c3; animation-delay: .3s; }

    @keyframes announce-bob {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }

    .announce__close {
      position: absolute;
      top: 16px;
      right: 20px;
      z-index: 2;
      width: 34px;
      height: 34px;
      border: none;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.18);
      color: #fff;
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      transition: background 0.15s ease;
    }

    .announce__close:hover {
      background: rgba(255, 255, 255, 0.32);
    }

    .announce__inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 18px;
      max-width: 880px;
      margin: 0 auto;
      padding: 40px 56px;
    }

    .announce__badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.26);
      color: #fff;
      font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 7px 16px;
      border-radius: 999px;
    }

    .announce__title {
      margin: 0;
      font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
      font-weight: 700;
      font-size: 44px;
      line-height: 1.12;
      letter-spacing: -0.01em;
      color: #fff;
      text-shadow: 0 3px 14px rgba(0, 0, 0, 0.2);
    }

    .announce__text {
      margin: 0;
      max-width: 640px;
      font-size: 23px;
      line-height: 1.45;
      font-weight: 700;
      color: #fff;
      text-shadow: 0 1px 6px rgba(0, 0, 0, 0.14);
    }

    .announce__cta {
      margin-top: 6px;
      border: none;
      cursor: pointer;
      font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
      font-weight: 700;
      font-size: 18px;
      padding: 16px 38px;
      border-radius: 999px;
      background: #fff;
      color: #e8265a;
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
      white-space: nowrap;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .announce__cta:hover {
      transform: translateY(-1px) scale(1.03);
      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
    }

    @media (max-width: 640px) {
      .announce__inner {
        padding: 32px 24px;
      }

      .announce__title {
        font-size: 26px;
      }

      .announce__text {
        font-size: 18px;
      }
    }

    /* табличка на кране — так девелоперы подписывают краны своим брендом */
    .crane__sign-plate {
      fill: rgba(10, 30, 46, 0.82);
      stroke: var(--cursor-color);
      stroke-width: 1;
    }

    .crane__sign-text {
      fill: var(--cursor-color);
      font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
      font-size: 7px;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-anchor: middle;
      filter:
        drop-shadow(0 0 1.5px var(--cursor-color))
        drop-shadow(0 0 5px var(--cursor-color));
      animation: neon-flicker 5s ease-in-out infinite;
    }

    @keyframes neon-flicker {
      0%, 82%, 86%, 100% { opacity: 1; }
      84% { opacity: 0.55; }
    }

    /* бульдозеры: подготовка площадки на раннем этапе, до начала строительства */
    .dozer {
      transform-box: view-box;
    }

    .dozer__body {
      fill: rgba(var(--surface-rgb), 0.62);
      stroke: var(--ink-soft);
      stroke-width: 1;
    }

    .dozer__blade {
      fill: var(--ink-soft);
      opacity: 0.7;
    }

    .dozer__track {
      fill: var(--ink-soft);
      opacity: 0.55;
    }

    .dozer--a {
      animation: dozer-a 9s ease-in-out infinite;
    }

    .dozer--b {
      animation: dozer-b 11s ease-in-out infinite;
    }

    @keyframes dozer-a {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(46px); }
    }

    @keyframes dozer-b {
      0%, 100% { transform: translateX(0) scaleX(-1); }
      50% { transform: translateX(-40px) scaleX(-1); }
    }

    /* ---------- Этап 4: вход в личный кабинет ---------- */

    .login__lead {
      max-width: 46ch;
      margin: 0;
      color: var(--ink-soft);
      font-size: 14px;
      line-height: 1.5;
      text-align: center;
    }

    .login {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      width: min(100%, 340px);
    }

    .login__field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
    }

    .login__label {
      color: var(--ink-soft);
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .login__input {
      width: 100%;
      padding: 10px 0 12px;
      border: 0;
      border-bottom: 1px solid rgba(var(--surface-rgb), 0.75);
      border-radius: 0;
      background: transparent;
      color: var(--text);
      font: inherit;
      font-size: 17px;
      letter-spacing: 0.02em;
      caret-color: var(--cursor-color);
      outline: none;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .login__input:focus {
      border-bottom-color: #fff;
      box-shadow: 0 1px 0 #fff;
    }

    .login__submit {
      margin-top: 6px;
      background: transparent;
      cursor: pointer;
    }

    .login__status {
      min-height: 1.4em;
      margin: 0;
      color: var(--ink);
      font-size: 14px;
      letter-spacing: 0.06em;
      text-align: center;
    }

    .login__status.is-warning {
      color: #9a4a2c;
    }

    .login__status.is-warning::before {
      content: "!";
      display: inline-grid;
      place-items: center;
      width: 16px;
      height: 16px;
      margin-right: 8px;
      border: 1px solid currentColor;
      border-radius: 50%;
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      vertical-align: 1px;
    }

    /* ---------- Регистрация для первых пользователей ---------- */

    .signup {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
      width: min(100%, 340px);
    }

    .signup__divider {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      color: var(--ink-soft);
      font-size: 12px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .signup__divider span {
      flex: 1;
      height: 1px;
      background: rgba(var(--surface-rgb), 0.6);
    }

    .signup__promo {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 10px;
    }

    .signup__badge {
      position: absolute;
      top: -6px;
      left: 50%;
      padding: 4px 12px;
      border: 1px solid rgba(var(--surface-rgb), 0.85);
      border-radius: 999px;
      transform: translateX(-50%);
      background: rgba(var(--surface-rgb), 0.5);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      color: var(--ink);
      font-size: 11px;
      letter-spacing: 0.1em;
      white-space: nowrap;
    }

    .signup__circle {
      appearance: none;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      width: 116px;
      height: 116px;
      margin-top: 10px;
      border: 1px solid var(--ink);
      border-radius: 50%;
      background:
        radial-gradient(circle at 34% 30%, rgba(var(--surface-rgb), 0.85), rgba(var(--surface-rgb), 0.35) 62%, rgba(var(--surface-rgb), 0.18) 100%);
      color: var(--ink);
      font: inherit;
      transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), box-shadow 0.35s ease, background-color 0.35s ease;
    }

    .signup__circle::before {
      content: "";
      position: absolute;
      inset: -7px;
      border: 1px dashed rgba(var(--cursor-rgb), 0.55);
      border-radius: 50%;
      animation: signup-ring 16s linear infinite;
    }

    .signup__circle:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 26px rgba(var(--cursor-rgb), 0.28);
    }

    .signup__circle:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 4px;
    }

    .signup__circle[aria-expanded="true"] {
      background: rgba(var(--surface-rgb), 0.62);
    }

    .signup__circle-spark {
      width: 20px;
      height: 20px;
      fill: var(--cursor-color);
      transition: transform 0.5s cubic-bezier(.2, .8, .2, 1);
    }

    .signup__circle:hover .signup__circle-spark {
      transform: scale(1.15) rotate(24deg);
    }

    .signup__circle-text {
      font-size: 13px;
      letter-spacing: 0.06em;
    }

    @keyframes signup-ring {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    .signup__panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      width: 100%;
      overflow: hidden;
      animation: signup-panel-in 0.4s cubic-bezier(.2, .8, .2, 1) both;
    }

    .signup__panel[hidden] {
      display: none;
    }

    @keyframes signup-panel-in {
      from {
        opacity: 0;
        transform: translateY(-8px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    .signup__submit {
      background: transparent;
      cursor: pointer;
    }

    .signup__submit svg {
      fill: var(--cursor-color);
      stroke: none;
    }

    /* ---------- Праздничный экран после регистрации ---------- */

    .celebrate {
      position: fixed;
      inset: 0;
      z-index: 300;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .celebrate[hidden] {
      display: none;
    }

    .celebrate__scrim {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at var(--burst-x, 50%) var(--burst-y, 82%), rgba(24, 34, 48, 0.35), rgba(10, 16, 26, 0.72) 78%);
      opacity: 0;
      animation: celebrate-scrim 0.5s ease forwards;
    }

    @keyframes celebrate-scrim {
      to { opacity: 1; }
    }

    .celebrate__sparks {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .spark {
      position: absolute;
      top: -5vh;
      width: 8px;
      height: 8px;
      clip-path: polygon(50% 0%, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0% 50%, 37% 37%);
      opacity: 0;
      animation-name: spark-fall;
      animation-timing-function: cubic-bezier(.3, .1, .4, 1);
      animation-fill-mode: forwards;
    }

    @keyframes spark-fall {
      0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.6); }
      8%   { opacity: 1; }
      85%  { opacity: 1; }
      100% { opacity: 0; transform: translate(var(--drift, 40px), 112vh) rotate(400deg) scale(1); }
    }

    .celebrate__burst {
      position: absolute;
      top: var(--burst-y, 82%);
      left: var(--burst-x, 50%);
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: radial-gradient(circle, #fff 0%, #ffe9b0 32%, rgba(255, 233, 176, 0) 72%);
      transform: translate(-50%, -50%) scale(0);
      animation: celebrate-burst 0.7s cubic-bezier(.2, .8, .3, 1) both;
    }

    @keyframes celebrate-burst {
      0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
      55%  { transform: translate(-50%, -50%) scale(14); opacity: 0.9; }
      100% { transform: translate(-50%, -50%) scale(22); opacity: 0; }
    }

    /* белая вспышка на весь экран в момент взрыва */
    .celebrate__flash {
      position: absolute;
      inset: 0;
      background: #fff;
      opacity: 0;
      animation: celebrate-flash 0.55s ease-out both;
    }

    @keyframes celebrate-flash {
      0%   { opacity: 0; }
      12%  { opacity: 0.85; }
      100% { opacity: 0; }
    }

    /* лучи, вылетающие из взорвавшегося солнца */
    .celebrate__ray {
      position: absolute;
      top: var(--burst-y, 82%);
      left: var(--burst-x, 50%);
      height: var(--ray-w, 3px);
      width: 0;
      border-radius: 3px;
      background: linear-gradient(90deg, #fff 0%, var(--ray-color, #ffe294) 38%, rgba(255, 233, 176, 0) 100%);
      filter: drop-shadow(0 0 5px var(--ray-color, #ffe294));
      transform: translateY(-50%) rotate(var(--angle, 0deg)) scaleX(0);
      transform-origin: 0% 50%;
      opacity: 0;
      animation: ray-burst 0.9s cubic-bezier(.15, .7, .25, 1) both;
      animation-delay: var(--ray-delay, 0s);
    }

    @keyframes ray-burst {
      0%   { opacity: 0; transform: translateY(-50%) rotate(var(--angle, 0deg)) scaleX(0); }
      14%  { opacity: 1; }
      50%  { opacity: 1; transform: translateY(-50%) rotate(var(--angle, 0deg)) scaleX(1); }
      100% { opacity: 0; transform: translateY(-50%) rotate(var(--angle, 0deg)) scaleX(1.2); }
    }

    /* само солнце «взрывается» — гаснет вспышкой на месте и загорается снова */
    .sun.sun--boom {
      animation: sun-boom 1s ease both;
    }

    @keyframes sun-boom {
      0%   { opacity: 1; filter: brightness(1); }
      22%  { opacity: 1; filter: brightness(2.4); }
      34%  { opacity: 0; }
      78%  { opacity: 0; }
      100% { opacity: 1; filter: brightness(1); }
    }

    .celebrate__card {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: min(88vw, 360px);
      padding: 34px 28px 30px;
      border: 1px solid rgba(var(--surface-rgb), 0.7);
      border-radius: 22px;
      background: rgba(var(--surface-rgb), 0.16);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
      color: #fff;
      text-align: center;
      opacity: 0;
      transform: translateY(14px) scale(0.96);
      animation: celebrate-card-in 0.55s 0.35s cubic-bezier(.2, .8, .2, 1) forwards;
    }

    @keyframes celebrate-card-in {
      to {
        opacity: 1;
        transform: none;
      }
    }

    .celebrate__star {
      width: 46px;
      height: 46px;
      margin-bottom: 4px;
      fill: #ffd873;
      filter: drop-shadow(0 0 10px rgba(255, 216, 115, 0.85));
      animation: celebrate-star-spin 2.4s ease-in-out 0.35s both;
    }

    @keyframes celebrate-star-spin {
      0%   { transform: scale(0) rotate(-40deg); }
      55%  { transform: scale(1.15) rotate(14deg); }
      100% { transform: scale(1) rotate(0deg); }
    }

    .celebrate__title {
      margin: 0;
      font-size: 26px;
      font-weight: 400;
      letter-spacing: 0.04em;
    }

    .celebrate__text {
      margin: 0;
      max-width: 34ch;
      color: rgba(var(--surface-rgb), 0.88);
      font-size: 14px;
      line-height: 1.5;
    }

    .celebrate__close {
      margin-top: 10px;
      border-color: #fff;
      color: #fff;
    }

    .celebrate__close:hover {
      background: rgba(var(--surface-rgb), 0.18);
    }

    .celebrate__close:focus-visible {
      outline: 2px solid #fff;
    }

    /* ---------- Этап 3: выбор вида работ ---------- */

    .stage[hidden],
    .stage-nav a[hidden] {
      display: none;
    }

    .stage__title:focus {
      outline: none;
    }

    .plots-summary {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      border: 1px solid var(--ink);
      border-radius: 999px;
      color: var(--ink);
      font-size: 13px;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.06em;
    }

    .chip--main {
      background: var(--ink-solid);
      color: #fff;
    }

    .chip svg {
      width: 14px;
      height: 14px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* ---------- Название проекта (этап 3, перед выбором вида работ) ---------- */

    .project-name {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: min(100%, 420px);
      margin: 4px 0 6px;
    }

    .project-name__label {
      color: var(--ink-soft);
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-align: center;
    }

    .project-name__input {
      width: 100%;
      padding: 10px 0 12px;
      border: 0;
      border-bottom: 1px solid rgba(var(--line-rgb), 0.4);
      border-radius: 0;
      background: transparent;
      color: var(--ink);
      font: inherit;
      font-size: 17px;
      letter-spacing: 0.02em;
      text-align: center;
      caret-color: var(--ink);
      outline: none;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .project-name__input::placeholder {
      color: rgba(var(--line-rgb), 0.45);
    }

    .project-name__input:focus {
      border-bottom-color: var(--ink);
      box-shadow: 0 1px 0 var(--ink);
    }

    .works {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(12px, 2vw, 24px);
      width: min(100%, 1040px);
    }

    .work {
      appearance: none;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin: 0;
      padding: 20px 22px 24px;
      border: 1px solid rgba(var(--surface-rgb), 0.8);
      border-radius: 18px;
      background: rgba(var(--surface-rgb), 0.38);
      color: var(--ink);
      font: inherit;
      text-align: left;
      transition:
        background-color 0.35s ease,
        border-color 0.35s ease,
        transform 0.35s cubic-bezier(.2, .8, .2, 1);
    }

    .work:hover {
      border-color: var(--ink);
      background: rgba(var(--surface-rgb), 0.62);
      transform: translateY(-3px);
    }

    .work[aria-pressed="true"] {
      border-color: var(--ink);
      background: rgba(var(--surface-rgb), 0.72);
    }

    .work:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 3px;
    }

    .work__num {
      color: var(--ink-soft);
      font-size: 13px;
      letter-spacing: 0.2em;
    }

    .work__art {
      display: block;
      width: 100%;
      height: auto;
      margin: 2px 0 6px;
    }

    .work__title {
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 0.03em;
      line-height: 1.3;
    }

    .work__text {
      color: #47728f;
      font-size: 14px;
      line-height: 1.45;
    }

    .work__check {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 20px;
      height: 20px;
      opacity: 0;
      transform: scale(0.6);
      transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.2, .8, .2, 1);
    }

    .work__check circle {
      fill: var(--ink);
    }

    .work__check path {
      fill: none;
      stroke: #fff;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .work[aria-pressed="true"] .work__check {
      opacity: 1;
      transform: none;
    }

    .works__status {
      min-height: 1.4em;
      margin: 0;
      color: var(--ink);
      font-size: 14px;
      letter-spacing: 0.06em;
      text-align: center;
    }

    .stage__back {
      color: var(--ink-soft);
      font-size: 14px;
      letter-spacing: 0.08em;
      text-decoration: underline;
      text-underline-offset: 4px;
      transition: color 0.3s ease;
    }

    .stage__back:hover {
      color: var(--ink);
    }

    .stage__back:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 3px;
      border-radius: 4px;
    }

    /* минималистичная инфографика: линии, светлая заливка, голубой акцент */
    .a-line {
      fill: none;
      stroke: var(--ink);
      stroke-width: 1.4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .a-soft {
      fill: rgba(var(--surface-rgb), 0.75);
      stroke: var(--ink);
      stroke-width: 1.2;
      stroke-linejoin: round;
    }

    .a-main {
      fill: var(--ink);
    }

    .a-free {
      fill: rgba(var(--cursor-rgb), 0.32);
      stroke: var(--cursor-color);
      stroke-width: 1.2;
      transition: fill 0.4s ease;
    }

    .a-track {
      fill: rgba(var(--surface-rgb), 0.75);
    }

    .a-bar {
      fill: var(--cursor-color);
      transform-box: fill-box;
      transform-origin: left center;
      transform: scaleX(0.78);
      transition: transform 0.7s cubic-bezier(.2, .8, .2, 1);
    }

    .a-bar--ink {
      fill: var(--ink-soft);
    }

    .a-ring {
      fill: none;
      stroke: var(--ink-soft);
      stroke-width: 1.2;
      stroke-dasharray: 3 4;
      stroke-linecap: round;
      transform-box: fill-box;
      transform-origin: center;
      transition: transform 0.8s cubic-bezier(.2, .8, .2, 1);
    }

    .a-ring--fill {
      fill: rgba(var(--cursor-rgb), 0.12);
    }

    .a-link {
      fill: none;
      stroke: var(--cursor-color);
      stroke-width: 1.2;
      stroke-dasharray: 2 3;
      stroke-linecap: round;
    }

    .a-dot {
      fill: var(--cursor-color);
    }

    .a-label {
      fill: var(--ink-soft);
      font-size: 10px;
      letter-spacing: 0.06em;
    }

    .work:hover .a-bar {
      transform: none;
    }

    .work:hover .a-free {
      fill: rgba(var(--cursor-rgb), 0.55);
    }

    .work:hover .a-ring {
      transform: scale(1.06);
    }

    .work:hover .a-ring--near {
      transform: scale(1.12);
    }

    @media (max-width: 860px) {
      .works {
        grid-template-columns: 1fr;
        width: min(100%, 420px);
      }

      .work__art {
        max-width: 240px;
        margin-inline: auto;
      }
    }

    /* ---------- Поле кадастрового номера ---------- */

    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0;
    }

    .lookup {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      width: min(100%, 680px);
      --field-size: clamp(20px, 2.4vw, 30px);
      --round: 24px;
    }

    .lookup__rows {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      width: 100%;
    }

    /* строка: [ + ] поле [ × ] — кружки на уровне линии под полем, поле по центру страницы */
    .lookup__row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr);
      align-items: end;
      column-gap: 14px;
      position: relative;
      width: 100%;
      font-size: var(--field-size);
      animation: row-in 0.45s cubic-bezier(.2, .8, .2, 1) both;
    }

    @keyframes row-in {
      from {
        opacity: 0;
        transform: translateY(8px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    .lookup__slot {
      display: flex;
      align-items: center;
      justify-content: flex-end;   /* левый слот прижат к полю справа */
      min-width: var(--round);
      height: var(--round);
      /* центр кружка ложится на горизонтальную линию поля */
      transform: translateY(calc(var(--round) / 2 - 0.5px));
    }

    .lookup__round {
      appearance: none;
      display: grid;
      place-items: center;
      width: var(--round);
      height: var(--round);
      margin: 0;
      padding: 0;
      border: 1px solid #fff;
      border-radius: 50%;
      background: transparent;
      color: #fff;
      transition: background-color 0.3s ease, opacity 0.3s ease;
    }

    .lookup__round[hidden] {
      display: none;
    }

    .lookup__round:hover {
      background: rgba(var(--surface-rgb), 0.32);
    }

    .lookup__round:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
    }

    .lookup__round:disabled {
      opacity: 0.5;
    }

    .lookup__round svg {
      display: block;
      transition: transform 0.35s cubic-bezier(.2, .8, .2, 1);
    }

    .lookup__add:not([hidden]) {
      animation: add-in 0.35s cubic-bezier(.2, .8, .2, 1) both;
    }

    @keyframes add-in {
      from {
        opacity: 0;
        transform: scale(0.6);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    .lookup__add:not(:disabled):hover svg {
      transform: rotate(90deg);
    }

    .lookup__remove svg {
      transform: rotate(45deg);
    }

    /* правый слот: [ значок связи ] [ × ] — прижат к полю слева */
    .lookup__slot--end {
      justify-content: flex-start;
      gap: 8px;
    }

    /* значок: общая граница с основным участком / отдельный участок в пределах 800 м */
    .lookup__relation svg {
      fill: none;
      stroke: currentColor;
      stroke-width: 1.3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .lookup__row[data-relation="adjacent"] .rel--nearby,
    .lookup__row[data-relation="nearby"] .rel--adjacent {
      display: none;
    }

    /* отдельный участок выделен заливкой — его видно сразу */
    .lookup__row[data-relation="nearby"] .lookup__relation {
      border-color: #fff;
      background: #fff;
      color: var(--ink);
    }

    .lookup__row[data-relation="nearby"] .lookup__relation:hover {
      background: rgba(var(--surface-rgb), 0.85);
    }

    /* ---------- Подсказка при добавлении второго участка ---------- */

    .lookup__hint {
      position: absolute;
      grid-column: 3;
      grid-row: 1;
      top: 100%;   /* центр подсказки на уровне линии — там же, где значки */
      /* правее значков строки: ширина слота (2 кружка + отступ) + зазор колонки */
      left: calc(var(--round) * 2 + 8px + 14px);
      z-index: 5;
      width: 268px;
      padding: 12px 34px 12px 14px;
      border: 1px solid rgba(var(--line-rgb), 0.16);
      border-radius: 14px;
      background: rgba(var(--surface-rgb), 0.72);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      color: var(--ink);
      font-size: 13px;
      letter-spacing: 0.02em;
      line-height: 1.45;
      text-align: left;
      transform: translateY(-50%);
      animation: hint-in 0.5s cubic-bezier(.2, .8, .2, 1) both;
    }

    .lookup__hint[hidden] {
      display: none;
    }

    /* хвостик, указывающий на строку */
    .lookup__hint::before {
      content: "";
      position: absolute;
      top: 50%;
      left: -6px;
      width: 10px;
      height: 10px;
      border-bottom: 1px solid rgba(var(--line-rgb), 0.16);
      border-left: 1px solid rgba(var(--line-rgb), 0.16);
      background: rgba(var(--surface-rgb), 0.72);
      transform: translateY(-50%) rotate(45deg);
    }

    .lookup__hint p {
      margin: 0;
    }

    .lookup__hint-title {
      margin-bottom: 4px !important;
      font-weight: 500;
    }

    .lookup__hint ul {
      display: grid;
      gap: 6px;
      margin: 8px 0 0;
      padding: 0;
      list-style: none;
    }

    .lookup__hint li {
      display: grid;
      grid-template-columns: 22px 1fr;
      align-items: start;
      gap: 8px;
    }

    .lookup__hint li svg {
      width: 22px;
      height: 22px;
      padding: 3px;
      border: 1px solid var(--ink);
      border-radius: 50%;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .lookup__hint li.is-separate svg {
      background: #fff;
    }

    .lookup__hint-close {
      appearance: none;
      position: absolute;
      top: 8px;
      right: 8px;
      display: grid;
      place-items: center;
      width: 22px;
      height: 22px;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: var(--ink-soft);
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    .lookup__hint-close:hover {
      background: rgba(var(--surface-rgb), 0.7);
      color: var(--ink);
    }

    .lookup__hint-close:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
    }

    .lookup__hint-close svg {
      display: block;
      transform: rotate(45deg);
    }

    @keyframes hint-in {
      from {
        opacity: 0;
        transform: translate(-10px, -50%);
      }
      to {
        opacity: 1;
        transform: translate(0, -50%);
      }
    }

    @keyframes hint-in-flow {
      from {
        opacity: 0;
        transform: translateY(-6px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    /* там, где карточка не помещается справа, она встаёт под подписями округ / район / квартал / участок */
    @media (max-width: 1240px) {
      .lookup__hint {
        position: static;
        align-self: center;
        width: min(100%, 360px);
        transform: none;
        animation-name: hint-in-flow;
      }

      .lookup__hint::before {
        display: none;
      }
    }

    .lookup__field {
      width: 11.5em;
      max-width: 100%;
      padding: 10px 0 12px;
      border: 0;
      border-bottom: 1px solid rgba(var(--surface-rgb), 0.75);
      border-radius: 0;
      background: transparent;
      color: var(--text);
      font: inherit;
      font-size: var(--field-size);
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.16em;
      text-align: left;
      caret-color: var(--cursor-color);
      outline: none;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    /* последняя часть номера может быть любой длины: поле растёт вместе с текстом */
    @supports (field-sizing: content) {
      .lookup__field {
        field-sizing: content;
        width: auto;
        min-width: 11.5em;
      }
    }

    @media (max-width: 380px) {
      .lookup__field {
        min-width: 0;
      }
    }

    .lookup__field::placeholder {
      color: rgba(var(--surface-rgb), 0.55);
    }

    .lookup__field:focus {
      border-bottom-color: #fff;
      box-shadow: 0 1px 0 #fff;
    }

    .lookup__parts {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px 22px;
      margin: 0;
      padding: 0;
      list-style: none;
      font-size: 14px;
      letter-spacing: 0.08em;
    }

    .lookup__parts li {
      padding-bottom: 3px;
      border-bottom: 1px solid transparent;
      color: var(--ink-soft);
      transition: color 0.25s ease, border-color 0.25s ease;
    }

    .lookup__parts li.is-active {
      border-bottom-color: var(--ink);
      color: var(--ink);
    }

    .lookup__part {
      appearance: none;
      margin: 0;
      padding: 0;
      border: 0;
      background: none;
      color: inherit;
      font: inherit;
      letter-spacing: inherit;
    }

    .lookup__part:hover {
      color: var(--ink);
    }

    .lookup__part:focus-visible {
      border-radius: 2px;
      outline: 2px solid var(--ink);
      outline-offset: 3px;
    }

    .lookup__button {
      appearance: none;
      padding: 12px 36px;
      border: 1px solid var(--ink);
      border-radius: 999px;
      background: transparent;
      color: var(--ink);
      font: inherit;
      font-size: 16px;
      letter-spacing: 0.14em;
      transition: background-color 0.3s ease;
    }

    .lookup__button:hover {
      background: rgba(var(--surface-rgb), 0.4);
    }

    .lookup__button:focus-visible {
      outline: 2px solid var(--ink);
      outline-offset: 4px;
    }

    .lookup__status.is-warning {
      color: #9a4a2c;
    }

    .lookup__status.is-warning::before {
      content: "!";
      display: inline-grid;
      place-items: center;
      width: 16px;
      height: 16px;
      margin-right: 8px;
      border: 1px solid currentColor;
      border-radius: 50%;
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      vertical-align: 1px;
    }

    .lookup__status {
      min-height: 1.4em;
      margin: 0;
      color: var(--ink);
      font-size: 14px;
      letter-spacing: 0.06em;
      text-align: center;
    }

    /* ---------- Курсор ---------- */

    /* Свой курсор включается только на устройствах с мышью/трекпадом */
    .has-custom-cursor,
    .has-custom-cursor * {
      cursor: none !important;
    }

    .cursor {
      position: fixed;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      z-index: 9999;
      pointer-events: none;
      will-change: transform;
    }

    .cursor__body {
      position: absolute;
      top: 0;
      left: 0;
      transform: scale(0);
      transition: transform 0.35s cubic-bezier(.2, .8, .2, 1);
    }

    .cursor.is-visible .cursor__body {
      transform: scale(1);
    }

    .cursor.is-visible.is-pressed .cursor__body {
      transform: scale(0.78);
    }

    .cursor__waves {
      position: absolute;
      top: 0;
      left: 0;
      transition: opacity 0.4s ease;
    }

    .cursor__ring,
    .cursor__core {
      position: absolute;
      border-radius: 50%;
    }

    /* волны: от центра к краям */
    .cursor__ring {
      width: var(--cursor-reach);
      height: var(--cursor-reach);
      top: 0;
      left: 0;
      translate: -50% -50%;
      border: 1.5px solid rgba(var(--cursor-rgb), 0.55);
      background: rgba(var(--cursor-rgb), 0.1);
      box-shadow:
        0 0 14px rgba(var(--cursor-rgb), 0.35),
        inset 0 0 14px rgba(var(--cursor-rgb), 0.25);
      opacity: 0;
      animation: cursor-wave 5s cubic-bezier(.25, .5, .35, 1) infinite;
    }

    .cursor__ring--2 {
      animation-delay: 2.5s;
    }

    /* центральная точка со свечением */
    .cursor__core {
      width: var(--cursor-size);
      height: var(--cursor-size);
      top: 0;
      left: 0;
      translate: -50% -50%;
      background: var(--cursor-color);
      box-shadow:
        0 0 8px 2px rgba(var(--cursor-rgb), 0.65),
        0 0 20px 4px rgba(var(--cursor-rgb), 0.3);
      border: 1.5px solid transparent;
      transition:
        width 0.4s cubic-bezier(.2, .8, .2, 1),
        height 0.4s cubic-bezier(.2, .8, .2, 1),
        border-radius 0.4s cubic-bezier(.2, .8, .2, 1),
        background-color 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
      animation: cursor-core 5s ease-in-out infinite;
    }

    /* наведение на ссылку или кнопку: точка раскрывается в мягкий диск */
    .cursor.is-link .cursor__core {
      width: 34px;
      height: 34px;
      background-color: rgba(var(--cursor-rgb), 0.16);
      border-color: rgba(var(--cursor-rgb), 0.9);
      box-shadow:
        0 0 12px rgba(var(--cursor-rgb), 0.4),
        inset 0 0 10px rgba(var(--cursor-rgb), 0.25);
    }

    /* наведение на поле ввода: точка вытягивается в тонкую линию, как курсор текста */
    .cursor.is-text .cursor__core {
      width: 3px;
      height: 28px;
      border-width: 0;
      border-radius: 3px;
      box-shadow: 0 0 10px rgba(var(--cursor-rgb), 0.5);
    }

    .cursor.is-link .cursor__waves,
    .cursor.is-text .cursor__waves {
      opacity: 0.35;
    }

    @keyframes cursor-core {
      0%, 100% {
        transform: scale(0.94);
      }
      50% {
        transform: scale(1.08);
      }
    }

    @keyframes cursor-wave {
      0% {
        transform: scale(0.133); /* ≈ размер центральной точки (8 / 60) */
        opacity: 0.7;
      }
      100% {
        transform: scale(1);
        opacity: 0;
      }
    }

    @media (max-width: 760px) {
      .title {
        flex-direction: column;
        align-items: center;
        gap: 0.28em;
        white-space: normal;
        font-size: clamp(22px, 7vw, 42px);
        letter-spacing: 0.09em;
      }

      .switcher {
        place-items: center;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      .switcher__word--dawn {
        animation: none;
      }

      .switcher__word--master {
        display: none;
      }

      /* с JS слова всё равно меняются: без сдвигов, но с проявлением
         и мягким размытием (это не движение по экрану) */
      .switcher--js .switcher__word {
        transform: none !important;
        transition: opacity 0.9s ease, filter 0.9s ease, text-shadow 1.3s ease;
      }

      .lookup__row,
      .lookup__add,
      .lookup__hint {
        animation: none;
      }

      .work,
      .work *,
      .work__check {
        transition: none;
      }

      .signup__circle::before {
        animation: none;
      }

      .spark,
      .celebrate__burst,
      .celebrate__flash,
      .celebrate__ray,
      .celebrate__card,
      .celebrate__star,
      .sun.sun--boom {
        animation: none !important;
        opacity: 1;
        transform: none;
      }

      .bird {
        display: none;
      }

      /* .bird скрыта выше, так что вспышку всё равно не запустить кликом —
         но если это когда-нибудь изменится, пусть картинка тихо появляется
         и гаснет, без мерцания и подсветки */
      .engraving__beam,
      .engraving__glow,
      .engraving__whiteout,
      .engraving__art-white {
        display: none;
      }

      .engraving__art.is-flashing {
        animation: none;
        opacity: 1;
        filter: none;
        transition: opacity 1.2s ease;
      }

      .announce__dot,
      .announce__star,
      .announce__emoji {
        animation: none;
      }

      .crane__jib,
      .crane__trolley,
      .crane__cable,
      .crane__load,
      .crane__sign-text,
      .dozer--a,
      .dozer--b {
        animation: none;
      }

      .sun::after {
        animation: none;
      }

      .cursor__ring,
      .cursor__core {
        animation: none;
      }

      .cursor__ring {
        display: none;
      }
    }