/* ═══════════════════════════════════════════════════════════════ M&A Россия — дизайн-система сайта Визуальный слой: оливковая система Андрея (skill pitch-deck): акцент #4A5D3A, IBM Plex Serif / Inter / IBM Plex Mono. Слой графиков: валидированная категориальная палитра skill dataviz (см. README.md §«Палитра» — почему две палитры, а не одна). INVARIANT: любой цвет объявлен в базовом :root ДО того, как его переопределит @media или [data-theme]. Цвет, живущий только внутри media-блока, не применится в «системной» теме без стемпа на и даст нечитаемую страницу — классический баг артефакта. ═══════════════════════════════════════════════════════════════ */ :root { color-scheme: light; /* ── Бренд (оливковая система) ── */ --accent: #4A5D3A; --accent-dark: #2F3D24; --accent-light: #7A8F69; --accent-tint: #F3F4EE; --accent-soft: #E5EADB; /* ── Нейтральные: со сдвигом в тёплый оливковый, не чистый серый ── */ --page: #F6F6F1; --surface: #FFFFFF; --surface-2: #FBFBF7; --ink: #1A1A1A; --ink-2: #555550; --ink-3: #8A8A82; --rule: #E4E4DD; --rule-2: #C8C8C0; /* ── Семантика статусов (dataviz status palette, тема-инвариантна) ── */ --st-fact: #0CA30C; /* факт из отчёта */ --st-recon: #FAB219; /* реконструкция аналитика */ --st-unknown: #EC835A; /* не определимо */ --st-alert: #D03B3B; /* расхождение / противоречие */ /* ── Категориальная палитра серий (dataviz, light steps) ── GOTCHA: порядок слотов — это механизм CVD-безопасности, а не косметика. Переставлять слоты нельзя без повторного прогона scripts/validate_palette.js из скилла dataviz. */ --s1: #2A78D6; --s2: #EB6834; --s3: #1BAF7A; --s4: #EDA100; --s5: #E87BA4; --s6: #008300; --s7: #4A3AA7; --s8: #E34948; /* ── Хром графиков ── */ --grid: #E4E4DD; --axis: #C8C8C0; --chart-bg: #FFFFFF; /* ── Типографика ── */ --serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif; --sans: 'Inter', -apple-system, system-ui, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; /* ── Геометрия ── */ --gutter: 20px; --radius: 3px; /* WHY почти-прямые углы: строгий аналитический документ, а не потребительское приложение */ --shadow: 0 1px 2px rgba(26,26,26,.05); } /* Тёмная тема — только переопределение токенов. :not([data-theme="light"]) даёт явному светлому выбору победить тёмную ОС. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --accent: #8FA87B; --accent-dark: #B4C6A3; --accent-light: #6E8459; --accent-tint: #1E2318; --accent-soft: #2A3222; --page: #101208; --surface: #1A1D16; --surface-2: #23271E; --ink: #F0F0E8; --ink-2: #B6B8AC; --ink-3: #8A8C81; --rule: #2E322A; --rule-2: #454A3E; --s1: #3987E5; --s2: #D95926; --s3: #199E70; --s4: #C98500; --s5: #D55181; --s6: #008300; --s7: #9085E9; --s8: #E66767; --grid: #2E322A; --axis: #454A3E; --chart-bg: #1A1D16; --shadow: 0 1px 2px rgba(0,0,0,.35); } } :root[data-theme="dark"] { color-scheme: dark; --accent: #8FA87B; --accent-dark: #B4C6A3; --accent-light: #6E8459; --accent-tint: #1E2318; --accent-soft: #2A3222; --page: #101208; --surface: #1A1D16; --surface-2: #23271E; --ink: #F0F0E8; --ink-2: #B6B8AC; --ink-3: #8A8C81; --rule: #2E322A; --rule-2: #454A3E; --s1: #3987E5; --s2: #D95926; --s3: #199E70; --s4: #C98500; --s5: #D55181; --s6: #008300; --s7: #9085E9; --s8: #E66767; --grid: #2E322A; --axis: #454A3E; --chart-bg: #1A1D16; --shadow: 0 1px 2px rgba(0,0,0,.35); } *, *::before, *::after { box-sizing: border-box; } body { background: var(--page); /* INVARIANT: явный фон — прозрачный body заимствует тему хоста и ломает контраст */ color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.55; margin: 0; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; text-wrap: balance; margin: 0; } h1 { font-size: 1.35rem; letter-spacing: -.01em; } h2 { font-size: 1.5rem; letter-spacing: -.01em; } h3 { font-size: 1.05rem; } p { margin: 0 0 .7em; max-width: 68ch; } a { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ══════════════ ОБОЛОЧКА ══════════════ */ .shell { display: grid; grid-template-columns: 214px 1fr; min-height: 100vh; } .sidebar { background: var(--surface); border-right: 1px solid var(--rule); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .brand { padding: 18px 16px 14px; border-bottom: 1px solid var(--rule); } .brand__mark { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .brand__title { font-family: var(--serif); font-size: 1.05rem; line-height: 1.25; font-weight: 600; } .brand__sub { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; } .nav { padding: 8px 0; display: flex; flex-direction: column; gap: 1px; flex: 1; } .nav__item { display: flex; align-items: baseline; gap: 8px; padding: 7px 16px; background: none; border: 0; border-left: 2px solid transparent; font: inherit; font-size: 13.5px; color: var(--ink-2); text-align: left; cursor: pointer; width: 100%; } .nav__item:hover { background: var(--accent-tint); color: var(--ink); } .nav__item[aria-current="page"] { border-left-color: var(--accent); color: var(--ink); background: var(--accent-tint); font-weight: 500; } .nav__num { font-family: var(--mono); font-size: 10px; color: var(--ink-3); } .nav__item[aria-current="page"] .nav__num { color: var(--accent); } .sidebar__foot { padding: 12px 16px; border-top: 1px solid var(--rule); font-size: 11px; color: var(--ink-3); } .theme-toggle { background: none; border: 1px solid var(--rule-2); border-radius: var(--radius); color: var(--ink-2); font: inherit; font-size: 11px; padding: 3px 8px; cursor: pointer; margin-top: 6px; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .main { min-width: 0; display: flex; flex-direction: column; } /* ── Панель глобальных фильтров ── */ .filters { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--rule); padding-block: 10px; padding-inline: var(--gutter); display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end; } .f-group { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .f-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .f-row { display: flex; gap: 4px; align-items: center; } select, input[type="text"], input[type="search"] { font: inherit; font-size: 12.5px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--rule-2); border-radius: var(--radius); padding: 3px 6px; max-width: 100%; } .chipset { display: flex; flex-wrap: wrap; gap: 4px; } .chip { font: inherit; font-size: 11.5px; padding: 2px 8px; cursor: pointer; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--rule-2); border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; } .chip:hover { border-color: var(--accent); } .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; } :root[data-theme="dark"] .chip[aria-pressed="true"], :root:not([data-theme="light"]) .chip[aria-pressed="true"] { color: #10120A; } .chip__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; } .switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; } .switch input { accent-color: var(--accent); width: 15px; height: 15px; } .f-reset { margin-left: auto; align-self: flex-end; background: none; border: 0; color: var(--ink-3); font: inherit; font-size: 11.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .f-reset:hover { color: var(--accent); } /* ── Область контента ── */ .content { padding-block: 22px 40px; padding-inline: var(--gutter); flex: 1; max-width: 1240px; width: 100%; } .section-head { margin-bottom: 18px; } .section-head .eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; } .section-head .lede { color: var(--ink-2); font-size: 14px; margin-top: 6px; } .foot { border-top: 1px solid var(--rule); padding-block: 14px 24px; padding-inline: var(--gutter); font-size: 11.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px 20px; } .foot b { font-family: var(--mono); font-weight: 500; color: var(--ink-2); } /* ══════════════ ВИДЖЕТЫ ══════════════ */ .w { margin-bottom: 26px; } .w__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 8px; } .w__title { font-family: var(--serif); font-size: 1.02rem; font-weight: 600; } .w__note { font-size: 12px; color: var(--ink-3); } .w__ctrls { margin-left: auto; display: flex; gap: 4px; } .seg { display: inline-flex; border: 1px solid var(--rule-2); border-radius: var(--radius); overflow: hidden; } .seg button { font: inherit; font-size: 11.5px; padding: 2px 9px; border: 0; cursor: pointer; background: var(--surface-2); color: var(--ink-2); } .seg button + button { border-left: 1px solid var(--rule-2); } .seg button[aria-pressed="true"] { background: var(--accent); color: #fff; } :root[data-theme="dark"] .seg button[aria-pressed="true"], :root:not([data-theme="light"]) .seg button[aria-pressed="true"] { color: #10120A; } .panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px; } .chart { width: 100%; height: 340px; min-height: 240px; } .chart--tall { height: 420px; } /* ── KPI-тайлы ── */ .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .kpi { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 13px; display: flex; flex-direction: column; gap: 3px; } .kpi__label { font-size: 12px; color: var(--ink-2); } .kpi__val { font-family: var(--mono); font-size: 1.7rem; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); } .kpi__unit { font-size: .78rem; color: var(--ink-3); margin-left: 3px; letter-spacing: 0; } .kpi__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; } .kpi__delta { font-family: var(--mono); font-size: 11.5px; } .kpi__delta--up { color: var(--st-fact); } .kpi__delta--down { color: var(--st-alert); } .kpi__delta--flat { color: var(--ink-3); } .kpi__src { font-size: 10.5px; color: var(--ink-3); font-family: var(--mono); } /* ── Бейджи статуса ── */ .badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; } .badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } /* WHY цвет + точка + текст: статус никогда не кодируется одним цветом (dataviz §6) */ .badge--fact { color: #0A7D0A; } .badge--recon { color: #9A6800; } .badge--unknown { color: #B0552C; } .badge--alert { color: var(--st-alert); } .badge--neutral { color: var(--ink-3); } :root[data-theme="dark"] .badge--fact, :root:not([data-theme="light"]) .badge--fact { color: var(--st-fact); } :root[data-theme="dark"] .badge--recon, :root:not([data-theme="light"]) .badge--recon { color: var(--st-recon); } :root[data-theme="dark"] .badge--unknown, :root:not([data-theme="light"]) .badge--unknown { color: var(--st-unknown); } /* ── Таблица ── */ .tbl-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); } table.tbl { border-collapse: collapse; width: 100%; font-size: 13px; } .tbl th, .tbl td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top; } .tbl thead th { position: sticky; top: 0; background: var(--surface-2); z-index: 1; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; cursor: pointer; white-space: nowrap; } .tbl thead th:hover { color: var(--accent); } .tbl thead th[aria-sort]::after { content: " ↕"; color: var(--ink-3); } .tbl thead th[aria-sort="ascending"]::after { content: " ↑"; color: var(--accent); } .tbl thead th[aria-sort="descending"]::after { content: " ↓"; color: var(--accent); } .tbl tbody tr:hover { background: var(--accent-tint); } .tbl .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .tbl-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; } .tbl-bar .count { font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); margin-left: auto; } .pager { display: flex; gap: 6px; align-items: center; margin-top: 8px; font-size: 12px; color: var(--ink-2); } .pager button { font: inherit; font-size: 12px; padding: 2px 9px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--rule-2); border-radius: var(--radius); color: var(--ink-2); } .pager button:disabled { opacity: .4; cursor: default; } /* ── Паспорт отчёта ── */ .passport { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } .passport__head { padding: 12px 14px; border-bottom: 1px solid var(--rule); background: var(--surface-2); } .passport__title { font-family: var(--serif); font-size: 1.02rem; font-weight: 600; } .passport__meta { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; font-family: var(--mono); } .pp-row { display: grid; grid-template-columns: 172px 1fr auto; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--rule); align-items: start; } .pp-row:last-child { border-bottom: 0; } .pp-field { font-size: 12px; color: var(--ink-2); } .pp-val { font-size: 13px; } .quote { margin-top: 5px; font-size: 12px; color: var(--ink-2); font-style: italic; border-left: 2px solid var(--accent-soft); padding-left: 9px; } .quote__ref { font-family: var(--mono); font-style: normal; font-size: 10px; color: var(--ink-3); display: block; margin-top: 2px; } details.quote-fold > summary { cursor: pointer; font-size: 11.5px; color: var(--accent); list-style: none; font-family: var(--mono); letter-spacing: .04em; } details.quote-fold > summary::-webkit-details-marker { display: none; } details.quote-fold > summary::before { content: "▸ "; } details.quote-fold[open] > summary::before { content: "▾ "; } /* ── Матрица сравнения паспортов ── */ .matrix td.cell--diff { background: color-mix(in srgb, var(--st-alert) 11%, transparent); } .matrix td.cell--same { background: color-mix(in srgb, var(--st-fact) 8%, transparent); } .matrix td { font-size: 12.5px; } .matrix .rowhead { font-weight: 500; background: var(--surface-2); position: sticky; left: 0; } /* ── Плашки «факт / гипотеза» ── */ .claim { border: 1px solid var(--rule); border-left-width: 3px; border-radius: var(--radius); background: var(--surface); padding: 10px 13px; margin-bottom: 10px; } .claim__tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; display: block; } .claim--fact { border-left-color: var(--accent); } .claim--fact .claim__tag { color: var(--accent); } .claim--hypo { border-left-color: var(--st-recon); border-style: dashed; border-left-style: solid; } .claim--hypo .claim__tag { color: #9A6800; } .claim--open { border-left-color: var(--st-unknown); } .claim--open .claim__tag { color: #B0552C; } :root[data-theme="dark"] .claim--hypo .claim__tag, :root:not([data-theme="light"]) .claim--hypo .claim__tag { color: var(--st-recon); } :root[data-theme="dark"] .claim--open .claim__tag, :root:not([data-theme="light"]) .claim--open .claim__tag { color: var(--st-unknown); } .claim p:last-child { margin-bottom: 0; } /* ── Легенда виджетов и служебные блоки ── */ .legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12px; color: var(--ink-2); } .legend__item { display: inline-flex; align-items: center; gap: 6px; } .legend__swatch { width: 11px; height: 11px; border-radius: 2px; flex: none; } .placeholder { border: 1px dashed var(--rule-2); border-radius: var(--radius); background: var(--surface-2); padding: 22px; text-align: center; color: var(--ink-3); font-size: 13px; } .placeholder strong { display: block; color: var(--ink-2); font-family: var(--serif); font-size: 15px; margin-bottom: 4px; } .empty { padding: 16px; color: var(--ink-3); font-size: 13px; text-align: center; } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; } .prose { max-width: 68ch; } .prose ul { padding-left: 18px; } .prose li { margin-bottom: .3em; } /* ══════════════ АДАПТИВ ══════════════ */ @media (max-width: 860px) { .shell { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--rule); } .nav { flex-direction: row; overflow-x: auto; padding: 0; gap: 0; } .nav__item { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; width: auto; padding: 9px 12px; } .nav__item[aria-current="page"] { border-left-color: transparent; border-bottom-color: var(--accent); } .sidebar__foot { display: none; } .pp-row { grid-template-columns: 1fr; gap: 3px; } .chart { height: 300px; } } @media (max-width: 460px) { :root { --gutter: 16px; } body { font-size: 14px; } .kpi-row { grid-template-columns: 1fr 1fr; } .kpi__val { font-size: 1.35rem; } .filters { gap: 8px 12px; } .chart { height: 260px; } } /* ══════════════ СПРАВКА ПО МЕТОДАМ (help.js) ══════════════ */ /* Кнопка «?» — рядом с селектором метода, параметром и на карточке. WHY круг, а не текстовая ссылка: она встречается десятками на одном экране и не должна конкурировать по весу с подписями. */ .help-btn { flex: none; width: 17px; height: 17px; padding: 0; margin-left: 5px; border: 1px solid var(--rule-2); border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-family: var(--mono); font-size: 10px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; } .help-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); } .help-btn--sm { width: 14px; height: 14px; font-size: 9px; margin-left: 4px; } .modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(26, 26, 26, .45); display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow-y: auto; } :root[data-theme="dark"] .modal-overlay, :root:not([data-theme="light"]) .modal-overlay { background: rgba(0, 0, 0, .62); } body.is-modal { overflow: hidden; } .modal { background: var(--surface); color: var(--ink); border: 1px solid var(--rule-2); border-radius: var(--radius); box-shadow: 0 8px 32px rgba(0, 0, 0, .18); width: 100%; max-width: 720px; margin: auto; } .modal__head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--rule); background: var(--surface-2); position: sticky; top: 0; z-index: 1; border-radius: var(--radius) var(--radius) 0 0; } .modal__title { font-size: 1.1rem; margin: 0; } .modal__close { margin-left: auto; flex: none; background: none; border: 1px solid var(--rule-2); border-radius: var(--radius); color: var(--ink-2); font: inherit; font-size: 13px; line-height: 1; padding: 4px 8px; cursor: pointer; } .modal__close:hover { border-color: var(--accent); color: var(--accent); } .modal__body { padding: 14px 16px 18px; } .modal__lead { font-size: 14px; color: var(--ink); max-width: none; } .modal__sect { margin-top: 14px; } .modal__sub { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; } .modal__body p { font-size: 13.5px; max-width: none; } .modal__body ul, .modal__body ol { padding-left: 18px; margin: 0; font-size: 13.5px; } .modal__body li { margin-bottom: .35em; } .modal__fields { font-family: var(--mono); font-size: 12px; } .modal__example { border-left: 2px solid var(--accent-soft); background: var(--accent-tint); padding: 10px 12px; border-radius: var(--radius); } .modal__example-title { font-family: var(--serif); font-weight: 600; font-size: .98rem; margin-bottom: 5px; } .modal__example p:last-of-type { margin-bottom: .4em; } .modal__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; } .modal .claim { margin-bottom: 8px; } /* ── Карточки методов в разделе «Методология» ── */ .method-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; } .method-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); border-top: 2px solid var(--accent); padding: 11px 12px; display: flex; flex-direction: column; gap: 4px; } .method-card__head { display: flex; align-items: center; gap: 6px; } .method-card__n { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--accent); } .method-card__head .help-btn { margin-left: auto; } .method-card__title { font-family: var(--serif); font-weight: 600; font-size: .98rem; } .method-card__text { font-size: 12.5px; color: var(--ink-2); margin: 0; max-width: none; } /* ══════════════ ПАНЕЛЬ ПАРАМЕТРОВ МЕТОДА (params.js) ══════════════ */ .params { border: 1px solid var(--rule); border-left: 2px solid var(--accent); border-radius: var(--radius); background: var(--surface-2); padding: 11px 13px; margin-top: 10px; } .params__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; } .params__title { font-family: var(--serif); font-weight: 600; font-size: .95rem; } .params__reset { margin-left: auto; background: none; border: 0; color: var(--ink-3); font: inherit; font-size: 11px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .params__reset:hover { color: var(--accent); } .params__empty { font-size: 12.5px; color: var(--ink-3); } .params__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 10px 16px; } .param { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .param__label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); display: flex; align-items: center; flex-wrap: wrap; gap: 3px; } .param__theory { color: var(--accent); } .param__num { width: 92px; font-variant-numeric: tabular-nums; } .param__range { font-family: var(--mono); font-size: 10px; color: var(--ink-3); } .param__hint { font-size: 11px; color: var(--ink-3); line-height: 1.4; } @media (max-width: 620px) { .modal__cols { grid-template-columns: 1fr; } .modal-overlay { padding: 12px 8px; } .modal__body { padding: 12px 13px 16px; } .params__grid { grid-template-columns: 1fr; } }