/* Нейроранк · макроструктура: Marquee Hero · навигация: боковая панель · подвал: Statement
 * тема: Steep — серифная аналитика на тёплой бумаге
 * акцент: blush peach #fbe1d1 + sienna #5d2a1a · светлая и тёмная
 */

@layer reset, base, layout, components, utilities;

/* ─── Токены ───────────────────────────────────────────────────────────────
   Система почти ахроматична: чернила, три ступени серого и одна тёплая пара
   персик + сиена. Цвет расходуется только там, где несёт смысл, поэтому
   направление динамики передаётся стрелкой и словом, а не зелёным и красным. */
:root {
  color-scheme: light dark;

  /* Светлая палитра */
  --l-ink: #17191c;
  --l-paper: #ffffff;
  --l-mist: #f2f2f3;
  --l-fog: #fafafb;
  --l-hair: #ececec;
  --l-slate: #777b86;
  --l-ash: #979799;
  --l-smoke: #a3a6af;
  --l-blush: #fbe1d1;
  --l-sienna: #5d2a1a;

  /* Тёмная палитра: та же логика, вывернутая. Персик становится глубоким
     тёплым коричневым, а сиена — светлой охрой, иначе она исчезает. */
  --d-ink: #ecedef;
  --d-paper: #131417;
  --d-mist: #1c1e22;
  --d-fog: #17191c;
  --d-hair: #292c31;
  --d-slate: #9aa0ab;
  --d-ash: #7f848e;
  --d-smoke: #6d7178;
  --d-blush: #33231c;
  --d-sienna: #e9b795;

  --ink: light-dark(var(--l-ink), var(--d-ink));
  --paper: light-dark(var(--l-paper), var(--d-paper));
  --mist: light-dark(var(--l-mist), var(--d-mist));
  --fog: light-dark(var(--l-fog), var(--d-fog));
  --hair: light-dark(var(--l-hair), var(--d-hair));
  --slate: light-dark(var(--l-slate), var(--d-slate));
  --ash: light-dark(var(--l-ash), var(--d-ash));
  --smoke: light-dark(var(--l-smoke), var(--d-smoke));
  --blush: light-dark(var(--l-blush), var(--d-blush));
  --sienna: light-dark(var(--l-sienna), var(--d-sienna));
  /* Чернила на персиковой карточке: тёмная сиена днём, светлая ночью. */
  --on-blush: light-dark(#5d2a1a, #f3cdb0);
  /* Заливка кнопки: чернила днём, бумага ночью. */
  --solid: light-dark(var(--l-ink), var(--d-ink));
  --on-solid: light-dark(#ffffff, #17191c);

  --font-display: 'Source Serif 4', 'PT Serif', Georgia, ui-serif, serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-num: 'Inter', ui-sans-serif, system-ui, sans-serif;

  --text-caption: 0.9375rem;
  --text-body: 1.0625rem;
  --text-body-lg: 1.25rem;
  --text-subheading: 1.375rem;
  --text-heading-sm: 1.625rem;
  --text-heading: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  --text-heading-lg: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  --text-display: clamp(2.5rem, 1.2rem + 5.4vw, 5.625rem);

  --s4: 4px;
  --s8: 8px;
  --s12: 12px;
  --s16: 16px;
  --s20: 20px;
  --s24: 24px;
  --s32: 32px;
  --s40: 40px;
  --s64: 64px;
  --s80: 80px;
  --s96: 96px;

  --r-card: 24px;
  --r-small: 16px;
  --r-elevated: 20px;
  --r-image: 12px;
  --r-pill: 9999px;

  --shadow-float: light-dark(
    0 0 0 1px rgba(4, 23, 43, 0.05), 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.06), 0 20px 25px -5px rgba(0, 0, 0, 0.5)
  );
  --shadow-pop: light-dark(
    0 0 0 1px rgba(0, 0, 0, 0.05), 0 8px 40px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 40px rgba(0, 0, 0, 0.6)
  );

  --page: 1200px;
  --rail: 248px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  accent-color: var(--solid);
}

/* Явный выбор темы должен побеждать системную настройку в обе стороны. */
:root[data-theme='light'] { color-scheme: light; }
:root[data-theme='dark'] { color-scheme: dark; }

@layer reset {
  :where(body, h1, h2, h3, h4, p, figure, dl, dd, blockquote) { margin: 0; }
  :where(ul, ol):where([class]) { padding-inline-start: 0; list-style: none; margin: 0; }
  :where(img, svg, video) { display: block; max-inline-size: 100%; height: auto; }
  :where(button, input, select, textarea) { font: inherit; color: inherit; }
  :where(table) { border-collapse: collapse; }
  :where(summary) { cursor: pointer; }
}

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    /* clip, а не hidden: hidden на корне ломает position: sticky. */
    overflow-x: clip;
  }

  body {
    overflow-x: clip;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.5;
    font-weight: 400;
    min-block-size: 100dvh;
    -webkit-font-smoothing: antialiased;
  }

  /* Сериф остаётся в весе 400 на всех размерах — это подпись системы.
     Он не кричит жирным, а говорит спокойно и крупно. */
  h1, h2, h3, .display {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.15;
    text-wrap: balance;
    overflow-wrap: anywhere;
    min-inline-size: 0;
    font-style: normal;
  }
  h1 { font-size: var(--text-heading); letter-spacing: -0.015em; }
  h2 { font-size: var(--text-heading-sm); letter-spacing: -0.009em; line-height: 1.18; }
  h3 {
    font-family: var(--font-body);
    font-size: var(--text-body-lg);
    font-weight: 500;
    letter-spacing: -0.005em;
  }

  p { text-wrap: pretty; }

  a { color: inherit; text-decoration: none; }
  a:where(:hover) { text-decoration: underline; text-underline-offset: 0.22em; }

  :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--solid);
    outline-offset: 2px;
    border-radius: 6px;
  }

  .num, .metric__value, td.num, .mono {
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
  }

  ::placeholder { color: var(--smoke); }
  ::selection { background: var(--blush); color: var(--on-blush); }
}

