/* Собрано командой bukatchuk-ui build. Руками не править: правки вносятся в файлы компонентов. */
/* --- tokens: tokens.css --- */
/* Переменные bukatchuk ui. Здесь всё, что одинаково на любом сайте:
   палитра, рамки, тени и шрифты. Размеры текста и отступы задаёт профиль.
   Новый цвет появляется только здесь и только по решению владельца. */
:root{
  /* палитра */
  --base:#FFFFFF; --ink:#0A0A0A; --safety:#FF3E00; --muted:#777; --surface:#F5F5F0;
  /* оттенки текста и линий на белом и на чёрном */
  --text-soft:#333; --text-dim:#444; --line:#ddd; --on-ink-muted:#999; --on-ink-soft:#CFCFCF;
  /* длинный текст и код на чёрном */
  --prose-fg:#1A1A1A; --on-ink-dim:#BBB; --code-fg:#E8E8E8; --code-punct:#BDBDBD; --code-key:#FF8C5A;
  /* состояния: ошибка и успех */
  --safety-tint:#FFE9E0; --ok:#1B7F3B; --ok-tint:#E6F4EA;
  /* «терминал» */
  --term-bg:#08080A; --term-green:#00FF66; --term-amber:#FFAA00; --term-red:#FF5F57; --term-blue:#7FB2FF;
  --dot-amber:#FEBC2E; --dot-green:#28C840;
  /* тема: фон страницы и цвет текста, рамок и теней. --ink и --base — постоянные чёрный и белый:
     фон чёрных блоков (шапка, тёмные карточки) и текст на них; в тёмной теме они не меняются */
  --bg:var(--base); --fg:var(--ink); --grid-line:rgba(0,0,0,.045); --track:rgba(0,0,0,.1);
  /* заливка активного состояния и данных (вкладка, столбик, метка) и текст на ней: в тёмной теме — светлая */
  --solid:var(--ink); --on-solid:var(--base);
  --edge:var(--fg);
  color-scheme:light;
  /* рамки и тени: тень жёсткая, без размытия */
  --border:4px solid var(--fg); --border-thin:2px solid var(--fg); --hair:1px solid rgba(0,0,0,.12);
  --shadow:8px 8px 0 var(--fg); --shadow-sm:4px 4px 0 var(--fg); --shadow-safety:8px 8px 0 var(--safety);
  /* форма: скругления, тени при наведении и «подъём» кнопок. Тема бренда меняет их в brands/<имя>/tokens.css */
  --radius:0; --radius-sm:0;
  --shadow-xs:3px 3px 0 var(--fg); --shadow-hover:6px 6px 0 var(--fg); --shadow-lift:11px 11px 0 var(--fg);
  --lift:translate(-3px,-3px); --lift-sm:translate(-2px,-2px);
  /* акцент: --safety — заливка, рамка и линия; --safety-text — акцент текстом на фоне страницы; --on-safety — текст на заливке */
  --safety-text:var(--safety); --on-safety:#fff;
  /* роли акцента: ошибка и опасное действие; мелкая акцентная метка; крупный акцент (404, номера шагов, буквица) с контуром */
  --danger:var(--safety); --danger-tint:var(--safety-tint); --on-danger:var(--on-safety); --accent-label:var(--safety); --accent-display:var(--safety); --accent-display-stroke:0 transparent; --menu-hover:var(--safety);
  /* подвал: фон, текст, заголовки колонок и ссылки при наведении */
  /* шапка: фон, текст, приглушённый текст, акцент (наведение, текущий пункт), линии */
  --hdr-bg:var(--ink); --hdr-fg:var(--base); --hdr-muted:var(--on-ink-muted); --hdr-accent:var(--safety); --hdr-mark:var(--safety);
  --hdr-border:2px solid var(--safety); --hdr-sep:rgba(255,255,255,.22); --hdr-rule:rgba(255,255,255,.12); --hdr-toggle-line:rgba(255,255,255,.35);
  --ft-bg:var(--safety); --ft-fg:var(--on-safety); --ft-head:var(--ink); --ft-line:rgba(0,0,0,.25); --ft-compact:var(--ink);
  /* шрифты */
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --grotesk:'Space Grotesk','JetBrains Mono',ui-monospace,system-ui,sans-serif;
  /* заголовок картинки превью ссылок (блок og) */
  --og-title-font:var(--mono);
  /* шрифт текста и элементов управления (кнопки, вкладки, меню, подписи полей): у bukatchuk — моноширинный капс */
  --font-body:var(--mono); --control-font:var(--mono); --control-case:uppercase; --control-tracking-k:1; --control-size-k:1;
  /* тени кнопки на оранжевом и на чёрном блоке (призыв к действию) */
  --shadow-on-safety:8px 8px 0 rgba(0,0,0,.32); --shadow-on-safety-lift:11px 11px 0 rgba(0,0,0,.32);
  --shadow-on-ink:8px 8px 0 rgba(255,255,255,.2); --shadow-on-ink-lift:11px 11px 0 rgba(255,255,255,.2);
  /* размеры, общие для всех профилей */
  --fs-micro:.64rem; --hdr-h:46px;
  /* слои */
  --z-sticky:60; --z-pop:70; --z-overlay:80; --z-toast:90;
}

/* Тёмная тема: по настройке системы, если посетитель не выбрал светлую, и по выбору (html[data-theme="dark"]).
   Меняются только фон, текст, линии и оттенки; оранжевый, чёрные блоки и «терминал» прежние.
   Цвета тёмной палитры утверждает владелец (BUKATCHUK-159). */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#111111; --fg:#EDEDE8; --surface:#1C1C1A; --muted:#9A9A95;
    --text-soft:#CFCFCA; --text-dim:#BDBDB8; --line:#333333; --prose-fg:#E4E4DF;
    --safety-tint:#3A1A0F; --ok:#4CC27A; --ok-tint:#10301C;
    --hair:1px solid rgba(255,255,255,.14); --grid-line:rgba(255,255,255,.05); --track:rgba(255,255,255,.14);
    --solid:#EDEDE8; --on-solid:#111111;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#111111; --fg:#EDEDE8; --surface:#1C1C1A; --muted:#9A9A95;
  --text-soft:#CFCFCA; --text-dim:#BDBDB8; --line:#333333; --prose-fg:#E4E4DF;
  --safety-tint:#3A1A0F; --ok:#4CC27A; --ok-tint:#10301C;
  --hair:1px solid rgba(255,255,255,.14); --grid-line:rgba(255,255,255,.05); --track:rgba(255,255,255,.14);
  --solid:#EDEDE8; --on-solid:#111111;
  color-scheme:dark;
}

/* Шкала текста и отступы. Одна на всех сайтах; размеры шрифтов меняются только по решению владельца. */
:root{
  --fs-hero:clamp(2.4rem,7vw,6.2rem); --fs-h1:clamp(1.9rem,4.4vw,3.6rem);
  --fs-h2:clamp(1.4rem,2.6vw,2.2rem); --fs-h3:clamp(1.05rem,1.5vw,1.35rem);
  --fs-body:clamp(.95rem,1.05vw,1.05rem); --fs-prose:clamp(1.02rem,1.15vw,1.16rem);
  --fs-stat:clamp(1.6rem,3vw,2.6rem);
  --sec-y:clamp(2.2rem,5vw,4.6rem); --pad-x:clamp(1rem,4vw,4rem);
  --wrap:1180px; --read:44rem;
}

/* --- fonts: fonts.css --- */
/* Шрифты отдаются с домена самого сайта: сторонних запросов нет.
   Подмножества — латиница и кириллица. Лицензии лежат рядом с файлами шрифтов. */

@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/ui/fonts/ibm-plex-sans-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/ui/fonts/ibm-plex-sans-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/ui/fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/ui/fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/ui/fonts/ibm-plex-sans-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/ui/fonts/ibm-plex-sans-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/ui/fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/ui/fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/ui/fonts/ibm-plex-sans-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/ui/fonts/ibm-plex-sans-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/ui/fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/ui/fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/ui/fonts/jetbrains-mono-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/ui/fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/ui/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/ui/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/ui/fonts/jetbrains-mono-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/ui/fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/ui/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/ui/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/ui/fonts/jetbrains-mono-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/ui/fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/ui/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/ui/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/ui/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/ui/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/ui/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/ui/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- base: base.css --- */
/* Сброс и типографика. Шкала текста и отступы — в tokens.css. */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:var(--fs-body);line-height:1.62;color:var(--fg);background:var(--bg);overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
strong,b{font-weight:700}
img{max-width:100%;height:auto}
::selection{background:var(--safety);color:var(--on-safety)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--fg);outline-offset:3px}

h1,h2,h3,h4{font-family:var(--grotesk);font-weight:700;letter-spacing:-.03em;line-height:1.04}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2);line-height:1.04;letter-spacing:-.03em}
h3{font-size:var(--fs-h3);letter-spacing:-.015em;line-height:1.14}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad-x)}
section{padding:var(--sec-y) 0}
.sec--surface{background:var(--surface)}
.sec--line{border-top:var(--border)}
.sec--hair{border-top:var(--border-thin)}

.eyebrow{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--accent-label);font-weight:700;margin-bottom:1rem}
.eyebrow--ink{color:var(--fg)}
.muted{color:var(--muted)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* --- button: button.css --- */
/* Кнопка: капс, рамка 2px, жёсткая тень. Главная — оранжевая. */
.btns{display:flex;flex-wrap:wrap;gap:1rem}
/* Ряд «слева и справа»: первая кнопка у левого края, остальные у правого; на телефоне — колонкой, кнопки во всю ширину. */
.btns--split{justify-content:space-between;align-items:stretch}
/* В ряду кнопки одной высоты и строго у краёв: у подписи-кнопки (label) и <button> одна высота строки (и колонкой на телефоне), при наведении кнопка не сдвигается — меняется только тень. */
.btns--split .btn{line-height:inherit}
.btns--split .btn:hover{transform:none}
@media (max-width:760px){.btns--split{flex-direction:column;align-items:stretch}.btns--split .btn{text-align:center}}
.btn{display:inline-block;font-family:var(--control-font);font-weight:700;font-size:calc(.8rem * var(--control-size-k));letter-spacing:calc(.09em * var(--control-tracking-k));text-transform:var(--control-case);color:var(--fg);padding:.95rem 1.8rem;border:var(--border-thin);border-radius:var(--radius);background:var(--bg);cursor:pointer;transition:transform .12s,box-shadow .12s}
a.btn{text-align:center}
.btn--primary{background:var(--safety);color:var(--on-safety);border-color:var(--safety);box-shadow:var(--shadow)}
.btn--primary:hover{transform:var(--lift);box-shadow:var(--shadow-lift)}
.btn--ghost:hover{transform:var(--lift);box-shadow:var(--shadow-sm)}
.btn--danger{background:var(--ink);color:#fff;border-color:var(--fg);box-shadow:var(--shadow-sm)}
.btn--danger:hover{background:var(--danger);border-color:var(--danger);transform:var(--lift-sm);box-shadow:var(--shadow-hover)}
.btn--warn{border-color:var(--danger);color:var(--danger)}
.btn--warn:hover{background:var(--danger);color:var(--on-danger)}
.btn--sm{font-size:calc(.68rem * var(--control-size-k));padding:.5rem .8rem}
.btn--block{display:block;width:100%;text-align:center}
.btn:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:default;transform:none;box-shadow:none;pointer-events:none}

/* --- alert: alert.css --- */
/* Крупное сообщение на странице: заголовок, текст, действие. Цветная полоса слева. */
.alert{--alert-color:var(--fg);display:flex;flex-direction:column;gap:.5rem;padding:1.1rem 1.3rem 1.1rem 1.5rem;border:var(--border-thin);border-left:10px solid var(--alert-color);background:var(--bg);box-shadow:var(--shadow-sm)}
.alert--error{--alert-color:var(--danger);background:var(--danger-tint)}
.alert--success{--alert-color:var(--ok);background:var(--ok-tint)}
.alert__title{font-family:var(--grotesk);font-size:var(--fs-h3);font-weight:700;letter-spacing:-.015em;line-height:1.14}
.alert__text{font-family:var(--sans);font-size:.95rem;line-height:1.55;color:var(--text-soft);max-width:var(--read,44rem)}
.alert__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.4rem}
.alert--error .alert__title{color:var(--danger)}
.alert--success .alert__title{color:var(--ok)}

