:root {
  color-scheme: dark;

  --bg-primary: #0d0d0d;
  --bg-secondary: #161616;
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --text-muted: #606060;
  --border-color: rgba(255, 255, 255, 0.1);
  --border-glow: rgba(255, 255, 255, 0.16);
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-light: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.18);
  --bg-overlay: rgba(255, 255, 255, 0.03);
  --bg-overlay-hover: rgba(255, 255, 255, 0.06);
  --surface-hover: rgba(255, 255, 255, 0.06);
  --surface-active: rgba(255, 255, 255, 0.09);
  /* Подложка под сам документ (PDF, предпросмотр договора). Бумага белая в
     любой теме — это не поверхность интерфейса, а лист. */
  --surface-paper: #ffffff;
  --hover-bg: #1e1e1e;
  --accent-glow: rgba(255, 255, 255, 0.12);
  --accent-color: #ffffff;
  --accent-color-dark: #e0e0e0;
  --accent-rgb: 255, 255, 255;
  --on-accent: #0d0d0d;
  --bg-warning: rgba(254, 243, 199, 0.1);
  --border-warning: rgba(251, 191, 36, 0.3);
  --text-warning: #fbbf24;
  --bg-success: rgba(34, 197, 94, 0.1);
  --border-success: rgba(34, 197, 94, 0.3);
  --text-success: #22c55e;
  --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), 0.18);

  /* Плашки. Цвет здесь означает состояние и больше ничего: тиры подписок
     различаются весом заливки, а не оттенком, иначе всё превращается в кашу. */
  --badge-neutral-fg: var(--text-secondary);
  --badge-neutral-bg: rgba(255, 255, 255, 0.05);
  --badge-neutral-border: rgba(255, 255, 255, 0.12);
  --badge-info-fg: #8ab4f8;
  --badge-info-bg: rgba(138, 180, 248, 0.12);
  --badge-info-border: rgba(138, 180, 248, 0.28);
  --badge-warn-fg: #f5b544;
  --badge-warn-bg: rgba(245, 181, 68, 0.12);
  --badge-warn-border: rgba(245, 181, 68, 0.3);
  --badge-success-fg: #56d38a;
  --badge-success-bg: rgba(86, 211, 138, 0.12);
  --badge-success-border: rgba(86, 211, 138, 0.28);
  --badge-danger-fg: #ff7a7a;
  --badge-danger-bg: rgba(255, 122, 122, 0.12);
  --badge-danger-border: rgba(255, 122, 122, 0.28);

  /* Плотные состояния: заливка, на которой лежит белый (или почти чёрный)
     текст. Для плашек не годятся — тональных выше достаточно; нужны там, где
     цвет обязан пробиться сквозь картинку: ховер опасного действия на
     обложке релиза. */
  --badge-neutral-solid-bg: #2c2c33;
  --badge-neutral-solid-fg: #f2f2f5;
  --badge-info-solid-bg: #2f6bd8;
  --badge-info-solid-fg: #ffffff;
  --badge-warn-solid-bg: #e0930f;
  --badge-warn-solid-fg: #1a1206;
  --badge-success-solid-bg: #16915a;
  --badge-success-solid-fg: #ffffff;
  --badge-danger-solid-bg: #d13b31;
  --badge-danger-solid-fg: #ffffff;

  /* Металл достаётся только Prime и OLD. Градиент обязан быть симметричным
     (крайние стопы равны), иначе на стыке цикла анимации виден рывок. */
  --badge-metal-sweep: 9s;
  --badge-metal-graphite: linear-gradient(105deg, #1b1b20 0%, #2e2e36 25%, #4b4b57 50%, #2e2e36 75%, #1b1b20 100%);
  --badge-metal-graphite-fg: #f2f2f5;
  --badge-metal-graphite-border: rgba(255, 255, 255, 0.22);
  --badge-metal-silver: linear-gradient(105deg, #6f6f6f 0%, #c9c9c9 25%, #ffffff 50%, #c9c9c9 75%, #6f6f6f 100%);
  --badge-metal-silver-fg: #141414;
  --badge-metal-silver-border: rgba(255, 255, 255, 0.28);
  --badge-heh-bg: linear-gradient(135deg, #ffb4d6 0%, #ff8fc3 100%);
  --badge-heh-fg: #59112f;
  --badge-exclusive-bg: #f5f5f5;
  --badge-exclusive-fg: #111111;
  --badge-exclusive-border: #d4d4d4;
  --badge-heh-border: rgba(255, 196, 224, 0.7);

  /* Переключатели. Выключенный тумблер обязан читаться как выключенный, а не
     как выцветший: контраст держится на бегунке, а не на заливке дорожки.
     Дорожка при этом достаточно плотная, чтобы тумблер не растворялся на
     карточке-подложке — прозрачности 0.14 на сером фоне не хватало. */
  --switch-width: 42px;
  --switch-height: 24px;
  --switch-knob: 18px;
  --switch-track-off: rgba(255, 255, 255, 0.2);
  --switch-track-off-border: rgba(255, 255, 255, 0.3);
  --switch-track-off-hover: rgba(255, 255, 255, 0.28);
  --switch-knob-off: #f2f2f5;
  --switch-knob-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(0, 0, 0, 0.25);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-display: clamp(2rem, 6vw, 4rem);
  --line-height-tight: 1.15;
  --line-height-base: 1.6;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Почти прямой угол: карточки релизов, где скругление сбивает вертикальные
     линии сетки. Не «выключенный радиус» — 4px гасят пиксельную ступеньку. */
  --radius-xxs: 4px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --surface-card: rgba(255, 255, 255, 0.04);
  --border-soft: rgba(255, 255, 255, 0.08);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.15);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.25);
  /* Модалки. Палитра тёмная, как и весь кабинет: раньше эти токены были
     светлыми в обеих темах, и белое окно поверх чёрного экрана читалось как
     чужой системный диалог. Светлые значения — ниже, в .light-theme.
     Блюр маленький намеренно: фон отсекается затемнением, а не размытием —
     сильный backdrop-filter на весь экран и выглядит грязно, и роняет
     плавность анимации открытия на слабых машинах. */
  --modal-overlay-bg: rgba(8, 8, 10, 0.68);
  --modal-overlay-blur: 4px;
  --modal-surface: #17171a;
  --modal-surface-soft: #202024;
  --modal-border: rgba(255, 255, 255, 0.1);
  --modal-border-strong: rgba(255, 255, 255, 0.2);
  --modal-text: #f5f5f7;
  --modal-muted: #a0a0a0;
  --modal-muted-soft: #6b6b70;
  /* Подложка полей внутри модалки: на тёмной поверхности белый инпут слепит. */
  --modal-field-bg: rgba(255, 255, 255, 0.04);
  --modal-radius: 22px;
  --modal-radius-sm: 12px;
  --modal-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
  --modal-focus-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
  --modal-primary: #ffffff;
  --modal-primary-hover: #e0e0e0;
  --modal-on-primary: #0d0d0d;
  --modal-warning-bg: rgba(245, 181, 68, 0.12);
  --modal-warning-border: rgba(245, 181, 68, 0.3);
  --modal-warning-text: #f5b544;
  --modal-danger-bg: rgba(255, 122, 122, 0.12);
  --modal-danger-border: rgba(255, 122, 122, 0.28);
  --modal-danger-text: #ff7a7a;
  --modal-danger-solid: #cf3a30;
  --modal-danger-solid-hover: #b02a22;
  --modal-on-danger: #ffffff;
  --modal-success-bg: rgba(86, 211, 138, 0.12);
  --modal-success-border: rgba(86, 211, 138, 0.28);
  --modal-success-text: #56d38a;

  --glass-bg: rgba(13, 13, 13, 0.72);
  --glass-fallback: #121212;
  --glass-dropdown-bg: rgba(18, 18, 18, 0.94);
  --glass-dropdown-fallback: #141414;
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-highlight: rgba(255, 255, 255, 0.08);
  --glass-blur: 18px;
  --glass-shadow: 0 1px 0 var(--glass-highlight) inset, 0 18px 48px rgba(0, 0, 0, 0.44);
  --shell-edge-fade: rgba(13, 13, 13, 0.88);
  --shell-edge-fade-soft: rgba(13, 13, 13, 0.42);
  --shell-edge-fade-transparent: rgba(13, 13, 13, 0);
  --shell-edge-fade-height: 112px;

  --topbar-height: 64px;
  --content-max-width: 1180px;
  --interactive-min-size: 44px;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;

  --motion-fast: 140ms;
  --motion-base: 190ms;
  --motion-slow: 260ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  /* Лёгкий перелёт: только для бегунка тумблера и подобных «щелчков». */
  --ease-switch: cubic-bezier(0.34, 1.4, 0.5, 1);
  --skeleton-surface: rgba(255, 255, 255, 0.07);
  --skeleton-surface-strong: rgba(255, 255, 255, 0.1);
  --skeleton-shine: rgba(255, 255, 255, 0.12);

  /* ── Жидкий материал ──
     Язык лендинга, перенесённый в рабочие экраны: тёмная тема — ртуть,
     светлая — молоко. Материал, а не движение: стекло здесь «нарисованное»
     (плотная подложка + кромка внутренними тенями + неподвижный блик), без
     backdrop-filter — под ним идёт видео, и живой блюр пересчитывался бы
     на каждом его кадре. Включается классом .cw-liquid на <html>, правила —
     в liquid.css. */
  --liquid-canvas: rgb(5, 6, 8);
  /* Жидкость проступает сквозь холст, а не лежит поверх него на полную:
     постоянный перелив в полную силу мозолит глаза за рабочий день. */
  --liquid-backdrop-opacity: 0.82;

  /* Стекло карточек. Подложка плотная: текст обязан читаться на любом
     месте жидкости, а не только там, где она сейчас тёмная. */
  --liquid-glass-bg: rgba(14, 17, 24, 0.7);
  --liquid-glass-bg-strong: rgba(18, 22, 30, 0.84);
  --liquid-glass-border: rgba(255, 255, 255, 0.09);
  --liquid-glass-rim:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(127, 220, 255, 0.09),
    inset 1px 0 0 rgba(255, 255, 255, 0.05),
    inset -1px 0 0 rgba(255, 255, 255, 0.035);
  --liquid-glass-shadow: 0 1px 1px rgba(0, 0, 0, 0.4), 0 14px 36px rgba(0, 0, 0, 0.42);
  --liquid-glass-shadow-hover: 0 1px 1px rgba(0, 0, 0, 0.45), 0 20px 48px rgba(0, 0, 0, 0.55);
  /* Блик неподвижный — свет из окна сверху слева. За курсором он не ездит:
     каждое движение мыши перерисовывало бы все карточки экрана. */
  --liquid-glass-glare:
    radial-gradient(32rem 18rem at 16% 0%, rgba(255, 255, 255, 0.06), transparent 62%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.045) 0%, transparent 36%, transparent 72%, rgba(127, 220, 255, 0.035) 100%);

  /* Лунка — утопленная дорожка под каплей: вкладки, прогресс, степпер. */
  --liquid-well-bg: rgba(255, 255, 255, 0.04);
  --liquid-well-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.06);

  /* Капля — главное действие и активный пункт. На ртути она из молока. */
  --liquid-drop-bg: radial-gradient(120% 150% at 30% 0%, rgb(255, 255, 255) 0%, rgb(228, 234, 242) 48%, rgb(182, 193, 208) 100%);
  --liquid-drop-ink: rgb(5, 7, 10);
  --liquid-drop-border: rgba(255, 255, 255, 0.6);
  --liquid-drop-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -6px 14px rgba(120, 140, 170, 0.34),
    0 6px 18px rgba(127, 220, 255, 0.1),
    0 10px 26px rgba(0, 0, 0, 0.45);
  --liquid-drop-shadow-sm:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -3px 8px rgba(110, 130, 160, 0.38),
    0 4px 12px rgba(0, 0, 0, 0.42);

  /* Тихая капля — второстепенная кнопка: то же стекло, только прозрачнее. */
  --liquid-quiet-bg: rgba(255, 255, 255, 0.07);
  --liquid-quiet-bg-hover: rgba(255, 255, 255, 0.11);
  --liquid-quiet-border: rgba(255, 255, 255, 0.16);
  --liquid-quiet-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13);

  /* Жидкость в прогрессе: молоко с ледяным мениском по фронту. */
  --liquid-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(214, 224, 238, 0.92) 55%, rgba(170, 186, 208, 0.9) 100%);
  --liquid-fill-meniscus: rgba(127, 220, 255, 0.7);
  --liquid-fill-shine: rgba(255, 255, 255, 0.85);
  /* Кольцо всплеска от кнопки: отлив и светлая кромка. */
  --liquid-splash-ring: rgba(127, 220, 255, 0.1);
  --liquid-splash-edge: rgba(255, 255, 255, 0.45);

  /* Хром заголовка: чистый металл без оттенка. Лёд и фиолет лендинга
     посреди слова читались как голубое пятно в тексте. */
  --liquid-chrome-text: linear-gradient(100deg, rgb(255, 255, 255) 0%, rgb(206, 210, 217) 45%, rgb(255, 255, 255) 70%, rgb(184, 189, 197) 100%);

  /* Металл тиров в жидком материале: тот же симметричный градиент, что у
     --badge-metal-*, но со светом ртути — холодный блик в середине. */
  --liquid-metal-graphite: linear-gradient(105deg, rgb(14, 16, 21) 0%, rgb(38, 42, 52) 25%, rgb(92, 104, 124) 50%, rgb(38, 42, 52) 75%, rgb(14, 16, 21) 100%);
  --liquid-metal-silver: linear-gradient(105deg, rgb(120, 128, 140) 0%, rgb(205, 213, 224) 25%, rgb(255, 255, 255) 50%, rgb(205, 213, 224) 75%, rgb(120, 128, 140) 100%);
  --liquid-badge-rim: inset 0 1px 0 rgba(255, 255, 255, 0.1);

  /* Движение капли: передний край ведёт, задний догоняет с перелётом. */
  --liquid-ease: cubic-bezier(0.34, 1.32, 0.5, 1);
  --liquid-lead: 300ms;
  --liquid-trail: 560ms;
}

