/* --- НАЧАЛО сгенерированного блока: scripts/fetch_fonts.py --- */
/* Шрифты лежат рядом с сайтом, а не на fonts.gstatic.com: с внешнего
   домена они приезжали на 2.7 с и подменой сбивали вёрстку на 44 px
   (CLS 1.51 против 0.04 без них). Подробности и порядок обновления —
   в scripts/fetch_fonts.py. Руками этот блок не править. */
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/spectral-400i-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/spectral-400i-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/spectral-400i-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/spectral-400i-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/spectral-400-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/spectral-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/spectral-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/spectral-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/spectral-600-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/spectral-600-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/spectral-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/spectral-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, 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:400;font-display:swap;src:url(fonts/unbounded-400-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/unbounded-400-cyrillic.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:400;font-display:swap;src:url(fonts/unbounded-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/unbounded-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, 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:600;font-display:swap;src:url(fonts/unbounded-600-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/unbounded-600-cyrillic.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:600;font-display:swap;src:url(fonts/unbounded-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/unbounded-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, 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:800;font-display:swap;src:url(fonts/unbounded-800-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/unbounded-800-cyrillic.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:800;font-display:swap;src:url(fonts/unbounded-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/unbounded-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* --- КОНЕЦ сгенерированного блока --- */
/* Запасные шрифты с подогнанными метриками.

   Зачем. Даже со своего домена шрифт приезжает уже после первой отрисовки, и
   подмена системного на настоящий пересчитывает вёрстку. Unbounded шире Arial
   на 15%, поэтому ссылки в шапке разом расширялись, переносились на второй ряд
   и сдвигали всю страницу на 44 px вниз. Замер: одно самохостинг без этого
   блока давал CLS 0.09 при мгновенной отдаче файлов, но 1.23 при задержке
   всего 300 мс — то есть лечил лишь пока сеть быстрая.

   size-adjust заставляет системный шрифт занимать РОВНО столько же места,
   сколько займёт настоящий. Тогда подмена не меняет ни ширин, ни высот строк,
   и сдвига нет вообще — независимо от скорости сети. Цифры посчитаны замером
   средней ширины строки из кириллицы и латиницы в обоих шрифтах.

   local() без файла: подставляется шрифт, уже стоящий у читателя. Если ни
   одного из перечисленных нет (обычный Linux), правило целиком не применяется
   и в дело идёт следующее имя в стопке — без подгонки, но и без поломки.

   Пересчитывать при смене веб-шрифта или набора весов. */
@font-face{
  font-family:"Spectral fb";
  src:local("Georgia"), local("Times New Roman"), local("Nimbus Roman"), local("Liberation Serif");
  size-adjust:96.77%; ascent-override:109.44%; descent-override:47.85%; line-gap-override:0%;
}
@font-face{
  font-family:"Unbounded fb";
  src:local("Helvetica Neue"), local("Arial"), local("Liberation Sans"), local("DejaVu Sans");
  size-adjust:114.10%; ascent-override:87.20%; descent-override:21.47%; line-gap-override:0%;
}


:root{
  color-scheme:light;
  --paper:#F7F8FA; --ink:#101418; --body:#3C444E; --mute:#5B6672;
  --rule:#D9DEE5; --soft:#EEF1F5; --invert:#F7F8FA;
  --s1:#E0402F; --s2:#EF8A1F; --s3:#C9A00E; --s4:#3FA55F; --s5:#2A7FD4; --s6:#7A4FCE;
}
/* Три состояния темы, а не два. Явный выбор ставит data-theme на <html>,
   а значение по умолчанию («как в системе») не ставит ничего — тогда светлую
   от тёмной отличает только prefers-color-scheme. Поэтому медиазапрос закрыт
   условием :not([data-theme="light"]): иначе выбранная светлая тема
   проигрывала бы тёмной системной. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#101317; --ink:#EEF1F5; --body:#B9C1CC; --mute:#8C96A3;
    --rule:#252B33; --soft:#171B21; --invert:#101317;
    --s1:#F2685A; --s2:#F5A64A; --s3:#DCB62E; --s4:#5CBE7C; --s5:#5C9FE0; --s6:#9B78DE;
  }
}
:root[data-theme="dark"]{
    color-scheme:dark;
    --paper:#101317; --ink:#EEF1F5; --body:#B9C1CC; --mute:#8C96A3;
    --rule:#252B33; --soft:#171B21; --invert:#101317;
    --s1:#F2685A; --s2:#F5A64A; --s3:#DCB62E; --s4:#5CBE7C; --s5:#5C9FE0; --s6:#9B78DE;
}
/* Атрибут hidden должен побеждать любые display в наших правилах.
   Браузерное [hidden]{display:none} слабее по специфичности, и, например,
   .chart .tip{display:flex} его перебивало: атрибут ставился, а элемент
   оставался на экране. Ловушка тихая — свойство el.hidden при этом true. */
[hidden]{display:none !important}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:"Spectral","Spectral fb",Georgia,"Times New Roman",serif;
  font-size:17px; line-height:1.65;
}
h1,h2,h3,.u{font-family:"Unbounded","Unbounded fb","Helvetica Neue",Arial,sans-serif; color:var(--ink)}
h1,h2,h3{text-wrap:balance; margin:0; letter-spacing:-.02em; line-height:1.16}
p{margin:0}
a{color:var(--ink); text-decoration-color:var(--rule); text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:2px solid var(--s5); outline-offset:3px}
.wrap{max-width:820px; margin:0 auto; padding:0 22px}
section{padding:52px 0; border-top:1px solid var(--rule)}
section:first-of-type{border-top:none}
.stack{display:flex; flex-direction:column; gap:20px}
.lede{max-width:62ch}
h2{font-size:clamp(21px,4.6vw,28px); font-weight:700}
h3{font-size:17px; font-weight:600}
.src{font-size:13px; color:var(--mute); line-height:1.5}

/* ---------- фан-факты ---------- */
/* Каждый факт отделён линией сверху: на странице это самостоятельные истории,
   а не части одного текста, и без разделителя они читались бы подряд. */
.fact{border-top:1px solid var(--rule); padding-top:26px}
.fact:first-of-type{border-top:0; padding-top:0}
/* Цитата первоисточника. Вертикальная линия слева отделяет ЧУЖИЕ слова от
   нашего пересказа — на странице, где всё держится на пруфах, эта разница
   и есть главное. */
.quote{border-left:2px solid var(--s5); padding-left:15px; margin:16px 0}
.quote p{margin:0 0 9px; color:var(--body)}
.quote p:last-child{margin-bottom:0}
/* Подпись под цитатой: не курсив, как остальное внутри, а приглушённая
   строка — это уже не слова источника, а наша пометка о нём. */
.quote i{font-style:normal; color:var(--mute); font-size:13px}

/* ---------- шапка ---------- */
.top{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid var(--rule); flex-wrap:wrap}
.brand{font-family:"Unbounded","Unbounded fb",sans-serif; font-weight:800; font-size:15px; color:var(--ink); text-decoration:none; letter-spacing:-.02em}
/* Меню набрано не тем же шрифтом, что текст: засечный Spectral в шапке
   сливался с первым абзацем страницы. Системный гротеск — третьей сетевой
   загрузки не требует, а на телефоне это SF/Roboto, то есть ровно тот шрифт,
   которым подписан весь остальной интерфейс. */
.top nav{display:flex; gap:18px; font-size:13px; flex-wrap:wrap;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.005em}
.top nav a{text-decoration:none; color:var(--body)}
.top nav a:hover{color:var(--ink)}
/* Три второстепенных пункта живут в разметке дважды: .sec — строка меню на
   широком экране, .msec — тот же список внутри «Ещё» на узком. Одновременно
   видима всегда ровно одна копия. */
.top nav .msec{display:none}
/* При работающем скрипте копии не нужны вовсе: он двигает сами пункты
   между строкой и «Ещё», а копия показала бы тот же пункт дважды. */
.js-nav .top nav .msec{display:none !important}
/* Высота шапки не должна зависеть от ширины текста в ней.

   Что было. Логотип набран Unbounded, котировка тоже. Пока шрифт не приехал,
   оба уже. Приходит настоящий — они расширяются примерно на 44 px в сумме,
   меню перестаёт влезать рядом с логотипом и целиком уезжает на второй ряд.
   Шапка становится выше на 44 px, и на эти 44 px вниз прыгает ВСЯ страница.
   Скрипт убирал лишний пункт в «Ещё» и возвращал ряд назад — второй прыжок.
   Отсюда и шёл почти весь сдвиг вёрстки: CLS 1.51 против допустимых 0.25.

   Само меню набрано системным шрифтом и от подмены не меняется — виноваты
   только логотип и котировка, поэтому подгонка метрик веб-шрифта проблему не
   решала (проверено: 1.23 при задержке файлов 300 мс).

   Что теперь. Выше 700 px меню — сжимаемый элемент flex (min-width:0) и не
   переносится внутри себя (nowrap). Когда места не хватает, оно не уезжает на
   новый ряд, а сжимается, лишние пункты прячутся за overflow, и их тут же
   подбирает скрипт в «Ещё». Ряд остаётся один при любой ширине текста, так что
   момент прихода шрифта на вёрстку больше не влияет вообще.

   Ниже 700 px всё как было: там меню и должно стоять отдельным ряд под
   логотипом, и сдвига там не было (замер 0.000). */
@media (min-width:701px){
  /* Перенос запрещён у САМОЙ шапки, и это обязательно: flex решает про перенос
     по исходным размерам элементов и только потом сжимает их внутри строки.
     Пока у .top стоял flex-wrap:wrap, расширившийся логотип отправлял меню на
     новый ряд ДО того, как доходило дело до сжатия, и min-width:0 на меню
     ничего не менял — проверено замером, высота шапки всё так же ходила
     71 → 115 → 71 px. */
  .js-nav .top{flex-wrap:nowrap}
  /* Обрезка только по горизонтали. Ловушка (найдено 05.10.2026): обычный
     overflow:hidden прячет лишние пункты, но заодно режет выпадающую панель
     «Ещё» — она лежит ВНУТРИ nav и уходит вниз за его границу. Снаружи это
     выглядело так, будто кнопка не нажимается: <details> исправно получал
     open, панель рисовалась, но её не было видно и elementFromPoint в её
     середине возвращал section.hero. Пара clip/visible разрешена спецификацией
     (в отличие от hidden/visible, где второй принудительно становится auto):
     горизонтальная обрезка пунктов остаётся, панель вниз выходит свободно. */
  .js-nav .top nav{flex:1 1 auto; min-width:0; flex-wrap:nowrap;
    overflow:hidden; overflow-x:clip; overflow-y:visible}
  /* Сжиматься разрешено только самому меню, но НЕ его пунктам. Без этого
     flex-shrink по умолчанию давил ссылки ниже их содержимого, текст внутри
     ломался на две строки, и шапка вырастала до 93 px — то есть лечение
     переноса обернулось тем же ростом высоты, только по другой причине.
     Теперь пункты держат свою ширину, лишние уходят под overflow, и их
     подбирает скрипт в «Ещё». */
  .js-nav .top nav > a,
  .js-nav .top nav > details{flex:0 0 auto; white-space:nowrap}
}
.lshort{display:none}

/* ---------- первый экран ---------- */
.hero{display:grid; grid-template-columns:1fr; gap:34px; align-items:center; padding-top:44px}
@media (min-width:720px){.hero{grid-template-columns:1.05fr .95fr}}
.hero h1{font-size:clamp(28px,6.2vw,42px); font-weight:800; letter-spacing:-.03em}
.hero-nature{margin-top:11px; font-family:"Unbounded","Unbounded fb",sans-serif; font-weight:600; font-size:15px; letter-spacing:.01em; color:var(--mute)}
.hero-sub{margin-top:20px; max-width:44ch}
/* строка миссии снята 10.09.2026, стиль оставлен — вернуть можно одним <p class="hero-mission"> */
.hero-mission{margin-top:14px; max-width:46ch; font-size:15px; color:var(--mute)}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; font-family:"Unbounded","Unbounded fb",sans-serif; max-width:430px}
/* flex:1 1 190px — обе кнопки одной ширины: помещаются рядом — делят поровну,
   не помещаются (узкий экран) — переносятся и обе тянутся на всю ширину */
.b1,.b2{text-decoration:none; font-size:13px; font-weight:600; flex:1 1 190px; text-align:center}
.b1{background:var(--ink); color:var(--invert); padding:13px 21px}
.b2{border:1px solid var(--ink); color:var(--ink); padding:12px 20px}
.hero-meta{margin-top:18px; font-size:13px; color:var(--mute)}

.prism{display:flex; align-items:center}
.beam{width:26px; height:2px; background:var(--ink); flex:none}
.tri{width:26px; height:82px; background:var(--ink); flex:none; clip-path:polygon(0 0,100% 50%,0 100%)}
.fan{display:flex; flex-direction:column; gap:10px; margin-left:11px; min-width:0}
.ray{display:flex; align-items:center; gap:11px; min-width:0}
.ray i{height:7px; background:var(--c); flex:none; display:block}
.ray span{font-size:14px; color:var(--body); min-width:0}
.prism-cap{margin-top:14px; font-size:13px; color:var(--mute)}

/* ---------- три цифры ---------- */
.nums{display:grid; grid-template-columns:1fr; border-top:1px solid var(--rule)}
@media (min-width:600px){.nums{grid-template-columns:repeat(3,1fr); gap:0 26px}}
.num{padding:18px 0; border-bottom:1px solid var(--rule)}
@media (min-width:600px){.num{border-bottom:none}}
.num b{display:block; font-family:"Unbounded","Unbounded fb",sans-serif; font-weight:800; font-size:27px; letter-spacing:-.025em; color:var(--ink); font-variant-numeric:tabular-nums}
.num span{display:block; font-size:15px; margin-top:5px}
.num em{display:block; font-style:normal; font-size:12.5px; color:var(--mute); margin-top:7px}

/* ---------- две колонки: биржа vs кошелёк ---------- */
.vs{display:grid; grid-template-columns:1fr; gap:1px; background:var(--rule); border:1px solid var(--rule)}
@media (min-width:600px){.vs{grid-template-columns:1fr 1fr}}
.vs > div{background:var(--paper); padding:20px; display:flex; flex-direction:column; gap:9px}
.vs h3{font-size:15px}
.vs p{font-size:15px}
.vs .who{font-family:"Unbounded","Unbounded fb",sans-serif; font-size:12px; font-weight:600; letter-spacing:.05em; color:var(--mute)}

/* ---------- шаги ---------- */
.steps{display:flex; flex-direction:column}
/* minmax(0,1fr), а не 1fr: голая доля — это minmax(auto,1fr), и неразрывный
   адрес контракта внутри шага распирал колонку, из-за чего на телефоне
   появлялась горизонтальная прокрутка всей страницы. */
.step{display:grid; grid-template-columns:24px minmax(0,1fr); gap:0 16px;
  padding:17px 0; border-top:1px solid var(--rule)}
.step > div{min-width:0; overflow-wrap:anywhere}
.step:last-child{border-bottom:1px solid var(--rule)}
.step-n{font-family:"Unbounded","Unbounded fb",sans-serif; font-weight:600; font-size:12px; color:var(--mute); padding-top:4px; font-variant-numeric:tabular-nums}
.step p{font-size:15.5px; margin-top:4px}

/* ---------- таблицы ---------- */
.tbl{width:100%; border-collapse:collapse; font-size:15px}
.tbl caption{text-align:left; font-size:13px; color:var(--mute); padding-bottom:9px}
.tbl th,.tbl td{text-align:left; padding:11px 12px 11px 0; border-bottom:1px solid var(--rule); vertical-align:top}
.tbl th{font-family:"Unbounded","Unbounded fb",sans-serif; font-size:11.5px; font-weight:600; letter-spacing:.05em; color:var(--mute)}
.tbl td:last-child,.tbl th:last-child{text-align:right; padding-right:0; white-space:nowrap; font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto}

/* тиры — спектр как шкала */
.tier td:first-child{white-space:nowrap}
.tier .bar{display:inline-block; height:7px; background:var(--c); vertical-align:middle; margin-right:9px}

/* ---------- риски ---------- */
.risks{display:flex; flex-direction:column}
.risk{padding:16px 0; border-top:1px solid var(--rule)}
.risk:last-child{border-bottom:1px solid var(--rule)}
.risk h3{font-size:15.5px; margin-bottom:5px}
.risk p{font-size:15px}

/* ---------- помочь ---------- */
.help{background:var(--soft); border:1px solid var(--rule); padding:24px; display:flex; flex-direction:column; gap:14px}
.help ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; font-size:15.5px}

/* ---------- подвал ---------- */
footer{border-top:1px solid var(--rule); padding:34px 0 60px; font-size:14px; color:var(--mute); display:flex; flex-direction:column; gap:12px}
footer strong{color:var(--body)}

/* Возврат наверх. Отбит сверху заметнее, чем gap подвала: это не ещё одна
   строка текста, а управляющий элемент, и он должен читаться отдельно от
   дисклеймеров над ним. Шрифт меню, а не текста, по той же причине. */
.totop{margin-top:10px}
.totop a{display:inline-flex; align-items:center; gap:8px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:13px; line-height:1; color:var(--mute); text-decoration:none;
  padding:10px 16px; border:1px solid var(--rule); border-radius:999px;
  transition:color .12s, border-color .12s}
.totop a::before{content:"\2191"; font-size:14px}
.totop a:hover{color:var(--ink); border-color:var(--ink)}
@media (prefers-reduced-motion:reduce){.totop a{transition:none}}

/* Адрес для донатов. user-select:all — клик или тап выделяет строку целиком:
   у адреса скопированная половина ничем не отличается на вид от целого,
   а деньги уходят в никуда. overflow-wrap — чтобы 42 символа не рвали вёрстку. */
.donate code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
             font-size:13px; color:var(--ink); background:var(--soft);
             border:1px solid var(--rule); border-radius:3px; padding:3px 7px;
             user-select:all; -webkit-user-select:all; overflow-wrap:anywhere}

/* ---------- страница ссылок ---------- */
.warn{border:1px solid var(--ink); padding:20px; display:flex; flex-direction:column; gap:10px}
.warn h3{font-size:16px}
.warn ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:7px; font-size:15px}
.group{display:flex; flex-direction:column}
.link{padding:15px 0; border-top:1px solid var(--rule)}
.link:last-child{border-bottom:1px solid var(--rule)}
.link a{font-family:"Unbounded","Unbounded fb",sans-serif; font-weight:600; font-size:15px; text-decoration:none;
        border-bottom:1px solid var(--rule); padding-bottom:1px}
.link a:hover{border-bottom-color:var(--ink)}
.link .lang{font-size:11.5px; color:var(--mute); margin-left:8px; white-space:nowrap}
.link p{font-size:15px; margin-top:6px; max-width:64ch}
.link .url{font-size:12.5px; color:var(--mute); margin-top:5px; word-break:break-all}


/* ---------- дашборд ---------- */
.conn{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--mute)}
.conn::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--mute); flex:none}
.conn.live::before{background:var(--s4)}
.conn.stale::before{background:var(--s2)}

