/* Вид страниц интерфейса Storiteca.
 *
 * Правило, из которого всё растёт: пока человек выбирает — плотно, картинками,
 * в сетке; как только начал читать — широко, серифом, без мебели. Здесь живёт
 * первая половина. Вторая — в templates/article/_style.css, и токены там те же
 * до значения: статья носит свой стиль внутри себя и этот файл не видит.
 *
 * Слои названы заранее, чтобы порядок правил не зависел от порядка строк:
 * компонент никогда не перебьёт токен, а страница — компонент.
 */
@layer tokens, base, components, pages;

/* ───────────────────────────────────────────────────────────────── токены */
@layer tokens {
  :root {
    color-scheme: light dark;

    /* Нейтральные уведены в тепло — под ржавый акцент, который у продукта уже
       есть. Чистый серый рядом с ним читается как случайный. */
    --bg:        #ffffff;
    --surface:   #f7f6f4;
    --sunk:      #efece7;
    --ink:       #1b1a18;
    --muted:     #6a655e;
    --line:      #e6e3dd;
    --line-strong:#cfcac2;

    --accent:      #b4400f;
    --accent-soft: #f7ece6;
    /* Цвет текста на акценте — токен, а не константа. Раньше здесь стоял
       жёсткий #fff, и в тёмной теме кнопка давала 2.23:1 при норме 4.5. */
    --on-accent:   #ffffff;

    --ok:  #1a7f37;
    --err: #b00020;

    --shadow: 0 1px 2px rgba(27,26,24,.06), 0 8px 24px rgba(27,26,24,.07);

    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
    /* Та же подстановка, что у статьи: charter на маках, Georgia на Windows. */
    --serif: charter, "Bitstream Charter", Georgia, Cambria,
             "Times New Roman", serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Восемь ступеней кегля вместо девятнадцати. Названы по роли: разница
       между 12.5 и 13 не значила ничего и не читалась. */
    --t-pill:  12px;   /* метки, пилюли, счётчики */
    --t-meta:  13px;   /* подписи и мета под заголовком */
    --t-ui:    15px;   /* основной размер интерфейса */
    --t-lead:  17px;   /* знак, крупное в интерфейсе */
    --t-read:  21px;   /* текст статьи, где он показан */
    --t-sub:   27px;   /* глава */
    --t-big:   34px;   /* цифра расхода, заголовок на узком экране */
    --t-title: 44px;   /* заголовок */

    /* Восемь шагов отступа вместо двадцати восьми. */
    --s1:4px; --s2:8px; --s3:12px; --s4:16px;
    --s5:24px; --s6:32px; --s7:48px; --s8:72px;

    /* Три радиуса: кадр в тексте, коробка, пилюля. */
    --r-img:2px; --r-box:8px; --r-pill:999px;

    --measure: 720px;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg:        #121110;
      --surface:   #1b1a18;
      --sunk:      #232120;
      --ink:       #ece9e4;
      --muted:     #a09a92;
      --line:      #2a2825;
      --line-strong:#413d38;

      --accent:      #ff8a5c;
      --accent-soft: #2b1d16;
      --on-accent:   #221000;

      --ok:  #4ac26b;
      --err: #ff6b6b;

      --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45);
    }
  }
}

/* ───────────────────────────────────────────────────────────────── основа */
@layer base {
  * { box-sizing: border-box; }

  body {
    margin:0; background:var(--bg); color:var(--ink);
    font:400 var(--t-ui)/1.6 var(--sans);
    -webkit-font-smoothing:antialiased;
  }

  /* Снизу оставлено на полосу дока: она приклеена к низу экрана и без запаса
     накрыла бы последнюю строку списка. Запас со шкалы, а не на глаз. */
  .wrap { max-width:var(--measure); margin:0 auto;
          padding:var(--s7) var(--s5) calc(var(--s8) + var(--s7)); }

  h1 { font:700 var(--t-big)/1.15 var(--sans); letter-spacing:-.025em;
       margin:0 0 var(--s3); text-wrap:balance; }
  h2 { font:600 var(--t-lead)/1.3 var(--sans); letter-spacing:-.015em;
       margin:var(--s6) 0 var(--s3); }
  p  { margin:0 0 1em; }

  a { color:var(--accent); text-underline-offset:2px; }

  /* Фокус рисуем сами и одинаково: браузерное кольцо садилось на галочку
     20×20 в углу строки, хотя целью нажатия была вся строка. */
  :focus-visible { outline:2px solid var(--accent); outline-offset:2px;
                   border-radius:var(--r-img); }

  .lead { color:var(--muted); margin:0 0 var(--s5); }
  .hint { color:var(--muted); font-size:var(--t-meta); margin-top:var(--s3); }
  .back { display:inline-block; margin-bottom:var(--s4);
          font-size:var(--t-meta); text-decoration:none; }

  code { font:400 .87em/1 var(--mono); background:var(--sunk);
         padding:.18em .4em; border-radius:var(--r-img); }
  pre  { background:var(--sunk); border:1px solid var(--line);
         border-radius:var(--r-box); padding:var(--s4);
         overflow-x:auto; font-size:var(--t-meta); line-height:1.5; }
}