.light-theme {
  color-scheme: light;

  --bg-primary: #ffffff;
  --bg-secondary: #f4f4f4;
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-light: rgba(0, 0, 0, 0.1);
  --border-medium: rgba(0, 0, 0, 0.15);
  --bg-overlay: rgba(0, 0, 0, 0.02);
  --bg-overlay-hover: rgba(0, 0, 0, 0.04);
  --surface-hover: rgba(0, 0, 0, 0.04);
  --surface-active: rgba(0, 0, 0, 0.07);
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --text-muted: #9ca3af;
  --border-color: #e0e0e0;
  --border-glow: rgba(0, 0, 0, 0.08);
  --hover-bg: #ebebeb;
  --accent-glow: rgba(0, 0, 0, 0.08);
  --accent-color: #1a1a1a;
  --accent-color-dark: #333333;
  --accent-rgb: 26, 26, 26;
  --on-accent: #ffffff;
  --bg-warning: #fef3c7;
  --border-warning: #fbbf24;
  --text-warning: #92400e;
  --bg-success: #d1fae5;
  --border-success: #22c55e;
  --text-success: #065f46;
  --surface-card: #ffffff;
  --border-soft: rgba(0, 0, 0, 0.08);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 6px 24px rgba(0, 0, 0, 0.13);
  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-fallback: #ffffff;
  --glass-dropdown-bg: rgba(255, 255, 255, 0.97);
  --glass-dropdown-fallback: #ffffff;
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0.72);
  --glass-shadow: 0 1px 0 var(--glass-highlight) inset, 0 18px 48px rgba(0, 0, 0, 0.14);
  --shell-edge-fade: rgba(255, 255, 255, 0.92);
  --shell-edge-fade-soft: rgba(255, 255, 255, 0.48);
  --shell-edge-fade-transparent: rgba(255, 255, 255, 0);
  --skeleton-surface: rgba(0, 0, 0, 0.075);
  --skeleton-surface-strong: rgba(0, 0, 0, 0.12);
  --skeleton-shine: rgba(255, 255, 255, 0.65);

  /* Модалки на светлой теме: белый лист, тени и рамки вместо подсветки. */
  --modal-overlay-bg: rgba(15, 23, 42, 0.38);
  --modal-surface: #ffffff;
  --modal-surface-soft: #f8fafc;
  --modal-border: #e7e9ee;
  --modal-border-strong: #d6dae3;
  --modal-text: #171717;
  --modal-muted: #6b7280;
  --modal-muted-soft: #9ca3af;
  --modal-field-bg: #ffffff;
  --modal-shadow: 0 30px 90px rgba(15, 23, 42, 0.2), 0 2px 8px rgba(15, 23, 42, 0.08);
  --modal-focus-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
  --modal-primary: #171717;
  --modal-primary-hover: #000000;
  --modal-on-primary: #ffffff;
  --modal-warning-bg: #fff7ed;
  --modal-warning-border: #fed7aa;
  --modal-warning-text: #9a3412;
  --modal-danger-bg: #fef2f2;
  --modal-danger-border: #fecaca;
  --modal-danger-text: #b3261e;
  --modal-danger-solid: #dc2626;
  --modal-danger-solid-hover: #b91c1c;
  --modal-on-danger: #ffffff;
  --modal-success-bg: #f0fdf4;
  --modal-success-border: #bbf7d0;
  --modal-success-text: #15803d;

  --switch-track-off: rgba(0, 0, 0, 0.18);
  --switch-track-off-border: rgba(0, 0, 0, 0.22);
  --switch-track-off-hover: rgba(0, 0, 0, 0.26);
  --switch-knob-off: #ffffff;
  --switch-knob-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.05);

  /* Тона плашек на белом фоне: те же смыслы, затемнённый текст ради контраста. */
  --badge-neutral-bg: rgba(0, 0, 0, 0.04);
  --badge-neutral-border: rgba(0, 0, 0, 0.12);
  --badge-info-fg: #1d5bd6;
  --badge-info-bg: rgba(29, 91, 214, 0.1);
  --badge-info-border: rgba(29, 91, 214, 0.24);
  --badge-warn-fg: #8a5a00;
  --badge-warn-bg: rgba(217, 143, 17, 0.14);
  --badge-warn-border: rgba(217, 143, 17, 0.32);
  --badge-success-fg: #147a4a;
  --badge-success-bg: rgba(20, 122, 74, 0.11);
  --badge-success-border: rgba(20, 122, 74, 0.26);
  --badge-danger-fg: #b3261e;
  --badge-danger-bg: rgba(179, 38, 30, 0.09);
  --badge-danger-border: rgba(179, 38, 30, 0.24);

  /* Плотные состояния на белом фоне: заливка чуть темнее, чтобы белый текст
     на ней держал контраст. */
  --badge-neutral-solid-bg: #17171b;
  --badge-neutral-solid-fg: #ffffff;
  --badge-info-solid-bg: #1d5bd6;
  --badge-info-solid-fg: #ffffff;
  --badge-warn-solid-bg: #b06f00;
  --badge-warn-solid-fg: #ffffff;
  --badge-success-solid-bg: #12784a;
  --badge-success-solid-fg: #ffffff;
  --badge-danger-solid-bg: #c0322a;
  --badge-danger-solid-fg: #ffffff;

  /* Серебро на белом фоне тонет, поэтому крайние стопы уходят темнее. */
  --badge-metal-silver: linear-gradient(105deg, #767676 0%, #bcbcbc 25%, #f2f2f2 50%, #bcbcbc 75%, #767676 100%);
  --badge-metal-silver-fg: #111111;
  --badge-metal-silver-border: rgba(0, 0, 0, 0.3);
  --badge-metal-graphite-border: rgba(0, 0, 0, 0.22);
  --badge-heh-bg: linear-gradient(135deg, #ffe0ee 0%, #ffb8d8 100%);
  --badge-heh-fg: #75133f;
  --badge-exclusive-bg: #111111;
  --badge-exclusive-fg: #ffffff;
  --badge-exclusive-border: #333333;
  --badge-heh-border: rgba(183, 39, 104, 0.22);

  /* Молоко: стекло белое, капля — из ртути, как переключатель на лендинге. */
  --liquid-canvas: rgb(238, 240, 243);
  /* Прозрачнее тёмного: молоко светлое само по себе, и плотная белая
     подложка просто закрывала его серыми прямоугольниками. */
  --liquid-glass-bg: rgba(255, 255, 255, 0.52);
  --liquid-glass-bg-strong: rgba(255, 255, 255, 0.78);
  --liquid-glass-border: rgba(255, 255, 255, 0.8);
  --liquid-glass-rim:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(20, 40, 80, 0.06),
    inset 1px 0 0 rgba(255, 255, 255, 0.5),
    inset -1px 0 0 rgba(255, 255, 255, 0.3);
  --liquid-glass-shadow: 0 1px 1px rgba(20, 30, 50, 0.05), 0 14px 36px rgba(20, 30, 50, 0.1);
  --liquid-glass-shadow-hover: 0 1px 2px rgba(20, 30, 50, 0.06), 0 20px 48px rgba(20, 30, 50, 0.15);
  --liquid-glass-glare:
    radial-gradient(32rem 18rem at 16% 0%, rgba(255, 255, 255, 0.6), transparent 62%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.4) 0%, transparent 40%);

  --liquid-well-bg: rgba(7, 9, 13, 0.05);
  --liquid-well-shadow: inset 0 1px 2px rgba(20, 30, 50, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.8);

  --liquid-drop-bg: radial-gradient(120% 150% at 30% 0%, rgb(70, 80, 95) 0%, rgb(18, 22, 29) 48%, rgb(0, 0, 0) 100%);
  --liquid-drop-ink: rgb(255, 255, 255);
  --liquid-drop-border: rgba(255, 255, 255, 0.14);
  --liquid-drop-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -6px 14px rgba(0, 0, 0, 0.5),
    0 8px 22px rgba(20, 30, 50, 0.26);
  --liquid-drop-shadow-sm:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -3px 8px rgba(0, 0, 0, 0.5),
    0 4px 12px rgba(20, 30, 50, 0.28);

  --liquid-quiet-bg: rgba(255, 255, 255, 0.5);
  --liquid-quiet-bg-hover: rgba(255, 255, 255, 0.8);
  --liquid-quiet-border: rgba(7, 9, 13, 0.14);
  --liquid-quiet-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 10px rgba(20, 30, 50, 0.06);

  /* На молоке прогресс наливается ртутью. */
  --liquid-fill: linear-gradient(180deg, rgb(74, 84, 100) 0%, rgb(24, 28, 36) 55%, rgb(4, 5, 8) 100%);
  --liquid-fill-meniscus: rgba(31, 79, 208, 0.55);
  --liquid-fill-shine: rgba(255, 255, 255, 0.35);
  --liquid-splash-ring: rgba(20, 30, 50, 0.07);
  --liquid-splash-edge: rgba(20, 24, 32, 0.32);

  --liquid-chrome-text: linear-gradient(100deg, rgb(5, 7, 10) 0%, rgb(62, 66, 74) 45%, rgb(10, 12, 16) 70%, rgb(74, 78, 86) 100%);

  --liquid-metal-graphite: linear-gradient(105deg, rgb(10, 12, 16) 0%, rgb(34, 38, 47) 25%, rgb(84, 95, 113) 50%, rgb(34, 38, 47) 75%, rgb(10, 12, 16) 100%);
  --liquid-metal-silver: linear-gradient(105deg, rgb(112, 118, 128) 0%, rgb(186, 193, 204) 25%, rgb(246, 248, 251) 50%, rgb(186, 193, 204) 75%, rgb(112, 118, 128) 100%);
  --liquid-badge-rim: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 1ms;
    --motion-base: 1ms;
    --motion-slow: 1ms;
    --liquid-lead: 1ms;
    --liquid-trail: 1ms;
  }
}