/* Собрано автоматически: frontend/build.py
   Не редактируйте этот файл — правьте исходники в frontend/src/ */
/* ==========================================================================
   Точка входа стилей. Порядок импортов повторяет слои FSD:
   shared → entities → features → widgets → pages → app(адаптив, a11y)
   Нижние слои задают примитивы, верхние их комбинируют и переопределяют.

   Для продакшна файл склеивается в один: python frontend/build.py
   ========================================================================== */

/* ── shared: токены, примитивы UI ── */

/* ── shared/config/tokens.css ──────────────────────────────── */
/* ── Дизайн-система «ПЕРЕГРУЗКА» ───────────────────────────────────────────
   Единственный источник правды по цвету, геометрии и типографике.

   ИДЕЯ. Псевдоним G-Force — это перегрузка, ускорение. Отсюда весь язык
   оформления: приборная панель, замеры, шкалы, разметка. Сайт должен
   читаться как измерительный документ, а не как рекламный лендинг.

   ПРАВИЛА, которые держат стиль:
     1. Бумага и чернила. Фон — тёплый костяной, а не белый и не чёрный.
     2. Ровно два акцента: сигнальный алый и ультрамарин. Третьего нет.
     3. Никаких градиентов в тексте, свечений и матового стекла — именно
        по этим трём приёмам сайт и опознаётся как «сделан нейросетью».
     4. Границы — волосяные линии, а не мягкие тени. Радиусы почти нулевые.
     5. Заголовок работает масштабом, а не эффектом.

   Светлая тема — по умолчанию. Тёмная включается data-theme="dark".

   Имена переменных сохранены от прошлой версии (--cyan, --magenta, --gold),
   чтобы не переписывать полсотни файлов. Смысл у них теперь другой:
     --cyan    → сигнальный акцент (алый)
     --magenta → второй акцент (ультрамарин)
     --gold    → графит, спокойная метка                                   */

:root,
:root[data-theme="light"]{
  color-scheme: light;

  /* Бумага */
  --bg:            #EFEDE6;   /* костяной, тёплый — не белый лист */
  --bg-2:          #E6E3D9;
  --panel:         #F7F6F1;   /* карточка чуть светлее бумаги */
  --panel-solid:   #FCFBF7;

  --surface-soft:  rgba(20,19,16,.045);
  --surface-hover: rgba(20,19,16,.075);
  --surface-flat:  rgba(20,19,16,.028);
  --track:         rgba(20,19,16,.12);

  --line:          rgba(20,19,16,.16);
  --line-strong:   rgba(20,19,16,.46);

  /* Чернила */
  --ink:           #14130F;
  --ink-dim:       #55524A;
  --ink-mute:      #8B8779;
  --on-accent:     #FBFAF6;

  /* Акценты — только два */
  --cyan:          #D8360F;   /* сигнальный алый */
  --cyan-soft:     rgba(216,54,15,.10);
  --magenta:       #1D30B8;   /* ультрамарин */
  --magenta-soft:  rgba(29,48,184,.09);
  --gold:          #4A473F;   /* графит: спокойные метки */
  --gold-soft:     rgba(74,71,63,.08);
  --ok:            #1B6E3C;
  --danger:        #B31212;

  /* Заливки вместо градиентов: свойство осталось, эффекта больше нет */
  --grad-main: var(--cyan);
  --grad-gold: var(--ink);

  /* Вместо свечения — плотная линия. Имя переменной прежнее. */
  --glow-cyan:    inset 0 0 0 1px var(--cyan);
  --glow-magenta: inset 0 0 0 1px var(--magenta);
  --glow-gold:    inset 0 0 0 1px var(--ink);
  --shadow-lift:  0 1px 0 0 var(--ink);

  /* Фоновые эффекты почти выключены: осталась только разметка листа */
  --fx-particles: 0;
  --fx-grid:      1;
  --fx-orb:       0;
  --fx-scan:      0;
  --photo-veil:   .10;

  --grid-ink:     rgba(20,19,16,.055);
  --paper-noise:  .035;
}

/* ── ТЁМНАЯ ТЕМА ───────────────────────────────────────────────────────────
   Не инверсия: чернильный фон, бумажный текст, те же два акцента,
   но осветлённые до читаемости на тёмном.                                 */
:root[data-theme="dark"]{
  color-scheme: dark;

  --bg:            #100F0D;
  --bg-2:          #16150F;
  --panel:         #191813;
  --panel-solid:   #1C1B15;

  --surface-soft:  rgba(240,238,230,.05);
  --surface-hover: rgba(240,238,230,.09);
  --surface-flat:  rgba(240,238,230,.035);
  --track:         rgba(240,238,230,.14);

  --line:          rgba(240,238,230,.18);
  --line-strong:   rgba(240,238,230,.50);

  --ink:           #F1EFE6;
  --ink-dim:       #A9A599;
  --ink-mute:      #757064;
  --on-accent:     #100F0D;

  --cyan:          #FF5A2E;
  --cyan-soft:     rgba(255,90,46,.13);
  --magenta:       #7C8CFF;
  --magenta-soft:  rgba(124,140,255,.13);
  --gold:          #C9C4B4;
  --gold-soft:     rgba(201,196,180,.10);
  --ok:            #4ED08A;
  --danger:        #FF6B6B;

  --grad-main: var(--cyan);
  --grad-gold: var(--ink);

  --glow-cyan:    inset 0 0 0 1px var(--cyan);
  --glow-magenta: inset 0 0 0 1px var(--magenta);
  --glow-gold:    inset 0 0 0 1px var(--ink);
  --shadow-lift:  0 1px 0 0 var(--ink);

  --fx-particles: 0;
  --fx-grid:      1;
  --fx-orb:       0;
  --fx-scan:      0;
  --photo-veil:   .28;

  --grid-ink:     rgba(240,238,230,.05);
  --paper-noise:  .05;
}

/* ── Геометрия и шрифты: от темы не зависят ───────────────────────────── */
:root{
  /* Скругления почти нулевые: документ, а не мыльный пузырь */
  --r-sm: 2px;
  --r:    3px;
  --r-lg: 4px;

  --shell:  1280px;
  --nav-h:  70px;

  /* Ширина поля с номерами разделов слева */
  --margin-w: 84px;

  --ease:     cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --font:    "InterVar","Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --display: "Unbounded","InterVar","Segoe UI",system-ui,sans-serif;
  --mono:    "JBMono","JetBrains Mono","SFMono-Regular",Consolas,monospace;
}

/* Акцентные миксины: элемент получает класс acc-*, всё внутри читает --acc */
.acc-cyan   { --acc: var(--cyan);    --acc-soft: var(--cyan-soft);    --acc-glow: var(--glow-cyan); }
.acc-magenta{ --acc: var(--magenta); --acc-soft: var(--magenta-soft); --acc-glow: var(--glow-magenta); }
.acc-gold   { --acc: var(--gold);    --acc-soft: var(--gold-soft);    --acc-glow: var(--glow-gold); }

/* Плавное переключение темы, но не в ущерб скорости первой отрисовки */
:root.theme-ready body,
:root.theme-ready .nav,
:root.theme-ready .card,
:root.theme-ready .skill,
:root.theme-ready .work,
:root.theme-ready .voice,
:root.theme-ready .note,
:root.theme-ready .about__card{
  transition:background-color .3s var(--ease),color .3s var(--ease),
             border-color .3s var(--ease);
}

/* ── shared/config/fonts.css ──────────────────────────────── */
/* ── Шрифты ────────────────────────────────────────────────────────────────
   Файлы лежат рядом с проектом (frontend/public/fonts) и раздаются с нашего
   же сервера. Google Fonts сознательно не подключаем: сторонний CDN в России
   работает нестабильно, а шрифт — это то, что не должно «не приехать».

   Три гарнитуры, у каждой своя работа:
     Unbounded      — только крупные заголовки и цифры приборов.
                      Геометричный, с характером, отличная кириллица.
     Inter          — весь читаемый текст.
     JetBrains Mono — подписи, метки, показания приборов, терминал.

   Латиница и кириллица подключены отдельными файлами через unicode-range:
   браузер скачивает только то, что реально встретилось на странице.
   font-display:swap — текст виден сразу, не дожидаясь шрифта.             */

/* ── Unbounded: дисплейная ── */
@font-face{
  font-family:"Unbounded"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/unbounded-cyrillic-700-normal.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Unbounded"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/unbounded-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Unbounded"; font-style:normal; font-weight:900; font-display:swap;
  src:url("../fonts/unbounded-cyrillic-900-normal.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Unbounded"; font-style:normal; font-weight:900; font-display:swap;
  src:url("../fonts/unbounded-latin-900-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── Inter: текстовая ── */
@font-face{
  font-family:"InterVar"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/inter-cyrillic-400-normal.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"InterVar"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"InterVar"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/inter-cyrillic-500-normal.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"InterVar"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/inter-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"InterVar"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/inter-cyrillic-600-normal.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"InterVar"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/inter-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"InterVar"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/inter-cyrillic-700-normal.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"InterVar"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/inter-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── JetBrains Mono: приборы и метки ── */
@font-face{
  font-family:"JBMono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/jetbrains-mono-cyrillic-400-normal.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"JBMono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JBMono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/jetbrains-mono-cyrillic-500-normal.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"JBMono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── shared/config/keyframes.css ──────────────────────────────── */
/* ── Общие анимации ────────────────────────────────────────────────────── */
@keyframes blink { 0%,100%{ opacity:1 } 50%{ opacity:.2 } }
@keyframes caret { 50%{ opacity:0 } }

/* Оставлены для обратной совместимости со старой разметкой */
@keyframes float    { 0%,100%{ transform:none } 50%{ transform:translateY(-6px) } }
@keyframes spinSlow { to{ transform:rotate(360deg) } }
@keyframes flow     { to{ background-position:200% center } }

/* ── shared/ui/section.css ──────────────────────────────── */
/* ── Секция страницы ───────────────────────────────────────────────────── */
.section{ padding:110px 0; position:relative; }
.section--tight{ padding:70px 0; }

/* Разделитель между секциями — линия во всю ширину листа */
.section + .section::before{
  content:""; position:absolute; top:0; left:24px; right:24px; height:1px;
  background:var(--line);
}

.section__head{ margin-bottom:52px; max-width:820px; }
.section__head--center{ margin-inline:auto; text-align:center; }

/* Внутренняя страница: отступ от фиксированной шапки */
.section--page{ padding-top:calc(var(--nav-h) + 64px); }
.section--page::before{ display:none; }

.section__head--road{ margin-bottom:34px; }
.others__title{ font-size:1.15rem; margin-bottom:22px; }

/* Старый декоративный разделитель — теперь просто линия */
.neon-line{ height:1px; width:100%; margin:0; border:0; background:var(--line); }

/* ── shared/ui/typography.css ──────────────────────────────── */
/* ── Типографические примитивы ─────────────────────────────────────────── */

/* Надзаголовок: техническая метка, а не «пилюля» с точкой.
   Плашки с подсветкой убраны намеренно — они и делали вид шаблонным. */
.eyebrow{
  display:flex; align-items:center; gap:12px; margin-bottom:16px;
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--cyan);
}
.eyebrow::after{
  content:""; flex:1; height:1px; background:var(--line);
}
.section__head--center .eyebrow{ justify-content:center; }
.section__head--center .eyebrow::after{ display:none; }

/* Заголовок раздела. Масштаб делает всю работу — никаких градиентов. */
.h-section{
  font-size:clamp(2.1rem,5.2vw,4rem);
  line-height:.98; letter-spacing:-.045em;
  margin-bottom:18px;
}
.h-section--md{ font-size:clamp(1.9rem,4.2vw,3rem); }
.h-section--sm{ font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:-.035em; }

/* Раньше .grad и .gold заливали текст градиентом. Теперь это просто
   выделение цветом акцента — читается как акцент, а не как «неон». */
.h-section .grad{ color:var(--cyan); }
.h-section .gold{ color:var(--magenta); }

/* Подчёркивание от руки: тонкая линия под словом вместо заливки */
.h-section .under{
  position:relative; white-space:nowrap;
}
.h-section .under::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.09em;
  background:var(--cyan);
}

.lead{
  color:var(--ink-dim); font-size:1.05rem; line-height:1.55;
  max-width:58ch; margin-bottom:0;
}
.section__head--center .lead{ margin-inline:auto; }

/* Крупная цифра-показание: используется в статистике и приборах */
.readout{
  font-family:var(--display); font-weight:900;
  font-variant-numeric:tabular-nums; letter-spacing:-.05em; line-height:1;
}

/* Мелкая техническая подпись */
.micro{
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute);
}

/* ── shared/ui/button.css ──────────────────────────────── */
/* ── Кнопка ────────────────────────────────────────────────────────────────
   Прямоугольная, с волосяной обводкой. Наведение не «поднимает» кнопку
   и не зажигает ореол — оно инвертирует её. Это резче и честнее.       */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:14px 26px;
  border:1px solid var(--ink); border-radius:var(--r-sm);
  font-family:var(--mono); font-size:.78rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; white-space:nowrap;
  background:transparent; color:var(--ink);
  transition:background .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease);
}
.btn--sm{ padding:9px 15px; font-size:.68rem; letter-spacing:.11em; }
.btn--wide{ width:100%; }