/* --- field: field.css --- */
/* Поле формы: подпись капсом, поле на светлой подложке; при фокусе подложка белая и появляется жёсткая тень. */
.field{display:flex;flex-direction:column;gap:.35rem}
.field__label{font-size:calc(var(--fs-micro) * var(--control-size-k));letter-spacing:calc(.18em * var(--control-tracking-k));text-transform:var(--control-case);font-weight:700}
.field__input{font-family:var(--font-body);font-size:1rem;color:var(--fg);background:var(--surface);border:var(--border-thin);border-radius:var(--radius);padding:.8rem .9rem;width:100%;appearance:none}
.field__input:focus{outline:none;background:var(--bg);box-shadow:var(--shadow-sm)}
.field__hint{font-family:var(--sans);font-size:.82rem;line-height:1.4;color:var(--muted)}
.field__error{font-family:var(--sans);font-size:.82rem;line-height:1.4;color:var(--danger)}
.field--invalid .field__input{border-color:var(--danger)}
textarea.field__input{resize:vertical;min-height:5rem;line-height:1.45}
select.field__input{background-image:none;cursor:pointer}
.field__input--sm{width:auto;padding:.45rem .5rem;font-size:.85rem}
input[readonly].field__input{color:var(--muted)}

/* --- panel: panel.css --- */
/* Панель: рамка 4px, жёсткая тень. Форма-панель (--form) — спокойнее: рамка 3px, малая тень. */
.panel{background:var(--bg);border:var(--border);box-shadow:var(--shadow);padding:clamp(1.2rem,2.4vw,2rem);min-height:17rem;display:flex;flex-direction:column;justify-content:center}
.panel__form{display:flex;flex-direction:column;gap:1rem}
.panel__form .eyebrow{margin-bottom:.2rem}
.panel__user{font-family:var(--sans);color:var(--text-soft)}
.panel__user b{font-weight:600;color:var(--fg)}
.panel__hint{font-family:var(--sans);font-size:.86rem;line-height:1.45;color:var(--muted);margin-top:1rem;padding-top:.9rem;border-top:var(--hair)}
.panel__error{font-family:var(--sans);font-size:.92rem;line-height:1.4;color:var(--fg);background:var(--danger-tint);border-left:4px solid var(--danger);padding:.6rem .8rem}
.panel__loading{font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.panel__links{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:calc(var(--fs-micro) * var(--control-size-k));letter-spacing:calc(.14em * var(--control-tracking-k));text-transform:var(--control-case)}
.panel__links a{border-bottom:2px solid var(--fg)}
.panel__links a:hover{border-bottom-color:var(--safety)}
.panel--form{min-height:0;justify-content:flex-start;gap:1rem;box-shadow:var(--shadow-sm);border-width:3px}
@media (max-width:820px){.panel{min-height:0}}
/* Разделитель внутри панели между двумя частями (например, вход через Bukatchuk ID и вход по паролю): линия и отступ. */
.panel__alt{margin-top:1.4rem;padding-top:1.2rem;border-top:var(--hair)}
/* Подсказка первой сразу за разделителем (нижний блок auth__foot и любой panel__alt): разделитель уже дал линию и отступ — второй линии и своих отступов у неё нет (0.25.1). */
.panel__alt>.panel__hint:first-child{margin-top:0;padding-top:0;border-top:0}

/* --- hero: hero.css --- */
/* Первый экран с фоном-сеткой; акцентное слово .acc в заголовке — оранжевое. */
.hero{padding:clamp(2.6rem,6vw,5.6rem) 0 clamp(2rem,4vw,3.4rem);background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:40px 40px}
.hero__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad-x)}
.hero h1{font-size:var(--fs-hero);line-height:.94;letter-spacing:-.045em}
.hero h1 .acc{color:var(--accent-display);-webkit-text-stroke:var(--accent-display-stroke)}
.hero__sub{font-family:var(--sans);font-size:clamp(1rem,1.4vw,1.28rem);line-height:1.5;max-width:56ch;margin-top:1.6rem;color:var(--text-soft)}
.hero__meta{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:1.8rem;font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.hero__actions{margin-top:2rem}
/* Вариант с панелью справа: текст слева, панель (обычно .panel) справа; на узком экране одна колонка, подписи скрыты. */
.hero--split .hero__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(1.6rem,5vw,4.6rem);align-items:center}
.hero--split .hero__text,.hero--split .hero__side{min-width:0}
@media (max-width:920px){.hero--split .hero__in{grid-template-columns:minmax(0,1fr)}.hero--split .hero__meta{display:none}}

/* --- password-input: password-input.css --- */
/* Поле пароля с кнопкой «показать/скрыть». Кнопка появляется только со скриптом: без него поле остаётся обычным. */
.password{position:relative;display:flex}
.password__input{flex:1;min-width:0;padding-right:7.2rem}
.password__toggle{position:absolute;top:0;right:0;bottom:0;display:none;align-items:center;justify-content:center;width:6.6rem;border:var(--border-thin);border-radius:var(--radius-sm);background:var(--ink);color:#fff;font-family:var(--control-font);font-size:calc(.74rem * var(--control-size-k));font-weight:700;letter-spacing:calc(.09em * var(--control-tracking-k));text-transform:var(--control-case);cursor:pointer}
.js .password__toggle{display:flex}
.password__toggle:hover,.password__toggle[aria-pressed="true"]{background:var(--safety)}
.password__toggle:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
.password__input[aria-invalid="true"]{border-color:var(--danger)}

/* --- checkbox: checkbox.css --- */
/* Флажок: строка с подписью и группа в рамке (fieldset). */
.checks{border:var(--border-thin);padding:.8rem 1rem;display:grid;gap:.4rem;max-height:14rem;overflow:auto;background:var(--surface)}
.checks legend{padding:0 .4rem}
.check{display:flex;gap:.6rem;align-items:center;font-family:var(--sans)}
.check small{color:var(--muted)}
.check input{flex:none;width:1.1rem;height:1.1rem;accent-color:var(--safety)}

/* --- auth: auth.css --- */
/* Вход и регистрация: панель до 26rem с рамкой 2px и жёсткой тенью; стоит справа в hero--split (страница входа или главная сервиса для гостя).
   Все кнопки — во всю ширину панели, одной высоты, друг под другом; рамка входит в ширину (border-box), за панель ничего не выходит. */
.auth{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:26rem;min-width:0;background:var(--bg);border:var(--border-thin);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(1.2rem,2.4vw,2rem);box-sizing:border-box}
.hero--split .auth{margin-left:auto}
/* Страница целиком (заголовок .auth__title слева, с 0.25.1): колонки по верху — заголовок на уровне верха панели, а не посередине её высоты;
   заголовок липкий под шапкой и виден при прокрутке длинной формы. Главная сервиса (панель в side, заголовок h1 без .auth__title) не меняется. */
.hero--split .hero__in:has(>.hero__text>.auth__title){align-items:start}
.hero--split .hero__text:has(>.auth__title){position:sticky;top:calc(var(--hdr-h) + 1.4rem)}
@media (max-width:920px){.hero--split .auth{margin-left:0}.hero--split .hero__text:has(>.auth__title){position:static}}
.hero .auth__title{font-size:var(--fs-h1);line-height:1.05;overflow-wrap:break-word}
.auth__head{font-size:var(--fs-h3);line-height:1.2}
.auth__form,.auth__foot{display:flex;flex-direction:column;gap:1rem;min-width:0}
.auth .panel__alt{margin-top:.4rem}
.auth .eyebrow{margin-bottom:0}
/* Самая длинная подпись («Зарегистрироваться через Bukatchuk ID») помещается в одну строку и на 390 px: поля кнопки .8rem, без разрядки. */
.auth .btn{display:block;width:100%;max-width:100%;box-sizing:border-box;margin:0;padding:.95rem .8rem;line-height:1.25;letter-spacing:0;text-align:center;white-space:normal}
.auth .check{font-size:.92rem;line-height:1.4;align-items:flex-start}
.auth .check input{margin-top:.12rem}
.auth .check a{border-bottom:1px solid currentColor}
.auth__links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1.2rem;font-size:calc(var(--fs-micro) * var(--control-size-k));letter-spacing:calc(.14em * var(--control-tracking-k));text-transform:var(--control-case)}
.auth__links a{border-bottom:2px solid var(--fg)}
.auth__links a:hover{border-bottom-color:var(--safety)}
.auth__end{margin-left:auto}
.auth__foot{font-family:var(--sans);font-size:.92rem;line-height:1.45;color:var(--text-soft)}
/* Пометка необязательного поля в подписи (optional): «(необязательно)» обычным начертанием и приглушённым цветом. */
.auth__opt{font-weight:400;color:var(--muted)}
/* Сообщение об успехе над формой (notice): уведомление, а не ошибка — зелёная полоса слева на светлой подложке. */
.auth__notice{font-family:var(--sans);font-size:.92rem;line-height:1.4;color:var(--fg);background:var(--ok-tint);border-left:4px solid var(--ok);padding:.6rem .8rem;margin:0}
/* Ошибка согласия — сразу под его флажком, как ошибка под полем. */
.auth .auth__check-error{margin-top:-.6rem}
/* Узкий экран (до 480 px): самая длинная подпись («Зарегистрироваться через Bukatchuk ID», en — «Sign up with Bukatchuk ID») в одну строку
   с запасом на 360 и 390 px — у панели поля .9rem, у кнопок .4rem, шрифт кнопок .68rem (BUKATCHUK-402, перевод школы: на 390 px запас был ~2 px; в теме ijwt — шрифт без засечек крупнее). */
@media (max-width:480px){.auth{padding:.9rem}.auth .btn{padding:.95rem .4rem;font-size:calc(.68rem * var(--control-size-k))}}

/* --- author: author.css --- */
/* Подпись автора под статьёй: чёрная плашка с оранжевой тенью, аватар, имя, описание, ссылки. */
.author{max-width:var(--read);margin-left:auto;margin-right:auto;display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start;border:var(--border-thin);background:var(--ink);color:var(--base);box-shadow:var(--shadow-safety);padding:1.4rem;margin-top:2.6rem}
.author__ava{width:64px;height:64px;border:var(--border-thin);object-fit:cover}
.author__n{font-family:var(--grotesk);font-weight:700;font-size:1.05rem;margin-bottom:.3rem}
.author__d{font-family:var(--sans);font-size:.95rem;line-height:1.5;color:var(--on-ink-dim)}
.author__l{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.7rem;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent-label)}
@media (max-width:600px){.author{grid-template-columns:1fr}}

/* --- avatar: avatar.css --- */
/* Аватар. */
.avatar{width:96px;height:96px;object-fit:cover;border:var(--border-thin);box-shadow:var(--shadow-sm)}

/* --- badge: badge.css --- */
/* Метка состояния. */
.badge{display:inline-block;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:.2rem .5rem;border:2px solid var(--fg)}
.badge--ok{background:var(--ok-tint);border-color:var(--ok);color:var(--ok)}
.badge--bad{background:var(--danger-tint);border-color:var(--danger);color:var(--danger)}
.badge--off{background:var(--surface);color:var(--muted);border-color:var(--muted)}

/* --- tag: tag.css --- */
/* Тег: капс, тонкая рамка цвета текста. Ссылка-тег при наведении чернеет.
   .tag--filled — чёрный, .tag--safety — оранжевый, .tag--more — счётчик «+N»; .tags — ряд тегов. */
.tag{display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .6rem;border:1px solid currentColor;opacity:.75;transition:background .12s,color .12s,opacity .12s}
a.tag:hover{background:var(--solid);color:var(--on-solid);border-color:var(--fg);opacity:1}
.tag--filled{background:var(--solid);color:var(--on-solid);border-color:var(--fg);opacity:1}
.tag--safety{background:var(--safety);color:var(--on-safety);border-color:var(--safety);opacity:1}
.tags{display:flex;flex-wrap:wrap;gap:.45rem}
/* Счётчик «+N» в конце ряда: пунктирная рамка, ссылка на полный список. */
.tag--more{border-style:dashed;font-weight:700;opacity:1}

/* --- bento: bento.css --- */
/* Плитки программы: сетка из четырёх колонок, плитка может занимать две (--wide),
   быть чёрной (--dark) или оранжевой (--safety). Подпись, заголовок и текст стоят рядом,
   свободное место уходит вниз — к тегам, цифре или столбикам. */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:2.2rem}
