/*
 * Сайт дизайн-системы Freya — раскладкой сайтов документации и языком Freya: слева разделы, в центре
 * раздел — одна панель `bg_secondary` с радиусом `r_xl` на фоне `bg_app`, справа якоря секций. В панели
 * блоки стоят на краю её содержимого (14), текст — на колонке 10 внутри блока, 24 от края панели (два
 * края). Отступы, высоты, радиусы и шрифты — из шкал Freya (tokens.css, bundle.css), обе темы — через
 * `data-theme` корня.
 */

/*
 * Сетка сайта — 12 колонок с межколонником `--eve_gap_l` (14, зазор между блоками): разделы — 2 колонки,
 * раздел — 8, якоря — 2; уже 1240 — разделы 3 и раздел 9, без якорей; на телефоне — одна колонка. Внутри
 * раздела — своя сетка: 8 колонок, 6 — справа от заголовка секции, 4 — на узкой панели (`--site-cols`). Блок
 * занимает целые колонки: карточка — половину (`--site-card`), плитка — четверть (`--site-tile`) или треть в
 * шести колонках, текст — до шести колонок (`--site-text`), заголовок секции — до пяти (`--site-head`). Сайт —
 * до 1680, первый экран — не ниже 380, полоса телефона — 50, как топбар Eve.
 */
:root {
    --site-width: 1680px;
    --site-hero: 380px;
    --site-topbar: 50px;
}

/*
 * Место под полосу прокрутки — всегда: короткий раздел помещается в окно без неё, и без запаса вся
 * страница при переходе к нему расширялась бы на ширину полосы.
 */
html {
    scrollbar-gutter: stable;
}

/*
 * Смена темы — переход вида (theme.js): старый кадр растворяется в новый по основной кривой. Это интерфейс
 * целиком, но не появление, поэтому `--eve_a_slow`, а не `--eve_a_reveal`: дольше смена темы ощущалась бы
 * задержкой.
 */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--eve_a_slow);
    animation-timing-function: var(--eve_a_ease_out);
}

body {
    margin: 0;
    background: var(--eve_c_bg_app);
    background-color: var(--eve_c_bg_primary);
    background-attachment: fixed;
    color: var(--eve_c_text_primary);
    font: var(--eve_t_body);
}

a {
    color: inherit;
}

code {
    color: var(--eve_c_text_primary);
    font-family: var(--font-mono, var(--eve_t_family_mono));
    font-size: 0.9em;
}

:focus-visible {
    outline: 2px solid var(--eve_c_accent_secondary);
    outline-offset: var(--eve_gap_xs);
}

.site {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    gap: var(--eve_panel_pad);
    box-sizing: border-box;
    max-width: var(--site-width);
    min-height: 100vh;
    margin: 0 auto;
    padding-block: var(--eve_panel_pad);
    padding-left: max(var(--eve_panel_pad), env(safe-area-inset-left, 0px));
    padding-right: max(var(--eve_panel_pad), env(safe-area-inset-right, 0px));
}

/*
 * Титул — заставка поверх сайта во весь экран на фоне сайта: огромное имя системы и под ним одна полоса. Две
 * массы, а не столбик плашек разной формы: имя ведёт, полоса подчинена ему и выровнена по краям его букв.
 * Версия и автор — тихой строкой у нижнего края экрана, вне композиции.
 * Страница под титулом не прокручивается; кнопка растворяет титул движением Morph (cover.js), и под ним уже
 * сайт. Титул показывает скрипт (`data-cover` корня): без скрипта и по ссылке на раздел его нет. Уходит титул за
 * `--eve_a_slow` — это весь экран, а не строка.
 *
 * Кегль имени `--cover-size` — почти во весь экран: имя шириной около 2,4 кегля, и 35vw растягивают его на шесть
 * седьмых ширины окна; в низком окне кегль ограничен высотой — под строкой имени остаются полоса, поля титула
 * и строка выходных данных у нижнего края, около 300 px.
 */
html[data-cover='open'] {
    overflow: hidden;
}

.cover {
    --morph_leave_ms: var(--eve_a_slow);
    --cover-size: min(35vw, calc(100dvh - 300px));

    display: none;
}

/* Колонка титула шириной в имя: полоса под ним растягивается ровно на его ширину. */
html[data-cover] .cover {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: min-content;
    place-content: center;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    padding: var(--eve_panel_pad) max(var(--eve_panel_pad), env(safe-area-inset-right, 0px)) var(--eve_panel_pad)
        max(var(--eve_panel_pad), env(safe-area-inset-left, 0px));
    overflow: clip;
    background: var(--eve_c_bg_app);
    background-color: var(--eve_c_bg_primary);
}

/*
 * Фон титула — сетка из точек, как холст инструмента: точка цвета границы, шаг — два межколонника сайта (28),
 * сетка идёт от центра экрана, и имя стоит на ней симметрично. Под содержимым титула — нижний слой его
 * контекста наложения.
 */
.cover::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(circle, var(--eve_c_border_secondary) 1px, transparent 1.5px);
    background-position: center;
    background-size: calc(var(--eve_gap_l) * 2) calc(var(--eve_gap_l) * 2);
    pointer-events: none;
}

/*
 * Чертежи элементов на фоне титула (drafts.js) — контуры тоном сетки, над точками и под содержимым титула. Линия
 * чуть толще точки, чтобы контур читался линией; ручки края — с подложкой фона, как у выделения в редакторе.
 */
.cover-drafts {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: visible;
    color: var(--eve_c_border_secondary);
    pointer-events: none;
}