/* Основная: залита сигнальным цветом */
.btn--neon{
  background:var(--cyan); border-color:var(--cyan); color:var(--on-accent);
}
.btn--neon:hover{ background:var(--ink); border-color:var(--ink); }

/* Вторая по важности: чернильная заливка */
.btn--gold{
  background:var(--ink); border-color:var(--ink); color:var(--bg);
}
.btn--gold:hover{ background:var(--cyan); border-color:var(--cyan); color:var(--on-accent); }

/* Контурная */
.btn--ghost{
  background:transparent; border-color:var(--line-strong); color:var(--ink);
}
.btn--ghost:hover{ background:var(--ink); border-color:var(--ink); color:var(--bg); }

.btn--danger{ border-color:var(--danger); color:var(--danger); }
.btn--danger:hover{ background:var(--danger); border-color:var(--danger); color:var(--on-accent); }

.btn[disabled]{ opacity:.45; pointer-events:none; }

/* Текстовая ссылка-стрелка: базовый интерактив всего сайта.
   Линия под текстом уезжает вправо при наведении. */
.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
  padding-bottom:3px; border-bottom:1px solid var(--line-strong);
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.link-arrow span{ transition:transform .25s var(--ease); }
.link-arrow:hover{ color:var(--cyan); border-color:var(--cyan); }
.link-arrow:hover span{ transform:translateX(5px); }

/* ── shared/ui/card.css ──────────────────────────────── */
/* ── Карточка ──────────────────────────────────────────────────────────────
   Плоская, на волосяной обводке. Ни размытия, ни подъёма при наведении:
   меняется только цвет линии и появляется тонкая полоса сверху.        */
.card{
  position:relative; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.card:hover{ border-color:var(--line-strong); }

.empty{
  padding:40px 28px; text-align:center;
  border:1px dashed var(--line); border-radius:var(--r);
  color:var(--ink-mute); font-family:var(--mono); font-size:.82rem;
}

/* ── shared/ui/field.css ──────────────────────────────── */
/* ── Поля формы ────────────────────────────────────────────────────────────
   Поле выглядит как строка бланка: подложки нет, есть нижняя линия.
   При фокусе линия становится сигнальной и утолщается — без ореолов.  */
.field{
  width:100%; padding:12px 2px;
  border:0; border-bottom:1px solid var(--line-strong); border-radius:0;
  background:transparent; color:var(--ink);
  font:inherit; font-size:.98rem;
  transition:border-color .18s var(--ease);
}
.field::placeholder{ color:var(--ink-mute); }
.field:focus{
  outline:none; border-bottom-color:var(--cyan); box-shadow:0 1px 0 0 var(--cyan);
}
textarea.field{ resize:vertical; min-height:118px; padding-top:10px; }

/* Выпадающие списки и чекбоксы линию снизу не переживают — им рамка */
select.field{
  border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:12px 14px;
}

.form-row{ margin-bottom:22px; }
.form-row label{
  display:block; margin-bottom:4px;
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute);
}
.form-row .helptext{
  display:block; margin-top:7px; font-size:.76rem; color:var(--ink-mute); line-height:1.45;
}
.form-row ul.helptext,.form-row .helptext ul{ margin:6px 0 0; padding-left:18px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 26px; }

.errorlist{
  list-style:none; margin:8px 0 0; padding:0 0 0 12px;
  font-size:.8rem; color:var(--danger); border-left:2px solid var(--danger);
}
.errorlist li{ margin-bottom:3px; }

/* ── shared/ui/tabs.css ──────────────────────────────── */
/* ── Вкладки ───────────────────────────────────────────────────────────────
   Ряд подписей на общей линии; активная помечается заливкой сигнальным.  */
.tabs{
  display:flex; flex-wrap:wrap; gap:0; margin-bottom:34px;
  border-bottom:1px solid var(--line);
}
.tab{
  padding:11px 18px; margin-bottom:-1px;
  border:0; border-bottom:2px solid transparent; border-radius:0;
  background:none; color:var(--ink-mute);
  font-family:var(--mono); font-size:.74rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.tab:hover{ color:var(--ink); }
.tab.is-active{ color:var(--cyan); border-bottom-color:var(--cyan); }

/* ── shared/ui/tag.css ──────────────────────────────── */
/* ── Технологический тег ───────────────────────────────────────────────── */
.work__tag{
  padding:4px 9px; border-radius:var(--r-sm);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.05em;
  color:var(--ink-dim); background:transparent; border:1px solid var(--line);
}

/* ── app: база документа и раскладка ── */

/* ── app/styles/reset.css ──────────────────────────────── */
/* ── Нормализация и базовая типографика документа ──────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16.5px;
  line-height:1.6;
  font-feature-settings:"kern" 1,"liga" 1,"cv05" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; background:none; border:0; color:inherit; }

/* ── Заголовки: дисплейная гарнитура, плотный трекинг ──
   Unbounded — геометричный и тяжёлый, поэтому межбуквенное сжимаем,
   иначе крупный текст «рассыпается». */
h1,h2,h3,h4{
  margin:0 0 .5em;
  font-family:var(--display);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.035em;
  text-wrap:balance;
}
h4{ letter-spacing:-.01em; }

p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

strong,b{ font-weight:600; color:var(--ink); }

::selection{ background:var(--cyan); color:var(--on-accent); }

/* Полоса прокрутки в тон бумаге */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--bg-2); }
::-webkit-scrollbar-thumb{ background:var(--line-strong); border:3px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover{ background:var(--cyan); }

/* Фокус — заметная рамка, а не размытое кольцо */
:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }

/* ── app/styles/layout.css ──────────────────────────────── */
/* ── Сетка страницы ────────────────────────────────────────────────────── */
.shell{ width:min(100% - 48px, var(--shell)); margin-inline:auto; }
.shell--narrow{ width:min(100% - 48px, 900px); margin-inline:auto; }

/* Контент всегда выше фоновой разметки */
main,.nav,.foot,.toasts,.gmeter,.dock{ position:relative; z-index:2; }

/* ── Бумага: миллиметровая разметка и лёгкое зерно ─────────────────────
   Ровно один фоновый слой вместо прежних четырёх (частицы, световые
   пятна, сетка, скан-линии). Он не «светится» и не отвлекает — просто
   даёт листу фактуру, на которой типографика выглядит напечатанной. */
.paper{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px);
  background-size:88px 88px;
}
.paper::after{
  content:""; position:absolute; inset:0; opacity:var(--paper-noise);
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* ── Поле с номерами разделов ──────────────────────────────────────────
   Сквозная вертикальная линейка слева, как на чертеже: сразу задаёт
   ритм и говорит «это документ», а не «это лендинг». */
.rail{
  position:relative;
  padding-left:var(--margin-w);
}
.rail::before{
  content:""; position:absolute; left:calc(var(--margin-w) - 28px); top:0; bottom:0;
  width:1px; background:var(--line);
}
.rail__no{
  position:absolute; left:0; top:2px;
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.14em; color:var(--cyan);
}
.rail__no::after{
  content:""; display:block; width:18px; height:1px;
  background:var(--cyan); margin-top:8px;
}

@media (max-width:900px){
  .rail{ padding-left:0; }
  .rail::before{ display:none; }
  .rail__no{ position:static; display:block; margin-bottom:10px; }
  .rail__no::after{ display:none; }
}

/* ── entities: карточки предметной области ── */

/* ── entities/skill/ui.css ──────────────────────────────── */
/* ── Сущность «Навык»: ячейка описи ────────────────────────────────────────
   Не карточка, а клетка таблицы: обводка общая с соседями, при наведении
   ячейка просто заливается чернилами.                                  */
.skill{
  position:relative; display:flex; flex-direction:column; gap:8px;
  padding:18px 18px 16px; border:0; border-radius:0;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  background:none; cursor:default;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.skill::before{ content:none; }
.skill:hover{ transform:none; box-shadow:none; background:var(--ink); color:var(--bg); }

.skill__icon{
  width:auto; height:auto; border:0; border-radius:0; background:none;
  display:block; margin:0 0 2px;
  font-family:var(--mono); font-weight:500; font-size:.66rem;
  letter-spacing:.16em; color:var(--cyan);
}
.skill:hover .skill__icon{ color:var(--cyan); }

.skill__name{
  font-family:var(--display); font-weight:700; font-size:.98rem;
  letter-spacing:-.025em; margin:0;
}

.skill__more{
  margin-top:auto; display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute);
  transition:color .18s var(--ease), gap .18s var(--ease);
}
.skill__more::after{ content:"→"; }
.skill:hover .skill__more{ color:var(--bg); gap:9px; }

/* ── entities/project/ui.css ──────────────────────────────── */
/* ── Сущность «Проект» ─────────────────────────────────────────────────────
   Карточка построена как запись в каталоге: крупный порядковый номер,
   название, одна строка сути, стек, ссылка. Ховер подчёркивает строку
   сигнальной линией слева, а не поднимает блок в воздух.               */
.work{
  position:relative; display:flex; flex-direction:column;
  padding:30px 30px 26px; overflow:hidden;
  border:0; border-top:1px solid var(--ink); border-radius:0;
  background:none;
  transition:background .2s var(--ease);
}
.work::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--cyan); transform:scaleY(0); transform-origin:top;
  transition:transform .3s var(--ease); box-shadow:none; opacity:1; height:auto; right:auto;
}
.work::after{ content:none; }
.work:hover{ transform:none; box-shadow:none; background:var(--surface-flat); }
.work:hover::before{ transform:scaleY(1); }

.work__top{ display:flex; align-items:baseline; gap:14px; margin-bottom:14px; }
.work__emoji{
  width:auto; height:auto; border:0; border-radius:0; background:none;
  font-size:1.2rem; color:var(--ink);
}
.work__no{
  margin-left:auto; font-family:var(--display); font-weight:900;
  font-size:1.5rem; letter-spacing:-.05em; color:var(--line-strong);
  transition:color .2s var(--ease);
}
.work:hover .work__no{ color:var(--cyan); }

.work__title{ font-size:1.42rem; letter-spacing:-.035em; margin-bottom:8px; }
.work__tagline{ color:var(--ink-dim); font-size:.95rem; margin-bottom:18px; max-width:46ch; }
.work__stack{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px; }
.work__foot{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding-top:16px; border-top:1px solid var(--line);
}
.work__link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
  transition:gap .25s var(--ease), color .18s var(--ease);
}
.work:hover .work__link{ color:var(--cyan); gap:13px; }
.work__meta{ font-family:var(--mono); font-size:.68rem; color:var(--ink-mute); }

/* ── Страница разбора кейса ── */
.case{ padding:calc(var(--nav-h) + 64px) 0 56px; }
.case__head{ max-width:900px; }
.case__badge{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:16px;
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cyan);
}
.case__title{ font-size:clamp(2.1rem,5.4vw,4rem); letter-spacing:-.05em; margin-bottom:14px; }
.case__tagline{ font-size:1.12rem; color:var(--ink-dim); max-width:56ch; }
.case__stack{ display:flex; flex-wrap:wrap; gap:7px; margin:26px 0 0; }

.case__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:0; margin-top:52px;
  border-top:1px solid var(--ink); border-left:1px solid var(--line);
}
.case__block{
  padding:26px 26px 28px; border:0;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  border-radius:0; background:none;
}
.case__block h3{
  display:flex; align-items:baseline; gap:10px; font-size:1rem;
  letter-spacing:-.02em; margin-bottom:12px;
}
.case__block h3 i{
  width:auto; height:auto; border:0; border-radius:0; background:none;
  font-style:normal; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.16em; color:var(--cyan);
}
.case__block p{ margin:0; color:var(--ink-dim); font-size:.95rem; }
.case__block--wide{
  grid-column:1/-1; background:var(--surface-flat); border-color:var(--line);
}
.case__cover{ margin-top:40px; border:1px solid var(--line); border-radius:0; }