.bento-card{border:var(--border-thin);padding:1.5rem 1.4rem;display:flex;flex-direction:column;justify-content:flex-start;gap:.55rem;min-height:0;background:var(--bg);transition:transform .15s,box-shadow .15s}
.bento-card:hover{transform:var(--lift);box-shadow:var(--shadow-sm)}
.bento-card--wide{grid-column:span 2}
.bento-card--dark{background:var(--ink);color:var(--base);border-color:var(--fg)}
.bento-card--dark:hover{box-shadow:var(--shadow-safety)}
.bento-card--safety{background:var(--safety);color:var(--on-safety);border-color:var(--safety)}
.bento-card__n{font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-label);font-weight:700;margin-bottom:.15rem}
.bento-card--safety .bento-card__n{color:color-mix(in srgb,var(--on-safety) 80%,transparent)}
.bento-card__t{font-family:var(--grotesk);font-size:clamp(1.15rem,1.9vw,1.6rem);font-weight:700;line-height:1.12;letter-spacing:-.02em;margin-bottom:.15rem;flex:0 0 auto}
.bento-card__x{font-size:.9rem;opacity:.82;flex:0 1 auto;margin:0}
.bento-card__stat{font-family:var(--grotesk);font-size:var(--fs-stat);font-weight:700;letter-spacing:-.04em;line-height:.9}
.bento-card__stat small{display:inline;margin-left:.35em;font-family:var(--mono);font-size:.3em;font-weight:400;opacity:.55;letter-spacing:0}
.bento-card .tags,.bento-card__stat,.bento-card .barchart{margin-top:auto;padding-top:.9rem}

/* Столбики внутри плитки. Высоту столбика задаёт bento.js из data-ui-h; без скрипта все вровень. */
.barchart{display:flex;align-items:flex-end;gap:5px;height:56px;margin-top:auto}
.barchart i{flex:1;height:50%;background:var(--solid);opacity:.18;display:block}
.bento-card--dark .barchart i{background:var(--bg);opacity:.28}
.barchart i.is-hi{opacity:1;background:var(--safety)}

@media (max-width:1100px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
  .bento{grid-template-columns:1fr}
  .bento-card--wide{grid-column:span 1}
}

/* --- breadcrumb: breadcrumb.css --- */
/* Хлебные крошки: путь до текущей страницы. Разделитель рисуется стилем,
   длинный путь сворачивается скриптом: середина прячется за кнопкой «…». */
.breadcrumb{font-family:var(--control-font);font-size:calc(var(--breadcrumb-fs,.74rem) * var(--control-size-k));letter-spacing:calc(.1em * var(--control-tracking-k));text-transform:var(--control-case)}
.breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .1rem}
.breadcrumb__item{display:flex;align-items:center;min-width:0}
.breadcrumb__item+.breadcrumb__item::before{content:"/";content:"/" / "";margin:0 .6rem;color:var(--muted);font-weight:700}
.breadcrumb__link{display:inline-block;padding:.15rem 0;border-bottom:2px solid transparent;color:var(--text-soft);overflow-wrap:anywhere}
.breadcrumb__link:hover{color:var(--menu-hover);border-bottom-color:var(--safety)}
.breadcrumb__current{display:inline-block;padding:.15rem 0;font-weight:700;color:var(--fg);overflow-wrap:anywhere}
.breadcrumb__more{font:inherit;letter-spacing:.1em;font-weight:700;color:var(--fg);background:var(--bg);border:var(--border-thin);border-radius:var(--radius-sm);padding:0 .5rem;line-height:1.5;cursor:pointer}
.breadcrumb__more:hover{background:var(--ink);color:#fff}
.breadcrumb--light{color:var(--base)}
.breadcrumb--light .breadcrumb__link{color:var(--on-ink-soft)}
.breadcrumb--light .breadcrumb__link:hover{color:var(--menu-hover)}
.breadcrumb--light .breadcrumb__current{color:var(--base)}
.breadcrumb--light .breadcrumb__more{background:var(--ink);color:var(--base);border-color:var(--base)}
.breadcrumb--light .breadcrumb__more:hover{background:var(--bg);color:var(--fg)}

/* --- card: card.css --- */
/* Карточка. */
.card{border:var(--border-thin);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.7rem;background:var(--bg)}
.card--accent{border-color:var(--safety);box-shadow:var(--shadow-sm)}

/* --- codebox: codebox.css --- */
/* Блок значения: моноширинный текст на светлой подложке, выделяется одним щелчком. */
.codebox{font-family:var(--mono);font-size:.9rem;background:var(--surface);border:var(--border-thin);padding:.7rem .8rem;overflow-wrap:anywhere;user-select:all}
.codebox--sm{font-size:.75rem}

/* --- collapsible: collapsible.css --- */
/* Сворачиваемый блок по кнопке. Без скрипта содержимое видно целиком. */
.collapsible{display:flex;flex-direction:column;gap:.8rem;align-items:flex-start}
.collapsible__toggle{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--control-font);font-weight:700;font-size:calc(.8rem * var(--control-size-k));letter-spacing:calc(.09em * var(--control-tracking-k));text-transform:var(--control-case);color:var(--fg);background:var(--bg);border:var(--border-thin);border-radius:var(--radius);padding:.55rem .9rem;cursor:pointer}
.collapsible__toggle::after{content:"+";font-size:1rem;line-height:1;color:var(--accent-label)}
.collapsible__toggle[aria-expanded="true"]::after{content:"\2212"}
.collapsible__toggle:hover{background:var(--ink);color:#fff}
.collapsible__toggle:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
.collapsible__body{width:100%;font-family:var(--sans);font-size:.95rem;line-height:1.6;color:var(--text-soft);display:flex;flex-direction:column;gap:.7rem;padding:.9rem 1rem;border:var(--border-thin);background:var(--surface)}
.js .collapsible__toggle[aria-expanded="false"]~.collapsible__body:not(.collapsible__body--clamp){display:none}
/* «Показать ещё»: текст обрезан по высоте и раскрывается по кнопке */
.collapsible--clamp{flex-direction:column-reverse;align-items:flex-start}
.collapsible__body--clamp{position:relative;padding:0;border:0;background:none}
.js .collapsible__toggle[aria-expanded="false"]~.collapsible__body--clamp{max-height:var(--collapsible-h,6.2rem);overflow:hidden}
.js .collapsible__toggle[aria-expanded="false"]~.collapsible__body--clamp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.6rem;background:linear-gradient(transparent,var(--bg))}

/* --- label: label.css --- */
/* Метка блока: чёрная плашка над заголовком секции. .ph — заметная пометка места,
   которое нужно заполнить (например, ссылки на оплату). */