.draft-line {
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.5px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.draft-handle {
    fill: var(--eve_c_bg_primary);
    stroke: currentcolor;
    stroke-width: 1px;
}

/* Ручка ползунка — контур с подложкой фона: дорожка под ней не просвечивает. */
.draft-knob {
    fill: var(--eve_c_bg_primary);
    stroke: currentcolor;
    stroke-width: 1.5px;
}

/* План превращения — пунктир тоньше рамки: замысел, а не постройка. */
.draft-plan {
    fill: none;
    stroke: currentcolor;
    stroke-width: 1px;
    stroke-dasharray: 2 3;
}

/* Размерные линии — тоньше рамки; число — моноширинным мелким кеглем, как на чертеже. */
.draft-measure-line {
    fill: none;
    stroke: currentcolor;
    stroke-width: 1px;
}

.draft-label {
    fill: currentcolor;
    font-family: var(--font-mono, var(--eve_t_family_mono));
    font-size: 9px;
    letter-spacing: 0.02em;
}

/*
 * Имя — кегль вне шкалы: титул — витрина, а не интерфейс инструмента. Разрядка плотнее, чем у заголовков: на
 * таком кегле обычные просветы между буквами разваливают слово. Строка — ровно в кегль: над заглавными не
 * остаётся пустого поля, и полоса под именем стоит у базовой линии, а не под пустотой. Начертание самое плотное
 * у шрифта: чем шире штрих, тем больше перелива в букве.
 *
 * Буквы имени — окно в сцену: cover.js рисует имя тем же шрифтом в картинку `--cover-mask`, и сцена видна
 * только сквозь неё (`data-masked`), а сам текст остаётся для чтения с экрана и выделения, но прозрачным. Под
 * переливом — непрозрачная подложка фона с заливкой тоном текста: где у сцены просвет, буква не пропадает, а
 * чертежи фона, которые заходят под имя (drafts-field.js), сквозь буквы не видны. Пока маски нет, имя — обычный
 * текст; маска появилась — текст растворяется в перелив.
 */
.cover-name {
    position: relative;
    margin: 0;
    color: var(--eve_c_text_primary);
    font-family: var(--font-ui, var(--eve_t_family_ui));
    font-size: var(--cover-size);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    white-space: nowrap;
    transition: color var(--eve_a_slow) var(--eve_a_ease_out);
}

.cover-name[data-masked] {
    color: transparent;
}

/*
 * Сцена больше строки имени, а центр у них общий: при плотной разрядке штрих крайней буквы выходит за поле
 * строки, а хвост «y» — под неё, и маска по полю строки срезала бы их. Размер — явный: холст замещаемый, и по
 * одним сторонам он не растягивается.
 */
.cover-scene {
    position: absolute;
    top: -0.15em;
    left: -0.1em;
    display: block;
    width: calc(100% + 0.2em);
    height: calc(100% + 0.3em);
    background-color: var(--eve_c_bg_primary);
    background-image: linear-gradient(
        color-mix(in srgb, var(--eve_c_text_primary) 10%, transparent),
        color-mix(in srgb, var(--eve_c_text_primary) 10%, transparent)
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--eve_a_slow) var(--eve_a_ease_out);
    -webkit-mask-image: var(--cover-mask);
    mask-image: var(--cover-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.cover-name[data-masked] .cover-scene {
    opacity: 1;
}

/*
 * Полоса под именем — один кегль на всё: слева подпись в две строки, справа по правому краю вход в сайт на линии
 * её последней строки. Под именем одна ступень текста, а не мелочь разных размеров. Яркое — по диагонали:
 * «Дизайн-система» слева сверху и «Начать» справа снизу, тихое между ними, и глаз идёт от имени к подписи и ко
 * входу. Края полосы — по штрихам «F» и «a», а не по полям строки имени: отступы `--cover-ink-*` cover.js
 * меряет вместе с маской, без них полоса стоит по полям. Начертание — героя онбординга Freya (500, 34/1.15,
 * разрядка −0,01em), на узком экране мельче; в шапке системы токенов героя нет, поэтому значения здесь.
 *
 * Полоса позиционирована, чтобы лечь над именем: поле глифов Manrope выше строки в кегль, и текст имени выходит
 * под строку почти на пятую часть кегля. Имя позиционировано ради холста сцены и рисуется над потоком, поэтому
 * без этого его вынос накрывал вход и забирал нажатие на «Узнать» — с титула было не уйти.
 */
.cover-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: last baseline;
    gap: var(--eve_gap_l);
    margin: calc(var(--eve_gap_l) * 2) var(--cover-ink-right, 0) 0 var(--cover-ink-left, 0);
    color: var(--eve_c_text_secondary);
    font-family: var(--font-ui, var(--eve_t_family_ui));
    font-size: clamp(22px, 2.4vw, 34px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.cover-tag {
    margin: 0;
}

.cover-tag-lead {
    display: block;
    color: var(--eve_c_text_primary);
}

/*
 * Выходные данные — строкой у нижнего края экрана по центру, как на плакате: вне композиции имени и полосы, поэтому
 * мелкий кегль здесь — тихая подпись, а не мелочь рядом с крупным. Отступ от края — как от имени до полосы.
 */
.cover-foot {
    position: absolute;
    right: 0;
    bottom: max(calc(var(--eve_gap_l) * 2), env(safe-area-inset-bottom, 0px));
    left: 0;
    margin: 0;
    color: var(--eve_c_text_muted);
    font: var(--eve_t_caption);
    text-align: center;
}

/*
 * Вход — текст того же кегля с подчёркиванием и шевроном, а не плашка кнопки: плашка интерфейса на титуле —
 * чужая масса, а шеврон говорит, что это действие. Подчёркивание тихое и проявляется под указателем, шеврон
 * при этом шагает вперёд. Шеврон — значок Lucide 20, самого крупного размера набора, с линией 1,5 px, как у
 * значков Freya. Поле нажатия выше строки — под палец, — а отрицательные поля возвращают раскладку на место.
 */
.cover-start {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: var(--eve_gap_s);
    margin: calc(var(--eve_gap_l) * -1) 0;
    padding: var(--eve_gap_l) 0;
    border: 0;
    background: none;
    color: var(--eve_c_text_primary);
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

/* Тизер: на месте входа — «Скоро» тем же кеглем, без подчёркивания и шеврона: это не действие, а обещание. */
.cover-soon {
    justify-self: end;
    margin: 0;
    color: var(--eve_c_text_primary);
}

.cover-start-label {
    text-decoration: underline;
    text-decoration-color: var(--eve_c_text_muted);
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.2em;
    transition: text-decoration-color var(--eve_a_base) var(--eve_a_ease_out);
}

.cover-start svg {
    flex: none;
    width: 20px;
    height: 20px;
    stroke-width: 1.5px;
    transition: translate var(--eve_a_base) var(--eve_a_ease_out);
}

/* Линия значка — 1,5 px экрана при любом размере, как у `Icon` Freya. */
.cover-start svg path {
    vector-effect: non-scaling-stroke;
}

.cover-start:hover .cover-start-label {
    text-decoration-color: currentcolor;
}

.cover-start:hover svg {
    translate: var(--eve_gap_xs) 0;
}

.side {
    position: sticky;
    top: var(--eve_panel_pad);
    z-index: 2;
    grid-column: 1 / span 2;
}

/*
 * Панель раздела — постоянная: при переходе меняется только её содержимое. Обрезка по скруглению держит
 * уходящее содержимое и сцену первого экрана внутри панели; `clip`, а не `hidden`, — иначе панель стала бы
 * прокручиваемой и заголовки секций перестали бы стоять.
 */
main {
    position: relative;
    grid-column: 3 / span 8;
    min-width: 0;
    padding: var(--eve_panel_pad);
    overflow: clip;
    border-radius: var(--eve_r_xl);
    background: var(--eve_c_bg_secondary);
    box-shadow: inset 0 0 0 1px var(--eve_c_border_primary);
}

.toc {
    grid-column: 11 / span 2;
}

/* Колонки по краям стоят на месте и прокручиваются сами. */
.toc {
    position: sticky;
    top: var(--eve_panel_pad);
}

.nav,
.toc {
    display: flex;
    flex-direction: column;
    gap: var(--eve_gap_xs);
    max-height: calc(100vh - var(--eve_panel_pad) * 2);
    overflow: auto;
    scrollbar-width: none;
}

/*
 * Полоса телефона — топбар Eve: высота 50, поле 8, радиус 20 = r_m + поле. Слева кнопка текущего раздела —
 * группа подписью, раздел основным текстом; разделы открыты — на её месте имя и версия, а полоса становится
 * шапкой карточки. Справа тема и шеврон: один значок с поворотом, вниз — открыть, вверх — свернуть. Подложка
 * непрозрачная — `bg_solid`: полоса стоит над прокручиваемым разделом. На широком экране полосы нет.
 */
.topbar {
    display: none;
    align-items: center;
    gap: var(--eve_gap_m);
    box-sizing: border-box;
    height: var(--site-topbar);
    padding: 0 var(--eve_gap_m);
    border-radius: calc(var(--eve_r_m) + var(--eve_gap_m));
    background: var(--eve_c_bg_solid);
    transition:
        background-color var(--eve_a_base) var(--eve_a_ease_in_out),
        box-shadow var(--eve_a_base) var(--eve_a_ease_in_out);
}

.crumb {
    display: flex;
    flex: 1;
    align-items: baseline;
    gap: var(--eve_gap_s);
    min-width: 0;
    height: var(--eve_row);
    padding: 0 var(--eve_row_pad);
    border: 0;
    border-radius: var(--eve_r_m);
    background: transparent;
    color: var(--eve_c_text_muted);
    font: var(--eve_t_caption);
    line-height: var(--eve_row);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--eve_a_fast) var(--eve_a_ease_out);
}

.crumb:hover {
    background: var(--eve_c_bg_tertiary);
}

.crumb-group:empty {
    display: none;
}

.crumb-page {
    overflow: hidden;
    color: var(--eve_c_text_primary);
    font: var(--eve_t_body);
    line-height: var(--eve_row);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.identity {
    display: flex;
    flex: 1;
    align-items: baseline;
    gap: var(--eve_gap_m);
    min-width: 0;
    padding: 0 var(--eve_row_pad);
}

.nav-toggle {
    display: flex;
    flex: none;
}

.brand {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--eve_gap_m);
    min-height: var(--eve_row);
}

.brand-link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--eve_gap_m);
    padding: var(--eve_gap_m) var(--eve_row_pad);
    text-decoration: none;
}

.brand-name {
    font: var(--eve_t_title);
}

.brand-version {
    color: var(--eve_c_text_muted);
    font: var(--eve_t_meta);
    white-space: nowrap;
}

.nav-rows,
.toc-rows {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--eve_gap_xs);
}

/*
 * Метка выбора — подложка под выбранным пунктом списка; её края по оси хода ставит и ведёт пружиной Morph,
 * поперёк оси она во всю строку. Без выбранного пункта метка гаснет, но остаётся на месте: по ней Morph
 * меряет следующий ход.
 */
.mark {
    position: absolute;
    z-index: 0;
    border-radius: var(--eve_r_m);
    background: var(--eve_c_bg_tertiary);
    pointer-events: none;
    transition: opacity var(--eve_a_fast) var(--eve_a_ease_out);
}

.mark[data-axis='y'] {
    left: 0;
    right: 0;
}

.mark[data-axis='x'] {
    top: 0;
    bottom: 0;
}

.mark[data-empty] {
    opacity: 0;
}

.nav-group {
    margin: var(--eve_gap_l) 0 var(--eve_gap_xs);
    padding: 0 var(--eve_row_pad);
    color: var(--eve_c_text_muted);
    font: var(--eve_t_overline);
    letter-spacing: var(--eve_t_overline_ls);
    text-transform: uppercase;
}

.nav-row,
.toc-row {
    position: relative;
    z-index: 1;
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--eve_row_pad);
    padding: 0 var(--eve_row_pad);
    border-radius: var(--eve_r_m);
    color: var(--eve_c_text_secondary);
    text-decoration: none;
    transition:
        background var(--eve_a_fast) var(--eve_a_ease_out),
        color var(--eve_a_fast) var(--eve_a_ease_out);
}