/* ── entities/testimonial/ui.css ──────────────────────────────── */
/* ── Сущность «Отзыв» на витрине ───────────────────────────────────────── */
.voice{
  display:flex; flex-direction:column;
  padding:26px 26px 24px; border:0; border-radius:0; background:none;
  border-top:1px solid var(--ink);
  transition:background .18s var(--ease);
}
.voice:hover{ box-shadow:none; background:var(--surface-flat); }

.voice__stars{
  color:var(--cyan); letter-spacing:2px; font-size:.8rem; margin-bottom:14px;
}
.voice__star--off{ color:var(--line-strong); }
.voice__text{ color:var(--ink); font-size:1rem; line-height:1.5; margin-bottom:auto; }
.voice__who{
  display:flex; align-items:center; gap:12px; margin-top:22px;
  padding-top:14px; border-top:1px solid var(--line);
}
.voice__ava{
  width:34px; height:34px; border-radius:0; display:grid; place-items:center; flex-shrink:0;
  font-family:var(--mono); font-weight:500; font-size:.76rem;
  color:var(--bg); background:var(--ink); box-shadow:none;
}
.voice__name{ font-weight:600; font-size:.92rem; }
.voice__role{ font-family:var(--mono); font-size:.66rem; color:var(--ink-mute); letter-spacing:.06em; }

/* ── entities/post/ui.css ──────────────────────────────── */
/* ── Сущность «Разбор» ─────────────────────────────────────────────────── */
.note{
  display:flex; flex-direction:column; padding:24px 24px 22px;
  border:0; border-top:1px solid var(--line); border-radius:0; background:none;
  transition:background .18s var(--ease);
}
.note:hover{ transform:none; box-shadow:none; background:var(--surface-flat); }

.note__tag{
  display:inline-block; align-self:flex-start; margin-bottom:12px;
  padding:0; border:0; border-radius:0; background:none;
  font-family:var(--mono); font-size:.64rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cyan);
}
.note__title{ font-size:1.12rem; letter-spacing:-.03em; margin-bottom:9px; }
.note__excerpt{ color:var(--ink-dim); font-size:.92rem; margin-bottom:16px; }
.note__takeaway{
  margin:-4px 0 16px; padding-left:12px; border-left:1px solid var(--ink);
  font-size:.85rem; color:var(--ink); line-height:1.45;
}
.note__foot{
  margin-top:auto; display:flex; justify-content:space-between; align-items:center;
  padding-top:14px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:var(--ink-mute);
}
.note__more{ color:var(--ink); text-transform:uppercase; }
.note:hover .note__more{ color:var(--cyan); }

/* ── entities/comment/ui.css ──────────────────────────────── */
/* ── Сущность «Комментарий» ────────────────────────────────────────────── */
.comment{
  display:flex; gap:14px; padding:18px 0;
  border:0; border-top:1px solid var(--line); border-radius:0; background:none;
}
.comment:hover{ border-color:var(--line); }
.comment__ava{
  width:34px; height:34px; border-radius:0; flex-shrink:0; display:grid; place-items:center;
  font-family:var(--mono); font-weight:500; font-size:.76rem;
  color:var(--bg); background:var(--ink);
}
.comment__main{ min-width:0; flex:1; }
.comment__head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:5px; }
.comment__author{ font-weight:600; font-size:.93rem; }
.comment__date{ font-family:var(--mono); font-size:.66rem; color:var(--ink-mute); }
.comment__body{ margin:0; color:var(--ink-dim); font-size:.94rem; white-space:pre-wrap; }
.comment__where{ font-family:var(--mono); font-size:.68rem; color:var(--cyan); }
.comment__pending{ font-family:var(--mono); font-size:.68rem; color:var(--ink-mute); }

/* ── entities/review/ui.css ──────────────────────────────── */
/* ── Страница отзывов: сводка, гистограмма, форма ──────────────────────── */

/* Сводка: средняя оценка слева, распределение справа */
.rating-summary{
  display:grid; grid-template-columns:auto 1fr; gap:44px; align-items:center;
  padding:30px 0 32px; margin-bottom:36px;
  border:0; border-top:1px solid var(--ink); border-bottom:1px solid var(--line);
  border-radius:0; background:none;
}
.rating-summary__score{ min-width:150px; }
.rating-summary__value{
  font-family:var(--display); font-weight:900; font-size:3.6rem; line-height:1;
  letter-spacing:-.06em; color:var(--cyan);
  background:none; -webkit-text-fill-color:currentColor;
}
.rating-summary__count{
  margin-top:8px; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute);
}
.rating-summary__bars{ display:flex; flex-direction:column; gap:7px; }

.rating-bar{ display:grid; grid-template-columns:34px 1fr 30px; align-items:center; gap:12px; }
.rating-bar__label{ font-family:var(--mono); font-size:.7rem; color:var(--ink-mute); }
.rating-bar__track{ height:4px; border-radius:0; background:var(--track); overflow:hidden; }
.rating-bar__track i{
  display:block; height:100%; border-radius:0; background:var(--ink);
  box-shadow:none; transition:width .7s var(--ease);
}
.rating-bar__count{
  font-family:var(--mono); font-size:.7rem; color:var(--ink-dim); text-align:right;
}

/* Форма отзыва */
.review-form{
  padding:30px 0 34px; margin-bottom:36px;
  border:0; border-top:1px solid var(--ink); border-radius:0; background:none;
}
.review-form__title{ font-size:1.24rem; letter-spacing:-.03em; margin-bottom:22px; }
.review-form__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; }

/* Пустое состояние */
.reviews-empty{ grid-column:1/-1; padding:54px 30px; }
.reviews-empty__icon{ font-size:2rem; margin-bottom:12px; color:var(--cyan); text-shadow:none; }
.reviews-empty h3{ font-size:1.15rem; margin-bottom:6px; color:var(--ink); }
.reviews-empty p{ margin:0; }

/* Значок владельца сайта */
.badge-owner{
  display:inline-block; padding:2px 7px; border-radius:0;
  font-family:var(--mono); font-size:.6rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-accent); background:var(--cyan); vertical-align:middle;
}
.badge-owner--lg{ font-size:.64rem; padding:3px 9px; margin-left:10px; }

.rating-inline{ color:var(--cyan); }

@media (max-width:700px){
  .rating-summary{ grid-template-columns:1fr; gap:24px; }
}

/* ── entities/inbox-message/ui.css ──────────────────────────────── */
/* ── Сущность «Заявка»: карточка в списке и полная карточка ──────────────── */

.inbox-card{
  border-radius:var(--r); border:1px solid var(--line);
  background:var(--panel); overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
}
.inbox-card:hover{
  transform:translateX(4px); border-color:var(--acc); box-shadow:var(--acc-glow);
}
/* Новая заявка выделяется полосой слева — видно с одного взгляда */
.inbox-card--new{ border-left:3px solid var(--acc); background:var(--panel-solid); }

.inbox-card__link{ display:grid; grid-template-columns:auto 1fr; gap:16px; padding:20px 22px; }

.inbox-card__ava{
  width:44px; height:44px; border-radius:0; display:grid; place-items:center;
  font-weight:700; font-size:.9rem; flex-shrink:0;
  color:var(--on-accent); background:var(--acc);
}
.inbox-card__body{ min-width:0; }

.inbox-card__top{ display:flex; align-items:center; gap:10px; margin-bottom:5px; }
.inbox-card__name{ font-weight:700; font-size:1rem; }
.inbox-card__dot{
  width:7px; height:7px; border-radius:0; background:var(--acc);
  box-shadow:0 0 10px var(--acc); flex-shrink:0;
}
.inbox-card__date{
  margin-left:auto; font-family:var(--mono); font-size:.74rem; color:var(--ink-mute);
  white-space:nowrap;
}
.inbox-card__subject{ font-weight:600; font-size:.94rem; color:var(--ink); margin-bottom:5px; }
.inbox-card__preview{
  margin:0 0 12px; color:var(--ink-dim); font-size:.9rem; line-height:1.55;
}
.inbox-card__meta{ display:flex; flex-wrap:wrap; gap:7px; }
.inbox-card__chip{
  padding:3px 10px; border-radius:8px; font-size:.74rem;
  color:var(--ink-mute); background:var(--surface-soft); border:1px solid var(--line);
}
.inbox-card__chip--accent{ color:var(--acc); border-color:var(--acc); background:var(--acc-soft); }
.inbox-card__chip--done{ color:var(--ok); border-color:color-mix(in srgb,var(--ok) 45%,transparent); }

/* ── Полная карточка ── */
.inbox-full{
  padding:34px 36px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--panel);
  border-top:3px solid var(--acc);
}
.inbox-full__head{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding-bottom:22px; margin-bottom:24px; border-bottom:1px solid var(--line);
}
.inbox-full__ava{
  width:56px; height:56px; border-radius:0; display:grid; place-items:center;
  font-weight:700; font-size:1.1rem; color:var(--on-accent); background:var(--acc);
  box-shadow:0 0 26px -8px var(--acc);
}
.inbox-full__who{ min-width:0; }
.inbox-full__name{ font-size:1.4rem; margin:0 0 4px; }
.inbox-full__date{ font-family:var(--mono); font-size:.78rem; color:var(--ink-mute); }
.inbox-full__status{
  margin-left:auto; padding:6px 14px; border-radius:0;
  font-size:.74rem; font-weight:600; border:1px solid var(--line);
  color:var(--ink-dim); background:var(--surface-soft);
}
.inbox-full__status--new{ color:var(--acc); border-color:var(--acc); background:var(--acc-soft); }
.inbox-full__status--done{ color:var(--ok); border-color:color-mix(in srgb,var(--ok) 45%,transparent); }

.inbox-full__subject{ font-size:1.15rem; margin-bottom:16px; }
.inbox-full__message{ color:var(--ink); font-size:1rem; line-height:1.7; }
.inbox-full__message p{ margin-bottom:1em; }

.inbox-full__contacts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px; margin:26px 0;
}
.inbox-contact{
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface-soft);
  transition:border-color .25s,transform .25s var(--ease);
}
a.inbox-contact:hover{ border-color:var(--acc); transform:translateY(-2px); }
.inbox-contact__ico{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  flex-shrink:0; color:var(--acc); background:var(--acc-soft); border:1px solid var(--acc);
}
.inbox-contact__label{
  display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-mute);
}
.inbox-contact__value{ display:block; font-weight:600; font-size:.94rem; word-break:break-word; }

.inbox-full__warn{
  padding:14px 18px; border-radius:var(--r-sm); margin-bottom:24px;
  border:1px dashed color-mix(in srgb,var(--gold) 45%,transparent);
  background:var(--gold-soft); font-size:.86rem; color:var(--ink-dim); line-height:1.55;
}
.inbox-full__warn strong{ color:var(--gold); }

.inbox-full__actions{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  padding-top:24px; border-top:1px solid var(--line);
}
.inbox-full__actions form{ margin:0; }
.btn--danger:hover{
  border-color:var(--danger); color:var(--danger);
  box-shadow:0 0 24px -8px var(--danger);
}

@media (max-width:640px){
  .inbox-full{ padding:26px 22px; }
  .inbox-card__link{ padding:18px; gap:13px; }
  .inbox-card__date{ margin-left:0; width:100%; }
  .inbox-card__top{ flex-wrap:wrap; }
}

/* ── entities/achievement/ui.css ──────────────────────────────── */
/* ── Сущность «Показание»: счётчик в разделе о пути ────────────────────────
   Ряд приборов на общей линейке. Цифры набраны дисплейной гарнитурой
   и заметно крупнее подписей — читаются как показания, а не как плитки. */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:60px;
  border-top:1px solid var(--ink);
}
.stats--3{ grid-template-columns:repeat(3,1fr); margin-top:0; }

.stat{
  padding:24px 24px 26px; text-align:left;
  border:0; border-left:1px solid var(--line); border-radius:0; background:none;
}
.stat:first-child{ border-left:0; padding-left:0; }
.stat:hover{ transform:none; box-shadow:none; }