.label{display:inline-block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#fff;background:var(--ink);padding:.28rem .6rem;margin-bottom:1rem}
.label--safety{background:var(--safety)}
.ph{color:var(--accent-label);font-weight:700}

/* --- honest: honest.css --- */
/* Врезка с меткой: рамка, оранжевая полоса слева, на светлом фоне. Метка берётся из data-label
   и стоит отдельной строкой над текстом. .honest — «честно о том, чего нет», .cut — условие
   или оговорка под блоком; вид у них одинаковый. Текст — внутри .honest__body. */
.honest,.cut{display:block;width:100%;max-width:none;margin-left:0;margin-right:0;text-align:left;border:var(--border-thin);border-left:6px solid var(--safety);background:var(--surface);padding:1.4rem 1.6rem}
.honest{margin-top:2.2rem}
.cut{margin-top:2.4rem;font-size:.9rem}
.honest::before,.cut::before{content:attr(data-label);display:block;margin-bottom:.7rem;font-size:var(--fs-micro);letter-spacing:.2em;line-height:1.6;text-transform:uppercase;color:var(--accent-label);font-weight:700}
.cut::before{opacity:.85}
.honest__body{min-width:0;width:100%;max-width:none}
.honest__body p{margin:0;max-width:none}
.honest__body p + p{margin-top:.9rem}

/* --- cta: cta.css --- */
/* Призыв к действию: оранжевая секция по центру с чёрной кнопкой.
   --dark — чёрная секция с оранжевой кнопкой: перед оранжевым подвалом, чтобы два оранжевых блока не шли подряд;
   --wide — заголовок на всю ширину; .cta__title--nowrap — название продукта одной строкой;
   .btn--ghost — вторая кнопка контуром цвета текста секции (две кнопки рядом, главная — заливкой).
   Врезки .honest и .cut внутри секции становятся полупрозрачными тёмными. */
.cta{background:var(--safety);color:var(--on-safety);border-top:var(--border);text-align:center}
.cta h2{color:#fff;max-width:22ch;margin:0 auto 1.3rem}
.cta .wrap > p{max-width:74ch;margin:0 auto 2rem}
.cta .eyebrow{color:#fff;opacity:.85}
.cta .label{background:var(--ink)}
.cta .btns{justify-content:center}
.cta .btn{background:var(--ink);color:#fff;border-color:var(--fg);box-shadow:var(--shadow-on-safety)}
.cta .btn:hover{transform:var(--lift);box-shadow:var(--shadow-on-safety-lift)}
.cta--dark{background:var(--ink)}
.cta--dark .label{background:var(--safety)}
.cta--dark .btn{background:var(--safety);border-color:var(--safety);box-shadow:var(--shadow-on-ink)}
.cta--dark .btn:hover{box-shadow:var(--shadow-on-ink-lift)}
.cta--dark .honest,.cta--dark .cut{background:rgba(255,255,255,.06);border-left-color:var(--safety)}
.cta .btn--ghost{background:transparent;color:inherit;border-color:currentColor;box-shadow:none}
.cta .btn--ghost:hover{box-shadow:none}
.cta--wide h2{max-width:none;width:100%}
.cta .cta__title--nowrap{white-space:nowrap;max-width:none;font-size:clamp(1.05rem,3.5vw,3rem);letter-spacing:-.03em}
.cta .honest,.cta .cut{background:rgba(0,0,0,.14);border-color:rgba(255,255,255,.35);border-left-color:#fff;color:#fff}
.cta .cut{opacity:.94}
.cta .honest::before,.cta .cut::before{color:#fff;opacity:.9}

/* --- datetime: datetime.css --- */
/* Поле «дата и время» и его календарь. */
.dt{position:relative;display:flex}
.dt__input{flex:1;min-width:0}
.dt__toggle{flex:none;width:3.1rem;display:flex;align-items:center;justify-content:center;border:var(--border-thin);border-left:0;border-radius:var(--radius-sm);background:var(--ink);color:#fff;cursor:pointer}
.dt__toggle[hidden]{display:none}
.dt__toggle:hover,.dt__toggle[aria-expanded="true"]{background:var(--safety)}
.dt__pop{position:absolute;z-index:30;top:calc(100% + 8px);left:0;width:19.5rem;max-width:calc(100vw - 2rem);background:var(--bg);border:var(--border-thin);box-shadow:var(--shadow);padding:.8rem}
.dt__head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.6rem}
.dt__title{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.dt__nav{width:2.1rem;height:2.1rem;border:var(--border-thin);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);font-family:var(--mono);font-weight:700;font-size:1rem;line-height:1;cursor:pointer}
.dt__nav:hover{background:var(--solid);color:var(--on-solid)}
.dt__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dt__wd{font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--muted);text-align:center;padding:.3rem 0}
.dt__wd--off{color:var(--danger)}
.dt__day{height:2.25rem;border:2px solid transparent;border-radius:var(--radius-sm);background:var(--surface);color:var(--fg);font-family:var(--mono);font-size:.85rem;font-weight:700;cursor:pointer}
.dt__day:hover{background:var(--solid);color:var(--on-solid)}
.dt__day--out{background:transparent;color:var(--muted);font-weight:400}
.dt__day--today{border-color:var(--fg)}
.dt__day--on,.dt__day--on:hover{background:var(--safety);border-color:var(--fg);color:var(--on-safety)}
.dt__time{display:flex;align-items:center;gap:.45rem;margin-top:.8rem;padding-top:.8rem;border-top:var(--border-thin)}
.dt__time-label{font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin-right:auto}
.dt__num{width:3.3rem;font-family:var(--mono);font-size:1rem;font-weight:700;text-align:center;color:var(--fg);background:var(--surface);border:var(--border-thin);border-radius:0;padding:.45rem .2rem;appearance:textfield;-moz-appearance:textfield}
.dt__num:focus{outline:none;background:var(--bg);border-color:var(--safety)}
.dt__num::-webkit-outer-spin-button,.dt__num::-webkit-inner-spin-button{appearance:none;margin:0}
.dt__colon{font-weight:700}
.dt__foot{display:flex;gap:.5rem;margin-top:.8rem}
.dt__foot .btn{margin:0;flex:1;padding:.55rem .4rem}
.dt__foot .btn--primary{box-shadow:none}
.dt__foot .btn--primary:hover{transform:none;box-shadow:none;background:var(--ink);border-color:var(--fg)}
.dt__foot .btn--ghost:hover{transform:none;box-shadow:none;background:var(--ink);color:#fff}

/* --- dialog: dialog.css --- */
/* Диалог: окно поверх страницы. Построен на элементе <dialog>:
   браузер сам удерживает фокус внутри и закрывает окно по Esc. */
.dialog{position:fixed;inset:0;margin:auto;width:min(34rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);padding:0;border:var(--border);border-radius:var(--radius);background:var(--bg);color:var(--fg);box-shadow:var(--shadow);overflow:hidden}
.dialog[open]{display:flex;flex-direction:column}
.dialog::backdrop{background:rgba(10,10,10,.62)}
.dialog--wide{width:min(56rem,calc(100vw - 2rem))}
.dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.1rem 1.3rem;border-bottom:var(--border-thin)}
.dialog__title{font-family:var(--grotesk);font-size:var(--fs-h3);font-weight:700;letter-spacing:-.015em;line-height:1.14}
.dialog__desc{font-family:var(--sans);font-size:.95rem;line-height:1.5;color:var(--text-soft);margin-top:.4rem}
.dialog__close{flex:none;width:2.1rem;height:2.1rem;border:var(--border-thin);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);font-family:var(--mono);font-weight:700;font-size:1rem;line-height:1;cursor:pointer}
.dialog__close:hover{background:var(--ink);color:#fff}
.dialog__body{padding:1.2rem 1.3rem;overflow:auto;font-family:var(--sans);line-height:1.55;display:flex;flex-direction:column;gap:1rem}
.dialog__foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.8rem;padding:1rem 1.3rem;border-top:var(--border-thin);background:var(--surface)}
.dialog--alert{border-color:var(--safety);box-shadow:var(--shadow-safety)}
@media (max-width:560px){.dialog__foot .btn{flex:1}}

/* --- dropdown-menu: dropdown-menu.css --- */
/* Меню действий: пункты, группы, разделители, флажки, выбор одного, подменю.
   Положение задаёт скрипт; без скрипта меню скрыто атрибутом hidden.
   Блок .menu используют и контекстное меню, и другие компоненты со списком команд. */
.menu{position:fixed;left:0;top:0;z-index:var(--z-pop);min-width:13rem;max-width:min(22rem,calc(100vw - 1rem));padding:.3rem 0;border:var(--border-thin);border-radius:var(--radius);background:var(--bg);color:var(--fg);box-shadow:var(--shadow-sm);font-family:var(--font-body);font-size:.8rem;overflow:auto;max-height:calc(100dvh - 1rem)}
.menu:focus-visible{outline:none}
.menu__item{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;position:relative;width:100%;padding:.55rem .9rem .55rem 2rem;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;font-weight:700;letter-spacing:.06em;text-align:left;text-decoration:none;cursor:pointer}
.menu__item:focus,.menu__item:hover,.menu__item[aria-expanded="true"]{background:var(--solid);color:var(--on-solid);outline:none}
.menu__item:focus-visible{outline:3px solid var(--safety);outline-offset:-3px}
.menu__item--danger{color:var(--danger)}
.menu__item--danger:focus,.menu__item--danger:hover{background:var(--danger);color:var(--on-danger)}
.menu__item[aria-disabled="true"]{opacity:.45;cursor:default;pointer-events:none}
.menu__item[role="menuitemcheckbox"][aria-checked="true"]::before,.menu__item[role="menuitemradio"][aria-checked="true"]::before{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);line-height:1}
.menu__item[role="menuitemcheckbox"][aria-checked="true"]::before{content:"\2713"}
.menu__item[role="menuitemradio"][aria-checked="true"]::before{content:"\25CF";font-size:.6rem}
.menu__item[aria-haspopup]::after{content:"\25B8";flex:none}
.menu__kbd{margin-left:auto;font-size:.74rem;font-weight:400;letter-spacing:.04em;opacity:.7}
.menu__label{padding:.5rem .9rem .3rem 2rem;font-size:var(--fs-micro);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.menu__sep{margin:.3rem 0;border:0;border-top:var(--border-thin)}

/* --- empty: empty.css --- */
/* Пустое состояние. */
.empty{font-family:var(--sans);color:var(--muted)}

/* --- faq: faq.css --- */
/* Вопросы и диалоги.
   .q — вопросы в три колонки с чёрной линией сверху (две, затем одна на узком экране).
   .beats — диалоги «вопрос — ответ»: три в ряд, шесть блоков ложатся в две строки. */
.q{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2.2rem}
.q__i{border-top:var(--border);padding-top:1.1rem;font-size:1.01rem}

.beats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem 2rem;margin-top:2.2rem}
.beat{border-top:3px solid var(--safety);padding-top:1rem}
.beat__q{display:block;font-weight:700;margin:0 0 .45rem}
.beat__a{display:block;opacity:.78;font-size:.95rem;margin:0}

@media (max-width:1180px){
  .q{grid-template-columns:repeat(2,1fr)}
  .q > :last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:1100px){.beats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
  .q,.beats{grid-template-columns:1fr}
  .q > :last-child:nth-child(odd){grid-column:auto}
}

/* --- features: features.css --- */
/* Бонусы и возможности: карточки в три колонки (две, затем одна на узком экране);
   неполный последний ряд дотягивается до края. Вариант --dark — чёрная, --safety — оранжевая. */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.2rem}
.feat{border:var(--border-thin);padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:.9rem;min-height:250px;transition:transform .15s,box-shadow .15s}
.feat:hover{transform:var(--lift);box-shadow:var(--shadow-sm)}
.feat--dark{background:var(--ink);color:var(--base);border-color:var(--fg)}
.feat--dark:hover{box-shadow:var(--shadow-safety)}
.feat--safety{background:var(--safety);color:var(--on-safety);border-color:var(--safety)}
.feat__id{display:block;font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-label);font-weight:700;margin-bottom:1rem}
.feat--safety .feat__id{color:color-mix(in srgb,var(--on-safety) 85%,transparent)}
.feat__x{font-size:.9rem;opacity:.84;flex:1}
.feat ul{display:flex;flex-direction:column;gap:.4rem;font-size:.86rem;margin-top:.2rem}
.feat li{padding-left:1.1rem;position:relative;opacity:.85}
.feat li::before{content:"·";position:absolute;left:.3rem;color:var(--safety);font-weight:700}
.feat__res{font-size:.84rem;border-top:1px solid color-mix(in srgb,var(--muted) 28%,transparent);padding-top:.7rem;margin-top:.3rem}
.feat__anchor{font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;opacity:.6;margin-top:.5rem}
.feat__stat{font-family:var(--grotesk);font-size:2rem;font-weight:700;letter-spacing:-.04em}
.feat__stat small{margin-left:.3em}

/* неполный последний ряд из трёх колонок дотягивается до края: одна карточка — на весь ряд, вторая из двух — на две колонки */
.feats > :last-child:nth-child(3n+1){grid-column:1/-1}
.feats > :last-child:nth-child(3n+2){grid-column:span 2}
@media (max-width:1180px){
  .feats{grid-template-columns:repeat(2,1fr)}
  .feats > :last-child:nth-child(3n+1),.feats > :last-child:nth-child(3n+2){grid-column:auto}
  .feats > :last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:760px){
  .feats{grid-template-columns:1fr}
  .feats > :last-child:nth-child(odd){grid-column:auto}
}

/* --- file-upload: file-upload.css --- */
/* Зона загрузки файла. Настоящий <input type="file"> остаётся в форме и сам уходит с ней;
   зона — подпись к нему, поэтому без скрипта выбор по щелчку работает. */
.upload{display:grid;gap:.8rem}
.upload__input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.upload__zone{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:1.6rem 1rem;text-align:center;background:var(--surface);border:var(--border-thin);border-style:dashed;cursor:pointer;transition:background .12s}
.upload__zone:hover{background:var(--bg)}
.upload__title{font-family:var(--control-font);font-size:calc(.85rem * var(--control-size-k));font-weight:700;letter-spacing:calc(.06em * var(--control-tracking-k));text-transform:var(--control-case)}
.upload__hint{font-family:var(--sans);font-size:.92rem;line-height:1.45;color:var(--muted)}
.upload__input:focus-visible ~ .upload__zone{outline:3px solid var(--fg);outline-offset:3px}
.upload.is-drag .upload__zone{background:var(--safety);border-style:solid;color:var(--on-safety)}
.upload.is-drag .upload__hint{color:#fff}
.upload__input[aria-invalid="true"] ~ .upload__zone{border-color:var(--danger);background:var(--danger-tint)}
.upload__input:disabled ~ .upload__zone{opacity:.55;cursor:not-allowed}
.upload__list{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.upload__item{display:flex;align-items:center;gap:.8rem;padding:.55rem .8rem;background:var(--bg);border:var(--border-thin)}
.upload__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-body);font-size:.85rem;font-weight:700}
.upload__size{flex:none;font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.upload__remove{flex:none;width:1.9rem;height:1.9rem;border:var(--border-thin);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:1rem;font-weight:700;line-height:1;cursor:pointer}
.upload__remove:hover{background:var(--ink);color:#fff}
.upload__error{padding:.6rem .8rem;background:var(--danger-tint);border-left:4px solid var(--danger);font-family:var(--sans);font-size:.92rem;line-height:1.4}
.upload__error p + p{margin-top:.2rem}
.upload__button{justify-self:start}
.upload__input:disabled ~ .upload__button,.upload__input:disabled ~ .upload__actions .upload__button{opacity:.55;cursor:not-allowed;pointer-events:none}
.upload__preview{display:flex;align-items:center;gap:.8rem;margin:0}
.upload__preview[hidden]{display:none}
.upload__thumb{flex:none;display:block;width:6rem;height:6rem;object-fit:cover;background:var(--bg);border:var(--border-thin);border-radius:var(--radius-sm)}
.upload__thumb--sm{width:2.4rem;height:2.4rem}
.upload__note{font-family:var(--sans);font-size:.92rem;line-height:1.45;color:var(--muted)}

/* --- footer: footer.css --- */
/* Подвал. По умолчанию — оранжевый с колонками ссылок (блог); нижняя строка: слева копирайт с годом, справа стаж.
   .ft--compact — только нижняя строка (сервис).
   Подвал у низа окна на коротких страницах — класс ft-page на body: body становится колонкой на всю высоту окна,
   блоки внутри него не сжимаются по содержимому (width:100%, урок BUKATCHUK-285), подвал уходит вниз (BUKATCHUK-302). */
.ft-page{min-height:100dvh;display:flex;flex-direction:column}
.ft-page>*{width:100%}
.ft-page>.ft{margin-top:auto}
.ft{background:var(--ft-bg);color:var(--ft-fg);border-top:var(--border);padding:clamp(2rem,4vw,3.4rem) 0 2rem}
.ft__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad-x);display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.ft h4{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--ft-head);margin-bottom:.9rem;font-weight:700}
.ft p{font-family:var(--sans);font-size:.95rem;line-height:1.75}
.ft a:hover{color:var(--ft-head)}
.ft__bottom{max-width:var(--wrap);margin:2.4rem auto 0;padding:1.2rem var(--pad-x) 0;border-top:1px solid var(--ft-line);display:grid;grid-template-columns:1fr auto;gap:.6rem 2rem;align-items:baseline;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ft-compact)}
.ft__bottom>*:last-child{text-align:right}
@media (max-width:760px){.ft__bottom{grid-template-columns:1fr;text-align:left}.ft__bottom>*:last-child{text-align:left}}
@media (max-width:900px){.ft__in{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ft__in{grid-template-columns:1fr}}

/* компактный: одна нижняя строка */
.ft--compact{padding:0;color:var(--ft-compact)}
.ft--compact .ft__bottom{margin:0 auto;padding:1.2rem var(--pad-x);border-top:0}
@media (max-width:820px){.ft--compact .ft__bottom{grid-template-columns:1fr}.ft--compact .ft__bottom>*:last-child{text-align:left}}
/* строка документов (соглашение, политики) — над копирайтом, во всю ширину, обычным регистром */
.ft__legal{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;text-transform:none;letter-spacing:0;font-size:.85rem}
.ft__legal a{color:inherit}
.ft__legal a:hover{color:var(--ft-head)}
.ft__bottom>.ft__legal:last-child{text-align:left}

/* --- form: form.css --- */
/* Форма: вертикальный ритм, поля в ряд, разделы, кнопки и сводка ошибок.
   Сообщения под полями рисует скрипт через .field__error из компонента field. */
.form{display:flex;flex-direction:column;gap:1.4rem}
.form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1.2rem}
.form__section{display:flex;flex-direction:column;gap:1.2rem;padding-top:1.4rem;border-top:var(--border-thin)}
.form__section:first-child{padding-top:0;border-top:0}
.form__head{display:flex;flex-direction:column;gap:.35rem}
.form__title{font-family:var(--grotesk);font-size:var(--fs-h3);font-weight:700;letter-spacing:-.015em;line-height:1.14}
.form__desc{font-family:var(--sans);font-size:.95rem;line-height:1.5;color:var(--text-soft);max-width:44rem}
.form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding-top:.4rem}
.form__actions--end{justify-content:flex-end}
.form__actions--split{justify-content:space-between}
.form__errors{padding:.9rem 1.1rem;background:var(--danger-tint);border-left:4px solid var(--danger);font-family:var(--sans);font-size:.92rem;line-height:1.5}
.form__errors-title{margin-bottom:.4rem;font-family:var(--mono);font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.form__errors ul{margin:0;padding-left:1.1rem;list-style:disc}
.form__errors a{color:var(--fg);text-decoration:underline;text-underline-offset:.15em}
.form__errors a:hover{color:var(--safety-text)}
/* Строка-фильтр: поле, списки и кнопка в одну строку и одной высоты (шрифты не меняются — выравнивается высота).
   Подпись поля остаётся только для скринридера, поэтому полю нужен placeholder; на узком экране элементы переносятся,
   кнопка встаёт на всю ширину. */
.form__row--bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.8rem}
.form__row--bar>.field{flex:2 1 16rem;gap:0}
.form__row--bar>.field .field__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.form__row--bar>.select,.form__row--bar>.select__native{flex:1 1 11rem;max-width:none}
.form__row--bar .field__input,.form__row--bar .select__btn,.form__row--bar .select__native,.form__row--bar>.btn{height:3.3rem;padding-top:0;padding-bottom:0}
.form__row--bar>.btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}
@media (max-width:560px){.form__actions .btn{flex:1 1 auto}}
@media (max-width:560px){.form__row--bar>.btn{flex:1 1 100%}}