.nav-row {
    min-height: var(--eve_row);
}

.nav-row svg {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--eve_c_text_muted);
    stroke-width: 2;
}

.nav-row:not([aria-current]):hover,
.toc-row:not([aria-current]):hover {
    background: var(--eve_c_bg_tertiary);
}

.nav-row:hover,
.nav-row[aria-current],
.toc-row:hover,
.toc-row[aria-current] {
    color: var(--eve_c_text_primary);
}

.nav-row[aria-current] svg {
    color: var(--eve_c_text_primary);
}

.nav-foot {
    display: flex;
    flex-direction: column;
    gap: var(--eve_gap_xs);
    margin-top: auto;
    padding-top: var(--eve_gap_l);
}

/* Выбор темы — кнопка-значок 26 Freya в шапке колонки, на её правом краю, как кнопки в шапке панели. */
.theme-control,
.theme-anchor {
    display: flex;
    flex: none;
}

/* Якоря секций и токены раздела: колонка текущего раздела, текущая секция — ступенью выбора. */
.toc-page {
    display: flex;
    flex-direction: column;
    gap: var(--eve_gap_s);
    padding-top: var(--eve_gap_m);
}

.toc-page[hidden] {
    display: none;
}

.toc-page .overline {
    padding: 0 var(--eve_row_pad);
}

.toc-page .overline ~ .overline {
    margin-top: var(--eve_gap_l);
}

.toc-row {
    min-height: var(--eve_row_s);
    font: var(--eve_t_caption);
}

.toc-tokens {
    display: grid;
    gap: var(--eve_gap_xs);
    margin: 0;
    padding: 0 var(--eve_row_pad);
    list-style: none;
}

.toc-tokens code {
    color: var(--eve_c_text_secondary);
    font: var(--eve_t_code_label);
    font-family: var(--font-mono, var(--eve_t_family_mono));
    line-height: var(--eve_row_s);
    overflow-wrap: anywhere;
}

.toc-more {
    color: var(--eve_c_text_muted);
    font: var(--eve_t_caption);
}

.page {
    --site-cols: 8;
    --site-card: 4;
    --site-tile: 2;
    --site-text: 6;
    --site-head: 5;

    /*
     * Смена раздела мягче умолчаний Morph: новый раздел проявляется за `--eve_a_reveal` и становится резким к 45 %
     * его хода (правило блюра Freya), старый растворяется за `--eve_a_slow`. Блюр поз — page-switch.js. С
     * проявлением за `--eve_a_slow` и блюром 20 резкость наступала за 190 мс и щёлкала, а не таяла.
     */
    --morph_fade_ms: var(--eve_a_reveal);
    --morph_presence_sharpen: calc(var(--eve_a_reveal) * 0.45);
    --morph_leave_ms: var(--eve_a_slow);

    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--eve_panel_pad);
    container-type: inline-size;
}

.page[hidden] {
    display: none;
}

/*
 * Блюр нового раздела тает ровной кривой и сходит к 45 % хода: на `ease_out` Morph он снимался на три четверти за
 * первые 60 мс — рывком. Прозрачность остаётся на `ease_out`: на ровной кривой оба раздела посреди смены были бы
 * бледными, и между ними проступал бы фон.
 */