/* ─────────────────────────────────────────────────────────── компоненты */
@layer components {

  /* ── поверхность */
  .card { background:var(--surface); border:1px solid var(--line);
          border-radius:var(--r-box); padding:var(--s5); }

  /* ── сказать человеку что-то важное.
     Было четыре способа: .err, .note, .closed, .hint. Здесь два, и разница
     между ними одна — случилась беда или просто есть что сообщить. */
  .note, .err {
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-box); padding:var(--s4);
    font-size:var(--t-ui); color:var(--muted); margin-bottom:var(--s5);
  }
  .err { border-color:var(--err); color:var(--err); }
  .closed { margin:0; font-weight:600; color:var(--ink); }

  /* ── здесь пока пусто.
     Было три ответа на один вопрос: строка «Видео не найдены» внутри списка,
     серая подсказка под кнопкой и — на главной без статей — ничего вовсе.
     Теперь один, и он всегда говорит, что делать дальше. */
  .empty { border:1px dashed var(--line-strong); border-radius:var(--r-box);
           padding:var(--s6) var(--s5); text-align:center;
           color:var(--muted); font-size:var(--t-ui); }
  .empty b { display:block; color:var(--ink); font-size:var(--t-lead);
             font-weight:600; margin-bottom:var(--s2); }
  .empty .btn, .empty form { margin-top:var(--s4); }

  /* ── кнопки. Два размера, три роли, и ни одного жёсткого белого. */
  button, .btn {
    display:inline-block; padding:var(--s3) var(--s4);
    font:600 var(--t-meta)/1.45 var(--sans);
    border:1px solid transparent; border-radius:var(--r-box);
    background:var(--accent); color:var(--on-accent);
    text-align:center; text-decoration:none; cursor:pointer;
  }
  button:hover, .btn:hover { filter:brightness(1.07); }
  button.ghost, .btn.ghost {
    background:transparent; color:var(--ink);
    border-color:var(--line-strong); font-weight:500;
  }
  button.ghost:hover, .btn.ghost:hover { filter:none; border-color:var(--muted); }
  button:disabled { opacity:.45; cursor:default; filter:none; }
  /* Кнопка, которая объясняет, почему её нельзя нажать. Приглушена, но
     читаема: выключенная кнопка со словами «Сделать статью» читалась бы
     как поломка сайта, а не как отказ. */
  button.why:disabled { opacity:1; background:transparent; color:var(--muted);
                        border:1px dashed var(--line-strong); font-weight:500; }
  .one { flex:none; align-self:center; padding:var(--s2) var(--s3);
         white-space:nowrap; }
  .big  { display:block; text-align:center; margin-top:var(--s5);
          padding:var(--s3); font-size:var(--t-ui); }
  .choice { display:flex; gap:var(--s3); flex-wrap:wrap; margin:var(--s5) 0; }

  /* ── поля */
  label { display:block; font-size:var(--t-meta); color:var(--muted);
          margin-bottom:var(--s1); }
  input, select {
    width:100%; padding:var(--s3); font:400 var(--t-ui)/1.4 var(--sans);
    background:var(--bg); color:var(--ink);
    border:1px solid var(--line-strong); border-radius:var(--r-box);
  }
  input:focus, select:focus { outline:2px solid var(--accent); outline-offset:-1px; }
  .pair { display:flex; gap:var(--s3); }
  .pair button { flex:none; }

  /* ── метки состояния */
  .tag { display:inline-block; padding:1px var(--s2); border-radius:var(--r-pill);
         border:1px solid var(--line-strong); font-size:var(--t-pill);
         color:var(--muted); }
  .tag.done { color:var(--ok);     border-color:var(--ok); }
  .tag.err  { color:var(--err);    border-color:var(--err); }
  .tag.run  { color:var(--accent); border-color:var(--accent); }

  /* ── лента.
     Один мотив на весь продукт: главы текста как главы на таймлайне видео.
     Отсюда её берут шаги задачи (.steps), пример статьи на главной (.tape)
     и знак в шапке (.strip) — раньше каждое место рисовало её заново. */
  .steps, .tape .track, .strip { display:flex; gap:2px; }
  .steps i, .tape .track i, .strip i {
    display:block; height:4px; border-radius:var(--r-img);
    background:var(--line-strong); overflow:hidden;
  }
  .steps i b, .tape .track b { display:block; height:100%; width:0;
                               background:var(--accent); }
  .steps { gap:3px; }
  .steps i { height:6px; flex:1; }
  .steps i.done b, .steps i.now b, .steps i.bad b { width:100%; }
  .steps i.now b { background:color-mix(in srgb, var(--accent) 45%, var(--line-strong));
                   animation:breathe 1.8s ease-in-out infinite; }
  .steps i.bad b { background:var(--err); }
  @keyframes breathe { 50% { opacity:.4; } }

  .marks { display:flex; gap:3px; margin-top:var(--s2); }
  .marks span { flex:1; text-align:center; font-size:var(--t-pill); line-height:1.35;
                color:var(--muted); }
  .marks span.now { color:var(--ink); font-weight:600; }
  .marks span.bad { color:var(--err); }

  /* ── строка списка: кадр, название, мета.
     Вся строка — цель нажатия, а не галочка в углу: восемнадцать пикселей
     палец находит через раз, а девяносто на всю ширину — всегда. */
  .vids { list-style:none; padding:0; margin:0; }
  .vids li { display:flex; gap:var(--s4); align-items:flex-start;
             padding:var(--s3) 0; border-bottom:1px solid var(--line); }
  .vids img { width:120px; height:68px; flex:none; object-fit:cover;
              border-radius:var(--r-box); background:var(--sunk); }
  /* Заглушка на месте кадра, которого нет. Раньше здесь стоял <img> без
     адреса: строка не разъезжалась, зато браузер рисовал в ней значок
     сломанной картинки — и видео выглядело сломанным. */
  .vids .thumb { width:120px; height:68px; flex:none;
                 border-radius:var(--r-box); background:var(--sunk); }
  .vids .info { flex:1; min-width:0; }
  .vids .t { font-weight:600; line-height:1.35; }
  /* Название готового видео — ссылка на статью, но тихая. Базовый вид ссылки
     красит её акцентом и подчёркивает, и в списке она начинала кричать громче
     собственного заголовка страницы. */
  .vids a.t { color:var(--ink); text-decoration:none; }
  .vids a.t:hover { color:var(--accent); }
  .vids .m { color:var(--muted); font-size:var(--t-meta); margin-top:2px;
             font-variant-numeric:tabular-nums; }
  .vids .tap { display:flex; gap:var(--s4); align-items:flex-start; flex:1;
               min-width:0; cursor:pointer; }
  .vids .tap:focus-within { outline:2px solid var(--accent); outline-offset:4px;
                            border-radius:var(--r-box); }
  .vids input[type=checkbox] { width:20px; height:20px; flex:none; align-self:center;
                               accent-color:var(--accent); }
  .vids form { flex:none; align-self:center; }
  /* ── витрина: сетка карточек.
     Кадр 16:9, длительность ролика пилюлей в углу — там же, где её ставит
     YouTube, — заголовок в две строки и канал под ним. Строка списка с
     картинкой сбоку осталась там, где идёт работа: в своих видео и подписках
     выбирают из списка, а здесь — глазами. */
  /* 300 px — это три карточки в ряд на широкой витрине. При 248 их вставало
     четыре, и заголовок почти любого ролика ломался на две строки. */
  .tiles { list-style:none; padding:0; margin:0; display:grid;
           grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
           gap:var(--s5) var(--s4); }
  .tiles .shot { position:relative; display:block; overflow:hidden;
                 border-radius:var(--r-box); background:var(--sunk); }
  .tiles .shot img { display:block; width:100%; aspect-ratio:16/9;
                     object-fit:cover; }
  /* Пилюля лежит на кадре, а не на фоне страницы: белое по своей тёмной
     подложке не зависит от темы — как и всё, что написано поверх картинки. */
  .tiles .pill { position:absolute; right:var(--s2); bottom:var(--s2);
                 padding:1px var(--s2); border-radius:var(--r-img);
                 background:rgba(18,17,16,.86); color:#fff;
                 font:600 var(--t-pill)/1.7 var(--sans);
                 font-variant-numeric:tabular-nums; }
  .tiles .about { display:flex; gap:var(--s3); margin-top:var(--s3); }
  .tiles .info { flex:1; min-width:0; }
  .tiles .t { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
              overflow:hidden; font-weight:600; line-height:1.35;
              color:var(--ink); text-decoration:none; }
  .tiles .t:hover { color:var(--accent); }
  .tiles .m { color:var(--muted); font-size:var(--t-meta); margin-top:2px; }
  /* Имя канала ведёт на его страницу и остаётся подписью: акцент с
     подчёркиванием перетягивал на себя всё внимание карточки. */
  .tiles .m a { color:inherit; text-decoration:none; }
  .tiles .m a:hover { color:var(--ink); }
  .tiles .tag { flex:none; align-self:flex-start; }

  /* Кружок с буквами вместо аватара: в базе от канала осталось одно имя. */
  .ava { width:32px; height:32px; flex:none; border-radius:var(--r-pill);
         display:grid; place-items:center; font:600 var(--t-pill)/1 var(--sans);
         background:var(--accent-soft); color:var(--accent); }
  .ava.md { width:48px; height:48px; font-size:var(--t-meta); }
  .ava.lg { width:64px; height:64px; font-size:var(--t-lead); }

  .chans img { width:48px; height:48px; border-radius:var(--r-pill); }
  .chans .t a { color:var(--ink); text-decoration:none; }
  .chans .t a:hover { color:var(--accent); }

  .list { list-style:none; padding:0; margin:var(--s3) 0 0; }
  .list li { padding:var(--s3) 0; border-bottom:1px solid var(--line); }
  .list a { color:var(--ink); text-decoration:none; font-weight:600; }
  .list a:hover { color:var(--accent); }
  .list span { display:block; color:var(--muted); font-size:var(--t-meta); }

  /* ── полоса, приклеенная к низу экрана: счётчик выбранного или причина
     отказа. Список длинный, и объяснение, оставшееся над ним, человек
     проматывает в первые полсекунды. */
  .dock { position:fixed; left:0; right:0; bottom:0; z-index:20;
          background:var(--bg); border-top:1px solid var(--line);
          padding:var(--s3) var(--s5); }
  .dock .inner { max-width:var(--measure); margin:0 auto; display:flex;
                 align-items:center; justify-content:space-between; gap:var(--s4); }
  .dock .sum { font-size:var(--t-meta); color:var(--muted); }
  .dock .ends { display:flex; gap:var(--s2); align-items:center; flex:none; }

  /* Заголовок и то, что при нём: ссылка вбок или кнопка действия. Отступы
     заголовка переезжают на строку, иначе их складывалось бы двое. */
  .line { display:flex; align-items:baseline; gap:var(--s4); flex-wrap:wrap;
          margin:var(--s6) 0 var(--s3); }
  .line h1, .line h2 { margin:0; }
  .line form { margin-left:auto; }
  .line .more { font-size:var(--t-meta); color:var(--muted); text-decoration:none; }
  .line .more:hover { color:var(--accent); }

  /* ── шапка. Знак — та же лента глав: три отрезка, первый пройден. */
  .site { display:flex; align-items:center; gap:var(--s5);
          padding-bottom:var(--s4); margin-bottom:var(--s6);
          border-bottom:1px solid var(--line); }
  .site .mark { display:flex; align-items:center; gap:var(--s2);
                font:600 var(--t-lead)/1 var(--sans); letter-spacing:-.025em;
                color:var(--ink); text-decoration:none; }
  .strip { width:26px; flex:none; }
  .strip i:nth-child(1) { flex:2;   background:var(--accent); }
  .strip i:nth-child(2) { flex:1.4; background:var(--accent); opacity:.5; }
  .strip i:nth-child(3) { flex:1; }
  .site nav { display:flex; gap:var(--s5); font-size:var(--t-meta); }
  .site nav a { color:var(--muted); text-decoration:none; }
  .site nav a:hover { color:var(--ink); }
  .site .who { margin-left:auto; font-size:var(--t-meta); color:var(--muted); }
  .site .btn { padding:var(--s2) var(--s3); }
  /* Языки прижаты вправо; стоит за ними «кто» — ему прижиматься уже не к чему. */
  .site .langs { margin-left:auto; display:flex; gap:var(--s3); font-size:var(--t-meta); }
  .site .langs a { color:var(--muted); text-decoration:none; }
  .site .langs a:hover { color:var(--ink); }
  .site .langs + .who { margin-left:0; }
}