/* --- grid: grid.css --- */
/* Сетки. На узком экране — одна колонка. */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,2rem)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,2rem)}
.grid2--form{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.4rem}
.grid2--top{align-items:start;gap:1.6rem}
.cell{border:var(--border-thin);padding:clamp(1.2rem,2vw,1.8rem);background:var(--bg)}
.cell--dark{background:var(--ink);color:var(--base)}
.cell--safety{background:var(--safety);color:var(--on-safety);border-color:var(--safety)}
@media (max-width:900px){.grid3{grid-template-columns:1fr}.grid2,.grid2--form{grid-template-columns:1fr}}

/* --- guarantee: guarantee.css --- */
/* Гарантии: карточки в три колонки (две, затем одна на узком экране);
   нечётная последняя занимает весь ряд. --hl выделяет главную гарантию оранжевым. */
.guar{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem}
.guar__i{border:var(--border-thin);padding:1.5rem 1.4rem;background:var(--bg)}
.guar__i b{display:block;font-family:var(--grotesk);font-size:1.1rem;margin-bottom:.5rem}
.guar__i--hl{background:var(--safety);color:var(--on-safety);border-color:var(--safety)}

@media (max-width:1180px){
  .guar{grid-template-columns:repeat(2,1fr)}
  .guar > :last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:760px){
  .guar{grid-template-columns:1fr}
  .guar > :last-child:nth-child(odd){grid-column:auto}
}

/* --- theme-toggle: theme-toggle.css --- */
/* Переключатель темы: квадратная кнопка с полукругом; в шапке — светлая рамка на чёрном. */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:var(--border-thin);background:var(--bg);color:var(--fg);cursor:pointer;flex:none}
.theme-toggle__icon{display:block;width:.9rem;height:.9rem;border:2px solid currentColor;border-radius:50%;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
.theme-toggle:hover{color:var(--menu-hover)}
.theme-toggle[aria-pressed="true"] .theme-toggle__icon{transform:rotate(180deg)}
/* у текстовых пунктов шапки после последней буквы есть межбуквенный отступ (.14em) — добавляем его и кнопке, чтобы промежутки были равны */
.hdr .theme-toggle{margin-right:.1rem;width:1.7rem;height:1.7rem;background:transparent;color:var(--hdr-fg);border:1px solid var(--hdr-toggle-line)}
.hdr .theme-toggle:hover{color:var(--menu-hover);border-color:var(--hdr-mark)}

/* --- header: header.css --- */
/* Шапка: прилипает к верху, чёрная с оранжевой линией.
   Знак слева ведёт в блог, название рядом — на стартовую страницу сайта. */
.hdr{position:sticky;top:0;z-index:var(--z-sticky);background:var(--hdr-bg);color:var(--hdr-fg);border-bottom:var(--hdr-border)}
.hdr__in{display:flex;align-items:center;gap:1rem;padding:.5rem var(--pad-x);max-width:var(--wrap);margin:0 auto;height:var(--hdr-h)}
.hdr__logo{font-family:var(--grotesk);font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.hdr__mark{width:22px;height:22px;display:block;flex:none}
/* разделитель и название не сжимаются, когда меню длинное: иначе разделитель пропадает, а меню прилипает к названию */
.hdr__sep{flex:none;width:1px;height:20px;background:var(--hdr-sep)}
.hdr__sub{flex:none;font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--hdr-muted);white-space:nowrap}
a.hdr__sub{color:var(--hdr-fg);padding-bottom:2px;border-bottom:2px solid var(--hdr-mark)}
a.hdr__sub:hover{color:var(--menu-hover)}
/* перед меню — запас 1rem к общему промежутку строки: первый пункт не встаёт вплотную к названию сайта */
.hdr__nav{margin-left:auto;padding-left:1rem;display:flex;gap:1.6rem;font-size:calc(.74rem * var(--control-size-k));letter-spacing:calc(.14em * var(--control-tracking-k));text-transform:var(--control-case);font-weight:500}
.hdr__nav a{position:relative;padding-bottom:2px;white-space:nowrap}
.hdr__nav a:hover{color:var(--menu-hover)}
.hdr__nav a.is-active{color:var(--hdr-accent);border-bottom:2px solid var(--hdr-mark)}
.hdr__nav-mobile,.hdr__nav a.hdr__nav-home{display:none}
/* правая часть отделена от меню тем же 1.6rem, что пункты между собой: .6rem + общий промежуток строки 1rem */
.hdr__right{display:flex;align-items:center;gap:1.6rem;margin-left:.6rem;font-size:calc(.74rem * var(--control-size-k));letter-spacing:calc(.14em * var(--control-tracking-k));text-transform:var(--control-case);font-weight:500}
.hdr__btn{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;padding:0 0 2px;cursor:pointer}
.hdr__btn:hover{color:var(--menu-hover)}
.hdr__status{display:flex;align-items:center;gap:.4rem;font-size:var(--fs-micro);letter-spacing:.12em;color:var(--muted);white-space:nowrap}
.hdr__dot{width:7px;height:7px;border-radius:50%;background:var(--term-green);box-shadow:0 0 8px var(--term-green);animation:hdr-pulse 2s infinite}
@keyframes hdr-pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hdr__clock{font-size:var(--fs-micro);letter-spacing:.1em;text-transform:none;color:var(--muted);white-space:nowrap}
/* когда меню длинное, первыми уходят часы: переключатель темы и кнопки справа должны остаться на экране */
@media (max-width:1440px){.hdr__clock{display:none}}
/* Правая зона стандарта: «Админка» → тема → сервисы → профиль. Меню — компонент dropdown-menu (.menu). */
.hdr__admin{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.hdr__badge{min-width:1.4em;padding:0 .4em;background:var(--hdr-mark);color:var(--ink);font-family:var(--mono);font-size:.7rem;font-weight:700;line-height:1.55;letter-spacing:0;text-align:center}
.hdr__icon,.hdr__avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.hdr__icon{width:2rem;height:2rem}
.hdr__icon:hover{color:var(--menu-hover)}
.hdr__icon:focus-visible,.hdr__avatar:focus-visible{outline:3px solid var(--safety);outline-offset:2px}
.hdr__avatar{width:1.9rem;height:1.9rem;overflow:hidden;border-radius:var(--radius)}
.hdr__photo{display:block;width:100%;height:100%;object-fit:cover}
.hdr__initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--hdr-mark);color:var(--ink);font-family:var(--grotesk);font-size:.85rem;font-weight:700;letter-spacing:0;text-transform:uppercase}
.hdr__menu{text-transform:none}
.hdr__menu form{margin:0}
.hdr__menu .menu__label.hdr__menu-name{text-transform:none;letter-spacing:.02em;overflow-wrap:anywhere}
/* значок сервиса: квадрат цвета текста (тёмный в светлой теме, светлый в тёмной), пиктограмма линиями цвета фона;
   на пункте под курсором меняются оба цвета — контраст сохраняется */
.hdr__menu .menu__item{justify-content:flex-start;gap:.6rem}
.hdr__svc{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;background:currentColor;border-radius:0}
.hdr__svc svg{display:block;fill:none;stroke:var(--bg);stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
.hdr__menu .menu__item:hover .hdr__svc svg,.hdr__menu .menu__item:focus .hdr__svc svg{stroke:var(--solid)}
.hdr__more .hdr__svc svg{stroke:var(--hdr-bg)}
.hdr__menu .menu__item[aria-current]::before{content:"\25CF";position:absolute;left:.8rem;top:50%;transform:translateY(-50%);font-size:.6rem;line-height:1}
/* переключатель языка «RU / EN»: текущий язык подчёркнут и выделен акцентом */
.hdr__lang{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.hdr__lang a{padding-bottom:2px;border-bottom:2px solid transparent}
.hdr__lang a:hover{color:var(--menu-hover)}
.hdr__lang a[aria-current]{color:var(--hdr-accent);border-bottom-color:var(--hdr-mark)}
.hdr__lang span{color:var(--hdr-muted)}
/* разделы для телефона: в широком виде скрыты, в бургер-меню идут после разделов сервиса */
.hdr__more{display:none}

.burger{display:none;margin-left:auto;background:none;border:0;flex-direction:column;gap:4px;cursor:pointer;padding:.4rem}
.burger span{width:20px;height:2px;background:currentColor;display:block}
.hdr .burger{color:inherit}

@media (max-width:920px){
  .hdr .hdr__sub,.hdr .hdr__right>:not(.theme-toggle){display:none}
  .hdr .hdr__right{margin-left:auto;gap:.8rem}
  .hdr .hdr__right~.burger{margin-left:.8rem}
  .hdr .burger{display:flex}
  .hdr .hdr__nav{position:fixed;inset:var(--hdr-h) 0 auto 0;background:var(--hdr-bg);border-bottom:var(--hdr-border);flex-direction:column;gap:0;padding:1rem var(--pad-x);display:none}
  .hdr .hdr__nav.is-open{display:flex}
  .hdr .hdr__nav a{padding:.8rem 0;border-bottom:1px solid var(--hdr-rule)}
  .hdr .hdr__nav{overflow-y:auto;max-height:calc(100dvh - var(--hdr-h))}
  .hdr .hdr__more{display:block}
  .hdr .hdr__more-title{margin:1.1rem 0 0;font-size:var(--fs-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--hdr-muted)}
  .hdr .hdr__more a{display:flex;align-items:center;gap:.5rem}
  .hdr .hdr__more a[aria-current]{color:var(--hdr-accent)}
  .hdr .hdr__more form{margin:0}
  .hdr .hdr__more .hdr__btn{display:block;width:100%;padding:.8rem 0;text-align:left;border-bottom:1px solid var(--hdr-rule)}
  .hdr .hdr__nav-mobile{display:block;padding:.8rem 0}
  .hdr .hdr__nav a.hdr__nav-home{display:block;color:var(--hdr-accent)}
}

/* --- input-otp: input-otp.css --- */
/* Код подтверждения из нескольких ячеек. Значение собирается в скрытое поле внутри [data-ui-otp]. */
.otp{display:flex;gap:.6rem}
.otp__cell{flex:1 1 0;min-width:0;max-width:3.4rem;height:3.7rem;padding:0;text-align:center;font-family:var(--mono);font-size:var(--fs-h3);font-weight:700;color:var(--fg);background:var(--surface);border:var(--border-thin);border-radius:var(--radius-sm);-webkit-appearance:none;appearance:none;caret-color:var(--safety)}
.otp__cell:focus{outline:none;background:var(--bg);border-color:var(--safety);box-shadow:var(--shadow-sm)}
.otp__cell:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
.otp__cell:disabled{opacity:.55;cursor:not-allowed}
.otp__cell[aria-invalid="true"]{border-color:var(--danger);background:var(--danger-tint)}
.otp__sep{align-self:center;flex:none;font-family:var(--mono);font-weight:700;color:var(--muted)}
@media (max-width:420px){.otp{gap:.35rem}.otp__cell{height:3.2rem}}

/* --- link: link.css --- */
/* Ссылка в тексте. */
.link{border-bottom:2px solid var(--safety)}
.link:hover{background:var(--safety);color:var(--on-safety)}

/* --- item-list: item-list.css --- */
/* Список записей. */
.items{list-style:none;display:flex;flex-direction:column;gap:1rem}
.item{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem 1.6rem;padding:1rem 1.1rem;border:var(--border-thin);background:var(--bg);box-shadow:var(--shadow-sm)}
.item--past{background:var(--surface);box-shadow:none}
.item__main{min-width:0;flex:1 1 18rem}
.item__title{font-family:var(--grotesk);font-size:1.2rem;letter-spacing:-.02em;overflow-wrap:anywhere}
.item__meta{font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.2rem}
.item__link{font-size:.85rem;margin-top:.4rem;overflow-wrap:anywhere}
.item__actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-start}
.item__actions .btn{margin:0}

/* --- metrics: metrics.css --- */
/* Лента метрик лендинга: ячейки в ряд, под значением — полоса заполнения.
   Ширину полосы задаёт metrics.js из data-ui-fill. */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));border-bottom:var(--border);background:var(--bg)}