.big{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:26px 0;
     display:flex; flex-direction:column; gap:8px}
.big b{font-family:"Unbounded","Unbounded fb",sans-serif; font-weight:800; font-size:clamp(34px,9vw,58px);
       letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1}
.big .unit{font-size:.42em; letter-spacing:0; margin-left:.3em; color:var(--mute)}
.big span{font-size:15px}
.big em{font-style:normal; font-size:13px; color:var(--mute)}

.grid{display:grid; grid-template-columns:1fr; gap:1px; background:var(--rule);
      border:1px solid var(--rule)}
@media (min-width:560px){.grid{grid-template-columns:1fr 1fr}}
@media (min-width:840px){.grid{grid-template-columns:repeat(3,1fr)}}
.cell{background:var(--paper); padding:18px 20px; display:flex; flex-direction:column; gap:5px}
.cell b{font-family:"Unbounded","Unbounded fb",sans-serif; font-weight:700; font-size:22px; color:var(--ink);
        letter-spacing:-.02em; font-variant-numeric:tabular-nums; word-break:break-all}
.cell span{font-size:14px}
.cell em{font-style:normal; font-size:12.5px; color:var(--mute)}

.feed{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.ev{display:grid; grid-template-columns:1fr auto; gap:2px 14px; padding:13px 0;
    border-top:1px solid var(--rule); align-items:baseline}
.ev-what{font-size:15px}
.ev-amt{font-family:"Unbounded","Unbounded fb",sans-serif; font-weight:600; font-size:14px; color:var(--ink);
        font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
/* Второй ряд карточки: слева адрес, справа «давно ли» — ровно под суммой,
   с которой он смысловая пара. Раньше адрес занимал ряд целиком (1/-1);
   теперь он держит первую колонку, а вторая отдана отметке времени. */
.ev-who{font-size:12.5px; color:var(--mute); min-width:0; overflow-wrap:anywhere}
.ev-ago{font-size:12.5px; color:var(--mute); text-align:right; white-space:nowrap;
  font-variant-numeric:tabular-nums}
.ev-Unstaked .ev-amt{color:var(--s1)}
.ev-Staked .ev-amt{color:var(--s4)}
.ev-CashbackAllocated .ev-amt{color:var(--s6)}
/* дробная часть мельче целой — крупные цифры читаются с одного взгляда */
.dec{font-size:.58em; color:var(--mute); letter-spacing:0; font-weight:inherit}
.ev-amt .dec,.cell .dec{font-size:.72em}


/* ---------- переключатель темы: один значок ---------- */
/* Порядок в шапке задаём флексом, а не разметкой: бренд, меню, котировка,
   значок темы. Скрипт вставляет значок сразу после меню, но order уводит его
   в правый край независимо от того, в каком порядке всё создалось. */
.top .brand{order:0}
.top nav{order:1}
.top .tick{order:2}
.top > .more.lang{order:2}
.top .theme{order:3}
.theme{appearance:none; display:inline-flex; align-items:center;
  justify-content:center; width:34px; height:34px; flex:none; padding:0;
  border:1px solid var(--rule); background:var(--paper); color:var(--mute);
  cursor:pointer}
.theme:hover{color:var(--ink); border-color:var(--ink)}
.theme svg{display:block}

/* ---------- цена в шапке ---------- */
.tick{display:inline-flex; align-items:baseline; gap:8px; text-decoration:none;
  font-family:"Unbounded","Unbounded fb","Helvetica Neue",Arial,sans-serif; white-space:nowrap;
  border:1px solid var(--rule); padding:5px 10px; line-height:1}
.tick:hover{border-color:var(--ink)}
/* Место под котировку занято с самого начала. Раньше её создавал скрипт
   и вставлял в шапку на 4.8 с — шапка разом становилась шире на 212 px,
   переносилась на лишний ряд, и вся страница прыгала на 44 px вниз, а через
   70 мс обратно. Это давало основную долю сдвига вёрстки: 1.57 на десктопе
   при допустимых 0.25. Теперь пустой элемент стоит в разметке и держит
   размер, а скрипт только заполняет его содержимым.
   :empty прячет рамку до прихода данных, но место при visibility остаётся. */
.tick{min-width:212px; min-height:25px}
.tick:empty{visibility:hidden}
@media (max-width:700px){ .tick{min-width:117px; min-height:31px} }
.tick b{font-size:13px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
.tick i{font-style:normal; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums}
.tick i.up{color:var(--s4)}
.tick i.dn{color:var(--s1)}
.tick s{text-decoration:none; font-size:11px; color:var(--mute); font-variant-numeric:tabular-nums}
@media (max-width:700px){ .tick s{display:none} }

/* Шапка шире колонки чтения. В 820 px не помещаются меню, переключатель темы
   и котировка разом — суммарно 1016 px, — и шапка ломалась на две строки.
   Текст статей при этом остаётся узким: расширяется только .top.
   На /flows/ контейнер и так широкий, поэтому там правило не нужно.

   История потолка. Сначала стоял max-width:1180px, подобранный под тогдашнюю
   русскую версию, а не выведенный из чего-либо. 27.09.2026 потолок сняли —
   шапка пошла до краёв экрана, и на широком мониторе вылезла обратная беда:
   пункты меню кончаются на 1019 px независимо от ширины окна, поэтому на 1920
   между последним пунктом и флагом зияло 569 px, а на 2560 — больше тысячи.

   29.09.2026 потолок вернулся, но уже выведенный из содержимого: 1440 px —
   ширина, на которой строка заполнена и до флага остаётся 89 px запаса.
   Меньше — меню начнёт поджимать котировку, больше — снова появится пустота.
   На 1440 и уже правило ничего не меняет: формула вырождается в прежнюю.

   Почему формула с vw безопасна: ширина получается min(1440px, 100vw) − 44px,
   и эти 44px (поля .wrap) с запасом перекрывают полосу прокрутки, которую
   100vw включает в себя. Горизонтальной прокрутки не появляется — проверено
   от 320 до 2560. */
.wrap:not(.wide) > .top{
  max-width:none;
  margin-inline:calc((min(820px, 100vw) - min(1440px, 100vw)) / 2);
}
/* Меню по центру шапки: auto с обеих сторон делит свободное место поровну.
   С одним margin-left:auto весь запас уходил налево, и на широком экране
   между логотипом и первым пунктом зияло 540 px, а всё остальное липло
   к правому краю. Пока пунктов было мало, это читалось как «логотип
   слева, управление справа»; когда строка заполнилась, стало перекосом. */
.top nav{margin-inline:auto}
.theme{margin-left:0}

/* Значение, приехавшее с сервера. Точка-маркер отличает живую цифру
   от замера в разметке — иначе непонятно, обновилось оно или нет. */
.is-live::after{content:""; display:inline-block; width:5px; height:5px;
  border-radius:50%; background:var(--s4); vertical-align:middle;
  margin-left:6px; opacity:.75}
/* То же значение, но из источника, который давно молчит. Точка серая и
   полая: видно, что цифра настоящая, но не сегодняшняя. Дата — в подсказке. */
.is-old::after{content:""; display:inline-block; width:5px; height:5px;
  border-radius:50%; border:1px solid var(--mute); vertical-align:middle;
  margin-left:6px; opacity:.6}

/* ---------- плитки с числами ---------- */
.figs{display:grid; grid-template-columns:1fr; gap:1px; background:var(--rule);
  border:1px solid var(--rule)}
@media (min-width:620px){.figs{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}}
.figs > div{background:var(--paper); padding:16px 18px; display:flex;
  flex-direction:column; gap:5px}
.figs b{font-family:"Unbounded","Unbounded fb","Helvetica Neue",Arial,sans-serif; font-weight:700;
  font-size:22px; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.figs span{font-size:14px}
.figs em{font-style:normal; font-size:12px; color:var(--mute)}

/* ---------- график ---------- */
.chart{position:relative; min-height:240px; border:1px solid var(--rule);
  padding:10px 8px 4px; background:var(--paper); touch-action:pan-y}
.chart svg{display:block}
.chart text{font-family:"Unbounded","Unbounded fb","Helvetica Neue",Arial,sans-serif;
  font-variant-numeric:tabular-nums}

/* подсказка по наведению на график */
.chart .tip{position:absolute; pointer-events:none; background:var(--paper);
  border:1px solid var(--rule); padding:7px 9px; display:flex; flex-direction:column;
  gap:2px; box-shadow:0 2px 8px rgba(0,0,0,.10); white-space:nowrap; z-index:3}
.chart .tip b{font-family:"Unbounded","Unbounded fb","Helvetica Neue",Arial,sans-serif; font-weight:700;
  font-size:13px; color:var(--ink); font-variant-numeric:tabular-nums}
.chart .tip i{font-style:normal; font-size:11px; color:var(--mute)}
.chart .tip s{text-decoration:none; font-size:11px; font-weight:600;
  font-variant-numeric:tabular-nums}
.chart .tip s.up, td.num.up{color:var(--s4)}
.chart .tip s.dn, td.num.dn{color:var(--s1)}

/* раскрывающаяся таблица под графиком */
details.tbl{border:1px solid var(--rule); border-top:0}
details.tbl > summary{cursor:pointer; padding:11px 14px; font-size:14px;
  font-family:"Unbounded","Unbounded fb","Helvetica Neue",Arial,sans-serif; color:var(--ink);
  list-style:none; display:flex; align-items:center; gap:8px}
details.tbl > summary::-webkit-details-marker{display:none}
details.tbl > summary::before{content:"+"; color:var(--mute); font-weight:700}
details.tbl[open] > summary::before{content:"−"}
details.tbl > summary:hover{background:var(--soft)}
/* Высота ограничена: 167 строк иначе растянут страницу на несколько экранов
   и график, ради которого таблицу и открывают, уедет из вида. */
details.tbl .box{border-top:1px solid var(--rule)}
details.tbl .rows{max-height:460px; overflow:auto; padding:0 14px}
/* Отступ держит контейнер, а не таблица: у таблицы ширина 100%,
   и собственные поля добавлялись бы к ней, выталкивая последнюю колонку
   за правый край. */
details.tbl table{margin:0}
details.tbl th{position:sticky; top:0; background:var(--paper); z-index:1}

/* ---------- таблица данных ----------
   Общая, в отличие от table.addrs на /flows/: та ограничена областью .flows
   и на других страницах не действует. Ширина по содержимому, а не 100%:
   три колонки, растянутые на всю строку, дают пустоты в полэкрана. */
/* Ширина 100%, но узкие колонки сжимаются до содержимого (width:1%),
   а свободное место делят между собой адрес и транзакция. Иначе таблица
   либо жалась к левому краю с пустотой справа, либо равные доли растягивали
   дату втрое против нужного. */
/* table-layout:fixed обязателен. При автоматической раскладке неразрывный
   66-символьный хеш растягивает колонку и вся таблица вылезает за контейнер,
   а обрезка многоточием не срабатывает вовсе. С фиксированной раскладкой
   ширины задаём мы, и содержимое подчиняется им. */
table.data{width:100%; table-layout:fixed; border-collapse:collapse;
  font-size:13.5px; font-variant-numeric:tabular-nums}
table.data th:nth-child(1){width:118px}
table.data th:nth-child(2){width:86px}
table.data th:nth-child(3){width:92px}
table.data th:nth-child(5){width:64px}
/* Ширины выше расставлены по НОМЕРУ колонки, поэтому годятся только для
   пятиколоночной ленты событий. У таблицы начислений колонок четыре, и номера
   разъезжались: 92px доставалось адресу вместо суммы, а вся оставшаяся ширина
   (450px из 746) уходила под слово «txid». Здесь ширины заданы по смыслу.

   Первая колонка шире обычной, потому что несёт две величины: точную дату и
   «сколько назад». Адресу ширина не задана намеренно — при table-layout:fixed
   он забирает весь остаток, а это в таблице самое длинное значение. */
/* Ширины у таблицы начислений заданы ОТ КОНЦА, а не от начала: колонка
   ступени то есть, то нет (она появляется, только когда сборщик её
   восстановил), и правила по номеру от начала при переключении разъезжались —
   адресу доставалось 64px вместо трёхсот. От конца порядок постоянный:
   ссылка, адрес, сумма. */
[data-table="cashback"] table.data th:first-child{width:208px}
[data-table="cashback"] table.data th:nth-last-child(3){width:110px}
[data-table="cashback"] table.data th:nth-last-child(2){width:auto}
[data-table="cashback"] table.data th:nth-last-child(1){width:64px}
[data-table="cashback"] table.data.wtier th:nth-child(2){width:132px}
/* Размер позиции под меткой ступени: это основание, из которого ступень
   выведена, поэтому стоит рядом, а не отдельной колонкой — шестая не влезла
   бы, да и читалась бы как независимая величина. */
[data-table="cashback"] .tpos{display:block; font-style:normal; font-size:11.5px;
  color:var(--mute); font-variant-numeric:tabular-nums; margin-top:2px}
[data-table="cashback"] .tpos::after{content:" RNBW"; opacity:.6}
/* Таблица крупнейших держателей. Колонки три: адрес с подписью, остаток и
   доля выпуска. Ширины по смыслу, а не по номеру — см. ловушку выше. */
[data-table^="holders"] table.data th:nth-child(1){width:auto}
[data-table^="holders"] table.data th:nth-child(2){width:132px}
[data-table^="holders"] table.data th:nth-child(3){width:92px}
/* Ячейка адреса — колонка: номер и адрес в строку, подпись под ними.
   Сокращение середины работает, только когда ссылке есть куда ужиматься,
   поэтому строка гибкая, а ссылке задан min-width:0. */
[data-table^="holders"] table.data td.hno{display:flex; flex-wrap:wrap;
  align-items:baseline; gap:0 8px; min-width:0}
[data-table^="holders"] table.data td.hno > b{flex:none; font-weight:600;
  color:var(--mute); font-size:12px; font-variant-numeric:tabular-nums;
  min-width:2.2em; text-align:right}
[data-table^="holders"] table.data td.hno > a{flex:1 1 auto; min-width:0}
/* Подпись занимает свою строку целиком и встаёт под адресом, а не рядом:
   «Coinbase Exchange: Hot Wallet» рядом с адресом не помещается нигде. */
/* Ширина подписи — 100% МИНУС отступ слева. С ровными 100% плюс отступ
   строка выходила за ячейку ровно на величину отступа, и у длинных подписей
   («Coinbase Exchange: Hot Wallet») срезался хвост. Сумма основы и отступа даёт
   ровно ширину ячейки, поэтому подпись по-прежнему встаёт на свою строку. */
[data-table^="holders"] table.data td.hno > .hlab{
  flex:1 0 calc(100% - 2.2em - 8px); font-style:normal;
  font-size:11.5px; margin-left:calc(2.2em + 8px); color:var(--mute)}
[data-table^="holders"] table.data .hlab > s{text-decoration:none; color:var(--mute);
  opacity:.75}
/* Цветом отмечены только те виды, где он что-то значит: биржа, пул и свои
   контракты. Безымянный кошелёк подписи не получает вовсе. */
[data-table^="holders"] table.data .hlab.k2{color:var(--s2)}
[data-table^="holders"] table.data .hlab.k3{color:var(--s5)}
[data-table^="holders"] table.data .hlab.k4{color:var(--s6)}

/* Лента входов. Колонка «что» убрана 30.09.2026 (в таблице одни входы, и
   слово «вход» повторялось в каждой строке), колонок стало четыре — и она
   наступила на ту же ловушку с номерами: 92px доставалось адресу. */
/* 124px хватало, пока в ячейке стояла одна дата. 01.10.2026 туда добавилось
   «сколько назад», и содержимое перестало помещаться: на десктопе «58 мин
   назад» наезжало на колонку с суммой. У таблицы начислений ширину тогда
   подняли, а у этих двух лент — забыли. Запас считан по самой длинной
   добавке: «180 дн. назад» шире, чем «58 мин назад». */
/* Таблица комиссий в статье про Hyperliquid: три колонки, из которых первая
   текстовая. Общие правила по номеру дают ей 118px и текст переносится по
   слову. Та же протечка, что уже ловилась на таблице входов — у каждой
   таблицы должен быть свой класс и свои ширины. */
table.data.hltab th:nth-child(1){width:auto}
table.data.hltab th:nth-child(2){width:104px}
table.data.hltab th:nth-child(3){width:130px}
[data-table="feed"] table.data th:nth-child(1){width:204px}
[data-table="feed"] table.data th:nth-child(2){width:110px}
/* Таблица выходов: пять колонок, и первая тоже не вмещала добавку. Ширину
   отдаём из колонки «что произошло» — там текст переносится, ей не жалко. */
/* Ширины таблицы выходов. Общие правила по номеру колонки отдавали «что
   произошло» 312px под слова вроде «срок продлён», а дате и числам не
   хватало: «53 мин назад» упиралось в «1 138 394» без просвета. Забираем
   лишнее у текстовой колонки — там перенос ничего не портит. */
[data-table="exits"] table.data th:nth-child(1){width:210px}
[data-table="exits"] table.data th:nth-child(2){width:110px}
[data-table="exits"] table.data th:nth-child(3){width:110px}
[data-table="exits"] table.data th:nth-child(4){width:auto}
[data-table="exits"] table.data th:nth-child(5){width:64px}
/* Колонка «Стало» добавлена 11.10.2026, и НОМЕРА СДВИНУЛИСЬ: адрес уехал с
   третьей позиции на четвёртую, ссылка с четвёртой на пятую. Без этой правки
   адрес получал 64px — правило ссылки — и схлопывался в многоточие. */
[data-table="feed"] table.data th:nth-child(3){width:104px}
[data-table="feed"] table.data th:nth-child(4){width:auto}
[data-table="feed"] table.data th:nth-child(5){width:64px}
/* Подпись «Стало» внутри ячейки нужна только на телефоне: там таблица
   разложена карточками и ЗАГОЛОВКОВ КОЛОНОК НЕ ВИДНО, а голое число рядом с
   суммой взноса не прочитать. На широком экране заголовок есть — прячем. */
table.data td.bal i{display:none}
/* «Сколько назад» — приглушённой добавкой к точному времени, не вместо него.
   На телефоне точная дата и добавка делят одну строку карточки. */
table.data td.day .ago{margin-left:8px; color:var(--mute); font-size:11.5px;
  font-family:"Spectral","Spectral fb",Georgia,serif; font-variant-numeric:tabular-nums}
/* Адрес занимает всю оставшуюся ширину; обрезку середины делает скрипт. */
table.data td.addr{overflow:hidden; white-space:nowrap; min-width:0}
/* Сокращение середины адреса без замера ширины в скрипте: голова сжимается
   многоточием, хвост из шести знаков закреплён и виден всегда. Где места
   хватает — адрес показан целиком, где нет — 0x1affa29e5b0c…3ceeac5.
   Скрипту не нужно знать ширину колонки, а при повороте экрана ничего
   пересчитывать не надо: перекладывает сам браузер. */
table.data a.mid{display:inline-flex; max-width:100%; min-width:0; align-items:baseline}
table.data a.mid > span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
table.data a.mid > i{flex:none; font-style:normal}
table.data td.addr a, table.data td.txid a{color:var(--mute);
  text-decoration-color:var(--rule); text-underline-offset:2px; white-space:nowrap}
table.data td.addr a:hover, table.data td.txid a:hover{color:var(--ink)}
table.data td.txid{text-align:right}
table.data th.fit, table.data td.fit{white-space:nowrap}
table.data th{text-align:left; font-family:"Unbounded","Unbounded fb","Helvetica Neue",Arial,sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--mute);
  white-space:nowrap; padding:9px 26px 9px 0; border-bottom:1px solid var(--rule)}
table.data td{padding:8px 26px 8px 0; border-bottom:1px solid var(--rule);
  white-space:nowrap}
table.data tr:last-child td{border-bottom:0}
table.data th:last-child, table.data td:last-child{padding-right:0}
table.data .num{text-align:right}
/* Числа на сайте везде набраны Unbounded — плитки, график, дашборд.
   В таблице они оставались Spectral, и это бросалось в глаза. */
table.data td.day, table.data td.num{font-family:"Unbounded","Unbounded fb","Helvetica Neue",Arial,sans-serif}
/* Часы и минуты рядом с датой: тем же шрифтом, но приглушённо — дата остаётся
   опорной, время уточняет. nowrap, чтобы «27.09.26 13:02» не разрывалось на
   две строки в узкой колонке, а tabular-nums — чтобы столбик не дрожал. */
table.data td.day .hm{margin-left:7px; color:var(--mute); font-variant-numeric:tabular-nums}
table.data td.day{white-space:nowrap}
table.data td.day{color:var(--mute); font-size:12.5px}
table.data td.num{font-size:13px}
table.data td.num{font-weight:600; color:var(--ink)}
table.data td.num.up{color:var(--s4)}
table.data td.num.dn{color:var(--s1)}

/* ---------- телефон ---------- */
/* Адрес контракта в <code> не переносится и растягивал страницу: на экране
   390 px документ был шириной 450. Рвём по любому символу — hex всё равно
   читают не по слогам. */
code{overflow-wrap:anywhere}

@media (max-width:700px){
  /* Шапка занимала четыре строки: margin-left:auto у меню начинало новую,
     а переключатель и котировка не помещались рядом. Убираем распорку —
     они встают парой. */
  .top{gap:6px 12px; padding:12px 0}
  .top nav{margin-inline:0; gap:2px 10px}
  /* Цель нажатия была 23 px при рекомендуемых 44. Растим за счёт полей,
     а не кегля: текст остаётся прежнего размера. */
  .top nav a{display:inline-block; padding:10px 0}
  /* «Ещё» — не ссылка, а <summary>, и полей у него не было: блок растягивался
     по высоте строки, а текст прижимался к верху и висел выше соседей.
     Даём те же поля и выравниваем строку по центру. */
  .top nav{align-items:center}
  .top nav > .more > summary{display:inline-block; padding:10px 0}
  .brand{padding:8px 0}
  .theme{width:38px; height:38px}
  .tick{padding:8px 10px}
  /* Плитки и шаги на телефоне читаются столбиком, поля сжимаем. */
  .figs > div{padding:14px 15px}
  .step{grid-template-columns:20px minmax(0,1fr); gap:0 12px}
  .chart{padding:8px 4px 2px}
}

/* Экраны уже 350 px (старые iPhone SE): логотип и цена вместе с языком
   не помещались в строку и разваливали шапку на четыре ряда. Уменьшаем
   кегль — пятый элемент строки важнее лишних двух пунктов размера. */
@media (max-width:349px){
  .top{gap:6px 10px}
  .brand{font-size:13px}
  .tick b{font-size:12px}
  .tick i{font-size:10px}
}

/* метка вход/выход и моноширинные ссылки в таблице событий */
.tag{display:inline-block; font-size:11px; font-weight:600; padding:2px 7px;
  font-family:"Unbounded","Unbounded fb","Helvetica Neue",Arial,sans-serif; white-space:nowrap}
.tag.in{background:color-mix(in srgb, var(--s4) 14%, transparent); color:var(--s4)}
.tag.out{background:color-mix(in srgb, var(--s1) 14%, transparent); color:var(--s1)}
table.data td.mono{font-size:12.5px}
/* Адрес и хеш пишем целиком и обрезаем по краю колонки многоточием: так
   колонка всегда заполнена, а на широком экране видно больше символов.
   Полное значение остаётся во всплывающей подсказке и в ссылке. */
table.data td.mono{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
table.data td.mono a{color:var(--mute); text-decoration-color:var(--rule);
  text-underline-offset:2px; white-space:nowrap}
table.data td.mono a:hover{color:var(--ink)}

/* листалка под таблицей */
.pager{display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:10px 14px;
  border-top:1px solid var(--rule)}
.pager button{appearance:none; border:1px solid var(--rule); background:var(--paper);
  color:var(--body); font:inherit; font-size:13px; min-width:34px; height:34px;
  padding:0 8px; cursor:pointer; font-variant-numeric:tabular-nums}
.pager button:hover:not(:disabled){border-color:var(--ink); color:var(--ink)}
.pager button.on{background:var(--ink); border-color:var(--ink); color:var(--invert)}
.pager button:disabled{opacity:.35; cursor:default}
.pager i{font-style:normal; color:var(--mute); padding:0 2px}
.pager .cnt{margin-left:auto; font-size:12.5px; color:var(--mute)}
@media (max-width:700px){
  .pager{padding:10px}
  .pager .cnt{margin-left:0; width:100%; order:2}
}

/* ---------- таблица событий на узком экране ----------
   Пять колонок в 390 px не помещаются ни при какой ширине: только время,
   метка и сумма занимают 264 px, и на адрес с хешем остаётся по 40. Поэтому
   ниже 700 px строка разворачивается в карточку из трёх строк — данные те же,
   прокрутки вбок нет. */
@media (max-width:700px){
  /* Карточная раскладка — только для лент событий и выходов: она кладёт
     все ячейки .num в одну клетку сетки, и таблице с двумя числовыми
     столбцами это склеивает цифры друг на друга. Обычные таблицы
     в статьях остаются таблицами и при необходимости прокручиваются. */
  [data-table] table.data{display:block; table-layout:auto}
  [data-table] table.data thead, [data-table] table.data tbody{display:block}
  [data-table] table.data tr{display:grid; grid-template-columns:auto 1fr;
    gap:3px 10px; padding:11px 0; border-bottom:1px solid var(--rule)}
  [data-table] table.data tr:first-child{display:none}          /* заголовок не нужен */
  [data-table] table.data td{display:block; padding:0; border:0; white-space:nowrap}
  [data-table] table.data td.day{grid-column:1; grid-row:1}
  [data-table] table.data td.fit:nth-child(2){grid-column:1; grid-row:2}
  [data-table] table.data td.num{grid-column:2; grid-row:1; text-align:right; font-size:15px}
  /* Раньше у ленты было пять ячеек и адрес занимал отдельную третью строку.
     После того как убрали колонку «что», набор ячеек совпал с таблицей
     начислений — правила общие, см. ниже. */
  /* Таблица начислений: две строки карточки, всё привязано к краям.

     ПОЧЕМУ К КРАЯМ, А НЕ ПО КОЛОНКАМ. Каждая строка таблицы — САМОСТОЯТЕЛЬНАЯ
     сетка, поэтому колонка шириной auto в каждой строке своя, и значения в ней
     встают лесенкой. Именно это и было видно: адреса начинались с разного
     места, потому что слева от них стояла сумма переменной длины — от «9,46»
     до «1 449,06». Привязка к краю от длины соседа не зависит: суммы и ссылки
     прижаты вправо, дата и адрес — влево.

     КОЛОНКУ АДРЕСУ ОТДАТЬ НЕЛЬЗЯ. Колонка сетки общая для обеих строк
     карточки, поэтому ширину правой колонки задаёт сумма — а она гуляет от
     «9,46» до «264 595,61». Адресу доставался остаток переменной ширины, и
     его хвост «…baad74» вставал лесенкой. Закрепить колонку по самой большой
     сумме тоже нельзя: на экране 320px адресу осталось бы 111px.

     Поэтому адрес и ссылка растянуты на ВСЮ вторую строку и разведены по её
     краям (два элемента сетки в одной клетке — это разрешено). Ширина адреса
     теперь не зависит ни от суммы, ни от чего-либо ещё: он всегда от левого
     края карточки до места под «txid». */
  [data-table="cashback"] table.data tr,
  [data-table="feed"] table.data tr{grid-template-columns:minmax(0,1fr) auto}
  /* Перенос разрешён: на экране 320px точная дата и «сколько назад» вместе
     в одну строку не помещаются, и без переноса добавка уезжала бы за край. */
  [data-table="cashback"] table.data td.day,
  [data-table="feed"] table.data td.day{grid-column:1; grid-row:1; white-space:normal}
  /* «Сколько назад» — своей строкой, а не рядом с датой. Рядом оно то
     помещалось, то переносилось в зависимости от длины («30 мин назад» против
     «5 дн. назад»), и карточки в ленте выходили разной высоты — 73px и 90px
     вперемешку. Своей строкой высота у всех одна. */
  [data-table="cashback"] table.data td.day .ago,
  [data-table="feed"] table.data td.day .ago,
  [data-table="exits"] table.data td.day .ago{display:block; margin-left:0}
  [data-table="cashback"] table.data td.num.fit,
  [data-table="feed"] table.data td.num.fit{grid-column:2; grid-row:1; text-align:right}
  /* «Стало» — СВОЯ клетка, а не общая с суммой. Правило выше кладёт все
     `.num.fit` в колонку 2 строки 1, и остаток печатался бы поверх взноса.
     Эта ловушка в файле уже отмечена как пойманная четырежды — пятый раз
     ловить не будем. Селектор специфичнее общего, поэтому перебивает его. */
  [data-table="feed"] table.data td.num.fit.bal{grid-column:2; grid-row:2;
    text-align:right; color:var(--mute); font-size:12.5px}
  [data-table="feed"] table.data td.bal i{display:inline; font-style:normal;
    margin-right:6px; opacity:.75}
  /* Адрес и ссылка опускаются на третью строку: вторую занял остаток. */
  /* В карточке списка держателей кнопка графика переносилась на свою строку
     и вставала ПЕРЕД подписью адреса, сдвигая её вправо и ломая вид.
     Раскладываем ячейку рядами: номер и адрес сверху, подпись и кнопка —
     второй строкой, кнопка прижата к правому краю. */
  [data-table="holdersall"] table.data td.hno{display:flex; flex-wrap:wrap;
    align-items:baseline; gap:3px 7px}
  [data-table="holdersall"] table.data td.hno > a.mid{flex:1 1 100%; order:1}
  /* Подпись объявлена блочной и в гибкой раскладке забирала всю строку,
     выталкивая кнопку на свою. Здесь разрешаем ей сжиматься по содержимому. */
  [data-table="holdersall"] table.data td.hno > .hlab{order:2; flex:0 1 auto;
    display:inline-block; width:auto; margin:0}
  [data-table="holdersall"] table.data td.hno > .hgr{order:3; margin-left:auto}

  [data-table="feed"] table.data td.addr{grid-column:1 / -1; grid-row:3;
    justify-self:start; max-width:calc(100% - 52px); min-width:0; overflow:hidden}
  [data-table="feed"] table.data td.txid.fit{grid-column:1 / -1; grid-row:3;
    justify-self:end; text-align:right}
  [data-table="cashback"] table.data td.addr{grid-column:1 / -1; grid-row:2;
    justify-self:start; max-width:calc(100% - 52px); min-width:0; overflow:hidden}
  [data-table="cashback"] table.data td.txid.fit{grid-column:1 / -1; grid-row:2;
    justify-self:end; text-align:right}
  /* Держатели: адрес с подписью занимает всю верхнюю строку карточки,
     остаток и доля делят нижнюю. Числовым столбцам нужны РАЗНЫЕ клетки
     сетки — общее правило для .num кладёт их в одну, и они печатаются друг
     на друга (эта ловушка ловилась уже четырежды). */
  [data-table^="holders"] table.data tr{grid-template-columns:1fr auto}
  [data-table^="holders"] table.data td.hno{grid-column:1 / -1; grid-row:1}
  [data-table^="holders"] table.data td.num:nth-child(2){grid-column:1; grid-row:2;
    text-align:left}
  [data-table^="holders"] table.data td.num:nth-child(3){grid-column:2; grid-row:2;
    text-align:right}
  /* Колонка ступени: включена с 02.10.2026. Ей своя строка карточки, а адрес
     со ссылкой съезжают на третью — иначе ступень встала бы в клетку адреса.
     Правила навешены на метку .wtier, а не на номер ячейки: без ступени
     колонок четыре, и те же номера означали бы другие колонки. */
  [data-table="cashback"] table.data.wtier td.fit:nth-child(2){
    grid-column:1; grid-row:2; justify-self:start}
  [data-table="cashback"] table.data.wtier td.addr{grid-row:3}
  [data-table="cashback"] table.data.wtier td.txid.fit{grid-row:3}
  [data-table] table.data td.day::after{content:""}
  /* Таблица выходов: два числовых столбца, и общее правило для .num клало
     их в одну клетку — «вышло» и «удержано» печатались друг на друга.
     Здесь у каждого своя строка карточки, а подпись из data-l объясняет,
     что есть что: заголовок таблицы на телефоне скрыт. */
  [data-table] table.data td.out{grid-column:2; grid-row:1}
  [data-table] table.data td.fee{grid-column:2; grid-row:2}
  [data-table] table.data td.what{grid-column:1; grid-row:2; white-space:normal}
  /* Ссылка слева под строкой события, а не справа: у правого края она
     оставляла пустую половину третьей строки и карточка выглядела дырявой. */
  /* Адресован именно таблице выходов: у ленты входов-выходов ячейка ссылки
     несёт те же классы, и общее правило перехватывало бы её раскладку. */
  [data-table="exits"] table.data td.fit.txid{grid-column:1; grid-row:3; text-align:left}
  /* Таблица ступеней: ТРИ числовых столбца, и общее правило для .num кладёт
     их все в одну клетку — проценты, адреса и объём печатались друг на друга.
     Раскладываем по своим строкам карточки, подписи берутся из data-l. */
  [data-table="tiers"] table.data td.fit:first-child{grid-column:1 / -1; grid-row:1;
    white-space:normal}
  [data-table="tiers"] table.data td.tback{grid-column:1 / -1; grid-row:2}
  [data-table="tiers"] table.data td.taddr{grid-column:1 / -1; grid-row:3}
  [data-table="tiers"] table.data td.tsum{grid-column:1 / -1; grid-row:4}
  /* Строка со списком адресов не карточка: переводим её в блок, иначе
     единственная ячейка попала бы в колонку сетки и сжалась бы вдвое. */
  [data-table="tiers"] table.data tr.tpanelrow{display:block; padding:0; border:0}
  [data-table="tiers"] table.data tr.tpanelrow > td{display:block; width:100%}
  /* Карточка адреса внутри списка: адрес занимает верхнюю строку целиком,
     а объём и дата входа делят нижнюю. Общие правила таблицы ступеней кладут
     каждое значение на свою строку — для пяти строк сводки это верно, но в
     списке из сотен адресов карточка выходила в три строки и список
     растягивался втрое. */
  /* На телефоне строка — сетка, и отступ крайним ячейкам на неё не действует:
     поля ставятся самой строке. */
  [data-table="tiers"] .tscroll table.data tr{grid-template-columns:1fr auto;
    gap:2px 12px; padding:9px 14px}
  [data-table="tiers"] .tscroll table.data tr > *:first-child{padding-left:0}
  [data-table="tiers"] .tscroll table.data tr > *:last-child{padding-right:0}
  /* Без ограничения ширины длинный адрес не сокращается, а обрезается по
     краю окна: у .mid сокращение работает только когда ячейке есть куда
     ужиматься. Та же правка уже стоит у ленты входов и выходов. */
  /* Ячейка адреса — гибкая строка: номер занимает свою ширину, ссылка
     забирает остаток. Без этого ограничение ширины у ссылки считалось от
     ВСЕЙ ячейки, номер к нему прибавлялся, и самый длинный адрес вылезал за
     край ровно на ширину номера — последний знак срезался вместо
     аккуратного сокращения середины. */
  [data-table="tiers"] .tscroll table.data td.addr{grid-column:1 / -1; grid-row:1;
    display:flex; align-items:baseline; max-width:100%; min-width:0; overflow:hidden}
  [data-table="tiers"] .tscroll table.data td.addr a.mid{flex:1 1 auto; min-width:0}
  [data-table="tiers"] .tscroll table.data td.tsum{grid-column:1; grid-row:2}
  [data-table="tiers"] .tscroll table.data td.taddr{grid-column:2; grid-row:2;
    text-align:right; justify-content:flex-end}
  /* Подпись у даты не нужна: формат 15.04.26 ни с чем не спутать, а место
     в узкой строке дороже. */
  [data-table="tiers"] .tscroll table.data td.taddr::before{content:none}
  [data-table] table.data td[data-l]{display:flex; justify-content:space-between;
    align-items:baseline; gap:10px}
  [data-table] table.data td[data-l]::before{content:attr(data-l); font-size:12.5px;
    color:var(--mute); font-weight:400}
  /* Обычная таблица на телефоне укладывается в ширину, а не прокручивается.
     Внутри .scroll с overflow-x таблица тянется по содержимому и текст в ней
     никогда не переносится — столбцы просто уезжают за край. Поэтому здесь
     фиксированная раскладка с равными долями: длинная подпись переносится,
     а числовые столбцы остаются на виду. */
  .scroll table.data{table-layout:fixed; width:100%}
  .scroll table.data th, .scroll table.data td{padding-right:10px; font-size:14px;
    white-space:normal; overflow-wrap:anywhere}
  .scroll table.data th:nth-child(n), .scroll table.data td:nth-child(n){width:auto}
  .scroll table.data th.fit, .scroll table.data td.fit{white-space:normal}
  details.tbl .rows{max-height:none; overflow:visible}
  details.tbl .rows{padding:0 12px}
}

/* ---------- пульс: хронологические ленты ----------
   Левая колонка — дата, а не порядковый номер: в ленте порядок задаёт время,
   и номер «01/02/03» соврал бы, будто это пронумерованная последовательность. */
.feed{display:flex; flex-direction:column}
.fr{display:grid; grid-template-columns:74px minmax(0,1fr); gap:0 16px;
  padding:15px 0; border-top:1px solid var(--rule)}
.fr:last-child{border-bottom:1px solid var(--rule)}
.fr > div{min-width:0; overflow-wrap:anywhere}
.fd{font-family:"Unbounded","Unbounded fb",sans-serif; font-size:11.5px; color:var(--mute);
  padding-top:5px; font-variant-numeric:tabular-nums; line-height:1.45}
.ft{font-size:15.5px; color:var(--ink)}
.fm{font-size:12.5px; color:var(--mute); margin-top:5px;
  display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline}
.fm code{font-size:12px}
.tag{font-family:"Unbounded","Unbounded fb",sans-serif; font-size:10.5px; font-weight:600;
  color:var(--mute); display:inline-flex; align-items:center; gap:5px}
.tag::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--mute)}
.tag.rel::before{background:var(--s4)}
.tag.mrg::before{background:var(--s5)}
.stars{color:var(--s3); letter-spacing:1px; font-size:13px}
/* Пост в ленте обрезаем по высоте: в Farcaster попадаются простыни на
   тридцать строк, и одна такая растягивала раздел на два экрана. Полный
   текст — по ссылке на автора рядом. */
.fq{font-size:15.5px; color:var(--body); white-space:pre-line;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5;
  line-clamp:5; overflow:hidden}
.empty{font-size:14px; color:var(--mute); padding:15px 0; border-top:1px solid var(--rule)}
@media (max-width:560px){
  .fr{grid-template-columns:minmax(0,1fr); gap:6px}
  .fd{padding-top:0}
}

/* ---------- страница графиков ---------- */
.ctabs{display:flex; flex-wrap:wrap; gap:6px}
.ctabs button{appearance:none; font:inherit; font-size:13px; cursor:pointer;
  padding:5px 12px; border:1px solid var(--rule); background:transparent;
  color:var(--mute); border-radius:999px; line-height:1.3}
.ctabs button:hover{color:var(--ink); border-color:var(--ink)}
.ctabs button[aria-pressed="true"]{color:var(--invert); background:var(--ink); border-color:var(--ink)}
/* Вторая строка кнопок — продолжение тренда. Отделена подписью и разрежена
   сверху, чтобы не читалась как продолжение переключателя периода: периоды
   показывают данные, а эти кнопки — арифметику поверх них. */
/* Шкала прогноза раскладывается так же, как шкала периода: дорожка отдельной
   строкой во всю ширину, подпись и значение под ней. Флексом дорожка делила
   строку с надписями и упиралась в общий потолок 240px, из-за чего была вдвое
   короче графика, которым управляет. */
.ctabs.cfwd{display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:5px 10px; margin-top:8px}
.ctabs.cfwd > span{grid-area:2 / 1}
.ctabs.cfwd .fwdv{grid-area:2 / 2; justify-self:end; min-width:0}
.ctabs.cfwd input[type="range"]{grid-area:1 / 1 / 2 / -1; width:100%;
  max-width:none; flex:none}
/* Ползунок горизонта вместо трёх кнопок. Значений между «+30» и «+90» раньше
   не существовало вовсе, а шаг 5 суток даёт их 36 штук.
   min-width у подписи — не украшение: без него смена «выключено» на
   «+180 дней» меняет ширину строки, ряд перекладывается, и страница даёт
   сдвиг вёрстки ровно того сорта, который мы только что вычистили. */
.ctabs input[type="range"]{flex:1 1 150px; max-width:240px; margin:0;
  accent-color:var(--s5); height:20px; cursor:pointer; background:transparent}
.ctabs input[type="range"]:focus-visible{outline:2px solid var(--s5); outline-offset:3px}
.ctabs .fwdv, .ctabs .daysv{min-width:92px; font-size:13px; color:var(--ink);
  font-variant-numeric:tabular-nums; font-weight:600}
@media (max-width:420px){ .ctabs .fwdv, .ctabs .daysv{min-width:78px} }

/* Шкала периода — под графиком и во всю ширину колонки.

   Раскладка сеткой, а не флексом: подпись слева, значение справа, дорожка
   отдельной строкой во всю ширину. Флекс тут не годился — дорожка делила
   строку с подписями и упиралась в потолок max-width, а на телефоне подпись
   переносилась сама, оставляя дорожку короткой.

   min-width значению здесь не нужен и снят: оно сидит в колонке 1fr, ширина
   которой от текста не зависит, поэтому смена «всё время» на «14 дней»
   ничего не двигает. У шкалы продолжения тренда на /staking/ раскладка
   флексовая, и там min-width по-прежнему обязателен — без него смена подписи
   дёргает строку. */
.ctabs.cdays{display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:5px 10px;
  /* Раздел — колонка флекса с шагом 20px, и шкала оказывалась в 32px от
     графика: она читалась как отдельный элемент раздела, а не как орган
     управления графиком. Отрицательный отступ съедает общий шаг, оставляя
     6px — шкала visually прилипает к рамке графика. Число 20px повторяет
     gap у .stack: поменяется там — поправить и здесь. */
  margin-top:calc(6px - 20px)}
/* Дорожка — ПЕРВОЙ строкой, подписи под ней. Иначе между графиком и самой
   шкалой вклинивается строка с датами, и до дорожки от рамки графика выходит
   39px вместо 6: управляешь графиком, а орган управления стоит через надпись.

   Отрезок задаётся ДВУМЯ ползунками, положенными друг на друга: готового
   двустороннего элемента в браузерах нет. Отсюда всё остальное устройство.
   Оба поля растянуты во всю ширину и лежат одно на другом, поэтому верхнее
   перехватывает нажатия по нижней ручке. Приём «pointer-events:none на поле
   и auto на ручке» тут НЕ работает: проверено — Chrome всё равно отдаёт
   попадание контейнеру, и ни одна ручка не тянется вовсе. Поэтому обе ручки
   указатель ловят, а наверх скрипт поднимает ту, что ближе к курсору.
   Дорожка и закраска выбранного куска нарисованы псевдоэлементами
   контейнера, границы куска приезжают из скрипта в --a и --z. */
.ctabs.cdays .rng2{grid-area:1 / 1 / 2 / -1; position:relative; height:20px}
.ctabs.cdays .rng2::before,
.ctabs.cdays .rng2::after{content:""; position:absolute; top:9px; height:3px; border-radius:2px}
.ctabs.cdays .rng2::before{left:0; right:0; background:var(--rule)}
.ctabs.cdays .rng2::after{left:var(--a,0%); right:calc(100% - var(--z,100%)); background:var(--s5)}
/* max-width и flex сбрасываются ЯВНО: общее правило .ctabs input[type="range"]
   ограничивает ползунок 240px, и без сброса поле остаётся узким, хотя дорожка
   нарисована во всю ширину. Браузер считает значение от ширины ПОЛЯ, поэтому
   ручка улетала втрое дальше курсора, а правая вообще оказывалась за
   пределами видимой дорожки и не ловилась. */
.ctabs.cdays .rng2 input[type="range"]{position:absolute; left:0; top:0;
  width:100%; max-width:none; flex:none;
  height:20px; margin:0; padding:0; background:none; border:none;
  appearance:none; -webkit-appearance:none}
.ctabs.cdays .rng2 input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--s5); border:2px solid var(--paper);
  box-shadow:0 0 0 1px var(--s5); cursor:grab}