@media (prefers-reduced-motion: no-preference) {
    .page[data-morph-presence='open'] {
        --morph_presence_transition:
            opacity var(--morph_fade_ms) var(--morph_ease_out),
            filter var(--morph_presence_sharpen) var(--morph_ease_in_out);
    }
}

/* Уходящее содержимое — под новым и вне потока, там, где его видели (`--page-top` ставит site.js). */
.page[data-leaving] {
    position: absolute;
    top: var(--page-top, 0px);
    left: var(--eve_panel_pad);
    right: var(--eve_panel_pad);
    z-index: 0;
}

/*
 * Первый экран: сцена — не окно, а часть панели и горизонтальная полоса: она уходит под края панели и на
 * четыре зазора ниже первого экрана и тает к каждому краю долгим плавным спадом — по горизонтали и вертикали
 * отдельно, поэтому и угол, где спады сходятся, мягкий, а края блока не читаются. Слева, под заголовком, её
 * почти нет. Маска читает только прозрачность, поэтому её цвет — `currentcolor`, а ступени спада — его смесь
 * с прозрачным. Текст стоит от
 * верха на постоянном отступе: прижатый к низу, заголовок прыгал бы между разделами вслед за числом строк
 * подписи.
 */
.hero {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--site-cols), minmax(0, 1fr));
    column-gap: var(--eve_gap_l);
    align-content: start;
    min-height: var(--site-hero);
    isolation: isolate;
}

.hero-scene {
    --site-fade-x: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, currentcolor 6%, transparent) 6%,
        color-mix(in srgb, currentcolor 22%, transparent) 14%,
        color-mix(in srgb, currentcolor 48%, transparent) 24%,
        color-mix(in srgb, currentcolor 76%, transparent) 34%,
        color-mix(in srgb, currentcolor 94%, transparent) 44%,
        currentcolor 52%,
        currentcolor 80%,
        color-mix(in srgb, currentcolor 70%, transparent) 88%,
        color-mix(in srgb, currentcolor 30%, transparent) 95%,
        transparent
    );
    --site-fade-y: linear-gradient(
        180deg,
        transparent,
        color-mix(in srgb, currentcolor 25%, transparent) 8%,
        color-mix(in srgb, currentcolor 65%, transparent) 18%,
        color-mix(in srgb, currentcolor 92%, transparent) 28%,
        currentcolor 36%,
        currentcolor 56%,
        color-mix(in srgb, currentcolor 85%, transparent) 66%,
        color-mix(in srgb, currentcolor 50%, transparent) 78%,
        color-mix(in srgb, currentcolor 18%, transparent) 90%,
        transparent
    );

    position: absolute;
    inset: calc(var(--eve_panel_pad) * -1) calc(var(--eve_panel_pad) * -1) calc(var(--eve_gap_l) * -4)
        calc((100% + var(--eve_gap_l)) / var(--site-cols) * 2.5);
    z-index: 0;
    -webkit-mask-image: var(--site-fade-x), var(--site-fade-y);
    -webkit-mask-composite: source-in;
    mask-image: var(--site-fade-x), var(--site-fade-y);
    mask-composite: intersect;
}

.hero-scene canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.hero-text {
    position: relative;
    z-index: 1;
    display: grid;
    grid-column: 1 / span var(--site-card);
    gap: var(--eve_gap_m);
    padding: calc(var(--site-hero) / 3) var(--eve_row_pad) var(--eve_row_pad);
}

/*
 * Заголовок раздела — единственный кегль вне шкалы: шкала Freya кончается на 16 — это заголовок панели
 * инструмента, а первому экрану сайта нужен голос крупнее.
 */
.hero h1 {
    margin: 0;
    font-family: var(--font-ui, var(--eve_t_family_ui));
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.lead {
    margin: 0;
    color: var(--eve_c_text_secondary);
    font: var(--eve_t_body);
}

.number {
    color: var(--eve_c_text_muted);
    font: var(--eve_t_code_label);
}

/*
 * Секция: заголовок над картинкой, на широкой панели — двумя колонками слева, и он стоит, пока картинка
 * едет. Тело секции — сетка раздела: блоки во всю ширину, текст — до шести колонок.
 */
.section {
    display: grid;
    grid-template-columns: repeat(var(--site-cols), minmax(0, 1fr));
    gap: var(--eve_panel_pad) var(--eve_gap_l);
    padding-top: var(--eve_panel_pad);
    border-top: 1px solid var(--eve_c_border_primary);
    scroll-margin-top: var(--eve_panel_pad);
}

.section-head {
    grid-column: 1 / span var(--site-head);
    display: grid;
    align-self: start;
    align-content: start;
    gap: var(--eve_gap_s);
    padding: 0 var(--eve_row_pad);
}

.section-head h2 {
    margin: 0;
    font: var(--eve_t_title);
}

.overline {
    margin: 0;
    color: var(--eve_c_text_muted);
    font: var(--eve_t_overline);
    letter-spacing: var(--eve_t_overline_ls);
    text-transform: uppercase;
}

.section-lead {
    margin: 0;
    color: var(--eve_c_text_secondary);
    font: var(--eve_t_caption);
}

.section-body {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(var(--site-cols), minmax(0, 1fr));
    align-content: start;
    gap: var(--eve_panel_pad) var(--eve_gap_l);
    min-width: 0;
}

.section-body > * {
    grid-column: 1 / -1;
    min-width: 0;
}

.section-body > .prose {
    grid-column: 1 / span var(--site-text);
}

.section-body h3 {
    margin: var(--eve_gap_xs) 0 var(--eve_row_pad);
    color: var(--eve_c_text_muted);
    font: var(--eve_t_overline);
    letter-spacing: var(--eve_t_overline_ls);
    text-transform: uppercase;
}

.section-body .rule h3,
.section-body .recipe h3,
.section-body .component h3 {
    margin: 0;
    color: var(--eve_c_text_primary);
    font: var(--eve_t_subtitle);
    letter-spacing: normal;
    text-transform: none;
}

@container (width >= 980px) {
    .section-head {
        position: sticky;
        top: var(--eve_panel_pad);
        grid-column: 1 / span 2;
    }

    .section-body {
        --site-cols: 6;
        --site-card: 3;
        --site-text: 6;

        grid-column: 3 / -1;
    }
}

/* Соседние разделы — двумя блоками через разделитель, как секция. */
.pager {
    display: grid;
    grid-template-columns: repeat(var(--site-cols), minmax(0, 1fr));
    gap: var(--eve_gap_l);
    padding-top: var(--eve_panel_pad);
    border-top: 1px solid var(--eve_c_border_primary);
}

.pager > * {
    grid-column: span var(--site-card);
}

.pager-link {
    display: grid;
    gap: var(--eve_gap_s);
    padding: var(--eve_row_pad);
    border-radius: var(--eve_r_l);
    background: var(--eve_c_bg_extended);
    text-decoration: none;
    transition: background var(--eve_a_fast) var(--eve_a_ease_out);
}

.pager-link:hover {
    background: var(--eve_c_bg_tertiary);
}

.pager-link.next {
    text-align: right;
}

.pager-title {
    font: var(--eve_t_subtitle);
}

.prose {
    font: var(--eve_t_body);
}

.prose p,
.prose li {
    color: var(--eve_c_text_secondary);
}

.prose strong {
    color: var(--eve_c_text_primary);
}

.prose h2 {
    margin: var(--eve_gap_l) 0 var(--eve_gap_m);
    font: var(--eve_t_subtitle);
}

.prose ul,
.prose ol {
    display: grid;
    gap: var(--eve_gap_s);
    padding-left: 20px;
}

.prose a {
    color: var(--eve_c_signal_text);
}

.prose table {
    border-collapse: collapse;
    font-size: 14px;
}

.prose th,
.prose td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--eve_c_border_primary);
    text-align: left;
    vertical-align: top;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eve_gap_m);
}