.stat__value{
  font-family:var(--display); font-weight:900;
  font-size:2.4rem; line-height:1; letter-spacing:-.05em; margin-bottom:10px;
  color:var(--ink); background:none; -webkit-text-fill-color:currentColor;
  overflow-wrap:anywhere;
}
.stat:nth-child(even) .stat__value{ color:var(--cyan); background:none; }
.stat__value--sm{ font-size:1.1rem; }
.stat__label{ font-size:.9rem; font-weight:600; margin-bottom:4px; }
.stat__hint{ font-size:.78rem; color:var(--ink-mute); line-height:1.45; }

@media (max-width:760px){
  .stats,.stats--3{ grid-template-columns:1fr 1fr; }
  .stat{ padding:18px 16px 20px; }
  .stat:nth-child(odd){ border-left:0; padding-left:0; }
  .stat__value{ font-size:1.9rem; }
}

/* ── features: интерактивные возможности ── */

/* ── features/background-fx/ui.css ──────────────────────────────── */
/* ── Фоновые слои ──────────────────────────────────────────────────────────
   От прежних четырёх слоёв (частицы, световые пятна, сетка, скан-линии)
   не осталось ничего: именно они и делали сайт похожим на шаблон.
   Фактуру листа теперь рисует единственный слой .paper в layout.css.
   Правила ниже оставлены как страховка на случай старой разметки
   в кэше браузера — они гарантированно ничего не показывают.         */
.fx-particles,
.fx-grid,
.fx-orb,
.fx-scanline{ display:none !important; }

/* ── features/reveal-on-scroll/ui.css ──────────────────────────────── */
/* ── Появление блоков при прокрутке ────────────────────────────────────────
   Сдвиг намеренно маленький (10px) и быстрый: крупные «выезды» снизу —
   ещё один признак шаблонного лендинга. Здесь блок просто проявляется. */
.reveal{
  opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.reveal.is-in{ opacity:1; transform:none; }

.reveal[data-d="1"]{ transition-delay:.05s } .reveal[data-d="2"]{ transition-delay:.10s }
.reveal[data-d="3"]{ transition-delay:.15s } .reveal[data-d="4"]{ transition-delay:.20s }
.reveal[data-d="5"]{ transition-delay:.25s } .reveal[data-d="6"]{ transition-delay:.30s }

/* ── features/scroll-progress/ui.css ──────────────────────────────── */
/* ── Индикатор прогресса чтения ────────────────────────────────────────── */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:60;
  background:var(--cyan); box-shadow:none;
  transition:width .1s linear;
}

/* ── features/scroll-to-top/ui.css ──────────────────────────────── */
/* ── Кнопка «наверх» ───────────────────────────────────────────────────── */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:70;
  width:42px; height:42px; border-radius:0; display:grid; place-items:center;
  border:1px solid var(--ink); background:var(--bg); color:var(--ink);
  font-size:1rem;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease),
             background .18s var(--ease), color .18s var(--ease);
}
.to-top.is-on{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--ink); color:var(--bg); box-shadow:none; }

/* На телефоне низ занят панелью действий */
@media (max-width:900px){
  .to-top{ bottom:74px; right:14px; width:38px; height:38px; }
}

/* ── features/typewriter/ui.css ──────────────────────────────── */
/* ── Печатная машинка ──────────────────────────────────────────────────── */
.typer{
  font-family:var(--mono); font-size:.86rem; color:var(--ink-dim);
  min-height:1.7em; margin:0 0 4px; letter-spacing:.04em;
}
.typer .caret{
  display:inline-block; width:8px; height:1em; margin-left:3px; vertical-align:-1px;
  background:var(--cyan); box-shadow:none;
  animation:caret .9s steps(1) infinite;
}

/* ── features/star-rating/ui.css ──────────────────────────────── */
/* ── Ввод оценки звёздами ──────────────────────────────────────────────────
   Работает без JavaScript: под звёздами лежат обычные радиокнопки,
   доступные с клавиатуры. Радио идут в порядке 5→1, а контейнер развёрнут
   через row-reverse — поэтому селектор `~` закрашивает звёзды слева направо. */
.stars{
  display:inline-flex; flex-direction:row-reverse; align-items:center;
  justify-content:flex-end; gap:1px; padding:4px 0;
}
.stars__input{
  position:absolute; width:1px; height:1px; opacity:0;
  clip:rect(0 0 0 0); overflow:hidden;
}
/* Селектор двойной (.stars .stars__star), чтобы перебить общее правило
   `.form-row label`, которое делает подписи мелкими и блочными. */
.stars .stars__star{
  display:inline-block; margin:0; padding:0 3px;
  cursor:pointer; font-size:1.7rem; line-height:1; font-weight:400;
  color:var(--track); text-transform:none; letter-spacing:0;
  transition:color .15s var(--ease);
}

/* Выбранная оценка: подсвечиваем её звезду и все идущие следом (левее) */
.stars .stars__input:checked ~ .stars__star{ color:var(--cyan); text-shadow:none; }

/* Предпросмотр при наведении перебивает выбранное значение.
   Внимание на специфичность: правило-сброс ниже — (0,3,0), поэтому обе
   подсвечивающие строки тоже должны быть (0,3,0) и стоять после него,
   иначе сама наведённая звезда останется серой. */
.stars:hover .stars__star{ color:var(--track); }
.stars:hover .stars__star:hover,
.stars .stars__star:hover ~ .stars__star{ color:var(--cyan); }

.stars .stars__input:focus-visible + .stars__star{ outline:2px solid var(--cyan); outline-offset:3px; }

.stars__hint{
  order:-1; margin-left:14px; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim);
  min-width:11ch; white-space:nowrap;
}

/* ── Отображение дробной оценки (например 4.6 из 5) ────────────────────── */
.stars-view{ position:relative; display:inline-block; line-height:1; letter-spacing:2px; }
.stars-view__base{ color:var(--track); }
.stars-view__fill{
  position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap;
  color:var(--cyan); text-shadow:none;
}
.stars-view--lg{ font-size:1.4rem; }

/* ── features/theme-switch/ui.css ──────────────────────────────── */
/* ── Переключатель темы ────────────────────────────────────────────────────
   Одна кнопка вместо пары: нажатие меняет тему, значок переворачивается.
   Ползунков и подсветки нет — это просто клавиша на приборной панели.  */