.ctabs.cdays .rng2 input[type="range"]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background:var(--s5);
  border:2px solid var(--paper); box-shadow:0 0 0 1px var(--s5); cursor:grab}
.ctabs.cdays .rng2 input[type="range"]::-moz-range-track{background:none; border:none}
.ctabs.cdays .rng2 input[type="range"]:focus-visible{outline:none}
.ctabs.cdays .rng2 input[type="range"]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 1px var(--s5), 0 0 0 4px color-mix(in srgb, var(--s5) 35%, transparent)}
.ctabs.cdays .rng2 input[type="range"]:focus-visible::-moz-range-thumb{
  box-shadow:0 0 0 1px var(--s5), 0 0 0 4px color-mix(in srgb, var(--s5) 35%, transparent)}
.ctabs.cdays .daysd{grid-area:2 / 1; font-variant-numeric:tabular-nums}
.ctabs.cdays .daysv{grid-area:2 / 2; justify-self:end; min-width:0}
.ctabs.cfwd > span{font-size:13px; color:var(--mute)}
.ctabs.cfwd button{border-style:dashed}
.ctabs.cfwd button[aria-pressed="true"]{border-style:solid}
.cfc{font-size:13px; color:var(--mute); margin-top:8px; line-height:1.5}
.cfc:empty{display:none}
.cfc b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.cstat{display:flex; flex-wrap:wrap; gap:4px 18px; font-size:13px; color:var(--mute);
  font-variant-numeric:tabular-nums}