.button,
.demo-button {
    display: inline-flex;
    align-items: center;
    height: var(--eve_row);
    padding: 0 16px;
    border-radius: var(--eve_r_m);
    background: var(--eve_c_bg_extended);
    box-shadow: inset 0 0 0 1px var(--eve_c_border_secondary);
    color: var(--eve_c_text_primary);
    font: var(--eve_t_label);
    text-decoration: none;
}

.button.primary,
.demo-button.primary {
    background: var(--eve_c_accent_primary);
    box-shadow: none;
    color: var(--eve_c_text_inverse);
}

.rules,
.steps,
.recipes,
.keyframes,
.meanings,
.sizes,
.radii,
.easings,
.icon-sizes,
.icons,
.tiles,
.measures,
.heights,
.tracks,
.type-list,
.text-roles,
.accents,
.legend-list,
.ranges,
.marks {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Списки карточек и плиток — по сетке раздела: карточка — половина колонок, плитка — четверть (в шести
 * колонках — треть), значок — одна колонка.
 */
.rules,
.recipes,
.steps,
.keyframes,
.families,
.easings,
.meanings,
.sizes,
.radii,
.icon-sizes,
.tiles,
.icons {
    display: grid;
    grid-template-columns: repeat(var(--site-cols), minmax(0, 1fr));
    gap: var(--eve_gap_l);
}

.rule,
.recipe,
.step,
.family,
.easing,
.meanings li {
    grid-column: span var(--site-card);
}

.keyframes li,
.size,
.radius,
.icon-sizes li,
.tile {
    grid-column: span var(--site-tile);
}

.icons li {
    grid-column: span 1;
}

/* Соответствия «задача — контрол» плитками: задача — подписью, контрол — кодом под ней. */
.mapping {
    display: grid;
    grid-template-columns: repeat(var(--site-cols), minmax(0, 1fr));
    gap: var(--eve_gap_l);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mapping-item {
    display: grid;
    grid-column: span var(--site-tile);
    align-content: start;
    gap: var(--eve_gap_s);
    padding: var(--eve_row_pad);
    border-radius: var(--eve_r_l);
    background: var(--eve_c_bg_extended);
}

.mapping-task {
    color: var(--eve_c_text_secondary);
    font: var(--eve_t_caption);
}

.mapping-control {
    color: var(--eve_c_text_muted);
    font: var(--eve_t_caption);
}

.mapping-control code {
    font: var(--eve_t_code_label);
    font-family: var(--font-mono, var(--eve_t_family_mono));
}

/* Правила и шаги карточками: по одной мысли на карточку, шаги — с номером: это последовательность. */

.rule,
.recipe,
.step {
    display: grid;
    align-content: start;
    gap: var(--eve_gap_s);
    padding: var(--eve_panel_pad);
    border-radius: var(--eve_r_l);
    background: var(--eve_c_bg_extended);
}

.rule p,
.step p {
    margin: 0;
    color: var(--eve_c_text_secondary);
    font: var(--eve_t_caption);
    font-size: 14px;
}

.recipe-code {
    margin: 0;
    color: var(--eve_c_text_secondary);
    font: var(--eve_t_code);
    font-size: 12px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.step-number {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--eve_r_full);
    background: var(--eve_c_signal_tertiary);
    color: var(--eve_c_signal_text);
    font: var(--eve_t_label);
}

.aside {
    margin: 0;
    color: var(--eve_c_text_muted);
    font: var(--eve_t_caption);
}

.keyframes li {
    display: grid;
    gap: var(--eve_gap_xs);
    padding: var(--eve_row_pad);
    border-radius: var(--eve_r_m);
    background: var(--eve_c_bg_extended);
    color: var(--eve_c_text_secondary);
    font: var(--eve_t_caption);
}

.keyframe-name {
    color: var(--eve_c_text_primary);
    font: var(--eve_t_code_label);
    font-family: var(--font-mono, var(--eve_t_family_mono));
}

/* Значения картинками: число слева, рисунок в масштабе, роль — подписью. */
.measure-value {
    color: var(--eve_c_text_primary);
    font-family: var(--font-ui, var(--eve_t_family_ui));
    font-size: 22px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.measure-value small {
    color: var(--eve_c_text_muted);
    font-size: 13px;
    font-weight: 500;
}

.measure-meta {
    color: var(--eve_c_text_secondary);
    font: var(--eve_t_caption);
}

.measure-meta code,
.measure-meta b {
    margin-right: var(--eve_gap_s);
}

.measures,
.heights,
.tracks {
    display: grid;
    gap: var(--eve_gap_l);
}

/* Строки значений — по колонкам раздела: число — первая, рисунок — следующие, пояснение — остальные. */
.measure-row,
.height,
.type-row,
.track-row {
    display: grid;
    grid-template-columns: repeat(var(--site-cols), minmax(0, 1fr));
    align-items: center;
    gap: var(--eve_gap_s) var(--eve_gap_l);
}

.measure-row > .measure-value {
    grid-column: 1;
}

.measure-row > .spacing-visual {
    grid-column: 2 / span 2;
}

.measure-row > .measure-meta {
    grid-column: 4 / -1;
}

.spacing-visual {
    display: flex;
    align-items: center;
}

.spacing-box {
    width: 24px;
    height: 24px;
    border-radius: var(--eve_r_s);
    background: var(--eve_c_bg_tertiary);
    box-shadow: inset 0 0 0 1px var(--eve_c_border_secondary);
}

.spacing-gap {
    height: 24px;
    background: var(--eve_c_signal_tertiary);
}

.height > .height-bar {
    grid-column: 1 / span 2;
}

.height > .measure-meta {
    grid-column: 3 / -1;
}

.height-bar {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 var(--eve_row_pad);
    border-radius: var(--eve_r_m);
    background: var(--eve_c_bg_extended);
    box-shadow: inset 0 0 0 1px var(--eve_c_border_secondary);
    color: var(--eve_c_text_secondary);
    font: var(--eve_t_code_label);
}

.height-bar.composite {
    height: calc(var(--eve_row_s) + var(--eve_gap_s) * 2);
    padding: var(--eve_gap_s);
    background: var(--eve_c_signal_tertiary);
}

.height-inner {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: var(--eve_row_s);
    padding: 0 var(--eve_row_pad);
    border-radius: var(--eve_r_m);
    background: var(--eve_c_bg_secondary);
}

.ghosts {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--eve_gap_m);
}

.ghost {
    display: grid;
    place-items: center;
    width: 56px;
    border-radius: var(--eve_r_m);
    box-shadow: inset 0 0 0 1px var(--eve_c_border_secondary);
    color: var(--eve_c_text_muted);
    font: var(--eve_t_code_label);
    text-decoration: line-through;
}

.ghosts-note {
    color: var(--eve_c_text_muted);
    font: var(--eve_t_caption);
}

.edges,
.state {
    display: grid;
    grid-template-columns: repeat(var(--site-cols), minmax(0, 1fr));
    align-items: center;
    gap: var(--eve_gap_l);
}

.edges > *,
.state > * {
    grid-column: span var(--site-card);
}

/* Два края ×2: поле панели закрашено сигналом, колонка текста — бирюзой. */
.edges-panel {
    display: grid;
    gap: calc(var(--eve_gap_s) * 2);
    padding: calc(var(--eve_panel_pad) * 2);
    border-radius: calc(var(--eve_r_xl) * 2);
    background: var(--eve_c_bg_secondary);
    box-shadow: inset 0 0 0 calc(var(--eve_panel_pad) * 2) var(--eve_c_signal_tertiary);
}

.edges-block {
    display: flex;
    align-items: center;
    height: calc(var(--eve_row) * 2);
    padding-left: calc(var(--eve_row_pad) * 2);
    border-radius: calc(var(--eve_r_m) * 2);
    background: var(--eve_c_bg_extended);
    box-shadow: inset calc(var(--eve_row_pad) * 2) 0 0 var(--eve_c_signal2_tertiary);
}

.edges-text {
    color: var(--eve_c_text_secondary);
    font: var(--eve_t_body);
}

.legend-list {
    display: grid;
    gap: var(--eve_gap_l);
    color: var(--eve_c_text_secondary);
    font: var(--eve_t_caption);
    font-size: 14px;
}

.legend-list b {
    color: var(--eve_c_text_primary);
    font-size: 18px;
}

.key {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: var(--eve_gap_m);
    border-radius: var(--eve_r_xs);
    vertical-align: -1px;
}

.key.pad {
    background: var(--eve_c_signal_primary);
}

.key.row {
    background: var(--eve_c_signal2_text);
}

.size,
.radius,
.icon-sizes li {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: var(--eve_gap_s);
    padding: var(--eve_panel_pad) var(--eve_row_pad);
    border-radius: var(--eve_r_l);
    background: var(--eve_c_bg_extended);
    text-align: center;
}

.size-stage {
    display: grid;
    place-items: center;
    height: 64px;
}

.size-stage i {
    background: var(--eve_c_signal_primary);
}

.size-name,
.radius-use,
.icon-use {
    color: var(--eve_c_text_secondary);
    font: var(--eve_t_caption);
}

.size-value {
    color: var(--eve_c_text_primary);
    font: var(--eve_t_code_label);
}

.radius i {
    width: 88px;
    height: 88px;
    margin-bottom: var(--eve_gap_s);
    background: var(--eve_c_signal_tertiary);
    box-shadow: inset 0 0 0 1.5px var(--eve_c_signal_primary);
}

/* Состояния — живыми образцами из тех же ролей, что у элементов. */
.state-demo,
.accents {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eve_gap_m);
    padding: var(--eve_panel_pad);
    border-radius: var(--eve_r_l);
    background: var(--eve_c_bg_extended);
}

.state-text {
    margin: 0;
    color: var(--eve_c_text_secondary);
}

.demo-row {
    display: flex;
    align-items: center;
    min-width: 120px;
    height: var(--eve_row);
    padding: 0 var(--eve_row_pad);
    border-radius: var(--eve_r_m);
}

.demo-row.hover {
    background: var(--eve_c_bg_tertiary);
}

.demo-chip {
    display: inline-flex;
    align-items: center;
    height: var(--eve_row_s);
    padding: 0 12px;
    border-radius: var(--eve_r_full);
    background: var(--eve_c_bg_tertiary);
    font: var(--eve_t_code_label);
}

.demo-chip.on {
    background: var(--eve_c_accent_tertiary);
    color: var(--eve_c_accent_text);
}

.demo-switch {
    position: relative;
    width: 34px;
    height: 20px;
    border-radius: var(--eve_r_full);
    background: var(--eve_c_signal_primary);
}

.demo-switch i {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    border-radius: var(--eve_r_full);
    background: var(--eve_c_text_inverse);
}

.demo-button.focus {
    outline: 2px solid var(--eve_c_accent_secondary);
    outline-offset: var(--eve_gap_xs);
}

.demo-button.disabled {
    opacity: 0.4;
}

.demo-pill,
.demo-label,
.status {
    display: inline-flex;
    align-items: center;
    gap: var(--eve_gap_s);
    height: 18px;
    padding: 0 8px;
    border-radius: var(--eve_r_full);
    font: var(--eve_t_badge);
}

.demo-label {
    border-radius: var(--eve_r_s);
    background: var(--eve_c_signal_tertiary);
    color: var(--eve_c_signal_text);
}

.demo-pill.error,
.status.error {
    background: color-mix(in srgb, var(--eve_c_status_error) 16%, transparent);
    color: var(--eve_c_status_error);
}

.status.success {
    background: color-mix(in srgb, var(--eve_c_status_success) 16%, transparent);
    color: var(--eve_c_status_success);
}

.status.warning {
    background: color-mix(in srgb, var(--eve_c_status_warning) 16%, transparent);
    color: var(--eve_c_status_warning);
}

.status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--eve_r_full);
    background: currentcolor;
}