.theme-switch{
  position:relative; width:32px; height:30px; flex-shrink:0;
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
  overflow:hidden; color:var(--ink-dim);
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.theme-switch:hover{ color:var(--cyan); border-color:var(--cyan); }

.theme-switch__face{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:.95rem; line-height:1;
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
/* Светлая тема — показываем солнце, луна ждёт снизу */
.theme-switch__face--moon{ transform:translateY(100%); opacity:0; }
:root[data-theme="dark"] .theme-switch__face--sun { transform:translateY(-100%); opacity:0; }
:root[data-theme="dark"] .theme-switch__face--moon{ transform:none; opacity:1; }

/* ── features/mobile-layout/ui.css ──────────────────────────────── */
/* ── Складные разделы — только телефон ─────────────────────────────────────
   Десктоп и телефон читают сайт по-разному. На большом экране длинный
   текст можно просмотреть глазами по диагонали; на телефоне он
   превращается в двадцать экранов прокрутки, и посетитель уходит.

   Поэтому на узком экране скрипт сворачивает тяжёлые разделы в список
   «досье»: видны только заголовки, посетитель сам решает, что открыть.
   Разметка при этом одна и та же — дублирования страниц нет.          */
.mfold{ display:contents; }

@media (max-width:900px){
  .mfold{ display:block; border-top:1px solid var(--line); }

  .mfold__btn{
    width:100%; display:flex; align-items:center; gap:12px;
    padding:18px 2px; text-align:left;
    font-family:var(--mono); font-size:.76rem; font-weight:500;
    letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  }
  .mfold__btn .mfold__no{ color:var(--cyan); font-size:.68rem; }
  .mfold__btn .mfold__sub{
    margin-left:auto; display:flex; align-items:center; gap:10px;
    font-size:.66rem; letter-spacing:.08em; color:var(--ink-mute);
    text-transform:none;
  }
  .mfold__chev{
    width:11px; height:11px; border-right:1.5px solid var(--ink);
    border-bottom:1.5px solid var(--ink); transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .25s var(--ease); flex-shrink:0;
  }
  .mfold.is-open .mfold__chev{ transform:rotate(-135deg) translate(-3px,-3px); }

  /* Номер раздела уже стоит на кнопке — внутри он был бы вторым подряд */
  .mfold .rail__no{ display:none; }

  .mfold__body{
    display:grid; grid-template-rows:0fr;
    transition:grid-template-rows .35s var(--ease);
  }
  .mfold.is-open .mfold__body{ grid-template-rows:1fr; }
  .mfold__inner{ overflow:hidden; }
  .mfold.is-open .mfold__inner{ padding-bottom:26px; }
}

/* ── features/toasts/ui.css ──────────────────────────────── */
/* ── Всплывающие уведомления ───────────────────────────────────────────────
   Основной способ сообщить о результате действия: сайт многостраничный,
   после каждого POST страница перезагружается, и заставку на это крутить
   незачем — достаточно короткого сообщения в углу.                       */

.toasts{
  position:fixed; top:calc(var(--nav-h) + 14px); right:20px; z-index:120;
  display:flex; flex-direction:column; gap:8px;
  width:min(360px,calc(100vw - 40px));
  pointer-events:none;
}

.toast{
  position:relative; overflow:hidden; pointer-events:auto;
  display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:12px;
  padding:13px 15px; border-radius:0;
  background:var(--bg); border:1px solid var(--ink); box-shadow:none;
  font-size:.9rem; line-height:1.45;
  animation:toastIn .3s var(--ease-out) both;
}
@keyframes toastIn{ from{ opacity:0; transform:translateX(18px) } }

.toast__icon{
  width:20px; height:20px; border-radius:0; display:grid; place-items:center;
  font-family:var(--mono); font-size:.7rem; font-weight:500; flex-shrink:0; margin-top:2px;
  color:var(--on-accent); background:var(--ink-mute);
}
.toast__text{ min-width:0; color:var(--ink); overflow-wrap:anywhere; }
.toast__x{
  width:22px; height:22px; display:grid; place-items:center; flex-shrink:0;
  color:var(--ink-mute); font-size:1.1rem; line-height:1;
  transition:color .18s var(--ease);
}
.toast__x:hover{ color:var(--ink); background:none; }

/* Полоска обратного отсчёта */
.toast__timer{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  transform-origin:left; background:var(--ink-mute);
  animation:toastTimer linear forwards;
}
@keyframes toastTimer{ from{ transform:scaleX(1) } to{ transform:scaleX(0) } }
.toast:hover .toast__timer{ animation-play-state:paused; }

/* ── Типы ── */
.toast--success .toast__icon,
.toast--success .toast__timer{ background:var(--ok); }
.toast--error   .toast__icon,
.toast--error   .toast__timer{ background:var(--danger); }
.toast--warning .toast__icon,
.toast--warning .toast__timer{ background:var(--ink); }
.toast--info    .toast__icon,
.toast--info    .toast__timer{ background:var(--cyan); }

@media (max-width:900px){
  .toasts{ top:auto; bottom:74px; right:14px; left:14px; width:auto; }
  .toast{ animation-name:toastInMobile; }
  @keyframes toastInMobile{ from{ opacity:0; transform:translateY(16px) } }
}

/* ── widgets: самостоятельные блоки страницы ── */

/* ── widgets/preloader/ui.css ──────────────────────────────── */
/* ── Заставка: замер перегрузки ────────────────────────────────────────────
   Вместо кольца и процентов — приборное показание, которое разгоняется
   от 0.0 до максимума. Та же метафора, что и у всего сайта, и заставка
   перестаёт быть «универсальным спиннером».

   Показывается один раз за визит: при переходах внутри сайта скрипт
   в <head> ставит класс is-returning ещё до отрисовки.                 */
.boot{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--bg);
  height:100svh; height:100dvh;
  transition:opacity .45s var(--ease), visibility .45s;
  overscroll-behavior:contain;
}
.boot.is-done{ opacity:0; visibility:hidden; }

/* Повторный переход внутри сайта: заставка не нужна и не должна мигать */
:root.is-returning .boot{ display:none; }

.boot__inner{ width:min(320px,100%); text-align:left; }

.boot__label{
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.34em; color:var(--ink-mute); margin-bottom:14px;
}

.boot__readout{
  display:flex; align-items:baseline; gap:4px; margin-bottom:18px;
  font-family:var(--display); font-weight:900; letter-spacing:-.06em;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.boot__num { font-size:clamp(3.4rem,13vw,5rem); line-height:.85; }
.boot__unit{ font-size:1.4rem; color:var(--cyan); }

.boot__scale{
  position:relative; height:2px; background:var(--track); overflow:hidden;
}
.boot__fill{
  display:block; height:100%; width:0; background:var(--cyan);
  transition:width .3s var(--ease);
}

.boot__status{
  margin-top:12px;
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);
}

@media (prefers-reduced-motion:reduce){
  .boot{ display:none; }
}

/* ── widgets/site-header/ui.css ──────────────────────────────── */
/* ── Шапка ─────────────────────────────────────────────────────────────────
   Тонкая полоса-«шильдик»: словесный знак слева, пронумерованные разделы
   справа. Никакого матового стекла — при прокрутке шапка просто
   становится плотной бумагой с линией снизу.                            */
.nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:50;
  border-bottom:1px solid transparent;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.nav.is-stuck{ background:var(--bg); border-bottom-color:var(--ink); }

.nav__inner{ display:flex; align-items:center; gap:20px; height:var(--nav-h); }

/* ── Словесный знак ── */
.nav__logo{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.nav__logo-img{
  width:34px; height:34px; border-radius:var(--r-sm); flex-shrink:0;
  border:1px solid var(--line); filter:grayscale(1) contrast(1.1);
  transition:filter .25s var(--ease);
}
.nav__logo:hover .nav__logo-img{ filter:none; }
.nav__logo-text{ display:flex; flex-direction:column; line-height:1.1; }
.nav__logo-text b{
  font-family:var(--display); font-weight:900; font-size:.98rem; letter-spacing:-.03em;
}
.nav__logo-text em{
  font-style:normal; font-family:var(--mono); font-size:.6rem; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; color:var(--ink-mute);
}

/* ── Разделы: моноширинные подписи с порядковым номером ── */
.nav__links{ display:flex; gap:2px; margin-left:auto; }
.nav__links a{
  position:relative; display:flex; align-items:baseline; gap:6px;
  padding:8px 12px; border-radius:0;
  font-family:var(--mono); font-size:.74rem; font-weight:500;
  letter-spacing:.06em; color:var(--ink-dim);
  transition:color .18s var(--ease);
}
.nav__links a i{
  font-style:normal; font-size:.58rem; color:var(--ink-mute);
  transition:color .18s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:3px; height:1px;
  background:var(--cyan); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover i{ color:var(--cyan); }
.nav__links a:hover::after{ transform:scaleX(1); }

/* ── Правая группа ── */
.nav__side{ display:flex; align-items:center; gap:9px; }

.nav__user{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--ink-dim); }
.nav__user:hover{ color:var(--ink); }
.nav__avatar{
  width:28px; height:28px; border-radius:var(--r-sm); display:grid; place-items:center;
  font-family:var(--mono); font-weight:500; font-size:.75rem;
  color:var(--bg); background:var(--ink);
}
.nav__uname{ font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; }
.nav__logout{ margin:0; }

.nav__burger{
  display:none; width:38px; height:34px; padding:8px 8px;
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
}
.nav__burger span{
  display:block; height:1.5px; background:var(--ink);
  transition:transform .28s var(--ease), opacity .2s;
}
.nav__burger span+span{ margin-top:5px; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ── Значок заявок — виден только владельцу ── */
.nav__inbox{
  position:relative; width:32px; height:30px; display:grid; place-items:center;
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
  color:var(--ink-dim); font-size:.9rem;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.nav__inbox:hover{ color:var(--cyan); border-color:var(--cyan); }
.nav__inbox-count{
  position:absolute; top:-7px; right:-7px; min-width:17px; height:17px; padding:0 4px;
  border-radius:99px; display:grid; place-items:center;
  font-family:var(--mono); font-size:.62rem; font-weight:500; line-height:1;
  color:var(--on-accent); background:var(--cyan);
  box-shadow:0 0 0 2px var(--bg);
}

/* Индикатор «подтвердите почту» */
.nav__warn{
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-weight:700; font-size:.75rem; color:var(--on-accent); background:var(--cyan);
}

/* ── Вход и регистрация внутри раскрывающегося меню ──
   На десктопе эти кнопки живут в шапке справа, поэтому здесь их прячем. */
.nav__links-auth{ display:none; }
@media (max-width:900px){
  .nav__links-auth{
    display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-top:16px;
  }
  .nav__links-auth .btn{ width:100%; }
  .nav__links-auth form{ margin:0; }
  .nav__links-auth > a:not(.btn){
    grid-column:1/-1; padding:0 0 6px; border:0;
    font-family:var(--mono); font-size:.78rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--ink-dim);
  }
}

/* ── widgets/gmeter/ui.css ──────────────────────────────── */
/* ── Прибор перегрузки ─────────────────────────────────────────────────────
   Фирменный элемент сайта. Стрелка и цифра показывают текущую скорость
   прокрутки, пересчитанную в условные «g». Смысл: псевдоним владельца —
   это перегрузка, и сайт её буквально измеряет.

   Прибор намеренно маленький и в углу: он должен радовать при первом
   замечании, а не бороться с контентом за внимание.                     */
.gmeter{
  position:fixed; right:20px; bottom:78px; z-index:40;
  width:88px; pointer-events:none;
  opacity:0; transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.gmeter.is-live{ opacity:1; transform:none; }

.gmeter__dial{ width:88px; height:88px; display:block; overflow:visible; }
.gmeter__ring{ fill:var(--bg); stroke:var(--line-strong); stroke-width:1; }
.gmeter__ticks line{ stroke:var(--line-strong); stroke-width:1; }
.gmeter__ticks line.is-major{ stroke:var(--ink); stroke-width:1.4; }
.gmeter__ticks line.is-red{ stroke:var(--cyan); stroke-width:1.6; }

.gmeter__needle{
  stroke:var(--cyan); stroke-width:2; stroke-linecap:round;
  transform-origin:50px 50px;
  transition:transform .16s cubic-bezier(.2,1.4,.4,1);
}
.gmeter__hub{ fill:var(--ink); }

.gmeter__readout{
  position:absolute; left:0; right:0; top:55px; text-align:center;
  font-family:var(--display); font-weight:900; font-size:1.02rem;
  letter-spacing:-.04em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.gmeter__readout span{
  font-size:.6rem; margin-left:1px; color:var(--ink-mute);
}
.gmeter__caption{
  margin-top:4px; text-align:center;
  font-family:var(--mono); font-size:.56rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);
}

/* Перегрузка выше нормы — прибор краснеет */
.gmeter.is-hot .gmeter__ring{ stroke:var(--cyan); }
.gmeter.is-hot .gmeter__readout{ color:var(--cyan); }

/* На телефоне угол занят панелью действий, прибор не показываем */
@media (max-width:900px){ .gmeter{ display:none; } }
@media (prefers-reduced-motion:reduce){ .gmeter{ display:none; } }

/* ── widgets/marquee/ui.css ──────────────────────────────── */
/* ── Бегущая лента стека ───────────────────────────────────────────────────
   Горизонтальная полоса, идущая через всю ширину экрана. Скорость ленты
   меняется вместе с прокруткой (JS дописывает --speed) — ещё одна форма
   той же идеи ускорения.                                                */
.marquee{
  position:relative; overflow:hidden;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
  background:var(--ink); color:var(--bg);
  padding:11px 0;
}
.marquee__row{
  display:flex; width:max-content;
  animation:marqueeRun var(--speed,26s) linear infinite;
}
.marquee:hover .marquee__row{ animation-play-state:paused; }
.marquee__item{
  display:inline-flex; align-items:center; gap:20px; padding-right:20px;
  font-family:var(--mono); font-size:.76rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
}
.marquee__item::after{
  content:"◆"; font-size:.5rem; color:var(--cyan);
}
@keyframes marqueeRun{ from{ transform:none } to{ transform:translateX(-50%) } }

@media (prefers-reduced-motion:reduce){
  .marquee__row{ animation:none; }
}

/* ── widgets/dock/ui.css ──────────────────────────────── */
/* ── Нижняя панель действий — только телефон ───────────────────────────────
   На телефоне главное — не дочитать сайт, а связаться. Панель держит
   три действия в зоне большого пальца и никуда не уезжает.             */
.dock{ display:none; }

@media (max-width:900px){
  .dock{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:grid; grid-template-columns:repeat(3,1fr);
    background:var(--bg); border-top:1px solid var(--ink);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .dock__item{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; padding:9px 4px 10px;
    font-family:var(--mono); font-size:.6rem; font-weight:500;
    letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim);
    border-left:1px solid var(--line);
  }
  .dock__item:first-child{ border-left:0; }
  .dock__item:active{ background:var(--cyan); color:var(--on-accent); }
  .dock__ico{ font-size:1rem; line-height:1; color:var(--cyan); }
  .dock__item:active .dock__ico{ color:var(--on-accent); }

  /* Чтобы панель не перекрывала подвал */
  body{ padding-bottom:62px; }
}

/* ── widgets/hero/ui.css ──────────────────────────────── */
/* ── Первый экран ──────────────────────────────────────────────────────────
   Здесь работает не эффект, а масштаб. Имя набрано настолько крупно,
   насколько позволяет экран, и «влетает» со следом ускорения: три
   полупрозрачные копии догоняют основную и схлопываются в неё.
   Это визуальная расшифровка псевдонима, а не украшение.               */

.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:calc(var(--nav-h) + 44px) 0 76px;
}

/* Имя вынесено в отдельную строку над колонками: только так оно может
   занять всю ширину листа. Ради этого весь блок и затевался. */
.hero__inner{ display:block; }
.hero__body{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,270px);
  gap:56px; align-items:end; margin-top:26px;
}

/* ── Строка состояния над именем ── */
.hero__status{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:26px;
  padding:0; border:0; background:none;
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim);
}
.hero__status .dot{
  width:7px; height:7px; border-radius:50%; background:var(--ok);
  animation:blink 2.4s ease-in-out infinite;
}

/* ── ИМЯ ── */
/* Кегль подобран так, чтобы строка «G-Force» ровно заполняла лист
   по ширине на всех размерах экрана: 17.2vw до упора в 15.4rem,
   дальше ширину держит сам контейнер. */
.hero__name{
  position:relative; display:block;
  font-family:var(--display); font-weight:900;
  font-size:clamp(3rem, 17.2vw, 15.4rem);
  line-height:.8; letter-spacing:-.062em;
  margin:0; white-space:nowrap;
  color:var(--ink);
}
.hero__name .l1,
.hero__name .l2{ display:inline; color:inherit; background:none; }
.hero__name .l2{ color:var(--cyan); }

/* След ускорения: две копии позади, догоняющие основную */
.hero__name::before,
.hero__name::after{
  content:attr(data-text);
  position:absolute; inset:0; z-index:-1;
  color:var(--cyan); pointer-events:none;
}
.hero__name::before{ opacity:.22; animation:gTrail1 1.15s var(--ease-out) both; }
.hero__name::after { opacity:.11; animation:gTrail2 1.35s var(--ease-out) both; }
.hero__name{ animation:gLand 1s var(--ease-out) both; }

@keyframes gLand  { from{ transform:translateX(-4.5%); opacity:0 } to{ transform:none; opacity:1 } }
@keyframes gTrail1{ from{ transform:translateX(-13%) } to{ transform:none; opacity:0 } }
@keyframes gTrail2{ from{ transform:translateX(-24%) } to{ transform:none; opacity:0 } }

/* Повторный «рывок» при наведении — тот же язык, но короче */
.hero__name:hover{ animation:gNudge .5s var(--ease-out); }
@keyframes gNudge{ 0%{ transform:translateX(-1.2%) } 100%{ transform:none } }

.hero__patronymic{
  display:flex; align-items:center; gap:14px; margin:14px 0 0;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink-mute);
}
.hero__patronymic::after{ content:""; flex:1; height:1px; background:var(--line); }

.hero__slogan{
  font-family:var(--font); font-weight:400;
  font-size:clamp(1.05rem,1.9vw,1.4rem); line-height:1.4;
  color:var(--ink); max-width:30ch; margin-bottom:0;
}
.hero__slogan b{ font-weight:600; color:var(--cyan); background:none; }

