/* Казуал Хаб: экспериментальный вид (unslop). Включается в меню тем, класс unslop на <html> ставят head-скрипты страниц.
   Здесь общее для всех страниц: иконки в двух вариантах и правки окон из общих скриптов (подсказка, меню ☰, друзья, темы).
   Свои правила у каждой страницы лежат в ней самой, в <style id="unslop-page">.
   Основано на unslop by Damir Sokolovsky (@heydamir), CC BY 4.0 */
/* эмодзи в обычном виде, линейная иконка в экспериментальном */
.u-new { display: none !important; }
html.unslop .u-old { display: none !important; }
html.unslop .u-new { display: revert !important; }
html.unslop svg.u-new { display: inline-block !important; vertical-align: -.2em; }
/* howto.js */
html.unslop .howto { background: var(--panel); border: 1px solid var(--line); box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .55), 0 14px 34px -18px rgb(0 0 0 / .28); border-radius: 22px; }
html.unslop .howto-modal.in .howto { animation: howto-in .55s cubic-bezier(.22, 1, .36, 1) both; }
html.unslop .howto-head small { letter-spacing: normal; text-transform: none; }
html.unslop .howto-modal.in .howto li { animation: howto-step .5s cubic-bezier(.22, 1, .36, 1) backwards; }
html.unslop .howto li > b { box-shadow: 0 4px 10px -4px rgb(0 0 0 / .28); }
html.unslop .howto-ok { transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
html.unslop .howto-ok:hover { transform: translateY(-1px); }
html.unslop .howto-fab { border: 1px solid var(--line); color: var(--ink-2); box-shadow: 0 10px 26px -12px rgb(0 0 0 / .28); transition: transform .45s cubic-bezier(.22, 1, .36, 1), bottom .25s; border-radius: 50%; }
html.unslop .howto-fab.on:hover { transform: translateY(-1px); }
/* header-menu.js */
html.unslop .hm-panel { animation: hm-in .22s cubic-bezier(.22, 1, .36, 1); }
html.unslop .hm-panel > * { animation: hm-item .34s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--i, 0) * 22ms); }
html.unslop .hm-panel > .hm-all { background: var(--panel, #1b1d24) !important; border-color: color-mix(in srgb, var(--accent, #3550E8) 45%, var(--line, #2b2e38)) !important; }
html.unslop .hm-panel > .hm-all:hover, html.unslop .hm-panel > .hm-all:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #3550E8) 20%, transparent), 0 10px 24px -14px rgb(0 0 0 / .28); }
html.unslop .hs-card { animation: hm-in .24s cubic-bezier(.22, 1, .36, 1); }
html.unslop .hs-lab { letter-spacing: normal; text-transform: none; }
html.unslop .hs-ic { color: var(--accent, #3550E8); }
/* friends-panel.js */
html.unslop .fp-card { animation: fp-pop .3s cubic-bezier(.22, 1, .36, 1); }
html.unslop .fp-card .label { letter-spacing: normal; text-transform: none; }
html.unslop .fp-btn { transition: transform .2s cubic-bezier(.22, 1, .36, 1), border-color .15s; }
/* themes.js */
html.unslop .theme-menu.tm-grid .tm-group { letter-spacing: normal; text-transform: none; }
html.unslop .theme-pick[open] .theme-menu.tm-grid .theme-opt.tm { animation: tm-in .45s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--ti, 0) * 22ms); }
html.unslop .theme-menu.tm-grid .theme-opt.tm:hover .tm-prev { transform: translateY(-1px); }
html.unslop .theme-menu.tm-grid .tm-prev { transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
/* online.js */
html.unslop .site-ann { animation: ann-in .5s cubic-bezier(.22, 1, .36, 1); }
/* whatsnew.js */
html.unslop .wn-card { animation: wn-pop .32s cubic-bezier(.22, 1, .36, 1); }
/* comments.js */
html.unslop .cm-item.fresh { animation: cm-in .5s cubic-bezier(.22, 1, .36, 1); }
html.unslop .cm-send { transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
/* friends.js */
html.unslop .rx-btns button { transition: transform .2s cubic-bezier(.22, 1, .36, 1), border-color .15s, background-color .15s; }
html.unslop .rx-btns .rx-e { transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
html.unslop .rx-btns button:hover .rx-e { transform: none; }
html.unslop #friendBoard .entry.fr-in { animation: fr-in .55s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--k, 0) * 35ms); }
html.unslop .rx-btns button[aria-pressed="true"] { animation: rx-pop .45s cubic-bezier(.22, 1, .36, 1); }
html.unslop .rx-title { letter-spacing: normal; text-transform: none; }
html.unslop .fol-it { transition: border-color .15s, transform .2s cubic-bezier(.22, 1, .36, 1); }