:root {
    color-scheme: dark;
    --ground:#0a0a09; --panel:#121211; --panel-2:#191917; --panel-3:#212019;
    --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.15);
    --text:#f6f3ec; --text-2:#b3aca0; --muted:#706c62;
    --accent:#ccff33; --alarm:#ff5c45;
    --accent-bg:rgba(204,255,51,.13); --alarm-bg:rgba(255,92,69,.14);
    --accent-glow:rgba(204,255,51,.40); --alarm-glow:rgba(255,92,69,.42);
    --ev-line:rgba(204,255,51,.26);
    /* бегущая строка — инверсия: неоновая заливка, тёмный текст */
    --tick-bg:#ccff33; --tick-text:#0e1403; --tick-neg:#a01705; --tick-sep:rgba(14,20,3,.32);
    /* выпадающее окно: приподнятая графитовая карточка с неоновой кромкой —
       отрывается от фона тенью и подъёмом, а не площадью цвета */
    --drop-bg:#24251f; --drop-text:#f6f3ec; --drop-text-2:#b9b3a6; --drop-muted:#8a857a;
    --drop-line:rgba(255,255,255,.09); --drop-accent:#ccff33; --drop-alarm:#ff5c45;
    --drop-border:1px solid rgba(255,255,255,.15);
    --drop-shadow:0 24px 58px rgba(0,0,0,.78);
    --drop-cap:#ccff33;
  }
  :root[data-theme="light"] {
    color-scheme: light;
    --ground:#f3f1ec; --panel:#ffffff; --panel-2:#faf8f4; --panel-3:#f2eee5;
    --line:rgba(20,18,14,.10); --line-2:rgba(20,18,14,.20);
    --text:#16150f; --text-2:#514b41; --muted:#8b8478;
    --accent:#5a7a00; --alarm:#c4331c;
    --accent-bg:rgba(90,122,0,.12); --alarm-bg:rgba(196,51,28,.11);
    --accent-glow:transparent; --alarm-glow:transparent;
    --ev-line:rgba(90,122,0,.30);
    --tick-bg:#ccff33; --tick-text:#0e1403; --tick-neg:#a01705; --tick-sep:rgba(14,20,3,.32);
    --drop-bg:#15140e; --drop-text:#f6f3ec; --drop-text-2:#b3aca0; --drop-muted:#7f7a70;
    --drop-line:rgba(255,255,255,.10); --drop-accent:#ccff33; --drop-alarm:#ff5c45;
    --drop-border:1px solid rgba(255,255,255,.12);
    --drop-shadow:0 20px 48px rgba(40,32,18,.28);
    --drop-cap:#ccff33;
  }
  * { box-sizing:border-box; }
  html,body { height:100%; }
  body { margin:0; background:var(--ground); color:var(--text); overflow:hidden;
         font:400 clamp(13px,.8vw,18px)/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
         -webkit-font-smoothing:antialiased; }
  .wall { height:100dvh; display:flex; flex-direction:column; position:relative;
          padding:clamp(9px,.62vw,16px); gap:clamp(7px,.5vw,12px);
          --rail:clamp(188px,15vw,268px); }

  /* Шапка: слева кнопки тем, справа — только состояние сервиса.
     Логотип, счётчик материалов, часы и переключатель темы убраны: на стене
     они не сообщают ничего, что стоило бы места в самой заметной строке. */
  /* Строка кнопок — отдельный ярус, и она не должна липнуть к тому, что под
     ней. Общего зазора .wall для этого мало: он же стоит и перед бегущей
     строкой, где лишний воздух не нужен. */
  header { flex:none; display:flex; align-items:flex-start; gap:clamp(12px,1vw,26px);
           padding:0 2px; margin-bottom:clamp(5px,.55vw,13px); }
  /* Кнопки занимают столько, сколько нужно, поиск — остаток строки. */
  header nav { flex:0 1 auto; min-width:0; }
  /* Метрики один в один с .chip: те же отступы, кегль и интерлиньяж —
     иначе поле оказывается выше кнопок. Ширина фиксированная: во всю
     строку оно перетягивало на себя внимание. */
  #ask { flex:0 1 clamp(190px,17vw,330px); min-width:clamp(140px,11vw,220px);
         display:flex; align-items:center; gap:.5em; background:var(--panel);
         border:1px solid transparent; border-radius:99px;
         padding:clamp(5px,.38vw,9px) clamp(11px,.8vw,19px);
         font-size:clamp(12px,.84vw,19px); line-height:1.1; }
  #ask:focus-within { background:var(--panel-2); border-color:var(--line-2); }
  /* лупа в долях кегля, а не в пикселях: иначе на большом экране она
     перерастает строку и тянет поле вверх */
  #ask .askico { flex:none; width:1em; height:1em; color:var(--muted); }
  #ask:focus-within .askico { color:var(--accent); }
  /* пока идёт поиск — лупа пульсирует тем же ритмом, что точка «идёт сейчас» */
  #ask.busy .askico { color:var(--accent); animation:pulse 1.2s ease-in-out infinite; }
  /* у поля ввода свои отступы от браузера — они и делали строку выше */
  #ask input { flex:1; min-width:0; font:inherit; line-height:1.1; padding:0;
               margin:0; height:1.1em; background:none; border:0; outline:none;
               color:var(--text); }
  #ask input::placeholder { color:var(--muted); }
  /* margin-left:auto — «обновлено» остаётся у правого края, даже когда
     поиск перестал растягиваться на всю строку */
  .status { flex:none; margin-left:auto; display:flex; flex-direction:column;
            align-items:flex-end; gap:.15em; padding-top:clamp(4px,.3vw,7px); }
  /* «обновлено» — оно же вход в список источников: отдельная кнопка со
     счётчиком лент была лишней строкой в шапке, а счётчик виден внутри окна */
  .lnk { font:inherit; font-size:inherit; color:inherit; background:none;
         border:0; padding:0; cursor:pointer; line-height:1.1; }
  .lnk:hover, .lnk[aria-expanded="true"] { color:var(--text-2); text-decoration:underline;
                                           text-underline-offset:.22em; }
  /* выделение и фокус задаём явно: по умолчанию браузер рисует их синим */
  ::selection { background:var(--accent); color:#0e1403; }
  :focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
  .lnk:focus:not(:focus-visible), .chip:focus:not(:focus-visible) { outline:none; }
  .live { color:var(--muted); font-size:clamp(11px,.66vw,15px); display:inline-flex;
          align-items:center; gap:7px; white-space:nowrap; }
  /* точка — она же кнопка полноэкранного режима: на стене мышь берут редко,
     и единственная живая деталь в шапке лучше всего годится на эту роль */
  .live .dot { background:none; border:0; padding:4px; margin:-4px; cursor:pointer;
               line-height:0; border-radius:50%; }
  .live i { width:7px; height:7px; border-radius:50%; background:var(--accent); display:block;
            box-shadow:0 0 9px var(--accent-glow); animation:pulse 3.4s ease-in-out infinite; }
  .live.off { color:var(--alarm); font-weight:600; }
  .live.off i { background:var(--alarm); box-shadow:0 0 9px var(--alarm-glow);
                animation:pulse 1.4s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity:.2 } }
  nav { display:flex; flex-wrap:wrap; gap:clamp(5px,.38vw,9px); }
  nav:empty { display:none; }
  .chip { font:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:.5em;
          background:var(--panel); color:var(--text-2); border:1px solid transparent;
          border-radius:99px; padding:clamp(5px,.38vw,9px) clamp(11px,.8vw,19px);
          font-size:clamp(12px,.84vw,19px); font-weight:600; letter-spacing:-.012em;
          line-height:1.1; white-space:nowrap; }
  .chip:hover { background:var(--panel-2); color:var(--text); }
  /* Два сигнала, и только два. Кнопка загорается, когда в теме всплеск:
     красным — если тема из тревожных, неоном — во всех остальных. Пока
     всплеска нет, кнопка нейтральна. Никаких чисел: сам факт подсветки
     и есть сообщение. */
  .chip[aria-expanded="true"],
  .chip.on { background:var(--panel-3); color:var(--text); border-color:var(--line-2); }

  .drop { position:absolute; z-index:20; background:var(--drop-bg); color:var(--drop-text);
          border:var(--drop-border); border-radius:14px; box-shadow:var(--drop-shadow);
          display:flex; flex-direction:column; overflow:hidden; max-height:min(64vh,720px); }
  .drop[hidden] { display:none; }
  /* кромка окна повторяет цвет кнопки, из которой оно раскрылось */
  .drop::before { content:""; display:block; flex:none; height:3px; background:var(--drop-cap); }
  .drop.hot::before { background:var(--alarm); }
  .dh { flex:none; display:flex; align-items:baseline; gap:clamp(8px,.7vw,16px); flex-wrap:wrap;
        padding:clamp(12px,.85vw,20px) clamp(78px,6vw,120px) clamp(9px,.62vw,15px) clamp(14px,1vw,24px);
        border-bottom:1px solid var(--drop-line); }
  .dh h3 { margin:0; font-size:clamp(15px,1.1vw,25px); font-weight:700; letter-spacing:-.016em; }
  .dh .v { color:var(--drop-text-2); font-size:clamp(11px,.74vw,16px); }
  .dacts { position:absolute; top:clamp(13px,.9vw,21px); right:clamp(14px,1vw,24px);
           display:flex; gap:clamp(10px,.9vw,20px); }
  .dacts button { font:inherit; font-size:clamp(11px,.72vw,16px); color:var(--drop-accent);
                  background:none; border:0; cursor:pointer; padding:0 2px; white-space:nowrap; }
  .dacts button:hover { text-decoration:underline; }
  .dl { overflow-y:auto; padding:clamp(4px,.3vw,8px) clamp(14px,1vw,24px) clamp(12px,.9vw,20px);
        list-style:none; margin:0; }
  .dl li { padding:clamp(9px,.58vw,14px) 0; border-bottom:1px solid var(--drop-line);
           font-size:clamp(13px,.94vw,21px); line-height:1.26; font-weight:500; }
  .dl li:last-child { border-bottom:0; }
  .dl a { color:var(--drop-text); text-decoration:none; }
  .dl a:hover { text-decoration:underline; }
  .dl .m { color:var(--drop-muted); font-size:.74em; font-weight:400; margin-left:.6em; white-space:nowrap; }
  /* Строка публикации иноагента. Ни курсива, ни подчёркивания: выделение
     притягивало к ней взгляд — ровно то, чего мы избегаем. Единственный
     знак — маленький треугольник, он же говорит, что строку раскрывают и
     сворачивают обратно. */
  .ino-t { cursor:pointer; }
  .inoarr { display:none !important; }
  /* Карточка раскрывается на месте, под строкой, внутри того же окна или
     виджета — отдельного окна больше нет. */
  .inobox { white-space:normal; margin:.5em 0 .15em; padding:.55em .8em;
            border-radius:8px; background:rgba(255,255,255,.055);
            border:1px solid var(--drop-line); }
  .inobox > a, .inobox > span:first-child { display:block; font-size:.84em;
            line-height:1.3; color:var(--drop-text); text-decoration:none; }
  .inobox > a:hover { text-decoration:underline; }
  .inomark { display:block; margin-top:.45em; font-size:.66em; line-height:1.4;
             color:var(--drop-muted); }
  /* Строка и в окне, и в виджете — флекс-контейнер («.dl li, .pinbox .evl li
     { display:flex }»), и карточка без этого встала бы СБОКУ от заголовка,
     ужав его в четыре строки. Переносим её на свою строку целиком. */
  .dl li.inoli, .pinbox .evl li.inoli { flex-wrap:wrap; align-items:center; }
  .dl li.inoli .inobox, .pinbox .evl li.inoli .inobox { flex:0 0 100%; }
  /* В виджете строки держатся в одну строчку и обрезаются — раскрытой
     карточке это мешает, поэтому у таких строк обрезки нет. */
  .evl li.inoli { overflow:visible; }
  .evl li.inoli .inobox { font-size:.52em; }
  .dl li.inoli .inobox { font-size:1em; }
  /* Метка машинного перевода. Не кричит, но видна: читатель должен знать,
     что формулировка не авторская, прежде чем её процитировать. */
  /* Метка перевода набирается как часть строки с изданием: тот же шрифт,
     тот же цвет, никакой рамки. Она должна читаться как уточнение к
     названию издания, а не как отдельный значок. */
  .tr { font:inherit; color:inherit; cursor:help; }
  .dl .empty { color:var(--drop-muted); font-weight:400; border-bottom:0; }
  .dl.cols li { padding:clamp(6px,.42vw,11px) 0; font-size:clamp(12px,.86vw,19px); }
  .dl::-webkit-scrollbar { width:10px; }
  .dl::-webkit-scrollbar-thumb { background:var(--drop-line); border-radius:6px;
                                 border:3px solid var(--drop-bg); }

  /* Закреплённая тема набрана теми же плашками, что и лента всплесков:
     раз это такой же поток заголовков, читаться он должен одинаково.
     Видно четыре штуки, остальное — прокруткой внутри блока. */
  /* Плашка должна совпасть с блоками ленты до пикселя, а они лежат внутри
     панели с собственными полями и зарезервированной полосой прокрутки.
     Повторяем эти отступы: слева поле панели, справа поле плюс полоса. */
  .pin { flex:none; padding:0 clamp(8px,.55vw,14px) 0 clamp(8px,.55vw,14px); }
  .pin .ev { --ev-bg:#2f2f2c; margin-right:0;
            grid-template-columns:var(--rail) minmax(0,1fr); }
  :root[data-theme="light"] .pin .ev { --ev-bg:#e2ddd2; }
  .pin[hidden] { display:none; }
  .pin .evm { display:flex; flex-direction:column; align-items:flex-start; }
  .pin .evm .pinico { color:var(--accent); margin-top:.4em; display:block;
                      width:clamp(18px,1.35vw,29px); height:clamp(18px,1.35vw,29px); }
  .pin .evm .unpin { margin-top:auto; padding-top:.5em; font:inherit;
                     font-size:clamp(10px,.68vw,15px); color:var(--accent);
                     background:none; border:0; cursor:pointer; text-align:left; }
  .pin .evm .unpin:hover { text-decoration:underline; }
  /* Булавка — кнопка. Две кнопки на одно действие («свернуть» внизу и
     значок сверху) на стене только путают: глазами ищется значок. */
  .pin .evm .pinclose { font:inherit; padding:0; border:0; background:none;
                        cursor:pointer; color:var(--accent); display:inline-flex;
                        opacity:.85; transition:opacity .15s, transform .15s; }
  .pin .evm .pinclose:hover { opacity:1; transform:translateY(1px); }
  /* Значок «сделать стартовой». Квадратный, без подписи: он стоит перед
     «Новостями» и не должен спорить с ними за внимание. */
  .chip.home { padding-left:.62em; padding-right:.62em; }
  .chip.home svg { width:1.05em; height:1.05em; display:block; }
  .dl .homeurl { display:flex; align-items:center; gap:.8em; flex-wrap:wrap; }
  .dl .homeurl code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
                      font-size:.92em; color:var(--drop-accent); }
  .dl .copyurl { font:inherit; font-size:.86em; cursor:pointer; color:var(--drop-accent);
                 background:none; border:1px solid var(--drop-line); border-radius:8px;
                 padding:.18em .7em; }
  .dl .copyurl:hover { color:var(--drop-text); border-color:var(--drop-accent); }
  .pinbox { overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:auto; min-width:0; }
  /* Нижняя кромка окна — ручка. Тянем вниз, и окно растёт, пока под ним не
     останется одна плашка ленты; двойной щелчок возвращает четыре заголовка.
     В покое ручка почти незаметна: на стене её не трогают неделями. */
  .pin .grip { grid-column:1/-1; height:clamp(18px,1.3vw,26px);
               margin:clamp(4px,.3vw,8px) 0 calc(-1 * clamp(7px,.55vw,13px));
               cursor:ns-resize; touch-action:none;
               display:flex; align-items:center; justify-content:center; }
  /* Ручка должна читаться как ручка, а не как случайная линия: короткая
     полоса неонового цвета и подпись рядом. На стене её не трогают неделями,
     поэтому в покое она приглушена, а под курсором загорается. */
  .pin .grip::before { content:""; width:clamp(54px,4.4vw,96px); height:4px; border-radius:3px;
                       background:var(--accent); opacity:.5;
                       transition:opacity .15s, width .15s, box-shadow .15s; }
  .pin .grip:hover::before { opacity:1; width:clamp(78px,6.4vw,140px); }
  .pin .grip.on::before { opacity:1; width:clamp(94px,7.6vw,168px);
                          box-shadow:0 0 12px -1px var(--accent-glow); }
  /* пока тянем, курсор не должен превращаться в «выделение текста» */
  body.resizing, body.resizing * { cursor:ns-resize !important; user-select:none; }
  .pinbox::-webkit-scrollbar { width:10px; }
  .pinbox::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:6px;
                                     border:3px solid var(--ev-bg); }

  main { flex:1; min-height:0; display:flex; }
  .col { flex:1; min-width:0; background:transparent; display:flex;
         flex-direction:column; min-height:0; padding:clamp(10px,.68vw,16px) 0 0; position:relative; }
  .ph { flex:none; display:flex; align-items:baseline; gap:10px;
        padding:0 clamp(8px,.55vw,14px) clamp(7px,.48vw,12px); }
  .ph h2 { margin:0; font-size:clamp(11px,.76vw,17px); font-weight:700; letter-spacing:.085em;
           text-transform:uppercase; color:var(--text-2); }
  /* Дата — переключатель дня, поэтому подчёркнута пунктиром: сплошное
     подчёркивание на стене читается как ссылка на другую страницу. */
  .ph .pdate { cursor:pointer; text-decoration:underline dotted;
               text-underline-offset:4px; text-decoration-color:var(--line-2); }
  .ph .pdate:hover { color:var(--text); text-decoration-color:var(--accent); }
  .ph .pdate.past { color:var(--accent); }
  #daymenu { position:absolute; z-index:70; min-width:clamp(150px,11vw,220px);
             padding:clamp(4px,.3vw,7px); border:1px solid var(--line-2);
             border-radius:12px; background:var(--panel-2);
             box-shadow:0 18px 50px rgba(0,0,0,.55); }
  #daymenu[hidden] { display:none; }
  #daymenu button { display:block; width:100%; text-align:left; font:inherit;
             font-size:clamp(11px,.78vw,17px); cursor:pointer; color:var(--text-2);
             background:none; border:0; border-radius:8px;
             padding:clamp(5px,.4vw,9px) clamp(8px,.6vw,13px); }
  #daymenu button:hover { background:var(--panel-3); color:var(--text); }
  #daymenu button[aria-current="true"] { color:var(--accent); }
  #daymenu .cnt { float:right; opacity:.5; }
               letter-spacing:-.01em; }
  .ph .sep, #dsep { display:none !important; }
  .ph .sub { color:var(--muted); font-size:clamp(10px,.6vw,13px); }
  .scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
            padding:0 clamp(8px,.55vw,14px) clamp(18px,1.5vw,34px);
            scrollbar-width:none; -ms-overflow-style:none; }
  .scroll::-webkit-scrollbar { display:none; width:0; height:0; }

  /* Плашка теперь в одну строку, и прежний зазор под четырёхстрочные блоки
     оказался больше самой плашки. Уменьшаем — но не до нуля: между всплесками
     всё равно должно быть видно границу. */
  #feed { display:flex; flex-direction:column; gap:clamp(9px,.85vw,19px); }

  /* Время и тема встают в одну строку: вертикальный рельс под четыре
     заголовка держал высоту, которой больше нечем заполнить. Ширина рельса
     фиксированная — иначе заголовки в соседних плашках не выстроятся по
     левому краю, а на стене это первое, что бросается в глаза. */
  /* Ширина рельса вынесена в переменную: обычно её хватает, но на узком
     экране подпись даты оказывается длиннее, и тогда выравнивание двигает
     рельс, а не подпись. Значение по умолчанию прежнее. */
  #feed .ev { grid-template-columns:var(--rail) minmax(0,1fr);
              align-items:center; }
  #feed .evm { display:flex; flex-direction:column; align-items:flex-start; gap:0; min-width:0; }
  #feed .evm b { flex:none; }
  #feed .evm .topic { margin-top:.26em; white-space:normal; overflow:visible; text-overflow:unset; }
  /* Всплески отделены насыщенным серым фоном, без зелёной обводки. */
  .ev { --ev-bg:#2f2f2c; background:var(--ev-bg); border-radius:12px;
        border:1px solid transparent;
        padding:clamp(11px,.75vw,18px) clamp(13px,.9vw,22px);
        /* minmax(0,1fr), а не 1fr: у «1fr» минимум равен min-content, и одна
           длинная строка без переносов раздвинула бы карточку за край экрана */
        display:grid; grid-template-columns:var(--rail) minmax(0,1fr);
        gap:clamp(11px,.9vw,22px); }
  .ev.now { --ev-bg:#3a3a36; border-color:transparent; }
  :root[data-theme="light"] .ev { --ev-bg:#e2ddd2; }
  :root[data-theme="light"] .ev.now { --ev-bg:#d6d0c3; }
  /* Крестик «убрать заголовок». Позиционируется абсолютно, потому что
     колонки .ev выверены под выравнивание заголовков и под alignPin —
     третья колонка сдвинула бы и то и другое. Правый отступ плашки
     увеличен ровно на его место, чтобы длинная строка не уезжала под него. */
  #feed .ev { position:relative; padding-right:clamp(34px,2.6vw,56px); }
  #feed .hidebtn { position:absolute; top:50%; right:clamp(8px,.6vw,14px);
                   transform:translateY(-50%); width:clamp(22px,1.6vw,30px);
                   height:clamp(22px,1.6vw,30px); padding:0; border:0;
                   border-radius:50%; background:transparent; cursor:pointer;
                   color:var(--muted); opacity:.22; font:inherit; line-height:1;
                   display:flex; align-items:center; justify-content:center;
                   transition:opacity .15s, background .15s, color .15s; }
  #feed .hidebtn:hover, #feed .hidebtn:focus-visible {
                   opacity:1; background:var(--panel-3); color:var(--text); }
  #feed .hidebtn svg { width:46%; height:46%; }
  /* Счётчик скрытых. Висит под шапкой справа и появляется только когда
     что-то скрыто: иначе это была бы невидимая настройка, про которую
     через неделю никто не вспомнит. */
  #undo { position:fixed; right:clamp(12px,1.2vw,24px);
          top:clamp(48px,5.6vh,92px); z-index:60;
          display:flex; align-items:center; gap:.7em;
          padding:clamp(5px,.4vw,9px) clamp(9px,.7vw,15px);
          border:1px solid var(--line-2); border-radius:999px;
          background:var(--panel-2); color:var(--muted);
          font-size:clamp(10px,.72vw,15px); opacity:.85; }
  #undo[hidden] { display:none; }
  #undo button { font:inherit; cursor:pointer; color:var(--accent);
                 background:none; border:0; padding:0; text-decoration:underline;
                 text-underline-offset:2px; }
  #undo button:hover { color:var(--text); }
  /* У сюжетной строки вместо «идёт сейчас» — сколько изданий её подхватили.
     Точка не мигает: это не «прямо сейчас», а широта охвата. */
  .nowl.wide i { animation:none; opacity:.75; }
  /* Строка списка: точка слева, крестик справа. Точка разделяет заголовки —
     без неё десять строк подряд читаются как сплошной абзац. */
  .dl li, .pinbox .evl li { display:flex; align-items:center; gap:.6em; }
  .dl .bul, .pinbox .bul { flex:none; width:.44em; height:.44em; border-radius:50%;
                           background:currentColor; opacity:.45; }
  /* Текст занимает столько, сколько нужно, и сжимается до многоточия,
     если не влез: тогда крестик стоит сразу за названием издания, а не
     у дальнего края строки, куда у длинного заголовка не дотянуться. */
  /* В окне крестика нет, значит и жать заголовок незачем: длинное
     название переносится и видно целиком. */
  .dl .txt { flex:1 1 auto; min-width:0; }
  .pinbox .evl .t { flex:0 1 auto; min-width:0; overflow:hidden;
                    text-overflow:ellipsis; white-space:nowrap; }
  /* Булавка и счётчик скрытых — в одну строку, счётчик справа от булавки */
  .pin .pinrow { display:flex; align-items:center; gap:.7em; }

  /* Крестик в списках. У ленты он абсолютный (там своя сетка), здесь —
     обычный элемент строки, поэтому стили отдельные, а не общие. */
  .dl .hidebtn, .pinbox .hidebtn {
        flex:none; width:clamp(15px,1.05vw,21px); height:clamp(15px,1.05vw,21px);
        padding:0; border:0; border-radius:50%; background:transparent;
        cursor:pointer; color:currentColor; opacity:.2; font:inherit;
        display:flex; align-items:center; justify-content:center;
        transition:opacity .15s, background .15s; }
  .dl .hidebtn:hover, .pinbox .hidebtn:hover,
  .dl .hidebtn:focus-visible, .pinbox .hidebtn:focus-visible {
        opacity:1; background:var(--panel-3); }
  .dl .hidebtn svg, .pinbox .hidebtn svg { width:54%; height:54%; }
  /* «скрыто: N» — рядом со значком закрепления, там же где «свернуть» */
  .pin .showhidden { font:inherit; font-size:clamp(9px,.6vw,13px); cursor:pointer;
        background:none; border:0; padding:0 0 0 .8em; color:var(--accent);
        text-decoration:underline; text-underline-offset:2px; }
  .pin .showhidden:hover { color:var(--text); }
  .evm { border-right:none; padding-right:0; }
  .evm b { display:block; color:var(--text); font-size:clamp(13px,1vw,22px); font-weight:700;
           font-variant-numeric:tabular-nums; letter-spacing:-.012em; }
  /* Тема набрана крупно и окрашена: с трёх метров это второй по значимости
     элемент после заголовков — по нему видно, о чём всплеск и тревожный ли он. */
  .evm .topic { display:block; font-size:clamp(12px,.98vw,22px); font-weight:650;
                margin-top:.26em; line-height:1.14; letter-spacing:-.014em;
                color:var(--accent); text-wrap:balance; }
  .evm .topic.neg { color:var(--alarm); }
  /* «идёт сейчас» держится на мигании, а не на цвете: цветов на экране уже
     достаточно, и ещё одна зелёная метка делала вёрстку пёстрой */
  .evm .nowl { display:none !important; }
  /* Заголовок всегда в одну строку. Перенос ломал ритм блока: одна длинная
     новость раздвигала карточку и съедала место у следующего всплеска.
     Что не поместилось — доезжает при наведении, а край подсвечен градиентом,
     чтобы было видно, что строка обрезана. */
  .evl { list-style:none; margin:0; padding:0; min-width:0; }
  .evl li { margin:.4em 0; font-size:clamp(15px,1.5vw,34px); line-height:1.17;
            font-weight:500; letter-spacing:-.018em;
            position:relative; overflow:hidden; white-space:nowrap; }
  /* В виджете перед заголовком точка, в ленте её нет — без этого отступа
     «Над…» и «Ро…» стоят на разных вертикалях. */
  #feed .evl li { padding-left:calc(.44em + .6em); }
  .evl li:first-child { margin-top:0; }
  .evl li:last-child { margin-bottom:0; }
  .evl .t { display:inline-block; transition:transform .35s ease; }
  .evl li.over:hover .t { transform:translateX(calc(-1 * var(--over)));
                          transition:transform var(--dur) linear .25s; }
  .evl li.over::after { content:""; position:absolute; right:0; top:0; bottom:0;
                        width:clamp(30px,2.6vw,60px); pointer-events:none;
                        background:linear-gradient(to right, transparent, var(--ev-bg)); }
  .evl a { color:var(--text); text-decoration:none; }
  .evl a:hover { text-decoration:underline; }
  .evl .src { color:var(--muted); font-weight:400; font-size:.62em; }
  .blank { color:var(--muted); font-size:clamp(13px,.95vw,21px); padding:clamp(14px,1vw,24px) 2px; }

  .ticker { flex:none; margin-top:clamp(8px,.7vw,17px); background:var(--tick-bg); border-radius:14px;
            overflow:hidden; display:flex; align-items:center; height:clamp(50px,4.3vw,94px); }
  .ttrack { display:flex; align-items:center; white-space:nowrap; will-change:transform;
            animation:run linear infinite; }
  .ticker:hover .ttrack { animation-play-state:paused; }
  @keyframes run { from { transform:translateX(0) } to { transform:translateX(-50%) } }
  .titem { padding:0 clamp(15px,1.1vw,26px); font-size:clamp(15px,1.34vw,30px);
           font-weight:650; letter-spacing:-.016em; color:var(--tick-text); }
  .titem.crisis { color:var(--tick-neg); }
  .titem a { color:inherit; text-decoration:none; }
  .titem a:hover { text-decoration:underline; text-underline-offset:.16em; }
  .tsep { color:var(--tick-sep); font-size:clamp(11px,.85vw,19px); }
  /* Марка в стыке круга. Отбивка шире, чем у ромба между заголовками:
     это не разделитель одного уровня, а граница цикла. */
  .tlogo { display:inline-flex; align-items:center; gap:clamp(6px,.5vw,12px);
           padding:0 clamp(26px,2.4vw,60px); color:var(--tick-text); }
  .tlogo svg { height:clamp(17px,1.5vw,34px); width:auto; display:block;
               flex:none; }
  .tlogo b { font-size:clamp(15px,1.34vw,30px); font-weight:800;
             letter-spacing:-.028em; }
  @media (prefers-reduced-motion:reduce) { .ttrack { animation:none } }

  @media (max-width:1100px) {
    html { -webkit-text-size-adjust:100%; }
    html, body { overflow:hidden; height:100%; }
    .wall { height:100dvh; gap:8px; overflow:hidden;
            padding:max(8px, env(safe-area-inset-top, 0px))
                    max(12px, env(safe-area-inset-right, 0px))
                    0
                    max(12px, env(safe-area-inset-left, 0px));
            --rail:7.2em; }
    header { flex:none; display:block; margin:0; padding:0 0 8px;
             background:var(--ground); z-index:40; }
    header nav { display:flex; flex-wrap:wrap; gap:7px; }
    #ask, .status, #pin, .ticker, .ph, .drop, .col::after,
    #feed .hidebtn, .hidebtn { display:none !important; }
    .chip, .chip.main, .chip:hover, .chip[aria-expanded="true"] {
      min-height:34px; padding:7px 13px; font-size:13px;
      background:var(--panel) !important; color:var(--text-2) !important;
      border-color:transparent !important; box-shadow:none !important;
      -webkit-tap-highlight-color:transparent; }
    .chip.on {
      background:var(--panel-2) !important; color:var(--text) !important;
      border-color:var(--line-2) !important; }
    main { flex:1 1 auto; min-height:0; width:100%; overflow:hidden; display:flex; }
    .col { flex:1; min-height:0; min-width:0; width:100%; padding-top:0;
           overflow:hidden; background:transparent; display:flex; flex-direction:column; }
    .scroll { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
              padding:0 0 8px; width:100%; }
    #feed .ev { width:100%; max-width:100%; }
    .ev, #feed .ev { grid-template-columns:1fr; }
    .evm { border-right:0; border-bottom:1px solid var(--line); padding:0 0 .45em; }
    #feed .evm { flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:.45em .75em; }
    #feed .evm .topic { margin-top:0; }
    .evl li, .pinbox .evl .t { white-space:normal; overflow:visible; text-overflow:unset; }
    .evl li.over::after { display:none; }
    .evl .t { display:inline; }
    .evl li.over:hover .t { transform:none; }
    #feed .evl li.inoli { display:flex; flex-wrap:wrap; align-items:flex-start; }
    #feed .evl li.inoli .inobox { flex:0 0 100%; font-size:.84em; }
    .sitefoot { flex:none; padding:8px 0 max(10px, env(safe-area-inset-bottom, 0px)); }
    #undo { left:10px; right:10px; top:auto; bottom:max(56px, env(safe-area-inset-bottom, 0px));
            justify-content:center; }
    #editor .edbox { width:94vw; max-height:90dvh; padding:16px; }
  }
  @media (max-width:700px) {
    .chip { min-height:32px; padding:6px 11px; font-size:12.5px; }
    header nav { gap:6px; }
  }
  @media (hover:none) {
    .ticker:hover .ttrack { animation-play-state:running; }
  }

  .chip.real, .chip.hot { background:var(--panel); color:var(--text-2); border-color:transparent; box-shadow:none; }
  .bul { cursor:pointer; }
  #editor, #mover, #reader { position:fixed; z-index:80; }
  #editor[hidden], #mover[hidden], #reader[hidden] { display:none; }
  #editor { inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; }
  #editor .edbox { width:min(720px,92vw); max-height:86vh; overflow:auto; background:var(--panel-2);
        border:1px solid var(--line-2); border-radius:16px; padding:22px 24px 20px; color:var(--text); }
  #editor h3 { margin:0 0 14px; }
  #editor label { display:block; font-size:.82em; color:var(--muted); margin:10px 0 4px; }
  #editor input[type=text], #editor textarea, #editor select {
        width:100%; font:inherit; color:var(--text); background:var(--panel);
        border:1px solid var(--line-2); border-radius:10px; padding:8px 10px; }
  #editor textarea { min-height:160px; resize:vertical; }
  #editor .edrow { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
  #editor button { font:inherit; cursor:pointer; border-radius:10px; padding:8px 14px;
        background:var(--accent); color:#0e1403; border:0; font-weight:700; }
  #editor button.ghost { background:transparent; color:var(--text-2); border:1px solid var(--line-2); }
  #mover { min-width:220px; background:var(--drop-bg); color:var(--drop-text);
        border:var(--drop-border); border-radius:12px; box-shadow:var(--drop-shadow); padding:8px; }
  #mover button { display:block; width:100%; text-align:left; font:inherit; cursor:pointer;
        background:none; border:0; color:inherit; padding:7px 10px; border-radius:8px; }
  #mover button:hover { background:var(--panel-3); }
  #feed .reader { padding:18px 8px 28px; }
  #feed .reader h3 { margin:0 0 8px; font-size:clamp(18px,1.6vw,32px); }
  #feed .reader .who { color:var(--muted); margin-bottom:14px; }
  #feed .reader .body { white-space:pre-wrap; line-height:1.45; font-size:clamp(14px,1.05vw,22px); }
  #feed .reader img, #feed .reader video { max-width:100%; border-radius:10px; margin:12px 0; }
  #feed .reader .back { font:inherit; cursor:pointer; background:none; border:0; color:var(--accent); margin-bottom:10px; }


  .age { display:inline-flex; align-items:center; justify-content:center;
         width:clamp(16px,1.2vw,20px); height:clamp(16px,1.2vw,20px);
         color:var(--muted); line-height:0; text-decoration:none; }
  a.age:hover { color:var(--text-2); }
  .age svg { width:100%; height:100%; display:block; }
  .sitefoot { flex:none; align-self:stretch; width:100%; display:flex;
              align-items:center; justify-content:space-between; gap:1em;
              padding:2px 4px 0; color:var(--muted);
              font-size:clamp(10px,.62vw,13px); font-weight:400; min-height:1.6em; }
  .sitefoot .footleft { flex:1; min-width:0; display:flex; align-items:center; gap:.5em; }
  .sitefoot .footleft p { margin:0; color:var(--muted); font-size:inherit;
                          white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sitefoot .footright { flex:none; display:flex; flex-wrap:wrap; align-items:center;
                         gap:.45em 1em; margin-left:auto; }
  .sitefoot a { color:var(--muted); text-decoration:none; }
  .sitefoot a:hover { color:var(--text-2); }
  .sitefoot button { font:inherit; cursor:pointer; border:0; border-radius:99px;
                     background:transparent; color:var(--text-2);
                     padding:0; text-decoration:underline; }
  .sitefoot button.skintog, .skintog {
             font:inherit; color:inherit; background:none; border:0; padding:0;
             cursor:pointer; border-radius:0; text-decoration:none; }
  .sitefoot button.skintog:hover, .skintog:hover { color:var(--text-2); text-decoration:none; }

  @media (max-width:1100px) {
    .sitefoot { flex-direction:column; align-items:flex-start; gap:12px; }
    .sitefoot .footright { order:1; margin-left:0; flex-wrap:wrap; justify-content:flex-start; }
    .sitefoot .footleft { order:2; width:100%; display:block; }
    .sitefoot .footleft p { white-space:normal; overflow:visible; text-overflow:unset; }
  }