.cstat b{color:var(--ink); font-weight:600}

/* Длинный адрес контракта в тексте не должен распирать страницу: у 42 символов
   без пробелов нет точки переноса, и на телефоне он выносил вёрстку за экран
   вместе со всей страницей. */
.lede code, .lede strong, .step code, .note code, p > code{overflow-wrap:anywhere}

/* ---------- «Ещё» в шапке ----------
   На <details>, а не на своей кнопке: раскрывается без JS, доступно
   с клавиатуры, и ссылки лежат в разметке — робот их видит. JS в theme.js
   добавляет только закрытие по клику мимо и по Esc. */
.more{position:relative}
.more > summary{list-style:none; cursor:pointer; color:var(--body); user-select:none}
.more > summary::-webkit-details-marker{display:none}
.more > summary::after{content:"▾"; font-size:10px; margin-left:5px; vertical-align:1px}
.more > summary:hover{color:var(--ink)}
.more[open] > summary{color:var(--ink)}
.more > div{position:absolute; right:0; top:calc(100% + 10px); z-index:20;
  display:flex; flex-direction:column; gap:2px; min-width:172px;
  padding:8px 0; background:var(--paper); border:1px solid var(--rule);
  box-shadow:0 8px 24px rgba(0,0,0,.10)}
:root[data-theme="dark"] .more > div{box-shadow:0 8px 24px rgba(0,0,0,.5)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .more > div{box-shadow:0 8px 24px rgba(0,0,0,.5)}
}
.more > div a{padding:7px 16px; text-decoration:none; color:var(--body)}
.more > div a:hover{color:var(--ink); background:var(--soft)}
@media (max-width:640px){
  /* На узком экране выпадающий список занял бы полэкрана поверх текста —
     раскрываем его в поток, прямо под строкой навигации. */
  /* Закрытый список — по ширине слова, иначе «Ещё» занимало целую строку.
     Ширину на всю строку берёт только раскрытый. */
  .more{position:static; width:auto}
  .more[open]{width:100%}
  .more > div{position:static; min-width:0; border:0; box-shadow:none; padding:4px 0 0;
    flex-direction:row; flex-wrap:wrap; gap:2px 14px; background:transparent}
  .more > div a{padding:10px 0}
  .more > div a:hover{background:transparent}
  /* Язык — исключение: он уехал в верхнюю строку, и разворачивать его в поток
     там некуда. Остаётся обычным выпадающим списком. */
  .more.lang, .more.lang[open]{position:relative; width:auto}
  .more.lang > div{position:absolute; right:0; top:calc(100% + 8px); flex-direction:column;
    gap:0; min-width:130px; padding:6px 0; background:var(--bg);
    border:1px solid var(--rule); box-shadow:0 8px 24px rgba(0,0,0,.12)}
  .more.lang > div a{padding:8px 16px}
}