/* ── Приборная строка: три показания под слоганом ── */
.hero__gauges{
  display:flex; flex-wrap:wrap; gap:0; margin:30px 0 32px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.hero__gauge{
  flex:1 1 0; min-width:130px; padding:16px 20px 15px;
  border-left:1px solid var(--line);
}
.hero__gauge:first-child{ border-left:0; padding-left:0; }
.hero__gauge dt{
  font-family:var(--mono); font-size:.62rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute);
  margin-bottom:7px;
}
.hero__gauge dd{
  margin:0; font-family:var(--display); font-weight:700;
  font-size:1.12rem; letter-spacing:-.03em; color:var(--ink);
}
.hero__gauge dd small{
  display:block; font-family:var(--font); font-weight:400;
  font-size:.76rem; letter-spacing:0; color:var(--ink-dim); margin-top:3px;
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:0; }

/* ── Фото как техническая иллюстрация ──
   Обесцвечено, в тонкой рамке, с угловыми метками и подписью-«рисунком».
   Цвет возвращается только при наведении. */
.hero__visual{ position:relative; padding-bottom:6px; min-width:0; }
.hero__frame{
  position:relative; overflow:hidden; aspect-ratio:3/4;
  border:1px solid var(--ink); border-radius:0; background:var(--bg-2);
}
.hero__frame img{
  width:100%; height:100%; object-fit:cover; object-position:center 12%;
  filter:grayscale(1) contrast(1.14);
  transition:filter .6s var(--ease);
}
.hero__visual:hover .hero__frame img{ filter:grayscale(0) contrast(1.05); }
.hero__frame::after{ content:none; }

/* Угловые метки — как на чертёжной рамке */
.hero__ring{
  position:absolute; inset:-9px; border:0; border-radius:0; pointer-events:none;
  animation:none;
  background:
    linear-gradient(var(--cyan),var(--cyan)) left  top    /14px 1px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) left  top    /1px 14px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) right top    /14px 1px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) right top    /1px 14px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) left  bottom /14px 1px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) left  bottom /1px 14px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) right bottom /14px 1px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) right bottom /1px 14px no-repeat;
}

.hero__caption{
  display:flex; justify-content:space-between; gap:12px; margin-top:12px;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-mute);
}

/* Плашки-технологии поверх фото убраны: они и создавали «неоновый» вид */
.hero__chip{ display:none; }

.hero__facts{ display:none; }

/* ── Подсказка о прокрутке ── */
.hero__scroll{
  position:absolute; right:calc((100vw - min(100vw - 48px, var(--shell))) / 2); bottom:26px;
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.22em;
  color:var(--ink-mute); text-transform:uppercase;
}
.hero__scroll i{
  display:block; width:54px; height:1px; background:var(--line-strong);
  position:relative; overflow:hidden;
}
.hero__scroll i::after{
  content:""; position:absolute; inset:0; width:18px; background:var(--cyan);
  animation:scrollHint 1.9s var(--ease) infinite;
}
@keyframes scrollHint{
  0%{ transform:translateX(-100%) } 60%,100%{ transform:translateX(300%) }
}

@media (prefers-reduced-motion:reduce){
  .hero__name,.hero__name::before,.hero__name::after{ animation:none; }
  .hero__name::before,.hero__name::after{ opacity:0; }
  .hero__scroll i::after{ animation:none; }
}

/* ── widgets/terminal/ui.css ──────────────────────────────── */
/* ── Терминал ──────────────────────────────────────────────────────────────
   Оставлен как «журнал замера»: моноширинный вывод на бумаге, в рамке
   с подписью сверху. Без кнопок macOS, теней и внутреннего свечения —
   это распечатка, а не окно программы.                                */
.terminal{
  border:1px solid var(--ink); border-radius:0; overflow:hidden;
  background:var(--panel-solid); box-shadow:none;
}
.terminal__bar{
  display:flex; align-items:center; gap:10px; padding:9px 16px;
  border-bottom:1px solid var(--ink); background:var(--ink); color:var(--bg);
}
.terminal__dot{ display:none; }
.terminal__title{
  margin:0; font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bg);
}
.terminal__body{
  padding:22px 20px 26px; font-family:var(--mono); font-size:.82rem;
  line-height:1.9; min-height:210px; color:var(--ink-dim);
}
.terminal__body .l{ white-space:pre-wrap; word-break:break-word; }
.terminal__body .p { color:var(--ink); font-weight:500; }
.terminal__body .c { color:var(--cyan); }
.terminal__body .g { color:var(--ink-dim); }
.terminal__body .d { color:var(--ink-mute); }
.terminal__body .ok{ color:var(--ok); }
.terminal__cursor{
  display:inline-block; width:7px; height:1em; background:var(--cyan);
  vertical-align:-2px; animation:caret .9s steps(1) infinite;
}

/* ── widgets/about/ui.css ──────────────────────────────── */
/* ── Раздел «Путь» ─────────────────────────────────────────────────────────
   Раньше здесь были четыре карточки со свечением и повторяющимся текстом.
   Теперь это развороты документа: номер, заголовок, один абзац.
   Границы — только горизонтальные линии, как в печатной таблице.       */
.about__head{ max-width:820px; margin-bottom:44px; }

.about__cards{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0;
  border-top:1px solid var(--ink);
}
.about__card{
  position:relative; padding:30px 34px 34px 0;
  background:none; border:0; border-bottom:1px solid var(--line);
  border-radius:0; transition:none;
}
.about__card:nth-child(even){ padding-left:34px; border-left:1px solid var(--line); }
.about__card::before{ content:none; }
.about__card:hover{ transform:none; box-shadow:none; }

.about__card-num{
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.2em; color:var(--cyan); margin-bottom:14px;
}
.about__card-title{
  font-size:1.24rem; letter-spacing:-.03em; margin-bottom:12px; line-height:1.15;
}
.about__card p{ color:var(--ink-dim); font-size:.96rem; margin-bottom:.85em; }
.about__card strong{ color:var(--ink); font-weight:600; }

.about__link{
  color:var(--ink); font-weight:500;
  border-bottom:1px solid var(--cyan);
}
.about__link:hover{ color:var(--cyan); }

.about__text p{ color:var(--ink-dim); }
.about__text strong{ color:var(--ink); font-weight:600; }
.about__text .mark{ color:var(--cyan); font-weight:600; }

/* ── Цитата: набрана крупно, вынесена на поля ── */
.about__quote{
  margin:0; padding:0 0 0 26px;
  border-left:2px solid var(--cyan); background:none; border-radius:0;
  font-size:1.02rem; color:var(--ink);
}
.about__quote--wide{
  margin:56px 0 0; padding:0 0 0 32px;
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.2rem,2.8vw,2rem); line-height:1.24; letter-spacing:-.035em;
  background:none; border-radius:0;
}
.about__quote--wide cite{
  display:block; margin-top:16px; font-style:normal;
  font-family:var(--mono); font-weight:400; font-size:.68rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);
}

@media (max-width:900px){
  .about__cards{ grid-template-columns:1fr; }
  .about__card,
  .about__card:nth-child(even){ padding:24px 0 26px; border-left:0; }
}

/* ── widgets/roadmap/ui.css ──────────────────────────────── */
/* ── Карта пути ────────────────────────────────────────────────────────────
   Шкала с засечками: вертикальная линия, метки-годы слева, текст справа.
   Точки без свечения — текущий этап помечен залитым квадратом.        */
.road{ margin-top:74px; position:relative; }
.road__track{ position:relative; padding-left:120px; }
.road__track::before{
  content:""; position:absolute; left:92px; top:4px; bottom:4px; width:1px;
  background:var(--line);
}
.road__item{ position:relative; padding:0 0 34px; }
.road__item:last-child{ padding-bottom:0; }

.road__node{
  position:absolute; left:-33px; top:4px; width:9px; height:9px;
  border-radius:0; background:var(--bg);
  border:1px solid var(--ink); font-size:0; color:transparent;
  box-shadow:none;
}
.road__item--current .road__node{
  background:var(--cyan); border-color:var(--cyan); animation:none;
}

.road__period{
  position:absolute; left:-120px; top:1px; width:78px; text-align:right;
  font-family:var(--mono); font-size:.64rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute);
}
.road__item--current .road__period{ color:var(--cyan); }
.road__title{ font-size:1.08rem; letter-spacing:-.03em; margin:0 0 6px; }
.road__desc{ color:var(--ink-dim); font-size:.95rem; margin:0; max-width:62ch; }

@media (max-width:700px){
  .road__track{ padding-left:22px; }
  .road__track::before{ left:3px; }
  .road__node{ left:-22px; }
  .road__period{ position:static; width:auto; text-align:left; margin-bottom:3px; display:block; }
}

/* ── widgets/skills-grid/ui.css ──────────────────────────────── */
/* ── Сетка стека ───────────────────────────────────────────────────────────
   Плотная таблица технологий: ячейки на общей сетке из волосяных линий.
   Никаких карточек с тенями — это опись, а не витрина.                */
.skills-group{ margin-bottom:34px; }
.skills-group__title{
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute);
}
.skills-group__title::after{ content:""; flex:1; height:1px; background:var(--line); }
.skills-group__title em{ font-style:normal; color:var(--cyan); }

.skills{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line);
}

.skills-more{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:18px; margin-top:34px;
  padding-top:24px; border-top:1px solid var(--ink);
}
.skills-more p{ margin:0; color:var(--ink-dim); font-size:.95rem; max-width:52ch; }

/* Прежний пояснительный блок под сеткой убран как дублирующий */
.skills-note{ display:none; }

/* ── widgets/works-grid/ui.css ──────────────────────────────── */
/* ── Каталог проектов ──────────────────────────────────────────────────────
   Ровно две колонки, разделённые волосяными линиями. Число колонок задано
   явно, а не через auto-fit: рамки между ячейками рисуются по формуле
   «нет левой границы у первого в ряду», и она обязана знать ширину ряда. */
.works{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0;
  border-bottom:1px solid var(--ink);
}
.works > *{ border-left:1px solid var(--line); }
.works > *:nth-child(2n+1){ border-left:0; padding-left:0; }

@media (max-width:1000px){
  .works{ grid-template-columns:1fr; }
  .works > *{ border-left:0; padding-left:0; padding-right:0; }
}

/* ── widgets/testimonials/ui.css ──────────────────────────────── */
/* ── Секция отзывов ────────────────────────────────────────────────────────
   Фотография на фоне убрана: она делала блок тяжёлым и «рекламным».
   Осталась чистая сетка цитат на бумаге.                              */
.voices{ position:relative; }
.voices__bg,
.voices__veil{ display:none; }
.voices .shell{ position:relative; }

.voices__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-bottom:1px solid var(--ink);
}
.voices__grid > *{ border-left:1px solid var(--line); }
.voices__grid > *:nth-child(3n+1){ border-left:0; padding-left:0; }
/* Один-два отзыва не должны растягиваться во всю ширину листа */
.voices__grid--few{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.voices__grid--few > *:nth-child(2n+1){ border-left:0; padding-left:0; }

.disclaimer{
  margin-top:26px; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.1em; color:var(--ink-mute);
}

@media (max-width:1000px){
  .voices__grid,
  .voices__grid--few{ grid-template-columns:1fr; }
  .voices__grid > *{ border-left:0 !important; padding-left:0 !important; padding-right:0; }
}

/* ── widgets/reviews/ui.css ──────────────────────────────── */
/* ── Секция отзывов на главной ─────────────────────────────────────────── */
.voices__cta{ margin-top:32px; }
.reviews-grid{ margin-top:4px; }

/* ── widgets/journal/ui.css ──────────────────────────────── */
/* ── Лента разборов ────────────────────────────────────────────────────── */
.journal{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-bottom:1px solid var(--line);
}
.journal > *{ border-left:1px solid var(--line); }
.journal > *:nth-child(3n+1){ border-left:0; padding-left:0; }
.journal__more{ margin-top:26px; }

/* Страница одного разбора */
.article{ max-width:720px; }
.article__body{ font-size:1.05rem; color:var(--ink-dim); line-height:1.7; }
.article__body p{ margin-bottom:1.15em; }
.article--next{ margin-top:56px; padding-top:26px; border-top:1px solid var(--ink); }

@media (max-width:1000px){
  .journal{ grid-template-columns:repeat(2,1fr); }
  .journal > *:nth-child(3n+1){ border-left:1px solid var(--line); padding-left:24px; }
  .journal > *:nth-child(2n+1){ border-left:0; padding-left:0; }
}
@media (max-width:700px){
  .journal{ grid-template-columns:1fr; }
  .journal > *{ border-left:0 !important; padding-left:0 !important; padding-right:0; }
}

/* ── widgets/comments/ui.css ──────────────────────────────── */
/* ── Комментарии: гостевая книга и обсуждение проекта ──────────────────── */
.comments{ max-width:820px; }
.comments--wide{ max-width:none; }

.comment-form{
  padding:26px 0 28px; margin-bottom:12px;
  border:0; border-top:1px solid var(--ink); border-radius:0; background:none;
}
.comment-form__head{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px;
}
.comment-form__namelabel{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-mute); white-space:nowrap;
}
.field--inline{ width:auto; flex:1; min-width:170px; padding:9px 2px; font-size:.94rem; }
.comment-form__actions{ margin-top:18px; }
.comment-form__who{ color:var(--ink); }