.demo-message {
    padding: 10px 12px;
    border-radius: var(--eve_r_m);
    background: color-mix(in srgb, var(--eve_c_status_error) 10%, transparent);
    color: var(--eve_c_text_secondary);
    font: var(--eve_t_caption);
}

.accents li {
    display: grid;
    justify-items: start;
    gap: var(--eve_gap_s);
    padding-right: 12px;
}

.accents code {
    color: var(--eve_c_text_muted);
    font-size: 12px;
}

/* Поверхности слоями: фон, панель на нём, поле и наведение в панели, всплывающее поверх. */
.surfaces {
    position: relative;
    height: 250px;
    overflow: hidden;
    border-radius: var(--eve_r_l);
    background: var(--eve_c_bg_app);
    background-color: var(--eve_c_bg_primary);
}

.surface-tag {
    display: block;
    margin-bottom: var(--eve_gap_m);
    color: var(--eve_c_text_muted);
    font: var(--eve_t_meta);
    font-family: var(--font-mono, var(--eve_t_family_mono));
}

.surfaces > .surface-tag {
    position: absolute;
    top: 14px;
    left: 18px;
}

.surface-panel {
    position: absolute;
    top: 40px;
    left: 18px;
    display: grid;
    gap: var(--eve_gap_s);
    width: min(56%, 360px);
    padding: var(--eve_panel_pad);
    border-radius: var(--eve_r_xl);
    background: var(--eve_c_bg_secondary);
}