@media (max-width:700px){
  /* Вариант A: в строке меню остаются четыре главных пункта, остальные три
     уходят в «Ещё» — вместо трёх строк по одному слову получается одна ровная.
     Ничего не прячется молча: всё, что ушло, лежит под «Ещё». */
  /* Состав строки при работающем скрипте определяет он сам (класс js-nav
     на <html>) — по факту свободного места. Эти два правила остаются
     запасным вариантом без JS: четыре главных пункта в строке, три
     второстепенных под «Ещё». */
  html:not(.js-nav) .top nav a.sec{display:none}
  html:not(.js-nav) .top nav .msec{display:inline-block}
  .lfull{display:none}
  .lshort{display:inline}
  /* Котировка спорила с логотипом по весу: две рамки одинаковой силы в одной
     строке. Оставляем цифру и процент. */
  .top .tick{border-color:transparent; padding-left:0; padding-right:0}
  .top .tick:hover{border-color:transparent}
}

/* Перестроение шапки действует до 599 px. Между 600 и 700 меню и так короткое
   — три пункта ушли в «Ещё» — и обычная раскладка укладывается в две строки;
   если включить перестроение и там, меню «помещается» в первую строку,
   растягивается на её остаток и рвётся внутри себя. */
@media (max-width:599px){
  /* Две строки вместо четырёх. Первая — кто мы, почём и на каком языке;
     вторая — разделы, а справа в её же строке значок темы: 38 px там ровно
     столько, сколько остаётся от меню, и третьей строки не появляется. */
  .top .brand{order:0}
  .top .tick{order:1; margin-left:auto}
  /* Язык стоит рядом с ценой, а не в меню: это настройка вида,
     а не раздел портала. Заодно меню умещается в одну строку. */
  .top > .more.lang{order:2}
  /* Ширина-основа подобрана в вилке. Снизу: логотип, цена и язык занимают
     273 px плюс 36 px зазоров, и основа должна быть больше остатка самой
     широкой мобильной строки (555-309=246), иначе меню влезает в первую
     строку, растягивается на её остаток и рвётся внутри себя — так шапка
     вырастала до 264 px. Сверху: на своей строке рядом с меню должен
     уместиться значок темы, то есть не больше 331-50=281 на узком экране.
     260 лежит в вилке для всех ширин от 375 до 599. */
  .top nav{order:3; width:auto; flex:1 1 260px; margin-left:0}
  .top .theme{order:4; margin-left:auto}
  .more{display:inline-block}
  .more[open]{width:100%}
}