.comment-list{ display:flex; flex-direction:column; gap:0; }

.auth-hint{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px; padding:22px 0 24px; margin-bottom:8px;
  border:0; border-top:1px solid var(--ink); border-radius:0; background:none;
}
.auth-hint p{ margin:0; color:var(--ink-dim); font-size:.95rem; max-width:48ch; }
.auth-hint__actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ── widgets/contact/ui.css ──────────────────────────────── */
/* ── Контакты ──────────────────────────────────────────────────────────────
   Слева список каналов связи строками таблицы, справа бланк заявки.   */
.contact__grid{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:0;
  border-top:1px solid var(--ink);
}
.contact__grid > *:last-child{ border-left:1px solid var(--line); }

.contact__card{
  padding:32px 34px 34px 0; border:0; border-radius:0; background:none;
}
.contact__grid > *:last-child .contact__card{ padding:32px 0 34px 34px; }

.contact__card-title{ font-size:1.15rem; letter-spacing:-.03em; margin-bottom:8px; }
.contact__card-sub{ color:var(--ink-dim); font-size:.92rem; }
.contact__card-sub--gap{ margin-bottom:26px; }

.contact-list{ display:flex; flex-direction:column; gap:0; margin-top:24px; }
.contact-item{
  display:flex; align-items:center; gap:15px; padding:15px 0;
  border:0; border-top:1px solid var(--line); border-radius:0; background:none;
  transition:padding-left .22s var(--ease), color .18s var(--ease);
}
.contact-item:last-child{ border-bottom:1px solid var(--line); }
.contact-item:hover{ transform:none; box-shadow:none; padding-left:10px; color:var(--cyan); }
.contact-item__ico{
  width:26px; height:26px; border:0; border-radius:0; background:none;
  display:grid; place-items:center; flex-shrink:0;
  font-size:.95rem; color:var(--cyan);
}
.contact-item__k{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-mute);
}
.contact-item__v{ font-weight:600; font-size:.98rem; }

@media (max-width:900px){
  .contact__grid{ grid-template-columns:1fr; }
  .contact__grid > *:last-child{ border-left:0; border-top:1px solid var(--line); }
  .contact__card,
  .contact__grid > *:last-child .contact__card{ padding:26px 0 28px; }
}

/* ── widgets/site-footer/ui.css ──────────────────────────────── */
/* ── Подвал ────────────────────────────────────────────────────────────────
   Крупный словесный знак и три колонки ссылок. Портрет на фоне убран:
   он перегружал низ страницы и повторял фотографию из первого экрана. */
.foot{
  position:relative; margin-top:0; padding:70px 0 0;
  border-top:1px solid var(--ink); overflow:hidden;
}
.foot__portrait{ display:none; }
.foot::after{ content:none; }

.foot__mark{ margin-bottom:44px; }
.foot__wordmark{
  display:block; font-family:var(--display); font-weight:900;
  font-size:clamp(2.6rem,10vw,7rem); line-height:.85; letter-spacing:-.06em;
  color:var(--ink);
}
.foot__sub{
  display:block; margin-top:12px;
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);
}

.foot__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  padding-bottom:44px; border-top:1px solid var(--line);
}
.foot__col{ padding:26px 24px 0 24px; border-left:1px solid var(--line); }
.foot__col:first-child{ border-left:0; padding-left:0; }

.foot__col h4{
  margin-bottom:16px; font-family:var(--mono); font-weight:500; font-size:.64rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);
}
.foot__col a{
  display:block; margin-bottom:9px; color:var(--ink-dim); font-size:.9rem;
  transition:color .18s var(--ease);
}
.foot__col a:hover{ color:var(--cyan); transform:none; }

.foot__pulse{
  display:inline-flex; align-items:center; gap:9px; padding:0;
  border:0; border-radius:0; background:none;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink);
}
.foot__pulse .dot{
  width:7px; height:7px; border-radius:50%; background:var(--ok);
  box-shadow:none; animation:blink 2.4s infinite;
}
.foot__note{ margin-top:10px; font-size:.82rem; color:var(--ink-mute); }

.foot__bottom{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  padding:20px 0 26px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.64rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-mute);
}

@media (max-width:900px){
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .foot__col{ padding:22px 0 0; border-left:0; }
  .foot__col:nth-child(even){ padding-left:20px; border-left:1px solid var(--line); }
}

/* ── pages: композиция конкретных страниц ── */

/* ── pages/home/ui.css ──────────────────────────────── */
/* ── Композиция главной ────────────────────────────────────────────────── */
.home-terminal{ max-width:900px; }

/* Секции главной пронумерованы: порядок в поле слева задаётся вручную,
   чтобы совпадать с нумерацией в шапке. */
.section--num{ position:relative; }

/* ── pages/project/ui.css ──────────────────────────────── */
/* ── Страница проекта ──────────────────────────────────────────────────── */
.case-back{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-mute);
  transition:color .18s var(--ease);
}
.case-back:hover{ color:var(--cyan); }
.case-back--block{ display:block; width:fit-content; margin-bottom:22px; }
.case-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }

/* ── pages/post/ui.css ──────────────────────────────── */
/* ── Страница разбора ──────────────────────────────────────────────────── */
.post-meta{
  color:var(--ink-mute); font-family:var(--mono); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase;
}
.post-tag{ margin:20px 0 12px; }
.post-divider{ margin:28px 0; }

/* Пара блоков «проблема / решение» */
.case-pair{
  display:grid; grid-template-columns:1fr 1fr; gap:0; margin:0 0 40px;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--line);
}
.case-pair__block{
  padding:24px 26px 26px 0; border:0; border-radius:0; background:none;
}
.case-pair__block + .case-pair__block{ padding:24px 0 26px 26px; border-left:1px solid var(--line); }
.case-pair__title{
  display:flex; align-items:baseline; gap:10px; font-size:1rem;
  letter-spacing:-.02em; margin-bottom:12px;
}
.case-pair__title i{
  width:auto; height:auto; border:0; border-radius:0; background:none;
  font-style:normal; font-family:var(--mono); font-size:.64rem;
  font-weight:500; letter-spacing:.16em;
}
.case-pair__block--problem  .case-pair__title i{ color:var(--danger); }
.case-pair__block--solution .case-pair__title i{ color:var(--ok); }
.case-pair__block p{ margin:0; color:var(--ink-dim); font-size:.95rem; }

.article__h{ font-size:1.15rem; letter-spacing:-.03em; margin:0 0 16px; color:var(--ink); }

/* Итоговый вывод */
.takeaway{
  margin-top:36px; padding:0 0 0 24px; border:0; border-left:2px solid var(--cyan);
  border-radius:0; background:none;
}
.takeaway__label{
  display:block; margin-bottom:8px; font-family:var(--mono); font-size:.64rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cyan);
}
.takeaway p{
  margin:0; font-family:var(--display); font-weight:700;
  font-size:1.15rem; line-height:1.35; letter-spacing:-.03em; color:var(--ink);
}

@media (max-width:700px){
  .case-pair{ grid-template-columns:1fr; }
  .case-pair__block,
  .case-pair__block + .case-pair__block{ padding:20px 0; border-left:0; }
  .case-pair__block + .case-pair__block{ border-top:1px solid var(--line); }
}

/* ── pages/reviews/ui.css ──────────────────────────────── */
/* ── Композиция страницы отзывов ───────────────────────────────────────── */
.reviews-page__grid{ margin-top:8px; }

/* ── pages/skills/ui.css ──────────────────────────────── */
/* ── Страница «Стек подробно» ──────────────────────────────────────────────
   Спокойное чтение: ни раскрытий, ни анимаций. Оглавление сверху,
   дальше — строки описи, разделённые волосяными линиями.              */

/* Оглавление */
.skills-toc{
  display:flex; flex-wrap:wrap; gap:0; margin-bottom:46px;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--line);
}
.skills-toc__link{
  display:inline-flex; align-items:baseline; gap:9px;
  padding:13px 20px 13px 0; margin-right:20px;
  border:0; border-radius:0; background:none;
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim);
  transition:color .18s var(--ease);
}
.skills-toc__link:hover{ color:var(--cyan); border-color:transparent; }
.skills-toc__link span{
  font-family:var(--mono); font-size:.66rem; color:var(--ink-mute);
  padding:0; border-radius:0; background:none;
}

/* Категория */
.skills-block{ margin-bottom:54px; scroll-margin-top:calc(var(--nav-h) + 24px); }
.skills-block__head{ margin-bottom:6px; }
.skills-block__title{
  font-size:1.5rem; letter-spacing:-.035em; margin-bottom:8px;
  padding-bottom:12px; border-bottom:1px solid var(--ink);
}
.skills-block__note{ margin:12px 0 0; font-size:.9rem; color:var(--ink-dim); max-width:68ch; }

/* Строка навыка */
.skill-rows{ display:flex; flex-direction:column; gap:0; }
.skill-row{
  display:grid; grid-template-columns:78px 1fr; gap:22px;
  padding:24px 0; border:0; border-bottom:1px solid var(--line);
  border-radius:0; background:none;
  scroll-margin-top:calc(var(--nav-h) + 24px);
}
.skill-row__side{ display:block; }
.skill-row__icon{
  width:auto; height:auto; border:0; border-radius:0; background:none;
  display:block; font-family:var(--mono); font-weight:500; font-size:.68rem;
  letter-spacing:.16em; color:var(--cyan);
}
.skill-row__name{ font-size:1.1rem; letter-spacing:-.03em; margin-bottom:10px; }
.skill-row__lead{ margin:0 0 10px; color:var(--ink); font-size:.98rem; max-width:74ch; }
.skill-row__details{ margin:0 0 12px; color:var(--ink-dim); font-size:.94rem; max-width:74ch; }
.skill-row__where{
  margin:0; font-size:.88rem; color:var(--ink-dim);
  padding-left:14px; border-left:1px solid var(--cyan);
}
.skill-row__where-label{
  display:block; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cyan); margin-bottom:3px;
}
.skill-row:target{ background:var(--surface-flat); box-shadow:none; border-color:var(--ink); }

/* Призыв в конце страницы */
.skills-cta{
  margin-top:26px; padding:34px 0 0; border:0; border-top:1px solid var(--ink);
  border-radius:0; background:none; text-align:left;
}
.skills-cta p{ margin:0 0 20px; max-width:56ch; color:var(--ink-dim); }
.skills-cta__actions{ display:flex; flex-wrap:wrap; gap:12px; }

@media (max-width:700px){
  .skill-row{ grid-template-columns:1fr; gap:10px; padding:20px 0; }
  .skill-row__side{ margin-bottom:2px; }
}

/* ── pages/inbox/ui.css ──────────────────────────────── */
/* ── Панель заявок владельца ─────────────────────────────────────────────── */

.shell--narrow{ width:min(100% - 40px,900px); }

.inbox__head{
  display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start;
  justify-content:space-between; margin-bottom:34px;
}
.inbox__new-badge{
  display:inline-block; margin-left:12px; padding:5px 13px; border-radius:0;
  font-size:.72rem; font-weight:700; letter-spacing:.04em; vertical-align:middle;
  color:var(--on-accent); background:var(--grad-main);
  box-shadow:0 6px 20px -8px color-mix(in srgb,var(--cyan) 80%,transparent);
}

/* Сводка */
.inbox__stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:30px;
}
.inbox__stat{
  padding:22px 24px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--panel);
  border-left:3px solid var(--acc);
}
.inbox__stat-value{
  font-size:2rem; font-weight:800; line-height:1; color:var(--acc); margin-bottom:6px;
}
.inbox__stat-label{ font-size:.85rem; color:var(--ink-mute); }

/* Панель фильтров */
.inbox__toolbar{
  display:flex; flex-wrap:wrap; gap:16px; align-items:center;
  justify-content:space-between; margin-bottom:24px;
}
.inbox__tabs{ margin-bottom:0; }
.tab__count{
  margin-left:8px; padding:1px 7px; border-radius:0;
  font-family:var(--mono); font-size:.7rem; background:var(--surface-hover);
}
.tab.is-active .tab__count{ background:color-mix(in srgb,var(--on-accent) 22%,transparent); }