.surface-field,
.surface-row,
.surface-popover {
    display: flex;
    align-items: center;
    height: var(--eve_row);
    padding: 0 var(--eve_row_pad);
    border-radius: var(--eve_r_m);
    color: var(--eve_c_text_secondary);
    font: var(--eve_t_meta);
    font-family: var(--font-mono, var(--eve_t_family_mono));
}

.surface-field {
    background: var(--eve_c_bg_extended);
}

.surface-row {
    background: var(--eve_c_bg_tertiary);
}

.surface-popover {
    position: absolute;
    top: 96px;
    right: 18px;
    align-items: flex-start;
    width: min(38%, 240px);
    height: 120px;
    padding-top: 14px;
    border-radius: var(--eve_r_l);
    background: var(--eve_c_bg_solid);
    box-shadow: 0 12px 32px var(--eve_c_shadow);
}

.text-roles {
    display: grid;
    gap: var(--eve_gap_m);
}

.text-roles li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--eve_gap_xs) var(--eve_gap_m);
    padding: var(--eve_row_pad) var(--eve_panel_pad);
    border-radius: var(--eve_r_m);
    background: var(--eve_c_bg_extended);
}

.text-roles li.inverse {
    background: var(--eve_c_accent_primary);
    color: var(--eve_c_text_inverse);
}

.text-roles code {
    color: inherit;
    opacity: 0.8;
}

.text-sample {
    font-size: 19px;
    font-weight: 600;
}

.text-use {
    grid-column: 1 / -1;
    font: var(--eve_t_caption);
}

.tiles {
    margin-bottom: var(--eve_gap_l);
}

.tile {
    display: grid;
    gap: var(--eve_gap_s);
    padding: 10px;
    border-radius: var(--eve_r_l);
    background: var(--eve_c_bg_extended);
}

.tile-colors {
    display: flex;
    overflow: hidden;
    height: 44px;
    border-radius: var(--eve_r_m);
    box-shadow: inset 0 0 0 1px var(--eve_c_border_secondary);
}

.tile-colors i {
    flex: 1;
    background: var(--swatch);
}

.tile code {
    font-size: 13px;
}

.tile-values {
    color: var(--eve_c_text_muted);
    font: var(--eve_t_meta);
    font-family: var(--font-mono, var(--eve_t_family_mono));
}

.family {
    display: grid;
    gap: var(--eve_gap_m);
    padding: var(--eve_panel_pad);
    border-radius: var(--eve_r_l);
    background: var(--eve_c_bg_extended);
}

.family-glyphs {
    font-size: 64px;
    font-weight: 600;
    line-height: 1;
}

.family-glyphs.ui,
.family-weights {
    font-family: var(--font-ui, var(--eve_t_family_ui));
}

.family-glyphs.mono,
.family-weights.mono {
    font-family: var(--font-mono, var(--eve_t_family_mono));
}

.family-weights {
    display: flex;
    gap: 14px;
    color: var(--eve_c_text_secondary);
    font-size: 17px;
}

.family-name {
    color: var(--eve_c_text_muted);
    font: var(--eve_t_caption);
}

.type-row {
    align-items: baseline;
    padding: var(--eve_row_pad) 0;
    border-bottom: 1px solid var(--eve_c_border_primary);
}

.type-row > .type-sample {
    grid-column: 1 / -4;
}

.type-row > .type-meta {
    grid-column: -4 / -1;
}

.type-meta {
    display: grid;
    gap: 2px;
    color: var(--eve_c_text_secondary);
    font: var(--eve_t_caption);
}

/* Длительности и кривые: точку ведёт site.js с настоящим временем и кривой токена. */
.track-row > .measure-value {
    grid-column: 1;
}

.track-row > .track,
.track-row > .measure-meta {
    grid-column: 2 / -1;
}

.track {
    position: relative;
    display: block;
    height: 6px;
    border-radius: var(--eve_r_full);
    background: var(--eve_c_bg_extended);
    box-shadow: inset 0 0 0 1px var(--eve_c_border_primary);
}

.track-dot {
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: var(--eve_r_full);
    background: var(--eve_c_signal_primary);
    transform: translate(-50%, -50%);
}

.easing {
    display: grid;
    gap: var(--eve_gap_m);
    padding: var(--eve_panel_pad);
    border-radius: var(--eve_r_l);
    background: var(--eve_c_bg_extended);
}

.easing .track {
    margin: 4px 7px;
}

.easing-use {
    color: var(--eve_c_text_secondary);
    font: var(--eve_t_caption);
}

.curve {
    width: 100%;
    max-width: 180px;
    overflow: visible;
}

.curve-frame {
    fill: none;
    stroke: var(--eve_c_border_secondary);
    stroke-width: 1;
}

.curve-handle {
    fill: none;
    stroke: var(--eve_c_text_muted);
    stroke-dasharray: 3 3;
    stroke-width: 1;
}

.curve-line {
    fill: none;
    stroke: var(--eve_c_signal_primary);
    stroke-linecap: round;
    stroke-width: 3;
}

.icon-stage {
    display: grid;
    place-items: center;
    width: var(--eve_row);
    height: var(--eve_row);
    border-radius: var(--eve_r_m);
    background: var(--eve_c_bg_tertiary);
}

.icon-stage svg {
    width: calc(var(--icon-size, 16) * 1px);
    height: calc(var(--icon-size, 16) * 1px);
    stroke-width: calc(36 / var(--icon-size, 16));
}

.meanings li {
    display: flex;
    align-items: center;
    gap: var(--eve_row_pad);
    padding: var(--eve_gap_s) var(--eve_row_pad) var(--eve_gap_s) var(--eve_gap_s);
    border-radius: var(--eve_r_m);
    background: var(--eve_c_bg_extended);
    color: var(--eve_c_text_primary);
}

.meanings code {
    margin-left: auto;
    color: var(--eve_c_text_muted);
    font-size: 12px;
}

.icons li {
    display: grid;
    justify-items: center;
    gap: var(--eve_gap_m);
    padding: 14px 6px 10px;
    border-radius: var(--eve_r_m);
    color: var(--eve_c_text_secondary);
    font: var(--eve_t_meta);
    text-align: center;
    overflow-wrap: anywhere;
}

.icons svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.8;
}

.icons li:hover {
    background: var(--eve_c_bg_tertiary);
    color: var(--eve_c_text_primary);
}

/* Линейка ширин: диапазоны раскладок и отметки устройств на одной шкале. */
.ruler {
    display: grid;
    gap: var(--eve_gap_m);
    overflow-x: auto;
}

.ranges,
.marks {
    position: relative;
    min-width: 640px;
}

.ranges {
    height: 128px;
}