.metrics__cell{padding:calc(var(--sec-y) * .42) 1.4rem;border-right:var(--hair)}
.metrics__cell:last-child{border-right:0}
.metrics__label{font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.metrics__value{font-family:var(--grotesk);font-size:clamp(1.6rem,2.8vw,2.4rem);font-weight:700;letter-spacing:-.035em;line-height:1}
.metrics__unit{font-family:var(--mono);font-size:.42em;font-weight:400;opacity:.55;margin-left:.2em}
.metrics__bar{height:4px;background:var(--track);margin-top:.9rem;overflow:hidden}
.metrics__fill{width:0;height:100%;background:var(--safety)}

/* --- post-list: post-list.css --- */
/* Списки статей. .feed — лента карточек .post (дата слева, заголовок, описание, теги), закреплённая — .post--pin.
   .rows — компактный список строк .row (дата, заголовок, время чтения) для архива и страниц тегов.
   .feed-head — заголовок раздела со ссылкой справа. */
.feed-head{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:baseline;justify-content:space-between;margin-bottom:1.6rem}
.feed{display:grid;gap:0;border-top:var(--border-thin)}
.post{position:relative;display:grid;grid-template-columns:132px 1fr;gap:clamp(1rem,3vw,2.6rem);padding:clamp(1.4rem,2.6vw,2.2rem) clamp(1rem,2vw,1.6rem);border-left:6px solid transparent;border-bottom:var(--hair);transition:background .12s}
.post:hover{background:var(--surface)}
.post__date{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:.35rem}
.post__date b{display:block;font-family:var(--grotesk);font-size:1.5rem;letter-spacing:-.02em;color:var(--fg);line-height:1}
.post__t{font-size:clamp(1.15rem,1.9vw,1.6rem);margin-bottom:.5rem}
.post:hover .post__t{color:var(--safety-text)}
.post__link::after{content:"";position:absolute;inset:0}
.post .tag{position:relative;z-index:1}
.post__d{font-family:var(--sans);font-size:1rem;line-height:1.55;color:var(--text-dim);max-width:68ch}
.post__f{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:.9rem}
.post__time{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.post--pin{background:var(--surface);border-left-color:var(--safety)}
@media (max-width:700px){.post{grid-template-columns:1fr;gap:.6rem}.post__date b{display:inline;font-size:1rem}}

.rows{display:grid}
.row{display:grid;grid-template-columns:76px 1fr auto;gap:1rem;align-items:baseline;padding:.72rem 0;border-bottom:var(--hair)}
.row:hover .row__t{color:var(--safety-text)}
.row__d{font-size:.72rem;letter-spacing:.1em;color:var(--muted)}
.row__t{font-family:var(--sans);font-size:1.02rem;line-height:1.35}
.row__star{color:var(--accent-label);font-weight:700}
.row__meta{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media (max-width:700px){.row{grid-template-columns:64px 1fr}.row__meta{display:none}}

/* --- notfound: notfound.css --- */
/* Страница 404: крупное «404», «терминал» с запросом и ответом сервера, пояснение и кнопки.
   Фон-сетка как у первого экрана. Адрес в «терминале» подставляет скрипт в элементы [data-ui-path]. */
.nf{padding:var(--sec-y) 0;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:40px 40px}
.nf__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad-x);width:100%}
.nf__n{font-family:var(--grotesk);font-size:clamp(5rem,22vw,18rem);font-weight:700;line-height:.8;letter-spacing:-.06em;color:var(--accent-display);-webkit-text-stroke:var(--accent-display-stroke)}
.nf__top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.6rem,4vw,4rem);align-items:start}
.nf__term{font-family:var(--mono);background:var(--term-bg);color:var(--code-fg);padding:1.2rem 1.4rem;overflow-x:auto;font-size:.85rem;line-height:1.6;border:var(--border-thin);margin:0;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:var(--shadow-sm)}
.nf__term .g{color:var(--term-green)}
.nf__term .a{color:var(--term-amber)}
.nf__h{margin-top:clamp(1.8rem,3vw,2.6rem)}
.nf__lead{font-family:var(--sans);font-size:1.08rem;line-height:1.6;max-width:60ch;margin-top:1rem;color:var(--text-dim)}
.nf__btns{margin-top:1.6rem}
.nf__rows{margin-top:1.4rem}
.nf__rows .row{grid-template-columns:104px 1fr}
@media (max-width:900px){.nf__top{grid-template-columns:1fr}}

/* --- notice: notice.css --- */
/* Уведомление: полоса слева показывает вид сообщения. */
.notice{font-family:var(--sans);font-size:.95rem;line-height:1.45;padding:.7rem .9rem;border-left:4px solid var(--fg);background:var(--surface)}
.notice--error{background:var(--danger-tint);border-left-color:var(--danger)}
.notice--ok{background:var(--ok-tint);border-left-color:var(--ok)}
.notice--info{background:var(--surface)}

/* --- page: page.css --- */
/* Каркас страницы сервиса: занимает всю высоту окна между шапкой и подвалом. */
.page__back{font-size:calc(var(--fs-micro) * var(--control-size-k));letter-spacing:calc(.14em * var(--control-tracking-k));text-transform:var(--control-case);margin-bottom:1.2rem}
.page__back a{border-bottom:2px solid var(--fg);padding-bottom:2px}
.page__back a:hover{border-bottom-color:var(--safety);color:var(--safety-text)}
.page{flex:1;padding:clamp(1.2rem,3vw,2.4rem) 0 3rem}
.page__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad-x);display:flex;flex-direction:column;gap:1.4rem}
.page__in--narrow{max-width:640px}
.page__h{font-family:var(--grotesk);font-weight:700;font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.05;letter-spacing:-.03em}
.page__lead{font-family:var(--sans);font-size:1.05rem;line-height:1.5;color:var(--text-soft);max-width:70ch}
/* внутри другой раскладки (.side-nav): поля и ширину задаёт она */
.page--flush{padding:0}
.page--flush .page__in{max-width:none;padding:0}

/* --- pagination: pagination.css --- */
/* Пагинация. По умолчанию — ряд страниц в рамках, текущая чёрная (.is-current).
   .pager--text — спокойный вариант для кабинетов: «Новее», номер страницы, «Старее» без рамок. */
.pager{display:flex;gap:.6rem;justify-content:center;margin-top:2.6rem;flex-wrap:wrap}
.pager>a:not(.btn),.pager>span{font-family:var(--font-body);font-size:.8rem;font-weight:700;padding:.7rem 1.1rem;border:var(--border-thin)}
.pager .is-current{background:var(--solid);color:var(--on-solid)}
.pager>a:not(.btn):hover{box-shadow:var(--shadow-sm)}

.pager--text{gap:1rem;align-items:center;justify-content:flex-start;margin-top:0;flex-wrap:nowrap;font-size:calc(var(--fs-micro) * var(--control-size-k));letter-spacing:calc(.14em * var(--control-tracking-k));text-transform:var(--control-case)}
.pager--text>a:not(.btn),.pager--text>span{font-family:inherit;font-size:inherit;font-weight:inherit;padding:0;border:0}
.pager--text>a:not(.btn):hover{box-shadow:none}

/* --- progress: progress.css --- */
/* Индикатор выполнения на <progress>. Без значения — неопределённое состояние. */
.progress{-webkit-appearance:none;appearance:none;display:block;width:100%;height:var(--progress-h,1rem);border:var(--border-thin);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);overflow:hidden;vertical-align:middle}
.progress::-webkit-progress-bar{background:var(--bg)}
.progress::-webkit-progress-value{background:var(--solid);transition:width .3s}
.progress::-moz-progress-bar{background:var(--solid)}
.progress--safety::-webkit-progress-value{background:var(--safety)}
.progress--safety::-moz-progress-bar{background:var(--safety)}
.progress--ok::-webkit-progress-value{background:var(--ok)}
.progress--ok::-moz-progress-bar{background:var(--ok)}
.progress--thin{--progress-h:.5rem}
/* Неопределённое состояние: бегущие полосы */
.progress:indeterminate{background:repeating-linear-gradient(90deg,var(--fg) 0 .7rem,var(--bg) .7rem 1.4rem);background-size:2.8rem 100%;animation:progress-run 1s linear infinite}
.progress:indeterminate::-webkit-progress-bar{background:transparent}
.progress:indeterminate::-moz-progress-bar{background:transparent}
.progress--safety:indeterminate{background-image:repeating-linear-gradient(90deg,var(--safety) 0 .7rem,var(--bg) .7rem 1.4rem)}
@keyframes progress-run{to{background-position:2.8rem 0}}
/* С подписью и процентом */
.progress-field{display:flex;flex-direction:column;gap:.45rem}
.progress-field__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.progress-field__value{color:var(--accent-label);font-size:.8rem;letter-spacing:.04em}
.progress-field__note{font-family:var(--sans);font-size:.85rem;color:var(--muted)}
.progress+.progress,.progress-field+.progress-field,.progress-field+.progress{margin-top:1rem}

/* --- terminal: terminal.css --- */
/* Статичное окно «терминала»: чёрный фон, оранжевая жёсткая тень, три индикатора в заголовке.
   Внутри текста цвет строк задают .term__green, .term__amber и .term__dim.
   .req — тёмная таблица «параметр — значение» для такого окна. */
.term{background:var(--term-bg);color:var(--on-ink-soft);border:var(--border);box-shadow:var(--shadow-safety);overflow:hidden;margin-top:2.2rem}
.term__bar{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-bottom:1px solid rgba(255,255,255,.14);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-muted)}
.term__bar i{width:9px;height:9px;border-radius:50%;background:var(--text-soft);display:inline-block}
.term__bar i:nth-child(1){background:var(--term-red)}
.term__bar i:nth-child(2){background:var(--dot-amber)}
.term__bar i:nth-child(3){background:var(--dot-green)}
.term__title{margin-left:.6rem}
.term__body{padding:1.6rem clamp(1rem,2.5vw,2rem);font-size:.94rem;line-height:1.75}
.term__body p{margin-bottom:1rem}
.term__body p:last-child{margin-bottom:0}
.term__body b{color:#fff}
.term__green{color:var(--term-green)}
.term__amber{color:var(--term-amber)}
.term__dim{color:var(--muted)}

.req{width:100%;border-collapse:collapse;font-size:.86rem;margin-top:1rem}
.req td{padding:.55rem .7rem;border-bottom:1px solid rgba(255,255,255,.12)}
.req td:first-child{color:var(--on-ink-muted);white-space:nowrap}

/* --- proof: proof.css --- */
/* Доказательства: карточки со ссылками в четыре колонки (две, затем одна на узком экране).
   Карточка-картинка — .proof__i--image. Если сверху стоит окно терминала, между ним и сеткой отступ. */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.2rem}
.proof__i{background:var(--bg);border:var(--border-thin);padding:1.5rem 1.4rem}
.proof__i b{display:block;font-family:var(--grotesk);font-size:1.12rem;margin-bottom:.5rem}
.proof__i a{color:var(--safety-text);text-decoration:underline;text-underline-offset:3px}
.proof__i--image{padding:0;overflow:hidden}
.proof__img{width:100%;height:100%;object-fit:cover;display:block}
.term + .proof{margin-top:2.2rem}