/* ───────────────────────────────────────────────────────────────── экраны */
@layer pages {

  /* ── главная.
     Витрине нужна ширина, прозе внутри неё — нет: строка в 1120 px не
     читается. Поэтому страница широкая, а всё, что читают словами, остаётся
     в прежней мере. */
  .wrap.wide { max-width:1120px; }
  .wrap.wide .promise, .wrap.wide .ask, .wrap.wide .demo,
  .wrap.wide .aside, .wrap.wide .work, .wrap.wide > .hint { max-width:var(--measure); }

  /* Одна мысль короткой строкой. Заголовок во весь экран отодвигал вниз
     единственное, за чем сюда приходят, — сами статьи. */
  .promise { font-size:var(--t-lead); line-height:1.5; color:var(--muted);
             margin:0 0 var(--s6); }
  .ask { margin:var(--s6) 0; }
  h2.top { margin-top:0; }

  /* ── шапка страницы канала: кружок, имя, счёт статей, дорога на YouTube. */
  .shop { display:flex; align-items:center; gap:var(--s4);
          margin-bottom:var(--s6); }
  .shop .about { flex:1; min-width:0; }
  .shop h1 { margin:0; }
  .shop .lead { margin:var(--s1) 0 0; }
  .shop .btn { flex:none; }

  .rule { display:flex; align-items:center; gap:var(--s4); margin:var(--s7) 0 var(--s4); }
  .rule span { font-size:var(--t-pill); letter-spacing:.09em; text-transform:uppercase;
               color:var(--muted); }
  .rule::after { content:""; flex:1; height:1px; background:var(--line); }

  .aside { margin-top:var(--s6); padding-left:var(--s4);
           border-left:3px solid var(--accent);
           font-size:var(--t-meta); color:var(--muted); }
  .aside b { display:block; font-size:var(--t-ui); color:var(--ink); }

  /* «В работе» — страница задачи в одну шестую роста. */
  .work { list-style:none; padding:0; margin:0; display:flex;
          flex-direction:column; gap:var(--s3); }
  .work li { border:1px solid var(--line); border-radius:var(--r-box);
             padding:var(--s4); }
  .work .head { display:flex; gap:var(--s4); align-items:center; }
  .work img { width:120px; height:68px; flex:none; object-fit:cover;
              border-radius:var(--r-box); background:var(--sunk); }
  .work .info { flex:1; min-width:0; }
  .work .t { display:block; font-weight:600; line-height:1.35;
             color:var(--ink); text-decoration:none; }
  .work .t:hover { color:var(--accent); }
  .work .m { color:var(--muted); font-size:var(--t-meta); margin-top:var(--s1); }
  .work .steps { margin-top:var(--s3); }
  .work .say { font-size:var(--t-pill); color:var(--muted); margin-top:var(--s2); }
  .work .say.bad { color:var(--err); }

  /* Пример статьи: не рассказ о продукте, а он сам — до шрифта включительно. */
  .demo { display:block; border:1px solid var(--line); border-radius:var(--r-box);
          overflow:hidden; color:inherit; text-decoration:none; }
  .demo:hover { border-color:var(--line-strong); }
  .demo .inside { padding:var(--s6); }
  .demo .meta { font-size:var(--t-meta); color:var(--muted); margin-bottom:var(--s1); }
  .demo h2 { font:700 var(--t-sub)/1.25 var(--sans); letter-spacing:-.02em;
             margin:0 0 var(--s4); }
  .demo .para { font:400 var(--t-read)/1.58 var(--serif); letter-spacing:-.003em;
                margin:0 0 var(--s4); }
  .demo figure { margin:0; }
  .demo figure img { display:block; width:100%; height:auto;
                     border-radius:var(--r-img); background:var(--sunk); }
  .demo figcaption { font-size:var(--t-meta); color:var(--muted);
                     text-align:center; margin-top:var(--s2); }
  .demo figcaption span { border-bottom:1px dotted; }

  .tape { display:flex; align-items:center; gap:var(--s3);
          padding:var(--s3) var(--s4); border-top:1px solid var(--line);
          background:var(--surface); }
  .tape .play { flex:none; width:28px; height:28px; border-radius:var(--r-pill);
                display:grid; place-items:center; font-size:10px;
                background:var(--sunk); color:var(--ink); }
  .tape .track { position:relative; flex:1; align-items:center; }
  .tape .knob { position:absolute; top:50%; width:11px; height:11px;
                margin:-5.5px 0 0 -5.5px; border-radius:var(--r-pill);
                background:var(--accent);
                box-shadow:0 0 0 3px var(--surface); }
  .tape .clock { flex:none; font-size:var(--t-pill); color:var(--muted);
                 font-variant-numeric:tabular-nums; }

  /* ── экран ожидания */
  .made { display:flex; gap:var(--s4); align-items:flex-start;
          margin-bottom:var(--s6); }
  .made img { width:200px; height:113px; flex:none; object-fit:cover;
              border-radius:var(--r-box); background:var(--sunk); }
  .made .about { flex:1; min-width:0; }
  .made h1 { margin:0 0 var(--s1); }
  .made .m { color:var(--muted); font-size:var(--t-ui); }

  .doing { display:flex; align-items:baseline; justify-content:space-between;
           gap:var(--s5); margin-top:var(--s5); }
  .doing #msg { font-size:var(--t-lead); font-weight:600; }
  .doing .of { flex:none; font-size:var(--t-meta); color:var(--muted);
               font-variant-numeric:tabular-nums; }

  .trace { margin-top:var(--s5); background:var(--surface);
           border:1px solid var(--line); border-radius:var(--r-box);
           padding:var(--s4); }
  .trace .cap { font-size:var(--t-pill); color:var(--muted); margin-bottom:var(--s2); }
  .trace .lines { font:400 var(--t-pill)/1.85 var(--mono); color:var(--muted);
                  overflow-wrap:break-word; }
  .trace .lines .now { color:var(--ink); }

  /* Чем кончилось: кнопка или беда. Отступ над ними один, свой у .big уже
     есть, а .err задуман наверху страницы и сверху ничем не отделён. */
  #result .err { margin:var(--s5) 0 0; }

  /* ── расход */
  .row { display:flex; gap:var(--s3); margin-top:var(--s3); }
  .row > div { flex:1; }
  .money b { display:block; font:700 var(--t-big)/1.1 var(--sans);
             letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
  .money span { color:var(--muted); font-size:var(--t-meta); }
  .money.small b { font-size:var(--t-sub); }
  .gauge { height:6px; margin-top:var(--s3); border-radius:var(--r-img);
           background:var(--line-strong); overflow:hidden; }
  .gauge i { display:block; height:100%; background:var(--accent); }
  .who li { display:flex; align-items:center; justify-content:space-between;
            gap:var(--s4); }
  .who .m { color:var(--muted); font-size:var(--t-meta); margin-top:2px;
            font-variant-numeric:tabular-nums; }
  .who span { color:var(--muted); font-size:var(--t-meta); white-space:nowrap;
              font-variant-numeric:tabular-nums; }
  .who form { flex:none; align-self:center; }
}

/* ─────────────────────────────────────────────────────────── узкий экран */
@layer pages {
  @media (max-width: 560px) {
    .wrap { padding:var(--s6) var(--s4) calc(var(--s8) + var(--s5)); }

    .site { flex-wrap:wrap; gap:var(--s3) var(--s4); }
    .site nav { order:3; width:100%; gap:var(--s4); }

    .pair { flex-direction:column; }
    .pair button { width:100%; }

    .demo .inside { padding:var(--s4); }
    .demo h2 { font-size:var(--t-lead); }

    .vids img, .work img { width:96px; height:54px; }
    .work li { padding:var(--s3); }

    /* Шесть подписей под лентой на 360 px нечитаемы. Что идёт сейчас,
       говорит строка под ней — она никуда не делась. */
    .marks { display:none; }
    .made { gap:var(--s3); }
    .made img { width:128px; height:72px; }
    .doing { flex-direction:column; gap:var(--s1); }
  }

  @media (prefers-reduced-motion: reduce) {
    .steps i.now b { animation:none; }
  }
}