.range {
    position: absolute;
    top: 0;
    bottom: 0;
    display: grid;
    align-content: start;
    gap: 4px;
    box-sizing: border-box;
    padding: 12px;
    overflow: hidden;
    border-radius: var(--eve_r_l);
    box-shadow: inset 0 0 0 2px var(--eve_c_bg_secondary);
    color: var(--eve_c_text_secondary);
    font: var(--eve_t_caption);
}

.range b {
    color: var(--eve_c_text_primary);
    font: var(--eve_t_subtitle);
}

.range:nth-child(1) {
    background: var(--eve_c_signal_tertiary);
}

.range:nth-child(2) {
    background: var(--eve_c_signal2_tertiary);
}

.range:nth-child(3) {
    background: var(--eve_c_accent_tertiary);
}

.marks {
    height: 44px;
    border-top: 1px solid var(--eve_c_border_secondary);
}

.marks li {
    position: absolute;
    top: 0;
    width: 1px;
    height: 8px;
    background: var(--eve_c_text_muted);
}

.marks span {
    position: absolute;
    top: 12px;
    left: 0;
    color: var(--eve_c_text_muted);
    font: var(--eve_t_meta);
    white-space: nowrap;
    transform: translateX(-50%);
}

.marks li:nth-child(even) span {
    top: 28px;
}

/* Элементы: подпись, живое превью во фрейме, пропсы — под раскрытием. */
.components {
    display: grid;
    gap: calc(var(--eve_gap_l) * 2);
}

.component {
    display: grid;
    gap: var(--eve_gap_m);
    scroll-margin-top: var(--eve_panel_pad);
}

.component-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--eve_gap_m);
}

.summary p {
    margin: 0;
    font-size: 14px;
}

.text-link {
    color: var(--eve_c_signal_text);
    font: var(--eve_t_label);
}

.frame {
    overflow: hidden;
    max-width: min(100%, var(--frame-width));
    border-radius: var(--eve_r_l);
    box-shadow: inset 0 0 0 1px var(--eve_c_border_primary);
}

.frame iframe {
    display: block;
    width: 100%;
    border: 0;
}

.source {
    border-radius: var(--eve_r_l);
    background: var(--eve_c_bg_extended);
}

.source summary {
    padding: var(--eve_row_pad) var(--eve_panel_pad);
    border-radius: var(--eve_r_l);
    color: var(--eve_c_text_secondary);
    font: var(--eve_t_label);
    cursor: pointer;
}

.source summary:hover {
    color: var(--eve_c_text_primary);
}

.source .prose {
    padding: 0 var(--eve_panel_pad) var(--eve_panel_pad);
}

/*
 * На узкой панели — сетка из 4 колонок, а сцена — полосой над текстом: справа от заголовка ей мало места.
 * Строки значений перестраиваются теми же селекторами, что их задали, и стоят после них: иначе колонки
 * широкой раскладки перебили бы узкую.
 */
@container (width < 640px) {
    .page > * {
        --site-cols: 4;
        --site-card: 4;
        --site-text: 4;
        --site-head: 4;
    }

    .hero {
        min-height: 0;
    }

    .hero-scene {
        position: relative;
        inset: auto;
        grid-column: 1 / -1;
        height: 260px;
        margin: calc(var(--eve_panel_pad) * -1) calc(var(--eve_panel_pad) * -1) 0;
    }

    .hero-text {
        padding-top: var(--eve_row_pad);
    }

    .hero h1 {
        font-size: 30px;
    }

    .measure-row > .measure-meta,
    .height > .height-bar,
    .height > .measure-meta,
    .type-row > .type-sample,
    .type-row > .type-meta {
        grid-column: 1 / -1;
    }

    .measure-row > .measure-value {
        grid-column: 1;
    }

    .measure-row > .spacing-visual {
        grid-column: 2 / -1;
    }
}

/* Уже 1240 разделы шире, а якорей нет; на телефоне разделы — строкой сверху, группы и ссылки — в ряд. */
@media (width < 1240px) {
    .side {
        grid-column: 1 / span 3;
    }

    main {
        grid-column: 4 / -1;
    }

    .toc {
        display: none;
    }
}

@media (width < 820px) {
    .side,
    main {
        grid-column: 1 / -1;
    }

    html[data-cover] .cover {
        padding-left: max(var(--eve_gap_s), env(safe-area-inset-left, 0px));
        padding-right: max(var(--eve_gap_s), env(safe-area-inset-right, 0px));
    }

    /* На телефоне две колонки не встают: вход — под подписью, по правому краю. */
    .cover-row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--eve_gap_l);
    }

    .site {
        padding-left: max(var(--eve_gap_s), env(safe-area-inset-left, 0px));
        padding-right: max(var(--eve_gap_s), env(safe-area-inset-right, 0px));
    }

    .side {
        top: max(var(--eve_gap_s), env(safe-area-inset-top, 0px));
        border-radius: calc(var(--eve_r_m) + var(--eve_gap_m));
        transition: background-color var(--eve_a_base) var(--eve_a_ease_in_out);
    }

    .side[data-nav='open'] {
        border-radius: var(--eve_r_xl) var(--eve_r_xl) 0 0;
        background: var(--eve_c_bg_solid);
    }

    .topbar {
        display: flex;
    }

    .side[data-nav='open'] .topbar {
        border-radius: var(--eve_r_xl) var(--eve_r_xl) 0 0;
        background: transparent;
        box-shadow: inset 0 -1px 0 var(--eve_c_border_primary);
    }

    .side[data-nav='closed'] .identity,
    .side[data-nav='open'] .crumb {
        display: none;
    }

    /*
     * До скрипта свёрнутой карточки нет; дальше её появление и уход ведёт Morph, а ушедшую скрывает
     * phone-nav.js (`hidden`).
     */
    .side[data-nav='closed'] .nav:not([data-morph-presence]),
    .nav[hidden],
    .nav .brand {
        display: none;
    }

    /*
     * Карточка разделов ложится поверх раздела под полосой — там, где полоса сейчас (`--site-nav-top` ставит
     * phone-nav.js), — и доходит до низа экрана с тем же полем, что у полосы по бокам. Раздел под ней не
     * прокручивается: прокрутка остаётся у карточки и не уходит наружу.
     */
    html[data-nav-open] {
        overflow: hidden;
    }

    .nav {
        position: fixed;
        top: var(--site-nav-top, calc(var(--eve_panel_pad) + var(--site-topbar)));
        bottom: max(var(--eve_gap_s), env(safe-area-inset-bottom, 0px));
        left: max(var(--eve_gap_s), env(safe-area-inset-left, 0px));
        right: max(var(--eve_gap_s), env(safe-area-inset-right, 0px));
        box-sizing: border-box;
        max-height: none;
        overscroll-behavior: contain;
        padding: var(--eve_gap_m);
        border-radius: 0 0 var(--eve_r_xl) var(--eve_r_xl);
        background: var(--eve_c_bg_solid);
        box-shadow: 0 12px 32px var(--eve_c_shadow);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-row,
    .toc-row,
    .pager-link {
        transition: none;
    }
}