/* Переключатель языка в подвале — строка ссылок, а не выпадающий список:
   внизу страницы места хватает, и лишнее нажатие тут ни к чему. */
.langs{display:flex; flex-wrap:wrap; gap:4px 10px; font-size:14px; margin-top:4px}
.langs b{font-weight:600; color:var(--ink)}
.langs a{color:var(--mute); text-decoration:none}
.langs a:hover{color:var(--ink); text-decoration:underline}
/* Язык в шапке отличаем от «Ещё» глобусом, иначе два одинаковых пункта рядом. */
/* Глобус убран: рядом с флагом это два значка об одном и том же. Название
   языка осталось в подсказке при наведении и в самом списке. */
.more.lang > summary{font-size:17px; line-height:1}
.more.lang .lflag{font-size:17px}
/* Флаги в списке: своя колонка, чтобы названия стояли ровно. */
.more.lang > div a{display:flex; align-items:center; gap:9px}
.more.lang > div a > i{font-style:normal; font-size:15px; width:1.3em; flex:none}
/* На телефоне глобус — единственное цветное пятно в шапке, и перетягивает
   внимание сильнее переключателя языка. Код «RU» и так читается однозначно. */


/* ---------- таблица выходов: что сделал каждый ---------- */
/* Сводка над таблицей. Отступ снизу, чтобы плитки не слипались с заголовками
   столбцов, и рамка сверху не двоилась с рамкой таблицы. */
.figs.exsum{margin-bottom:18px}
@media (max-width:619px){ .figs.exsum{margin-bottom:14px} }
/* Метка вместо слова в ячейке: три исхода различаются цветом точки,
   и глазом видно, что крупных выходов единицы. */