@media (max-width:1180px){.proof{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.proof{grid-template-columns:1fr}}

/* --- prose: prose.css --- */
/* Текст статьи и текстовой страницы. Колонка шириной --read, шрифт IBM Plex Sans.
   .prose — статья (по центру), .prose--page — текстовая страница (у левого края, заголовки чуть плотнее).
   Внутри: абзацы, заголовки, списки, ссылки, картинки, таблицы, цитаты, код и подсветка rouge (.highlight),
   встраиваемые плееры, буквица (.firstcharacter). Врезка — отдельный компонент callout. */

/* Буквица: латинские заглавные крупнее кириллических (у кириллицы Ц, Щ есть выносной элемент, латиница рядом выглядела короче) */
@font-face{
  font-family:'Plex Dropcap';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  size-adjust:100%;
  src:url('/ui/fonts/ibm-plex-sans-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'Plex Dropcap';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  size-adjust:100%;
  src:url('/ui/fonts/ibm-plex-sans-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Plex Dropcap';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  size-adjust:115%;
  ascent-override:89.1%;
  descent-override:23.9%;
  line-gap-override:0%;
  src:url('/ui/fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Plex Dropcap';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  size-adjust:115%;
  ascent-override:89.1%;
  descent-override:23.9%;
  line-gap-override:0%;
  src:url('/ui/fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* width:100% — во флекс-колонке (страница сервиса, page__in) колонка с полями auto иначе сжимается по содержимому,
   и длинная строка кода раздвигает её до --read на телефоне (BUKATCHUK-305, как side-nav в BUKATCHUK-285);
   overflow-wrap — длинное слово без пробелов (адрес ссылки) переносится, если не помещается в строку */
.prose{width:100%;max-width:var(--read);margin:0 auto;font-family:var(--sans);font-size:var(--fs-prose);line-height:1.72;color:var(--prose-fg);overflow-wrap:break-word}
.prose p{margin:0 0 1.25rem}
.prose h2{font-size:clamp(1.3rem,2.2vw,1.8rem);margin:2.6rem 0 1rem}
.prose h3{font-size:clamp(1.08rem,1.6vw,1.3rem);margin:2rem 0 .8rem}
.prose ul,.prose ol{margin:0 0 1.25rem;padding-left:1.4rem}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:.5rem}
.prose a{color:var(--safety-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose img{border:var(--border-thin);margin:1.6rem 0}
.prose hr{border:0;border-top:var(--border-thin);margin:2.4rem 0}
.prose blockquote{border-left:6px solid var(--safety);background:var(--surface);padding:1.2rem 1.4rem;margin:1.8rem 0;font-style:normal}
.prose blockquote p:last-child{margin-bottom:0}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--surface);border:var(--hair);padding:.1rem .35rem}
/* длинный код в строке (путь, адрес) переносится в любом месте, а не раздвигает страницу на телефоне (BUKATCHUK-305) */
.prose :not(pre)>code{overflow-wrap:anywhere}
.prose pre{font-family:var(--mono);background:var(--term-bg);color:var(--code-fg);padding:1.2rem 1.4rem;overflow-x:auto;margin:1.6rem 0;font-size:.85rem;line-height:1.6;border:var(--border-thin)}
.prose pre code{background:none;border:0;padding:0;color:inherit}
.prose pre .c{color:var(--muted)}
.prose pre .g{color:var(--term-green)}
.prose pre .a{color:var(--term-amber)}

/* текстовая страница: колонка у левого края, заголовки и ссылки без отличий статьи */
.prose--page{margin:0;color:inherit}
.prose--page h2{margin:2.4rem 0 1rem}
.prose--page h3{font-size:var(--fs-h3);margin:1.8rem 0 .7rem}
.prose--page a{text-decoration-thickness:auto}

/* буквица */
.prose .firstcharacter{float:left;font-family:'Plex Dropcap','IBM Plex Sans',var(--sans);font-size:5.8rem;line-height:.8;font-weight:700;-webkit-text-stroke:.055em currentColor;padding:.12rem .75rem 0 .04em;color:var(--accent-display);-webkit-text-stroke:var(--accent-display-stroke)}
/* Буквица в высоту ровно трёх строк: браузер сам подбирает размер для любой заглавной (кириллица и латиница).
   Работает через ::first-letter абзаца с буквицей; без поддержки (Firefox) остаётся вариант выше на float. */
@supports ((initial-letter:3) or (-webkit-initial-letter:3)) and selector(:has(a)){
  .prose .firstcharacter{float:none;font:inherit;letter-spacing:inherit;-webkit-text-stroke:0;padding:0;margin:0;color:inherit}
  .prose p:has(>.firstcharacter)::first-letter{-webkit-initial-letter:3;initial-letter:3;font-family:'IBM Plex Sans',var(--sans);font-weight:700;color:var(--accent-display);-webkit-text-stroke:var(--accent-display-stroke);-webkit-text-stroke:.3rem currentColor;margin:0 .9rem 0 .2rem}
}

/* Встраиваемые плееры.
   box-sizing:content-box — обязателен: глобальный border-box съедал бы
   высоту рамки из самого плеера (было 120px в атрибуте → 116px содержимого,
   и плеер обрезался снизу). */
.prose iframe,.prose video{box-sizing:content-box;max-width:100%;border:var(--border-thin);margin:1.6rem 0;display:block}
.prose iframe[src*="mixcloud"]{width:100%;height:120px}
.prose iframe[src*="soundcloud"]{width:100%;height:166px}
.prose iframe[src*="youtube"],.prose iframe[src*="youtu.be"]{width:100%;height:auto;aspect-ratio:16/9}
.prose iframe[src*="itch.io"]{width:100%}

/* таблицы */
.prose table{width:100%;border-collapse:collapse;font-size:.95rem;margin:1.4rem 0}
.prose td,.prose th{border:var(--hair);padding:.6rem .8rem;text-align:left;vertical-align:top}
.prose th{background:var(--surface);font-weight:700}
/* на узком экране широкая таблица прокручивается в своём блоке, а не раздвигает страницу (BUKATCHUK-305) */
@media (max-width:720px){.prose table{display:block;overflow-x:auto}}

/* подсветка кода (rouge), тёмная */
.prose .highlight{margin:1.6rem 0}
.prose .highlight pre{margin:0}
.prose .highlight .c,.prose .highlight .cm,.prose .highlight .c1,.prose .highlight .cs{color:var(--muted);font-style:italic}
.prose .highlight .k,.prose .highlight .kd,.prose .highlight .kn,.prose .highlight .kp,.prose .highlight .kr,.prose .highlight .kt{color:var(--code-key);font-weight:700}
.prose .highlight .s,.prose .highlight .s1,.prose .highlight .s2,.prose .highlight .sb,.prose .highlight .sc,.prose .highlight .sd,.prose .highlight .se,.prose .highlight .sh,.prose .highlight .si,.prose .highlight .sx,.prose .highlight .sr{color:var(--term-green)}
.prose .highlight .m,.prose .highlight .mi,.prose .highlight .mf,.prose .highlight .mh,.prose .highlight .mo,.prose .highlight .il{color:var(--term-amber)}
.prose .highlight .na,.prose .highlight .nb,.prose .highlight .nc,.prose .highlight .nf,.prose .highlight .nn,.prose .highlight .nt,.prose .highlight .nv{color:var(--code-fg)}
.prose .highlight .o,.prose .highlight .ow,.prose .highlight .p{color:var(--code-punct)}
.prose .highlight .gd{color:var(--term-red)}
.prose .highlight .gi{color:var(--term-green)}
.prose .highlight .err{color:var(--term-red)}

/* --- radio-group: radio-group.css --- */
/* Группа радиокнопок на <fieldset> с <legend>. Без скрипта: выбор уходит с формой, стрелки работают штатно.
   .radios--square — квадратные индикаторы, .radios--row — варианты в ряд, .radios--cards — карточки .radio-card. */
.radios{border:0;padding:0;margin:0;min-inline-size:0}
.radios__legend{display:block;padding:0;margin-bottom:.7rem;font-family:var(--control-font);font-size:calc(var(--fs-micro) * var(--control-size-k));letter-spacing:calc(.18em * var(--control-tracking-k));text-transform:var(--control-case);font-weight:700}
.radios__items{display:grid;gap:.8rem}
.radios--row .radios__items{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem}
.radio{display:flex;align-items:flex-start;gap:.7rem;cursor:pointer;font-family:var(--sans);font-size:.95rem;line-height:1.45}
.radio__input{-webkit-appearance:none;appearance:none;flex:none;width:1.3rem;height:1.3rem;margin:.05rem 0 0;border:var(--border-thin);border-radius:50%;background:var(--surface);cursor:pointer}
.radios--square .radio__input{border-radius:0}
.radio__input:hover{background:var(--bg)}
.radio__input:checked{background:var(--safety);box-shadow:inset 0 0 0 3px var(--bg)}
.radio__input:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
.radio__input[aria-invalid="true"]{border-color:var(--danger)}
.radio__input:disabled{opacity:.55;cursor:not-allowed}
.radio__text{display:block;min-width:0}
.radio__label{display:block}
.radio__desc{display:block;font-size:.85rem;color:var(--muted)}
.radio__input:disabled ~ .radio__text{opacity:.55}

/* Вариант карточками: рамка вместо индикатора. Сам <input> скрыт, но остаётся в порядке обхода. */
.radios--cards .radios__items{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem}
.radio-card{position:relative;display:block;cursor:pointer}
.radio-card__input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.radio-card__body{display:flex;flex-direction:column;gap:.4rem;height:100%;padding:1rem 1.1rem;border:var(--border-thin);background:var(--surface);color:var(--fg);transition:transform .12s,box-shadow .12s}
.radio-card:hover .radio-card__body{background:var(--bg)}
.radio-card__title{font-family:var(--font-body);font-size:.95rem;font-weight:700;letter-spacing:.04em}
.radio-card__price{font-family:var(--grotesk);font-size:var(--fs-h3);font-weight:700;line-height:1.1}
.radio-card__desc{font-family:var(--sans);font-size:.92rem;line-height:1.45;color:var(--text-soft)}
.radio-card__input:checked + .radio-card__body{background:var(--solid);color:var(--on-solid);box-shadow:var(--shadow-sm);transform:var(--lift-sm)}
.radio-card__input:checked + .radio-card__body .radio-card__desc{color:var(--on-ink-soft)}
.radio-card__input:checked + .radio-card__body .radio-card__price{color:var(--accent-label)}
.radio-card__input:focus-visible + .radio-card__body{outline:3px solid var(--fg);outline-offset:3px}
.radio-card__input[aria-invalid="true"] + .radio-card__body{border-color:var(--danger)}
.radio-card__input:disabled + .radio-card__body{opacity:.55;cursor:not-allowed;background:var(--surface)}
.radio-card:has(.radio-card__input:disabled){cursor:not-allowed}

/* --- reveal: reveal.css --- */
/* Появление при прокрутке. Без скрипта (нет класса .js на html) всё видно сразу:
   прячет элементы только .js, а показывает их reveal.js, добавляя .is-in. */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.js .rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}

/* --- search: search.css --- */
/* Строка поиска. */
.search{display:flex;flex-wrap:wrap;gap:.6rem;max-width:560px}
.search .field__input{flex:1;min-width:12rem;padding:.65rem .8rem}
.search .btn{padding:.65rem 1.1rem}

/* --- section-head: section-head.css --- */
/* Шапка секции: заголовок слева, пояснение справа; на узком экране пояснение уходит под заголовок.
   .sec__lead — вводный абзац под заголовком. */
.sec__head{display:flex;flex-wrap:wrap;gap:1.4rem 3rem;align-items:end;justify-content:space-between;margin-bottom:clamp(1.6rem,2.6vw,2.4rem)}
.sec__head > div:first-child{min-width:0;flex:1 1 440px}
.sec__head p{max-width:46ch;font-size:.95rem;opacity:.8}
.sec__lead{font-size:clamp(1rem,1.3vw,1.22rem);max-width:64ch;margin-top:1.2rem}

/* --- select: select.css --- */
/* Выпадающий список. Системный <select> остаётся в разметке и хранит значение,
   но скрыт: раскрытый системный список нельзя оформить, и на каждой платформе он свой.
   Скрипт оборачивает его в .select и добавляет кнопку со списком.
   Без скрипта виден обычный <select> с рамкой. */
.select__native{font-family:var(--font-body);font-size:.8rem;padding:.8rem 1rem;border:var(--border-thin);background:var(--bg);color:var(--fg);border-radius:var(--radius);min-width:0}
.select{position:relative;display:grid;grid-template-columns:minmax(0,1fr);flex:0 1 auto;min-width:0;max-width:17rem}
.select>.select__native,.select>.select__btn{grid-area:1/1}
.select>.select__native{-webkit-appearance:none;appearance:none;padding-right:2.6rem;visibility:hidden;pointer-events:none;max-width:100%}
.select__btn{font-family:var(--font-body);font-size:.8rem;padding:.8rem 2.6rem .8rem 1rem;border:var(--border-thin);background:var(--bg);color:var(--fg);border-radius:var(--radius);min-width:0;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* стрелка: уголок из двух линий 2px */
.select::after{content:"";position:absolute;right:calc(1rem + 2px);top:calc(50% - 3px);width:8px;height:8px;border-right:2px solid var(--fg);border-bottom:2px solid var(--fg);transform:translateY(-50%) rotate(45deg);pointer-events:none}
.select.is-open .select__btn{box-shadow:var(--shadow-sm)}
.select__list{position:absolute;z-index:var(--z-pop);top:calc(100% + 4px);left:0;min-width:100%;width:max-content;max-width:min(26rem,90vw);max-height:19rem;overflow-y:auto;margin:0;padding:0;list-style:none;background:var(--bg);border:var(--border-thin);box-shadow:var(--shadow-sm)}
.select__list[hidden]{display:none}
.select__opt{font-family:var(--font-body);font-size:.8rem;padding:.7rem 1rem;white-space:normal;cursor:pointer;border-bottom:var(--hair)}
.select__opt:last-child{border-bottom:0}
.select__opt[aria-selected="true"]{background:var(--safety);color:var(--on-safety)}
.select__opt.is-active{background:var(--solid);color:var(--on-solid)}
.select__opt[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
@media (max-width:760px){.select{max-width:100%}}

/* --- side-nav: side-nav.css --- */
/* Меню раздела: колонка ссылок слева и содержимое справа; меню начинается под логотипом, содержимое кончается под правым краем шапки (раскладка витрины /docs). */
/* width и flex — чтобы во флекс-колонке body (подвал прижат к низу) раскладка не сжималась по содержимому и не уезжала от краёв шапки */
.side-nav{display:grid;grid-template-columns:17rem minmax(0,1fr);width:100%;flex:1 0 auto;max-width:var(--wrap);margin:0 auto;align-items:start}
/* линию между меню и содержимым рисует содержимое: оно растянуто на всю высоту раскладки, и линия доходит до подвала при любой высоте меню (BUKATCHUK-306) */
.side-nav__side{position:sticky;top:calc(var(--hdr-h) + 2px);max-height:calc(100dvh - var(--hdr-h));overflow:auto;padding:1.6rem 1rem 2rem var(--pad-x)}
.side-nav__main{align-self:stretch;min-width:0;border-left:var(--border-thin);padding:2rem var(--pad-x) 4rem clamp(1rem,3vw,2.6rem)}
.side-nav__group{font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--accent-label);margin:1.4rem 0 .5rem}
.side-nav__group:first-child{margin-top:0}
.side-nav__link{display:block;font-size:.8rem;padding:.22rem 0;border-left:2px solid transparent;padding-left:.6rem;margin-left:-.6rem}
.side-nav__link:hover{color:var(--menu-hover)}
.side-nav__link.is-active{border-left-color:var(--safety);font-weight:700}
@media (max-width:920px){
  .side-nav{grid-template-columns:1fr}
  .side-nav__side{position:static;max-height:none;border-right:0;border-bottom:var(--border-thin);padding:1rem var(--pad-x)}
  .side-nav__nav{columns:2}
  .side-nav__main{border-left:0;padding:1.4rem var(--pad-x) 3rem}
}

/* --- spec-grid: spec-grid.css --- */
/* Сетка характеристик: три колонки с общей рамкой, ячейка при наведении темнеет.
   Не больше трёх в ряд, чтобы шесть ячеек вставали 3+3. На узком экране две колонки, затем одна;
   нечётная последняя ячейка занимает весь ряд. */
.specs{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--border-thin);border-left:var(--border-thin);margin-top:2.2rem}
.spec{border-right:var(--border-thin);border-bottom:var(--border-thin);padding:1.5rem 1.3rem;display:flex;flex-direction:column;justify-content:space-between;gap:1.6rem;min-height:190px;transition:background .15s,color .15s}
.spec:hover{background:var(--ink);color:var(--base)}
.spec:hover .spec__id{color:var(--accent-label)}
.spec--dark{background:var(--ink);color:var(--base)}
.spec--dark:hover{background:var(--safety);color:var(--on-safety)}
.spec--safety{background:var(--safety);color:var(--on-safety)}
.spec--safety:hover{background:var(--ink)}
.spec__id{display:block;font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-label);font-weight:700;margin-bottom:.7rem}
.spec--safety .spec__id{color:color-mix(in srgb,var(--on-safety) 85%,transparent)}
.spec__label{font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;opacity:.7}
.spec__v{font-family:var(--grotesk);font-size:clamp(1.7rem,3vw,2.6rem);font-weight:700;letter-spacing:-.04em;line-height:.95}
.spec__u{font-family:var(--mono);font-size:.38em;font-weight:400;opacity:.55;margin-left:.3em}
.spec__note{font-size:.82rem;opacity:.72;margin-top:.5rem}

@media (max-width:1180px){
  .specs{grid-template-columns:repeat(2,1fr)}
  .specs > :last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:760px){
  .specs{grid-template-columns:1fr}
  .specs > :last-child:nth-child(odd){grid-column:auto}
}

/* --- stack: stack.css --- */
/* Путь по шагам: крупный номер слева, описание справа; строка при наведении светлеет.
   На узком экране номер встаёт над описанием. Теги под текстом — компонент tag. */
.stack{margin-top:2.2rem;border-top:var(--border-thin)}
.stack__c{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:1.6rem;border-bottom:var(--border-thin);padding:1.9rem 0;transition:background .15s,padding .15s}
.stack__c:hover{background:var(--surface);padding-left:1rem;padding-right:1rem}
.stack__step{font-family:var(--grotesk);font-size:clamp(2.2rem,5vw,4.2rem);font-weight:700;letter-spacing:-.05em;line-height:.85;color:var(--accent-display);-webkit-text-stroke:var(--accent-display-stroke)}
.stack__when{font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:.5rem}
.stack__b h3{margin-bottom:.7rem}
.stack__b p{opacity:.86}
.stack__b .tags{margin-top:1rem}

@media (max-width:860px){.stack__c{grid-template-columns:1fr;gap:.6rem}}

/* --- table: table.css --- */
/* Таблица — настоящая, чтобы заголовки стояли над своими столбцами; прокрутку на узком экране даёт обёртка. */
.table-wrap{overflow-x:auto;border:var(--border-thin)}
.table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.92rem}
.table th{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;text-align:left;background:var(--ink);color:#fff;padding:.6rem .7rem}
.table td{padding:.6rem .7rem;border-top:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.table small{color:var(--muted)}
.table__actions{white-space:nowrap;width:1%;text-align:right}
.table__nowrap{white-space:nowrap;overflow-wrap:normal}
.table .btn{white-space:nowrap}
:where(.table) code{font-family:var(--mono);background:var(--surface);padding:.05rem .35rem;border:1px solid var(--line)}
@media (max-width:860px){.table{min-width:38rem}}
.table--log td{font-size:.8rem}

/* --- tabs: tabs.css --- */
/* Вкладки-ссылки разделов: активная — чёрная, служебная (--accent) — оранжевая. */
.tabs{display:flex;flex-wrap:wrap;gap:.2rem .3rem;border-bottom:var(--border-thin)}
.tabs__item{font-size:calc(var(--fs-micro) * var(--control-size-k));letter-spacing:calc(.16em * var(--control-tracking-k));text-transform:var(--control-case);font-weight:700;padding:.7rem 1rem;border:2px solid transparent;border-bottom:0;margin-bottom:-2px}
.tabs__item:hover{color:var(--menu-hover)}
.tabs__item.is-active:hover{color:#fff}
.tabs__item.is-active{background:var(--solid);color:var(--on-solid)}
.tabs__item--accent{color:var(--accent-label)}
.tabs__item--accent:hover{color:var(--fg)}
.tabs__item--accent.is-active{color:var(--on-safety);background:var(--safety)}
@media (max-width:820px){.tabs__item{padding:.6rem .7rem}}

/* --- ticker: ticker.css --- */
/* Бегущая строка с темами. Чёрная по умолчанию, .ticker--safety — оранжевая,
   .ticker--reverse — движется в обратную сторону. Список выводится дважды (вторая копия в .ticker__dup
   с aria-hidden): так прокрутка замыкается без шва. При наведении замирает. */
.ticker{background:var(--ink);color:var(--base);border-top:var(--border-thin);border-bottom:var(--border-thin);overflow:hidden;padding:1.2rem 0}
.ticker--safety{background:var(--safety);color:var(--on-safety)}
.ticker__track{display:flex;width:max-content;animation:ticker-scroll 90s linear infinite}
.ticker--reverse .ticker__track{animation-direction:reverse;animation-duration:110s}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__dup{display:flex}
.ticker__item{font-family:var(--grotesk);font-weight:700;font-size:clamp(1.4rem,2.5vw,2.5rem);text-transform:uppercase;letter-spacing:-.02em;white-space:nowrap;padding:0 2rem;display:flex;align-items:center;gap:2rem}
.ticker__item::after{content:"";width:12px;height:12px;background:var(--safety);flex-shrink:0}
.ticker--safety .ticker__item::after{background:var(--ink)}
.ticker__item:hover{color:var(--safety)}
.ticker--safety .ticker__item:hover{color:var(--ink)}
@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}.ticker__dup{display:none}.ticker{overflow-x:auto}}

/* --- toast: toast.css --- */
/* Уведомления: стопка у нижнего правого края, не больше нескольких видимых сразу.
   Область создаёт скрипт; на узком экране тосты занимают всю ширину. */
.toasts{position:fixed;right:1rem;bottom:1rem;z-index:var(--z-toast);display:flex;flex-direction:column;gap:.8rem;width:min(24rem,calc(100vw - 2rem));pointer-events:none}
.toast{pointer-events:auto;display:grid;grid-template-columns:1fr auto;align-items:start;gap:.3rem .8rem;padding:.9rem 1rem;border:var(--border-thin);border-left-width:8px;border-radius:var(--radius);background:var(--bg);color:var(--fg);box-shadow:var(--shadow-sm);font-family:var(--sans);font-size:.92rem;line-height:1.45;animation:toast-in .2s ease-out}
.toast.is-leaving{opacity:0;transform:translateX(1rem);transition:opacity .15s,transform .15s}
.toast--ok{border-left-color:var(--ok)}
.toast--error{border-left-color:var(--danger)}
.toast--info{border-left-color:var(--fg)}
.toast__title{grid-column:1;font-family:var(--mono);font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.toast__text{grid-column:1;color:var(--text-soft)}
.toast__close{grid-column:2;grid-row:1;width:1.8rem;height:1.8rem;border:var(--border-thin);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:1rem;font-weight:700;line-height:1;cursor:pointer}
.toast__close:hover{background:var(--ink);color:#fff}
.toast__action{grid-column:1;justify-self:start;margin-top:.4rem;padding:.4rem .7rem;border:var(--border-thin);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);font-family:var(--control-font);font-size:calc(.74rem * var(--control-size-k));font-weight:700;letter-spacing:calc(.09em * var(--control-tracking-k));text-transform:var(--control-case);cursor:pointer}
.toast__action:hover{background:var(--ink);color:#fff}
.toast--ok .toast__title::before{content:"OK \00b7";margin-right:.5em;color:var(--ok)}
.toast--error .toast__title::before{content:"! \00b7";margin-right:.5em;color:var(--danger)}
@keyframes toast-in{from{opacity:0;transform:translateY(.8rem)}to{opacity:1;transform:none}}

/* --- video: video.css --- */
/* Рамка видеоплеера урока: кадр 16:9, водяной знак поверх видео. Дорожки и сам плеер — нативные. */
.video{margin:0}
.video__frame{position:relative;overflow:hidden;aspect-ratio:16/9;border:var(--border-thin);border-radius:var(--radius);background:var(--ink)}
.video__media{display:block;width:100%;height:100%;object-fit:contain;background:var(--ink)}
.video__mark{position:absolute;left:1rem;top:1rem;z-index:1;max-width:calc(100% - 2rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.04em;color:var(--base);opacity:.35;pointer-events:none;-webkit-user-select:none;user-select:none;transition:left 1s ease,top 1s ease}
.video__note{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:1rem;text-align:center;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--base);background:var(--ink)}
.video__caption{margin-top:.55rem;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.video__mark{transition:none}}

/* --- brand: brand.css --- */
/* Исключения темы (BUKATCHUK-344). В основе правил нет: тема бренда кладёт свои в
   brands/<тема>/registry/foundation/brand/brand.css. Файл подключается последним в сборке, поэтому его правила
   перекрывают компоненты без повышения точности селекторов и не действуют в других темах. */