.inbox__search{ position:relative; display:flex; gap:8px; align-items:center; flex:1; min-width:260px; }
.inbox__search .field{ flex:1; padding-block:10px; }
.inbox__clear{
  position:absolute; right:96px; width:24px; height:24px; display:grid; place-items:center;
  border-radius:0; color:var(--ink-mute); font-size:1.1rem; line-height:1;
}
.inbox__clear:hover{ color:var(--ink); background:var(--surface-hover); }

/* Список */
.inbox__list{ display:flex; flex-direction:column; gap:12px; }

/* Пустое состояние */
.inbox-empty{ padding:60px 34px; }
.inbox-empty__icon{
  font-size:2.6rem; margin-bottom:14px; color:var(--cyan);
  text-shadow:0 0 26px color-mix(in srgb,var(--cyan) 55%,transparent);
}
.inbox-empty h3{ font-size:1.2rem; margin-bottom:8px; color:var(--ink); }
.inbox-empty p{ margin:0; }
.inbox-empty a{ color:var(--cyan); }

/* Страницы */
.pager{
  display:flex; align-items:center; justify-content:center; gap:20px; margin-top:34px;
  font-size:.9rem;
}
.pager__link{ color:var(--cyan); font-weight:600; }
.pager__info{ color:var(--ink-mute); font-family:var(--mono); font-size:.8rem; }

@media (max-width:720px){
  .inbox__stats{ grid-template-columns:1fr; }
  .inbox__toolbar{ flex-direction:column; align-items:stretch; }
  .inbox__clear{ right:96px; }
}

/* ── pages/auth/ui.css ──────────────────────────────── */
/* ── Страницы входа, регистрации и профиля ────────────────────────────────
   Бланк на бумаге: рамка в одну линию, никакого стекла и свечения.    */
.auth-wrap{
  min-height:100svh; display:grid; place-items:center;
  padding:calc(var(--nav-h) + 48px) 0 70px;
}
.auth-card{
  width:min(100% - 40px,470px); padding:40px 38px 38px;
  border:1px solid var(--ink); border-radius:0;
  background:var(--panel); box-shadow:none;
}
.auth-card__mark{
  width:auto; height:auto; margin-bottom:22px; display:block;
  border-radius:0; background:none; box-shadow:none;
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--cyan);
}
.auth-card h1{ font-size:1.8rem; letter-spacing:-.04em; margin-bottom:8px; }
.auth-card__sub{ color:var(--ink-dim); font-size:.93rem; margin-bottom:28px; }
.auth-card__foot{
  margin-top:24px; padding-top:20px; border-top:1px solid var(--line);
  font-size:.86rem; color:var(--ink-dim);
  display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between;
}
.auth-card__foot a{ color:var(--ink); border-bottom:1px solid var(--cyan); }
.auth-card__foot a:hover{ color:var(--cyan); }

.profile{ padding:calc(var(--nav-h) + 64px) 0 80px; }
.profile__comments{ margin-top:48px; }
.profile__block{ margin-top:46px; }
.profile__actions{ margin-top:18px; }

/* Подтверждение почты */
.field--code{
  font-family:var(--mono); font-size:1.6rem; letter-spacing:.45em;
  text-align:center; padding-left:.45em;
}
.auth-card__mail{ color:var(--cyan); }
.verify-resend{ margin-top:12px; }
.verify-note{
  margin-top:20px; padding:14px 0 0; border:0; border-top:1px solid var(--line);
  border-radius:0; background:none;
  font-size:.8rem; color:var(--ink-mute); line-height:1.5;
}
.link-button{
  background:none; border:0; padding:0; color:var(--ink);
  border-bottom:1px solid var(--cyan);
  font-size:.86rem; cursor:pointer;
}
.link-button:hover{ color:var(--cyan); text-decoration:none; }

/* Код на экране, пока почта не настроена (только режим разработки) */
.dev-code{
  display:block; margin-bottom:22px; padding:16px 18px;
  border:1px dashed var(--line-strong); border-radius:0;
  background:none; text-align:center;
}
.dev-code__label{
  display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cyan); margin-bottom:8px;
}
.dev-code__value{
  display:block; font-family:var(--mono); font-size:1.7rem; letter-spacing:.32em;
  color:var(--ink); margin-bottom:10px;
}
.dev-code__hint{ display:block; font-size:.76rem; color:var(--ink-dim); line-height:1.5; }
.dev-code code,
.verify-note code{
  font-family:var(--mono); font-size:.95em; padding:1px 4px; border-radius:0;
  background:var(--surface-hover); color:var(--ink);
}

/* ── pages/error/ui.css ──────────────────────────────── */
/* ── Страница 404 ──────────────────────────────────────────────────────── */
.error-code{
  font-family:var(--display); font-weight:900;
  font-size:clamp(4.5rem,20vw,12rem); line-height:.82; letter-spacing:-.07em;
  color:var(--cyan); background:none; -webkit-text-fill-color:currentColor;
}
.error-box{ text-align:left; max-width:600px; }
.error-title{ font-size:1.7rem; letter-spacing:-.035em; margin-top:14px; }
.error-box .lead{ margin-inline:0; }
.error-cta{ margin-top:22px; }

/* ── app: адаптив и доступность идут последними ── */

/* ── app/styles/responsive.css ──────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════
   АДАПТИВ — единственное место со всеми брейкпоинтами.

   Телефон здесь не «сжатый десктоп». Раскладка другая по существу:

     • первый экран короткий — имя, одна фраза, две кнопки;
     • тяжёлые разделы свёрнуты в складное досье (features/mobile-layout);
     • снизу закреплена панель связи — до неё не надо листать;
     • всё, что было в две-три колонки, становится одной;
     • прибор перегрузки и подсказка о прокрутке убраны: на телефоне
       палец и так знает, что делать, а место дороже.

   Брейкпоинты:
     1180px — теряется поле с номерами разделов
     1000px — сетки схлопываются в одну колонку
      900px — переход на «телефонную» раскладку: досье, панель, меню
      560px — самые узкие экраны
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1180px: поле с номерами сужается ───────────────────────────────────── */
@media (max-width:1180px){
  :root{ --margin-w:56px; }
  .rail::before{ left:calc(var(--margin-w) - 20px); }
}


/* ── 1000px: две колонки становятся одной ──────────────────────────────── */
@media (max-width:1000px){
  .hero__body{ grid-template-columns:1fr; gap:32px; }
  .hero__visual{ max-width:340px; }
  .contact__grid{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
}


/* ══════════════════ 900px: ТЕЛЕФОННАЯ РАСКЛАДКА ══════════════════════════ */
@media (max-width:900px){
  :root{ --nav-h:58px; --margin-w:0px; }

  .shell,.shell--narrow{ width:calc(100% - 32px); }

  /* ── Шапка: знак, тема, бургер. Кнопки входа уезжают в меню ── */
  .nav__logo-text em{ display:none; }
  .nav__logo-text b{ font-size:.92rem; }
  /* Кнопки входа и регистрации целиком уезжают в меню:
     в полосе шириной с телефон им места нет. */
  .nav__login,
  .nav__side > .btn,
  .nav__side .nav__logout,
  .nav__uname{ display:none; }
  .nav__burger{ display:block; }

  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto; z-index:55;
    flex-direction:column; gap:0; margin:0; padding:6px 16px 18px;
    background:var(--bg); border-bottom:1px solid var(--ink);
    transform:translateY(-115%); transition:transform .32s var(--ease);
  }
  .nav__links.is-open{ transform:none; }
  .nav__links a{
    padding:15px 2px; border-bottom:1px solid var(--line);
    font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  }
  .nav__links a::after{ display:none; }
  /* Вход и регистрация дописываются в меню — иначе они недоступны */
  .nav__links::after{
    content:""; display:block; height:0;
  }

  /* ── Первый экран: коротко ── */
  .hero{ min-height:auto; padding:calc(var(--nav-h) + 30px) 0 40px; }
  .hero__status{ margin-bottom:18px; font-size:.62rem; letter-spacing:.16em; }
  .hero__name{ font-size:clamp(2.6rem,17.5vw,4.6rem); letter-spacing:-.055em; }
  .hero__patronymic{
    margin-top:10px; font-size:.58rem; letter-spacing:.18em; line-height:1.5;
  }
  .hero__patronymic::after{ display:none; }
  .hero__body{ margin-top:22px; gap:26px; }
  .hero__slogan{ max-width:none; font-size:1.08rem; }

  /* Показания — тремя строками таблицы, а не колонками */
  .hero__gauges{ flex-direction:column; margin:22px 0 24px; }
  .hero__gauge{
    flex:none; width:100%; min-width:0; padding:12px 0;
    border-left:0; border-top:1px solid var(--line);
  }
  .hero__gauge:first-child{ border-top:0; }
  .hero__gauge dt{ margin-bottom:4px; }
  .hero__gauge dd{ font-size:1rem; }
  .hero__gauge dd small{ display:inline; margin-left:8px; }

  .hero__cta{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .hero__cta .btn{ width:100%; padding:14px 10px; }

  /* Фотографии на телефоне нет: первый экран должен помещаться целиком,
     а портрет съедал полтора экрана прокрутки до первой кнопки. */
  .hero__visual{ display:none; }
  .hero__scroll{ display:none; }

  /* ── Секции ── */
  .section{ padding:26px 0; }
  .section--tight{ padding:26px 0; }
  /* У свёрнутых разделов свои отступы задаёт строка досье,
     иначе между заголовками остаются пустые полосы в полэкрана. */
  [data-fold]{ padding:0; }
  .section + .section::before{ display:none; }
  .section--page{ padding-top:calc(var(--nav-h) + 34px); }

  /* Внутри свёрнутого досье заголовок секции не нужен —
     его роль играет кнопка. Отступы тоже режем. */
  .section__head{ margin-bottom:24px; }
  .h-section{ font-size:clamp(1.6rem,7vw,2.2rem); }
  .lead{ font-size:.96rem; }

  /* ── Сетки в одну колонку ── */
  .skills{ grid-template-columns:1fr 1fr; }
  .stats,.stats--3{ grid-template-columns:1fr 1fr; }
  .form-grid{ grid-template-columns:1fr; }

  /* ── Лента стека: тоньше ── */
  .marquee{ padding:8px 0; }
  .marquee__item{ font-size:.66rem; letter-spacing:.12em; gap:14px; padding-right:14px; }

  /* ── Терминал: короче строки ── */
  .terminal__body{ font-size:.7rem; padding:16px 12px 18px; min-height:150px; line-height:1.75; }

  /* ── Подвал ── */
  .foot{ padding:44px 0 0; }
  .foot__mark{ margin-bottom:28px; }
  .foot__wordmark{ font-size:clamp(2.4rem,17vw,4rem); }
  .foot__bottom{ flex-direction:column; gap:6px; padding-bottom:20px; }

  /* Панель действий снизу перекрывала бы последнюю строку подвала */
  .foot__bottom{ margin-bottom:8px; }
}


/* ── 560px: самые узкие экраны ─────────────────────────────────────────── */
@media (max-width:560px){
  .shell,.shell--narrow{ width:calc(100% - 24px); }

  .skills{ grid-template-columns:1fr; }
  .stats,.stats--3{ grid-template-columns:1fr; }
  .stat{ border-left:0 !important; padding-left:0 !important; }

  .hero__cta{ grid-template-columns:1fr; }

  .foot__grid{ grid-template-columns:1fr; }
  .foot__col,
  .foot__col:nth-child(even){ padding-left:0; border-left:0; border-top:1px solid var(--line); }
  .foot__col:first-child{ border-top:0; }

  .auth-card{ padding:30px 22px 28px; }
  .btn{ padding:13px 18px; }
}

/* ── app/styles/a11y.css ──────────────────────────────── */
/* ── Доступность и печать ──────────────────────────────────────────────── */

/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* Только для скринридеров */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── Печать: сайт и так свёрстан как документ, убираем только интерфейс ── */
@media print{
  .nav,.foot,.to-top,.paper,.boot,.gmeter,.dock,.marquee,
  .toasts,.scroll-progress{ display:none !important; }
  body{ background:#fff; color:#000; padding:0; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .section{ padding:24px 0; break-inside:avoid; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.7em; color:#555; }
}