.kind{display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.kind::before{content:""; width:7px; height:7px; border-radius:50%; flex:none; background:var(--mute)}
.kind.up::before{background:var(--s4)}
.kind.ext::before{background:var(--s5)}
.kind.rst::before{background:var(--s2)}

/* Метки ступеней кэшбэка. Цвета повторяют приложение Rainbow, но приглушённо:
   строк в таблице полсотни, и пять ярких плашек на экран перетянули бы на себя
   всё внимание с чисел. Поэтому цветом залита только точка. */
.tier{display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  font-size:11.5px; letter-spacing:.03em; color:var(--mute)}
.tier::before{content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--mute)}
.tier.t0::before{background:var(--s5)}
.tier.t1::before{background:#9aa3ad}
.tier.t2::before{background:var(--s3)}
.tier.t3::before{background:#7fc8e8}
.tier.t4::before{background:linear-gradient(90deg,var(--s1),var(--s3),var(--s4),var(--s6))}
.tier.tq::before{background:var(--rule)}

/* Доля рядом с числом. Тег <s> взят ради краткости разметки, но по умолчанию
   он ЗАЧЁРКИВАЕТ текст — проценты выходили перечёркнутыми. Поэтому черту
   снимаем явно и глушим цветом: главное в ячейке — само число. */
/* Номер места перед адресом: приглушён и с моноширинными цифрами, чтобы
   колонка не дрожала на переходе с однозначных номеров на двузначные. */
/* Малые графики по ступеням. Сетка сама решает, сколько поместится в ряд:
   на широком экране три, на телефоне один. Каждому графику — своя шкала,
   поэтому под ним подписаны минимум и максимум: без них соседние поля
   читались бы как одна величина. */
.tsparks{display:grid; grid-template-columns:repeat(auto-fit, minmax(206px, 1fr));
  gap:16px 18px; margin-bottom:24px}
.tspark{min-width:0}
.tspark .th{display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-bottom:6px}
.tspark .th b{font-size:15px; font-variant-numeric:tabular-nums; white-space:nowrap}
/* Наибольшее за период — рядом с текущим числом, но приглушённо: главное
   в шапке то, сколько адресов на ступени сейчас. Тег <s> взят ради краткости
   и, как всегда, зачёркивает по умолчанию — черту снимаем. */
.tspark .th b s{text-decoration:none; font-weight:400; font-size:11px;
  color:var(--mute); margin-left:5px}
.tspark .sp{display:block; width:100%; height:54px}
.tspark .spf{display:flex; justify-content:space-between; font-size:10.5px;
  color:var(--mute); font-variant-numeric:tabular-nums; margin-top:3px}
.tspark .spf i{font-style:normal}
.sp .spl{fill:none; stroke-width:1.6; vector-effect:non-scaling-stroke}
.sp .spa{stroke:none; opacity:.14}
/* Цвета задаются ОТДЕЛЬНО линии и области.

   Раньше одно правило давало обоим и stroke, и fill: у линии оно перебивало
   её же `fill:none` (сила та же, а стоит ниже), линия закрашивалась сплошь и
   замыкалась от последней точки к первой — на каждом графике появлялась
   лишняя яркая фигура с прямой диагональю снизу. Заметно это только на
   тёмной теме, где бледная настоящая область почти не видна.

   Имена с s, а не b: короткие .b1/.b2 на сайте заняты кнопками-призывами
   (см. TABLES.md). */
.sp .spl.s0{stroke:var(--s5)}   .sp .spa.s0{fill:var(--s5)}
.sp .spl.s1{stroke:#9aa3ad}     .sp .spa.s1{fill:#9aa3ad}
.sp .spl.s2{stroke:var(--s3)}   .sp .spa.s2{fill:var(--s3)}
.sp .spl.s3{stroke:#7fc8e8}     .sp .spa.s3{fill:#7fc8e8}
.sp .spl.s4{stroke:var(--s6)}   .sp .spa.s4{fill:var(--s6)}

/* Раскрытие ступени: вся ячейка со ступенью — кнопка. Отдельной иконки
   нет намеренно, цель нажатия и так во всю ячейку, а на телефоне это
   единственный способ попасть пальцем без промаха. */
/* Стрелки у числа нет: подчёркивание и цвет ссылки уже говорят, что это
   нажимается, а значок рядом с цифрой читался как часть числа. */
.topen{appearance:none; background:none; border:0; padding:0; margin:0; font:inherit;
  cursor:pointer; display:inline-block;
  color:var(--s5); border-bottom:1px dashed currentColor; line-height:1.1}
.topen:hover{border-bottom-style:solid}
.topen[aria-expanded="true"]{border-bottom-style:solid}
.topen:focus-visible{outline:2px solid var(--s5); outline-offset:3px; border-radius:3px}

/* Панель со списком адресов ступени. Высота ограничена экраном, дальше
   прокрутка внутри: на BASIC это 2391 строка, и без ограничения страница
   выросла бы на десятки экранов. Цепляние прокрутки НЕ отключаем — дойдя до
   конца списка, палец должен продолжать листать саму страницу. */
/* Строка-список внутри таблицы. На десктопе это обычная ячейка во всю
   ширину; раскладку карточками на телефоне ломать нельзя, поэтому там
   строка переводится в блок отдельным правилом ниже. */
.tpanelrow > td{padding:0 0 18px !important; border:0 !important}
.tpanel .thead, .tpanelrow .thead{font-family:"Unbounded","Unbounded fb",sans-serif; font-size:12px;
  font-weight:600; letter-spacing:.04em; color:var(--mute); margin-bottom:8px}
.tpanelrow .thead{margin-top:2px}
.tscroll{max-height:min(60vh, 520px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--rule)}
.tscroll table.data{margin:0}
.tscroll table.data tr:first-child th{position:sticky; top:0; background:var(--paper);
  box-shadow:0 1px 0 var(--rule)}
/* Чередование фона: в BASIC 2391 строка, и глазу не за что зацепиться при
   прокрутке — взгляд соскальзывает на соседнюю строку. */
.tscroll table.data tr:nth-child(even){background:var(--soft)}
.tscroll table.data td{padding-top:7px; padding-bottom:7px}
/* Поля по краям окна со списком: у рамки свои границы, и без отступа адрес
   слева и дата справа упирались прямо в неё. Отступ ставится крайним
   ячейкам, а не всем — иначе разъехались бы и промежутки между колонками. */
.tscroll table.data tr > *:first-child{padding-left:14px}
.tscroll table.data tr > *:last-child{padding-right:14px}

/* Номер места. Был мелким серым и терялся рядом с адресом — на телефоне его
   принимали за часть адреса. Теперь это отдельный столбик: моноширинные
   цифры, точка после числа и фиксированная ширина под четыре знака
   (в BASIC их 2391), чтобы номера стояли в колонку, а не плясали. */
table.data .rank{display:inline-block; min-width:2.6em; margin-right:4px;
  color:var(--mute); font-weight:600; font-size:12.5px;
  font-variant-numeric:tabular-nums; text-align:right}
table.data .rank::after{content:"."; margin-left:1px}

table.data s{text-decoration:none; color:var(--mute); font-weight:400;
  font-size:11.5px; margin-left:5px; white-space:nowrap}


/* ---------- указатель статей ----------
   Без номеров: статьи не образуют последовательность, читать можно с любой,
   и «01/02/03» сообщали бы читателю неправду. Ориентир дают тема раздела
   и дата — то, по чему статью действительно выбирают. */
.arts{display:flex; flex-direction:column}
.arts article{padding:16px 0; border-top:1px solid var(--rule)}
.arts article:last-child{border-bottom:1px solid var(--rule)}
.arts .meta{font-family:"Unbounded","Unbounded fb",sans-serif; font-size:11.5px; color:var(--mute);
  letter-spacing:.02em; margin-bottom:5px; font-variant-numeric:tabular-nums}
.arts h3{font-size:18px; font-weight:600; margin-bottom:5px}
.arts h3 a{text-decoration:none}
.arts h3 a:hover{text-decoration:underline}
.arts article > p:last-child{font-size:15.5px; max-width:66ch}

/* ---------- схемы в статьях ----------
   Рисунки нарисованы под 760 px — ширину колонки. Ниже 620 px они не
   сжимаются дальше, а уезжают в прокрутку внутри своей рамки: подписи в
   схеме набраны 11–12 px, и при сжатии до ширины телефона они превратились
   бы в нечитаемую сыпь. Прокрутка только у рамки, страница вбок не едет.

   Шрифт подписей — системный гротеск, как в меню, а не Unbounded: на 11 px
   у Unbounded слишком широкие знаки, цифры в осях переставали помещаться
   между делениями. */
.dfig{border:1px solid var(--rule); overflow-x:auto; -webkit-overflow-scrolling:touch}
.dfig svg{display:block; width:100%; min-width:620px; height:auto}
.dfig text{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  fill:var(--mute); font-variant-numeric:tabular-nums}
.dfig .k{fill:var(--ink); font-weight:600}
.dfig .o{fill:var(--s2); font-weight:600}
.dfig .bl{fill:var(--s5); font-weight:600}
.dfig .big{fill:var(--ink); font-weight:700; font-size:15px}

/* Подписи к рисунку из нескольких панелей: по колонке на панель, чтобы
   подпись стояла под своей, а не превращалась в сплошной абзац. */
.dcap{display:grid; gap:12px; font-size:13px; line-height:1.5; color:var(--mute)}
@media (min-width:620px){.dcap{grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}}
.dcap b{color:var(--ink)}

/* Три ветви решения. Не нумерованы: это не последовательность шагов, а
   взаимоисключающий выбор — номера сообщали бы читателю неправду. Различает
   их цвет верхней кромки, тот же, что у соответствующих линий на схемах. */
.dbr{display:grid; gap:14px}
@media (min-width:700px){.dbr{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dbr > div{border:1px solid var(--rule); border-top:3px solid var(--mute);
  padding:15px 17px; display:flex; flex-direction:column; gap:8px}
.dbr > div:nth-child(2){border-top-color:var(--s5)}
.dbr > div:nth-child(3){border-top-color:var(--s2)}
.dbr h3{font-size:16px}
.dbr p{font-size:14px; line-height:1.55}
.dbr .cond{font-size:12.5px; color:var(--mute)}
.dbr .win{align-self:flex-start; margin-top:auto; font-size:11.5px; font-weight:600;
  color:var(--s5); border:1px solid var(--rule); border-radius:999px; padding:4px 11px}

/* Карточка-ссылка на разбор. Стоит в конце блока, который она углубляет,
   поэтому оформлена как отдельный предмет, а не как ещё одна строка текста:
   сплошная рамка и стрелка отличают её от примечаний вокруг. */
.deep{display:flex; align-items:baseline; gap:14px; border:1px solid var(--rule);
  padding:16px 18px; text-decoration:none; color:var(--body)}
.deep:hover{border-color:var(--ink)}
.deep > div{display:flex; flex-direction:column; gap:4px; min-width:0}
.deep b{font-family:"Unbounded","Unbounded fb",sans-serif; font-size:14px;
  font-weight:600; color:var(--ink); letter-spacing:-.01em}
.deep span{font-size:13.5px; color:var(--mute); line-height:1.5}
.deep::after{content:"\2192"; margin-left:auto; color:var(--mute); flex:none}
.deep:hover::after{color:var(--ink)}

/* Таблица в статье про окно раздачи. Свой класс обязателен: глобальные
   ширины table.data th:nth-child(N) выше рассчитаны на пятиколоночную ленту
   событий, и любая другая таблица с пятью колонками молча получает их же —
   колонке «Ветвь» доставалось 64px, и «скорость выросла» обрезалось. Та же
   ловушка, что уже описана у таблицы начислений: ширины по номеру колонки
   переносятся между разными таблицами и ломают их.
   min-width включает прокрутку в .scroll: без него table.data{width:100%}
   не даёт таблице выйти за контейнер, и на телефоне колонки сминаются
   вместо того, чтобы уехать вбок. */
table.data.dtab{min-width:620px}
table.data.dtab th:nth-child(1){width:110px}
table.data.dtab th:nth-child(2){width:92px}
table.data.dtab th:nth-child(3){width:96px}
table.data.dtab th:nth-child(4){width:auto}
table.data.dtab th:nth-child(5){width:138px}

/* ---------- полный список держателей ----------
   Ширины заданы своим классом, а не номером колонки: глобальные
   table.data th:nth-child(N) писались под пятиколоночную ленту событий и
   протекают в любую таблицу (см. ловушку у .dtab). Здесь колонок три. */
table.data.hatab th:nth-child(1){width:auto}
table.data.hatab th:nth-child(2){width:132px}
table.data.hatab th:nth-child(3){width:104px}

/* Строка поиска. Стоит НАД таблицей, а не внутри неё: при пятидесяти тысячах
   строк это первое, чем человек пользуется, и прятать её в подвал таблицы
   значило бы заставить листать до неё. */
.hasearch{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  padding:0 0 12px}
.hasearch .haq{flex:1 1 240px; min-width:0; font:inherit; font-size:14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  padding:9px 12px; color:var(--ink); background:var(--paper);
  border:1px solid var(--rule); border-radius:3px; appearance:none}
.hasearch .haq::placeholder{color:var(--mute); font-family:inherit}
.hasearch .haq:focus{outline:none; border-color:var(--ink)}
.hasearch .haq:focus-visible{outline:2px solid var(--s5); outline-offset:2px}
.hasearch .hax{appearance:none; font:inherit; font-size:13px; cursor:pointer;
  padding:8px 12px; color:var(--mute); background:none;
  border:1px solid var(--rule); border-radius:3px}
.hasearch .hax:hover{color:var(--ink); border-color:var(--ink)}
.hasearch .hameta{font-size:12.5px; color:var(--mute); margin-left:auto;
  font-variant-numeric:tabular-nums}
@media (max-width:560px){ .hasearch .hameta{margin-left:0; width:100%} }

/* ---------- список в записи «Что нового» ----------
   В Telegram строки помечены знаком ▪️, на сайте он лишний: там для этого
   есть разметка списка. Маркер — короткое тире, оно не спорит с цифрами,
   которые в таких списках встречаются чаще всего. */
.nlist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.nlist li{position:relative; padding-left:20px; max-width:62ch}
.nlist li::before{content:"\2013"; position:absolute; left:0; color:var(--mute)}

/* ---------- таблицы в статьях со смешанным содержимым ----------
   table-layout:auto вместо fixed — и это главное. Глобальные ширины
   table.data th:nth-child(N) писались под пятиколоночную ленту событий и
   протекают в любую таблицу с тем же числом колонок (ловушка описана выше
   у .dtab). Здесь таблиц три, колонок в них 2, 4 и 5, и задавать каждой свои
   ширины значило бы плодить правила. Браузер расставит их по содержимому
   сам — для текстовых таблиц это и нужно.
   min-width включает прокрутку в .scroll на узком экране. */
table.data.fcols{table-layout:auto; min-width:560px}
/* Ширины по номеру колонки, заданные выше для ленты событий, применяются и
   здесь — table-layout:auto их не отменяет, а лишь считает подсказками, и
   колонки всё равно сжимались до 86 px. Поэтому гасим их явно. */
table.data.fcols th:nth-child(n){width:auto}
table.data.fcols th, table.data.fcols td{white-space:normal}
table.data.fcols td:not(:first-child){font-variant-numeric:tabular-nums}

/* ---------- график баланса: кнопка в списке и попап ---------- */
/* Кнопка со значком и словом. Сперва здесь стоял один символ без подписи —
   компактно, но непонятно: на что он откроется, приходилось догадываться.
   Слово возвращено, а вес кнопки сдержан рамкой и приглушённым цветом:
   в таблице на полсотни строк она повторяется пятьдесят раз, и читают там
   всё-таки адреса и суммы. */
.hgr{appearance:none; cursor:pointer; display:inline-flex; align-items:center;
  gap:4px; padding:2px 7px 2px 6px; margin-left:6px; font:inherit; font-size:11.5px;
  line-height:1.5; color:var(--mute); background:none; white-space:nowrap;
  border:1px solid var(--rule); border-radius:999px; vertical-align:1px}
.hgr svg{width:11px; height:11px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.hgr:hover{color:var(--ink); border-color:var(--ink)}
.hgr:focus-visible{outline:2px solid var(--s5); outline-offset:2px}

.balpop{position:fixed; inset:0; z-index:50; display:flex; align-items:center;
  justify-content:center; padding:16px; background:rgba(0,0,0,.45)}
.balpop-box{position:relative; width:100%; max-width:760px; max-height:90vh;
  overflow:auto; background:var(--paper); border:1px solid var(--rule);
  padding:20px 22px 16px; box-shadow:0 18px 50px rgba(0,0,0,.25)}
:root[data-theme="dark"] .balpop-box{box-shadow:0 18px 50px rgba(0,0,0,.6)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .balpop-box{box-shadow:0 18px 50px rgba(0,0,0,.6)}
}
.balpop-x{position:absolute; top:8px; right:10px; appearance:none; border:0;
  background:none; cursor:pointer; font-size:26px; line-height:1; padding:4px 8px;
  color:var(--mute)}
.balpop-x:hover{color:var(--ink)}
.balpop-h{font-size:13px; color:var(--mute); margin:0 30px 10px 0; overflow-wrap:anywhere}
.balpop-h b{color:var(--ink)}
.balpop-n{font-size:13px; color:var(--mute); margin-top:8px;
  font-variant-numeric:tabular-nums}
@media (max-width:560px){ .balpop{padding:8px} .balpop-box{padding:16px 14px 12px} }

/* ============================================================
   Приток RNBW на биржи — /exchange-flow/

   ПОЧЕМУ ПОЛОСА, А НЕ ТОЛЬКО ЧИСЛА. Весь смысл страницы в пропорции:
   список отправителей без разбивки читается как список продавцов, хотя
   две пятых потока — это переток между биржами. Пропорцию глаз берёт
   с полосы мгновенно, а из столбика процентов — нет.
   ============================================================ */

/* Цвета видов. Красный достаётся настоящим держателям намеренно: из всех
   пяти видов только он означает давление продаж, остальное — движение
   токена между площадками. */
.k-exchange{background:var(--s5)}
.k-pool{background:var(--s6)}
.k-holder{background:var(--s1)}
.k-unknown{background:var(--s3)}
.k-untraced{background:var(--mute)}

.exfwin{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:16px}
.exfwin button{appearance:none; border:1px solid var(--rule); background:var(--paper);
  color:var(--body); font:inherit; font-size:13px; padding:7px 13px; cursor:pointer}
.exfwin button:hover{border-color:var(--ink); color:var(--ink)}
.exfwin button.on{border-color:var(--ink); background:var(--ink); color:var(--invert)}

.exf{border:1px solid var(--rule); padding:15px 16px; margin-bottom:12px}
.exfhd{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px}
.exfhd > b{font-family:"Unbounded","Unbounded fb","Helvetica Neue",Arial,sans-serif;
  font-size:15px; color:var(--ink)}
.exfhd > a.mid{display:inline-flex; max-width:170px; min-width:0; align-items:baseline;
  font-size:12.5px; color:var(--mute); text-decoration-color:var(--rule);
  text-underline-offset:2px}
.exfhd > a.mid > span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.exfhd > a.mid > i{flex:none; font-style:normal}
.exfhd > a.mid:hover{color:var(--ink)}
/* Сводка прижата к правому краю: так числа у всех бирж стоят друг под
   другом и сравниваются, а не пляшут за названиями разной длины. */
.exfsum{margin-left:auto; font-size:13px; color:var(--mute);
  font-variant-numeric:tabular-nums}
.exfsum b{color:var(--ink)}

/* Полоса. Отдельные доли могут быть меньше пикселя — тогда они просто не
   видны, и это честнее, чем задавать min-width и врать о пропорции. */
.exfbar{display:flex; height:9px; margin:13px 0 11px; background:var(--soft);
  overflow:hidden}
.exfbar > i{display:block; height:100%}

.exfleg{display:flex; flex-wrap:wrap; gap:5px 16px; list-style:none; margin:0; padding:0;
  font-size:12.5px; color:var(--mute)}
.exfleg li{display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.exfleg li > i{width:8px; height:8px; flex:none}
.exfleg b{color:var(--ink); font-variant-numeric:tabular-nums}

.exf details{margin-top:13px; border-top:1px solid var(--rule); padding-top:11px}
.exf summary{cursor:pointer; font-size:13px; color:var(--mute)}
.exf summary:hover{color:var(--ink)}
.exf details[open] summary{margin-bottom:6px}
.exf table.data td.who .sub{display:block; font-size:11.5px; color:var(--mute);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.exf table.data td.what{font-size:12.5px; color:var(--mute)}
/* Точка-метка вида. У `.kind::before` в общих правилах фон задан переменной
   --mute, а цвет вида стоит на самом элементе — поэтому красим точку
   наследованием, иначе все пять видов были бы серыми. */
.exf table.data td.what .kind{background:none}
.exf table.data td.what .kind::before{background:currentColor}
.exf table.data td.what .kind.k-exchange{color:var(--s5)}
.exf table.data td.what .kind.k-pool{color:var(--s6)}
.exf table.data td.what .kind.k-holder{color:var(--s1)}
.exf table.data td.what .kind.k-unknown{color:var(--s3)}
.exf table.data td.what .kind.k-untraced{color:var(--mute)}

/* Своя ширина колонок обязательна: общие `table.data th:nth-child(N)`
   протекают в любую таблицу страницы. */
[data-table="exflow"] table.data th:nth-child(1){width:auto}
[data-table="exflow"] table.data th:nth-child(2){width:132px}
[data-table="exflow"] table.data th:nth-child(3){width:172px}

@media (max-width:700px){
  /* Карточка из трёх ячеек. Без своих правил сумма уехала бы в первую
     колонку второй строки по общему `td.fit:nth-child(2)`, а вид встал бы
     куда попало авторазмещением — ровно та ловушка, что в этом файле уже
     помечена как пойманная четырежды. */
  [data-table="exflow"] table.data tr{grid-template-columns:minmax(0,1fr) auto}
  [data-table="exflow"] table.data td.who{grid-column:1; grid-row:1; min-width:0;
    white-space:normal}
  [data-table="exflow"] table.data td.num.fit{grid-column:2; grid-row:1; text-align:right}
  [data-table="exflow"] table.data td.what{grid-column:1 / -1; grid-row:2}
  .exfsum{margin-left:0; flex:1 1 100%}
  .exfhd > a.mid{max-width:none}
}

/* ============================================================
   Граф связей адресов — /graph/
   ============================================================ */

/* Схема по классам. Подписи набираются относительно системы координат SVG
   (100×62), поэтому кегль задан в её единицах, а не в пикселях: так он
   масштабируется вместе с картинкой и на телефоне не разваливается. */
.gsvg{display:block; width:100%; height:auto; overflow:visible; margin-bottom:18px}
.gsvg .gl{font-size:2.6px; font-weight:600; fill:var(--ink);
  font-family:"Unbounded","Unbounded fb","Helvetica Neue",Arial,sans-serif}
.gsvg .gn{font-size:2.2px; fill:var(--mute); font-variant-numeric:tabular-nums}
.gsvg path{transition:opacity .15s}
.gsvg path:hover{opacity:.95}

[data-graph="groups"] table.data th:nth-child(1){width:auto}
[data-graph="groups"] table.data th:nth-child(2){width:132px}
[data-graph="groups"] table.data th:nth-child(3){width:104px}
[data-graph="groups"] table.data td.who .self{font-style:normal; color:var(--mute);
  font-size:11.5px; margin-left:4px}

/* Сеть. Высота задана относительной — на телефоне квадрат, на широком
   экране шире: укладка нормирована в квадрат 0..1 и растягивается без
   потери взаимного расположения. */
.gnetwrap{position:relative; border:1px solid var(--rule); background:var(--soft)}
.gnet{display:block; width:100%; height:62vw; max-height:560px; min-height:320px}
.gtip{position:absolute; top:10px; left:10px; max-width:min(280px, calc(100% - 20px));
  background:var(--paper); border:1px solid var(--rule); padding:9px 11px;
  font-size:12.5px; line-height:1.5; color:var(--body); pointer-events:none}
.gtip b{color:var(--ink)}
.gtip .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px;
  color:var(--mute)}
.gleg{margin-top:12px}

@media (max-width:700px){
  /* Карточка из трёх ячеек: поток, объём, число переводов. Без своих
     правил объём уехал бы в первую колонку второй строки по общему
     `td.fit:nth-child(2)` — ловушка, помеченная в этом файле выше. */
  [data-graph="groups"] table.data tr{grid-template-columns:minmax(0,1fr) auto}
  [data-graph="groups"] table.data td.who{grid-column:1; grid-row:1; min-width:0;
    white-space:normal}
  [data-graph="groups"] table.data td.num.fit:nth-of-type(2){grid-column:2; grid-row:1;
    text-align:right}
  [data-graph="groups"] table.data td.num.fit:nth-of-type(3){grid-column:1 / -1;
    grid-row:2; text-align:left; color:var(--mute); font-size:12.5px}
  .gsvg .gl{font-size:3.1px}
  .gsvg .gn{font-size:2.6px}
}

/* ============================================================
   Цитата из первоисточника

   Появилась под разбор интервью, где цитаты — основное содержание,
   а не украшение. Поэтому не курсив и не кавычки-ёлочки средствами CSS:
   цитата набрана тем же шрифтом, что текст, и отделена линией слева —
   читателю важно сличать её со своим текстом, а не любоваться ею.
   ============================================================ */
.stack blockquote{margin:18px 0; padding:2px 0 2px 18px;
  border-left:2px solid var(--s5)}
.stack blockquote p{margin:0; font-size:16px; line-height:1.62; color:var(--ink)}
.stack blockquote p + p{margin-top:8px}
/* Подпись под цитатой — кто и когда это сказал. Без неё цитата
   непроверяема, а проверяемость и отличает разбор от пересказа. */
.stack blockquote .src{font-size:12.5px; color:var(--mute)}
.stack blockquote b{font-weight:650}
@media (max-width:700px){
  .stack blockquote{padding-left:13px; margin:15px 0}
  .stack blockquote p{font-size:15.5px}
}

/* Таблица выкупа по месяцам в статье про Хейса. Свои ширины обязательны:
   глобальные `table.data th:nth-child(N)` протекают в любую таблицу. */
table.data.bbtab th:nth-child(1){width:auto}
table.data.bbtab th:nth-child(2){width:150px}
table.data.bbtab th:nth-child(3){width:96px}
@media (max-width:700px){
  /* Карточка: месяц слева, объём справа, число сделок второй строкой.
     Без своих правил объём уехал бы по общему `td.fit:nth-child(2)`. */
  table.data.bbtab tr{grid-template-columns:minmax(0,1fr) auto}
  table.data.bbtab td:nth-child(1){grid-column:1; grid-row:1}
  table.data.bbtab td:nth-child(2){grid-column:2; grid-row:1; text-align:right}
  table.data.bbtab td:nth-child(3){grid-column:1 / -1; grid-row:2; text-align:left;
    color:var(--mute); font-size:12.5px}
}

/* Адрес казначейства отдельной строкой в статье про выкуп. Моноширинный и
   с переносом в любом месте: сорок два знака в одну строку на телефоне не
   помещаются, а разрывать адрес по словам нечему. */
.bbaddr{margin:10px 0 14px}
.bbaddr code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px; overflow-wrap:anywhere; line-height:1.5}
@media (max-width:700px){ .bbaddr code{font-size:12px} }

/* ============================================================
   Путь комиссии — /fee-path/
   Цвета берутся из общей палитры: s2 — поток комиссии, s5 — Coinbase.
   ============================================================ */
.fpmap{display:block; width:100%; min-width:680px; height:auto}
[data-fig="feepath"]{border:1px solid var(--rule); background:var(--card, var(--paper));
  padding:10px 6px; overflow-x:auto}
.fpmap .box{fill:var(--paper); stroke:var(--rule); stroke-width:1.2}
.fpmap .box.own{stroke:var(--s2); fill:color-mix(in srgb, var(--s2) 9%, transparent)}
.fpmap .box.cbx{stroke:var(--s5); fill:color-mix(in srgb, var(--s5) 10%, transparent)}
.fpmap .box.dim{fill:var(--soft); stroke:var(--rule)}
.fpmap .t{font-family:"Unbounded","Unbounded fb","Helvetica Neue",Arial,sans-serif;
  font-size:13px; font-weight:600; fill:var(--ink)}
.fpmap .t.sm{font-size:11.5px; font-weight:500; fill:var(--mute)}
.fpmap .t.cbt{fill:var(--s5)}
.fpmap .hex{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px; fill:var(--mute)}
.fpmap .step{font-family:"Unbounded","Unbounded fb",sans-serif; font-size:10px;
  font-weight:700; fill:var(--mute)}
.fpmap .flow{stroke:var(--s2); stroke-width:2; fill:none; marker-end:url(#fa)}
.fpmap .flow.thin{stroke:var(--mute); stroke-width:1.3; marker-end:url(#fg)}
.fpmap .flow.cbf{stroke:var(--s5); stroke-width:2.4; marker-end:url(#fc)}
.fpmap .amt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px;
  fill:var(--s2); font-weight:500}
.fpmap .amt.g{fill:var(--mute)}
.fpmap .amt.c{fill:var(--s5)}
.fpmap a:hover .box{stroke-width:2}

/* ── Страница /router/: карточки, графики по суткам, таблицы ─────────────
   Собственные классы вместо общих table.data и .num — у общих есть правила
   по номеру колонки, и они протекают в таблицу с другим числом колонок.
   Цвета только из токенов: обе темы работают без отдельного кода. */
.rcards{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:4px;
  overflow:hidden; margin:18px 0 0}
.rc{background:var(--paper); padding:15px 16px 13px}
.rc b{display:block; font-family:"Unbounded","Unbounded fb","Helvetica Neue",Arial,sans-serif;
  font-weight:700; font-size:23px; line-height:1.1; color:var(--ink);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.rc span{display:block; font-size:12.5px; color:var(--mute); margin-top:4px; line-height:1.35}

.rfig{border:1px solid var(--rule); border-radius:4px; background:var(--paper);
  padding:10px 6px 2px; overflow-x:auto; margin:18px 0 0}
svg.rch{display:block; width:100%; min-width:620px; height:auto}
.rch .rax{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px;
  fill:var(--mute)}
.rch .rax.ln{fill:var(--s4)}
.rch .rbar{opacity:.85}
.rch .rbar:hover{opacity:1}
/* Неполные сутки гасим, а не прячем: убрать столбик — значит соврать, что
   дня не было, оставить в полную силу — показать обвал, которого нет. */
.rch .rbar.part{opacity:.3}

.rleg{font-size:12.5px; color:var(--mute); margin:9px 2px 0; line-height:1.5}
.rleg .sw{display:inline-block; width:11px; height:11px; border-radius:2px;
  vertical-align:-1px; margin:0 6px 0 0}
.rleg .sw+.sw, .rleg .sw:not(:first-child){margin-left:16px}
.rleg .sw.s2{background:var(--s2)}
.rleg .sw.s4{background:var(--s4); height:3px; border-radius:2px; vertical-align:3px}

.rwrap{overflow-x:auto; margin:18px 0 0; border:1px solid var(--rule); border-radius:4px}
table.rtab{width:100%; min-width:520px; border-collapse:collapse; font-size:13.5px}
table.rtab th{font-family:"Unbounded","Unbounded fb","Helvetica Neue",Arial,sans-serif;
  font-weight:600; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--mute); text-align:left; padding:10px 14px; border-bottom:1px solid var(--rule);
  white-space:nowrap}
table.rtab td{padding:9px 14px; border-bottom:1px solid var(--rule); vertical-align:top}
table.rtab tr:last-child td{border-bottom:none}
table.rtab th.n, table.rtab td.n{text-align:right; white-space:nowrap;
  font-variant-numeric:tabular-nums}
table.rtab td.s a{font-weight:600; color:var(--ink); text-decoration:none}
table.rtab td.s a:hover{text-decoration:underline}
table.rtab td.s span{display:block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px; color:var(--mute); margin-top:2px}
table.rtab .dim{color:var(--mute)}

.rdupes{margin:14px 0 0; line-height:2.1}
.rdupes b{font-weight:600; color:var(--ink); background:var(--soft);
  border:1px solid var(--rule); border-radius:3px; padding:3px 8px; margin-right:4px}
.rdupes i{font-style:normal; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px; color:var(--mute); margin-right:14px}

@media (max-width:640px){
  .rc b{font-size:20px}
  table.rtab th, table.rtab td{padding:8px 10px}
}

/* Мост на схеме пути комиссии: он не принадлежит ни Rainbow, ни Coinbase,
   поэтому и цвет у него третий — предупреждающий, а не фирменный. */
.fpmap .box.brg{fill:var(--soft); stroke:var(--s3)}
.fpmap .flow.br{stroke:var(--s3); marker-end:url(#fb)}
.fpmap .amt.b{fill:var(--s3)}