@layer layout {
  .page {
    max-inline-size: var(--page);
    margin-inline: auto;
    padding-inline: var(--s20);
  }
  .page--narrow { max-inline-size: 30rem; }

  .stack > * + * { margin-block-start: var(--flow, var(--s20)); }

  .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s12);
  }
  .row--between { justify-content: space-between; }
  .row--tight { gap: var(--s8); }

  .grid {
    display: grid;
    gap: var(--s16);
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  }
  .grid--stats {
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  }
  .grid--halves {
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  }

  .section { padding-block: clamp(var(--s40), 6vw, var(--s80)); }
  .section--fog { background: var(--fog); }
  .section--mist { background: var(--mist); }
}

@layer components {
  /* ─── Шапка сайта: прозрачная, без тени и разделителя ─── */
  .topbar {
    padding-block: var(--s24);
  }
  .topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s24);
  }
  .brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4ch;
    font-family: var(--font-display);
    font-size: 1.375rem;
    letter-spacing: -0.02em;
  }
  .brand:hover { text-decoration: none; }
  .brand__dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: var(--r-pill);
    background: var(--sienna);
    display: inline-block;
  }
  .sitenav {
    display: flex;
    align-items: center;
    gap: var(--s24);
    font-size: 1rem;
  }
  .sitenav :where(a:not(.btn)) { color: var(--ink); }
  .sitenav__links { display: none; gap: var(--s24); }
  @media (min-width: 56rem) {
    .sitenav__links { display: flex; }
  }

  /* ─── Кнопки-пилюли ─── */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5ch;
    min-block-size: 44px;
    padding-inline: var(--s20);
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 450;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out),
      border-color 160ms var(--ease-out), opacity 160ms var(--ease-out);
  }
  .btn:hover { text-decoration: none; }
  .btn--solid {
    background: var(--solid);
    color: var(--on-solid);
    border-color: var(--solid);
  }
  .btn--solid:hover { opacity: 0.86; }
  .btn--ghost {
    border-color: var(--ink);
  }
  .btn--ghost:hover { background: var(--mist); }
  .btn--quiet { color: var(--slate); padding-inline: var(--s12); }
  .btn--quiet:hover { color: var(--ink); background: var(--mist); }
  .btn--sm { min-block-size: 36px; padding-inline: var(--s16); font-size: 0.9375rem; }
  .btn--xs {
    min-block-size: 32px;
    min-inline-size: 32px;
    padding-inline: var(--s8);
    font-size: 0.875rem;
    color: var(--slate);
  }
  .btn--xs:hover { color: var(--ink); background: var(--mist); }
  .btn--block { inline-size: 100%; }
  .btn[disabled], .btn[aria-disabled='true'] { opacity: 0.4; cursor: not-allowed; }

  /* Ссылка со стрелкой: подчёркивание только при наведении. */
  .arrowlink {
    display: inline-flex;
    align-items: center;
    gap: 0.4ch;
    color: var(--ink);
    font-weight: 450;
  }
  .arrowlink::after { content: '→'; transition: transform 160ms var(--ease-out); }
  .arrowlink:hover::after { transform: translateX(3px); }

  /* ─── Карточки ─── */
  .card {
    background: var(--mist);
    border-radius: var(--r-card);
    padding: var(--s24);
  }
  .card--plain { background: var(--paper); border: 1px solid var(--hair); }
  /* Единственный элемент системы с тенью — «плавающий артефакт продукта». */
  .card--float {
    background: var(--paper);
    border-radius: var(--r-elevated);
    box-shadow: var(--shadow-float);
    padding: var(--s20);
  }
  /* Персиковая карточка — не более одной на страницу. */
  .card--blush {
    background: var(--blush);
    color: var(--on-blush);
    border-radius: var(--r-card);
    padding: var(--s32) var(--s24);
  }
  .card--blush :where(a:not(.btn)) { color: inherit; text-decoration: underline; }
  /* Список уведомлений — не набор ссылок: подчёркивание в покое превращает
     карточку в частокол и мешает читать сами сообщения. */
  .alertlink { color: inherit; text-decoration: none; display: block; }
  .alertlink:hover { text-decoration: underline; text-underline-offset: 0.22em; }

  .card__label {
    font-size: 0.875rem;
    color: var(--ash);
    font-weight: 400;
  }
  .card__title {
    font-size: var(--text-body-lg);
    font-weight: 500;
    letter-spacing: -0.005em;
  }

  /* ─── Плитка показателя ─── */
  .stat { display: grid; gap: var(--s4); align-content: start; }
  .stat__label { font-size: 0.875rem; color: var(--ash); }
  .stat__value {
    font-family: var(--font-num);
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
  }
  .stat__delta {
    font-size: 0.875rem;
    color: var(--slate);
    display: inline-flex;
    align-items: baseline;
    gap: 0.4ch;
  }
  /* Направление несут глиф и слово; цвет только усиливает, но не заменяет их. */
  .stat__delta--down { color: var(--sienna); }
  .stat__note { font-size: 0.875rem; color: var(--slate); }

  /* ─── Полоса доли ─── */
  .barline { display: grid; gap: 6px; }
  .barline__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s12);
    font-size: 0.9375rem;
  }
  .bar {
    --bar-value: 0%;
    block-size: 6px;
    border-radius: var(--r-pill);
    background: light-dark(rgba(23, 25, 28, 0.08), rgba(236, 237, 239, 0.12));
    overflow: hidden;
  }
  .bar::after {
    content: '';
    display: block;
    block-size: 100%;
    inline-size: var(--bar-value);
    background: light-dark(rgba(23, 25, 28, 0.55), rgba(236, 237, 239, 0.5));
    border-radius: inherit;
  }
  .bar--accent::after { background: var(--sienna); }

  /* ─── Таблицы ─── */
  .table-wrap { overflow-x: auto; }
  .table { inline-size: 100%; font-size: 0.9375rem; }
  .table :where(th, td) {
    padding: 10px var(--s12);
    text-align: start;
    vertical-align: baseline;
    border-block-end: 1px solid var(--hair);
  }
  .table :where(th):first-child, .table :where(td):first-child { padding-inline-start: 0; }
  .table :where(th):last-child, .table :where(td):last-child { padding-inline-end: 0; }
  .table th {
    font-size: 0.8125rem;
    font-weight: 450;
    color: var(--ash);
    white-space: nowrap;
  }
  .table tbody tr:last-child :where(td) { border-block-end: 0; }
  .table td.num { text-align: end; font-variant-numeric: tabular-nums; }
  .table th.num { text-align: end; }

  /* ─── Тег-категория: типографский, без подложки ─── */
  .tag { font-size: 0.875rem; color: var(--ash); }
  .tag--strong { color: var(--slate); }

  /* ─── Поля ввода ─── */
  .field { display: block; }
  .field + .field { margin-block-start: var(--s20); }
  .field__label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 450;
    margin-block-end: 6px;
  }
  .field__hint { display: block; font-size: 0.875rem; color: var(--slate); margin-block-start: 6px; }
  .input, .textarea, .select {
    inline-size: 100%;
    min-block-size: 48px;
    padding: 12px var(--s16);
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--hair);
    border-radius: var(--r-small);
    font-size: 1rem;
  }
  .textarea { min-block-size: 6rem; resize: vertical; }
  .input:hover, .textarea:hover, .select:hover { border-color: var(--smoke); }
  .input:user-invalid { border-color: var(--sienna); }

  /* ─── Сообщения ─── */
  .note {
    padding: var(--s16) var(--s20);
    border-radius: var(--r-small);
    background: var(--mist);
    font-size: 0.9375rem;
    color: var(--ink);
  }
  /* Ошибку показываем персиковой карточкой: система остаётся тёплой и
     ахроматичной, а сигнал всё равно читается мгновенно. */
  .note--alert { background: var(--blush); color: var(--on-blush); }
  .note--alert a { color: inherit; }

  /* ─── План работ ─── */
  /* Два раздела плана. Разделяются надписью и воздухом, а не рамкой и не
     цветом: карточка уже персиковая, а вторая акцентная поверхность внутри
     первой перестаёт быть акцентом. Цвет наследуется от карточки, поэтому
     приглушение идёт прозрачностью, а не токеном серого. */
  .plan-part { margin-block-start: var(--s32); }
  /* Между разделами воздуха больше, чем между задачами внутри раздела.
     На тридцати двух пикселях граница разделов читалась слабее границы задач:
     у тех есть ещё и волосяная линия, и два раздела сливались в один список. */
  .plan-part + .plan-part { margin-block-start: var(--s64); }
  .plan-part__title {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
  }
  .plan-part__note {
    font-size: 0.9375rem;
    opacity: 0.8;
    margin-block-start: var(--s4);
  }

  .task { display: grid; gap: var(--s4); }
  .task + .task {
    margin-block-start: var(--s16);
    padding-block-start: var(--s16);
    border-block-start: 1px solid var(--hair);
  }
  .task__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s12);
  }
  .task__title { font-weight: 500; }
  .task__why { font-size: 0.9375rem; color: var(--slate); }
  .task__effort {
    font-size: 0.8125rem;
    color: var(--ash);
    white-space: nowrap;
  }
  .task__n {
    font-family: var(--font-num);
    font-size: 0.8125rem;
    color: var(--ash);
  }

  /* ─── График ─── */
  .chart { inline-size: 100%; block-size: auto; display: block; overflow: visible; }
  .chart__grid { stroke: var(--hair); stroke-width: 1; stroke-dasharray: 2 4; }
  .chart__axis { fill: var(--ash); font-size: 11px; font-family: var(--font-body); }
  .chart__line { fill: none; stroke: var(--sienna); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .chart__area { fill: var(--sienna); opacity: 0.08; }
  .chart__dot { fill: var(--paper); stroke: var(--sienna); stroke-width: 2; }
  .chart__dot--last { fill: var(--sienna); }
  .chart__label {
    fill: var(--sienna);
    font-size: 12px;
    font-weight: 500;
    font-family: var(--font-num);
    font-variant-numeric: tabular-nums;
  }
  .chart__hit { fill: transparent; }
  .chart__hit:hover + .chart__dot, .chart__hit:focus-visible + .chart__dot { r: 6; }

  /* ─── Кабинет: боковая панель ─── */
  .shell { display: block; }
  @media (min-width: 60rem) {
    .shell {
      display: grid;
      grid-template-columns: var(--rail) minmax(0, 1fr);
      align-items: start;
      min-block-size: 100dvh;
      /* Панель прилипшая и высотой в экран, поэтому её фон рисует контейнер:
         иначе ниже первого экрана колонка обрывается белым. */
      background: linear-gradient(
        to right,
        var(--fog) 0 var(--rail),
        var(--paper) var(--rail)
      );
    }
  }
  .rail {
    padding: var(--s20);
    border-block-end: 1px solid var(--hair);
    background: var(--fog);
  }
  @media (min-width: 60rem) {
    .rail {
      position: sticky;
      inset-block-start: 0;
      block-size: 100dvh;
      border-block-end: 0;
      border-inline-end: 1px solid var(--hair);
      overflow-y: auto;
    }
  }
  .rail__group { margin-block-start: var(--s24); }
  /* На узком экране панель — это шапка, и блок аккаунта в ней должен занимать
     одну строку, а не треть первого экрана. */
  @media (max-width: 59.999rem) {
    .rail__group--account {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: var(--s8);
      margin-block-start: var(--s12);
    }
    .rail__group--account .rail__heading { display: none; }
    .rail__group--account > * { margin: 0 !important; padding-inline: 0 !important; }
  }
  .rail__heading {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ash);
    margin-block-end: var(--s8);
  }
  .rail__nav { display: flex; flex-wrap: wrap; gap: var(--s4); }
  @media (min-width: 60rem) {
    .rail__nav { display: grid; }
  }
  .rail__link {
    display: flex;
    align-items: center;
    gap: 0.6ch;
    min-block-size: 40px;
    padding-inline: var(--s12);
    border-radius: var(--r-small);
    color: var(--slate);
    font-size: 0.9375rem;
    white-space: nowrap;
  }
  .rail__link:hover { background: var(--mist); color: var(--ink); text-decoration: none; }
  .rail__link[aria-current='page'] {
    background: var(--mist);
    color: var(--ink);
    font-weight: 500;
  }
  .rail__glyph { color: var(--ash); inline-size: 1.1em; text-align: center; }

  .workspace { min-inline-size: 0; }
  .crumbs {
    display: flex;
    align-items: center;
    gap: 0.6ch;
    padding: var(--s20) var(--s24);
    border-block-end: 1px solid var(--hair);
    font-size: 0.9375rem;
    color: var(--slate);
    flex-wrap: wrap;
  }
  .crumbs :where(a) { color: var(--slate); }
  .crumbs a:hover { color: var(--ink); }
  .crumbs__here { color: var(--ink); }
  .work { padding: var(--s32) var(--s24) var(--s64); }
  @media (min-width: 60rem) {
    .work { padding-inline: var(--s40); }
  }

  /* ─── Прочее ─── */
  .answer {
    font-size: 0.9375rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: var(--fog);
    border-radius: var(--r-small);
    padding: var(--s16);
    max-block-size: 24rem;
    overflow-y: auto;
    color: var(--ink);
  }

  .steps { display: grid; gap: var(--s24); counter-reset: step; }
  .steps > li { counter-increment: step; }
  .steps__n {
    font-family: var(--font-num);
    font-size: 0.875rem;
    color: var(--ash);
    display: block;
    margin-block-end: var(--s4);
  }
  .steps__n::before { content: counter(step) ' / '; }

  .checklist { display: grid; gap: var(--s8); }
  .checklist li {
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    gap: 0.5ch;
    font-size: 0.9375rem;
    color: var(--slate);
  }
  .checklist li::before { content: '·'; color: var(--ash); text-align: center; }

  .price {
    font-family: var(--font-num);
    font-size: 2.25rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1;
  }
  .price small { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 400; color: var(--slate); }

  .spinner {
    inline-size: 1em;
    block-size: 1em;
    border: 2px solid color-mix(in oklab, currentColor 25%, transparent);
    border-block-start-color: currentColor;
    border-radius: 50%;
    display: inline-block;
    vertical-align: -0.1em;
    animation: spin 800ms linear infinite;
  }
  @keyframes spin { to { transform: rotate(1turn); } }

  .footer {
    border-block-start: 1px solid var(--hair);
    padding-block: var(--s40);
    margin-block-start: var(--s80);
  }
  .footer__statement {
    font-family: var(--font-display);
    font-size: var(--text-heading-sm);
    letter-spacing: -0.009em;
    max-inline-size: 22ch;
  }

  .themetoggle {
    background: none;
    border: 1px solid var(--hair);
    border-radius: var(--r-pill);
    min-block-size: 36px;
    min-inline-size: 36px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    color: var(--slate);
    font-size: 0.9375rem;
  }
  .themetoggle:hover { color: var(--ink); border-color: var(--smoke); }

  @media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 3s; }
    .btn, .arrowlink::after { transition: none; }
  }
}

@layer utilities {
  .dim { color: var(--slate); }
  .faint { color: var(--ash); }
  .small { font-size: 0.9375rem; }
  .tiny { font-size: 0.875rem; }
  .lead { font-size: var(--text-body-lg); color: var(--slate); }
  .measure { max-inline-size: 62ch; }
  .measure-tight { max-inline-size: 46ch; }
  .center { text-align: center; }
  .nowrap { white-space: nowrap; }
  .serif { font-family: var(--font-display); font-weight: 400; }
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .mt-8 { margin-block-start: var(--s8); }
  .mt-12 { margin-block-start: var(--s12); }
  .mt-16 { margin-block-start: var(--s16); }
  .mt-20 { margin-block-start: var(--s20); }
  .mt-24 { margin-block-start: var(--s24); }
  .mt-32 { margin-block-start: var(--s32); }
  .mt-40 { margin-block-start: var(--s40); }
}