/* Elenkor by Tariq Academy — the site stylesheet. One file, nothing external.
   Part 1 is the design system v1.0 (claude-design/export-v1.0), copied verbatim except where a
   section header says otherwise; update it by pasting the new tokens/*.css over these sections.
   Part 2 is the site layer: page layout from ui_kits/site/kit.css, the kit's inline styles as
   k-* classes (the CSP forbids style attributes) and the pieces the kit does not have. */

/* ===== DS v1.0 · tokens/fonts.css (font paths point to static/fonts/) ===== */
/* Webfonts, self-hosted (Google Fonts, OFL). Inter — интерфейс; Manrope — только имя в связке; JetBrains Mono — готовые фразы для копирования. Подмножества: latin + cyrillic. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/inter-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:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/inter-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/inter-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/inter-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:'Manrope';font-style:normal;font-weight:600 700;font-display:swap;src:url('fonts/manrope-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:'Manrope';font-style:normal;font-weight:600 700;font-display:swap;src:url('fonts/manrope-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600 700;font-display:swap;src:url('fonts/manrope-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600 700;font-display:swap;src:url('fonts/manrope-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 500;font-display:swap;src:url('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 500;font-display:swap;src:url('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 500;font-display:swap;src:url('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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('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}

/* ===== DS v1.0 · tokens/colors.css (+ prefers-color-scheme for the site) ===== */
/* Цвет. Семья Tariq: #012333, #2DAAC7, #F8FAFC. Один акцент — стальной голубой.
   Тема: светлая на :root, тёмная — [data-theme="dark"] на <html> или любом контейнере (ставится скриптом по prefers-color-scheme). Все пары текст/фон ≥ 4.5:1. */
:root{
--navy-950:#001A27;--navy-900:#012333;--navy-850:#0A2E3E;--navy-800:#10394B;--navy-700:#1E4556;--navy-650:#24465A;--navy-600:#3A6074;
--slate-600:#3E5463;--slate-500:#5A6E7B;--slate-400:#8FA6B3;--slate-300:#A9B8C2;--slate-200:#C3D2DB;--slate-150:#D3E0E8;--slate-100:#D5DEE4;--slate-75:#E4EBF0;--slate-50:#EEF2F5;--paper:#F8FAFC;--white:#FFFFFF;
--steel-400:#2DAAC7;--steel-500:#1B8FAD;--steel-550:#1C88A6;--steel-600:#14708A;--steel-700:#0F5A70;--steel-tint:#E3F3F8;--steel-deep:#0D3E50;
--ochre-700:#9A5B00;--ochre-100:#FBF0DC;--ochre-300:#F0B44C;--ochre-900:#3A2A0E;
--mark-1:#012333;--mark-2:#24465A;--mark-3:#1B8FAD;--mark-4:#14708A;
--color-scheme:light;
--bg:var(--paper);--surface:var(--white);--surface-sunken:var(--slate-50);--surface-hover:var(--slate-75);
--line:var(--slate-100);--line-strong:var(--slate-300);
--text:var(--navy-900);--text-2:var(--slate-600);--text-muted:var(--slate-500);
--accent:var(--steel-600);--accent-line:var(--steel-500);--accent-fill:var(--steel-600);--accent-fill-fg:var(--white);--accent-tint:var(--steel-tint);
--action-bg:var(--navy-900);--action-bg-hover:var(--navy-800);--action-fg:var(--white);
--signal:var(--ochre-700);--signal-fill:var(--ochre-700);--signal-fill-fg:var(--white);--signal-tint:var(--ochre-100);
--focus:var(--steel-500);--scrim:rgba(1,35,51,.4);
--link:var(--accent);--link-hover:var(--text);
}
[data-theme="dark"]{
--mark-1:#FFFFFF;--mark-2:#D3E0E8;--mark-3:#2DAAC7;--mark-4:#1C88A6;
--color-scheme:dark;
--bg:var(--navy-900);--surface:var(--navy-850);--surface-sunken:var(--navy-950);--surface-hover:var(--navy-800);
--line:var(--navy-700);--line-strong:var(--navy-600);
--text:var(--paper);--text-2:var(--slate-200);--text-muted:var(--slate-400);
--accent:var(--steel-400);--accent-line:var(--steel-400);--accent-fill:var(--steel-400);--accent-fill-fg:var(--navy-900);--accent-tint:var(--steel-deep);
--action-bg:var(--paper);--action-bg-hover:var(--white);--action-fg:var(--navy-900);
--signal:var(--ochre-300);--signal-fill:var(--ochre-300);--signal-fill-fg:var(--navy-900);--signal-tint:var(--ochre-900);
--focus:var(--steel-400);--scrim:rgba(0,10,16,.6);
--link:var(--accent);--link-hover:var(--text);
}
/* Site: no theme script — the system preference picks the dark values above; <html data-theme="light"> opts out. */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
--mark-1:#FFFFFF;--mark-2:#D3E0E8;--mark-3:#2DAAC7;--mark-4:#1C88A6;
--color-scheme:dark;
--bg:var(--navy-900);--surface:var(--navy-850);--surface-sunken:var(--navy-950);--surface-hover:var(--navy-800);
--line:var(--navy-700);--line-strong:var(--navy-600);
--text:var(--paper);--text-2:var(--slate-200);--text-muted:var(--slate-400);
--accent:var(--steel-400);--accent-line:var(--steel-400);--accent-fill:var(--steel-400);--accent-fill-fg:var(--navy-900);--accent-tint:var(--steel-deep);
--action-bg:var(--paper);--action-bg-hover:var(--white);--action-fg:var(--navy-900);
--signal:var(--ochre-300);--signal-fill:var(--ochre-300);--signal-fill-fg:var(--navy-900);--signal-tint:var(--ochre-900);
--focus:var(--steel-400);--scrim:rgba(0,10,16,.6);
--link:var(--accent);--link-hover:var(--text);
}}
[data-theme="light"]{
--mark-1:#012333;--mark-2:#24465A;--mark-3:#1B8FAD;--mark-4:#14708A;
--color-scheme:light;
--bg:var(--paper);--surface:var(--white);--surface-sunken:var(--slate-50);--surface-hover:var(--slate-75);
--line:var(--slate-100);--line-strong:var(--slate-300);
--text:var(--navy-900);--text-2:var(--slate-600);--text-muted:var(--slate-500);
--accent:var(--steel-600);--accent-line:var(--steel-500);--accent-fill:var(--steel-600);--accent-fill-fg:var(--white);--accent-tint:var(--steel-tint);
--action-bg:var(--navy-900);--action-bg-hover:var(--navy-800);--action-fg:var(--white);
--signal:var(--ochre-700);--signal-fill:var(--ochre-700);--signal-fill-fg:var(--white);--signal-tint:var(--ochre-100);
--focus:var(--steel-500);--scrim:rgba(1,35,51,.4);
}

/* ===== DS v1.0 · tokens/typography.css ===== */
/* Шрифт. Телефон — база; ≥720px крупнее только заголовки. */
:root{
--font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--font-brand:'Manrope','Inter',sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
--fs-display:40px;--lh-display:44px;--ls-display:-0.025em;
--fs-h1:30px;--lh-h1:36px;--ls-h1:-0.02em;
--fs-h2:22px;--lh-h2:28px;--ls-h2:-0.01em;
--fs-h3:18px;--lh-h3:24px;
--fs-lead:19px;--lh-lead:28px;
--fs-body:17px;--lh-body:26px;
--fs-doc:18px;--lh-doc:31px;
--fs-small:15px;--lh-small:22px;
--fs-caption:13px;--lh-caption:18px;
--fs-mono:15px;--lh-mono:22px;
--fs-score:64px;--lh-score:60px;
--fw-regular:400;/* @kind font */--fw-medium:500;/* @kind font */--fw-semibold:600;/* @kind font */--fw-bold:700;/* @kind font */
--ls-eyebrow:0.08em;
}
@media (min-width:720px){:root{--fs-display:56px;--lh-display:60px;--fs-h1:36px;--lh-h1:42px;--fs-h2:24px;--lh-h2:30px}}

/* ===== DS v1.0 · tokens/spacing.css ===== */
/* Отступы (шаг 4), скругления, линии, тени, движение, раскладка. */
:root{
--space-0:2px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-24:96px;
--radius-xs:2px;--radius-sm:4px;--radius-md:6px;--radius-lg:12px;
--border:1px;--border-strong:2px;
--shadow-none:none;--shadow-sheet:0 -12px 40px rgba(1,35,51,.18);--shadow-pop:0 8px 24px rgba(1,35,51,.12);
--ease:cubic-bezier(.2,0,0,1);/* @kind other */--dur-fast:120ms;/* @kind other */--dur:200ms;/* @kind other */--dur-slow:320ms;/* @kind other */
--gutter:16px;--measure:640px;--wide:980px;--aside:320px;--hit:44px;--header-h:56px;
}

/* ===== DS v1.0 · tokens/base.css ===== */
/* Базовые правила элементов. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light dark}
[data-theme="light"]{color-scheme:light}[data-theme="dark"]{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:var(--fs-body);line-height:var(--lh-body);overflow-wrap:break-word;hyphens:manual;-webkit-font-smoothing:antialiased;font-feature-settings:'cv11','ss03'}
[data-theme]{background:var(--bg);color:var(--text)}
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--link-hover)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
h1,h2,h3{margin:0;font-weight:var(--fw-semibold);text-wrap:balance}
p{margin:0;text-wrap:pretty}
code{font-family:var(--font-mono);font-size:.88em;background:var(--surface-sunken);border:1px solid var(--line);border-radius:var(--radius-xs);padding:.05em .35em}
.ds-only-dark{display:none!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ds-only-light{display:none!important}:root:not([data-theme="light"]) .ds-only-dark{display:block!important}}
[data-theme="dark"][data-theme] .ds-only-light{display:none!important}[data-theme="dark"][data-theme] .ds-only-dark{display:block!important}
[data-theme="light"][data-theme] .ds-only-light{display:block!important}[data-theme="light"][data-theme] .ds-only-dark{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== DS v1.0 · tokens/components.css ===== */
/* Компоненты сайта. Классы ds-*; React-компоненты в components/ ставят эти классы. */

/* Раскладка */
.ds-wrap{width:100%;max-width:var(--measure);margin:0 auto;padding:0 var(--gutter)}
.ds-wrap--wide{max-width:var(--wide)}
.ds-eyebrow{font:var(--fw-semibold) var(--fs-caption)/var(--lh-caption) var(--font-ui);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.ds-h1{font:var(--fw-semibold) var(--fs-h1)/var(--lh-h1) var(--font-ui);letter-spacing:var(--ls-h1)}
.ds-h2{font:var(--fw-semibold) var(--fs-h2)/var(--lh-h2) var(--font-ui);letter-spacing:var(--ls-h2)}
.ds-h3{font:var(--fw-semibold) var(--fs-h3)/var(--lh-h3) var(--font-ui)}
.ds-display{font:var(--fw-semibold) var(--fs-display)/var(--lh-display) var(--font-ui);letter-spacing:var(--ls-display)}
.ds-small{font-size:var(--fs-small);line-height:var(--lh-small)}
.ds-muted{color:var(--text-muted)}
.ds-stack>*+*{margin-top:var(--space-3)}

/* Шапка и подвал */
.ds-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:var(--header-h);padding:var(--space-2) var(--gutter)}
.ds-header__brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none}
.ds-header__brand:hover{color:var(--text)}
.ds-header__name{font:var(--fw-bold) 20px/1 var(--font-brand);letter-spacing:-0.01em}
.ds-header__sub{font:var(--fw-semibold) 12px/1 var(--font-brand);color:var(--text-muted);padding-top:3px}
.ds-footer{border-top:1px solid var(--line);padding:var(--space-5) var(--gutter) var(--space-10);font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text-muted);display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);align-items:center}
.ds-footer a{color:var(--text-2);text-decoration:none}.ds-footer a:hover{color:var(--text);text-decoration:underline}
.ds-footer__by{margin-left:auto;font:var(--fw-semibold) 13px/18px var(--font-brand)}

/* Кнопки */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--hit);padding:11px 18px;font:var(--fw-semibold) 16px/20px var(--font-ui);letter-spacing:-0.005em;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.ds-btn:hover{border-color:var(--text);color:var(--text)}
.ds-btn:active{transform:translateY(1px)}
.ds-btn--primary{background:var(--action-bg);border-color:var(--action-bg);color:var(--action-fg)}
.ds-btn--primary:hover{background:var(--action-bg-hover);border-color:var(--action-bg-hover);color:var(--action-fg)}
.ds-btn--big{width:100%;min-height:56px;padding:17px 20px;font-size:18px;line-height:22px}
.ds-btn--small{min-height:32px;padding:5px 10px;font-size:14px;line-height:20px;gap:6px}
.ds-btn--done{color:var(--accent);border-color:var(--accent-line)}
.ds-btn[disabled],.ds-btn[aria-disabled="true"]{background:var(--surface-sunken);border-color:var(--line);color:var(--text-muted);cursor:default;transform:none}
.ds-copy-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3)}

/* Иконка: маска из lucide-static, цвет = currentColor */
.ds-icon{display:inline-block;flex:none;background:currentColor;-webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}

/* Карточка и заметка */
.ds-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-5) var(--space-4)}
.ds-card>*+*{margin-top:var(--space-3)}
.ds-note{background:var(--surface-sunken);border-radius:var(--radius-sm);padding:var(--space-3) 14px;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text)}
.ds-note--accent{background:var(--accent-tint)}
.ds-note--signal{background:var(--signal-tint)}
.ds-note strong{font-weight:var(--fw-semibold)}

/* Вкладки платформ */
.ds-tabs{display:flex;gap:var(--space-6);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.ds-tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;min-height:var(--hit);padding:var(--space-3) 0 10px;font:var(--fw-semibold) 16px/20px var(--font-ui);color:var(--text-muted);cursor:pointer;text-decoration:none;white-space:nowrap}
.ds-tab:hover{color:var(--text)}
.ds-tab[aria-selected="true"],.ds-tab[aria-current="page"]{color:var(--text);border-bottom-color:var(--text)}
.ds-seg{display:inline-flex;padding:2px;gap:2px;background:var(--surface-sunken);border-radius:var(--radius-sm)}
.ds-seg .ds-tab{border:0;margin:0;min-height:36px;padding:7px 14px;border-radius:3px;font-size:15px}
.ds-seg .ds-tab[aria-selected="true"]{background:var(--surface);color:var(--text);box-shadow:0 0 0 1px var(--line)}

/* Проверка: шапка, таймер */
.ds-exam-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3)}
.ds-stake{font:var(--fw-semibold) 19px/26px var(--font-ui);letter-spacing:-0.01em}
@media (min-width:720px){.ds-stake{font-size:22px;line-height:30px}}
.ds-timer{display:inline-flex;align-items:center;gap:6px;flex:none;position:sticky;top:var(--space-2);min-height:40px;padding:0 10px;font:var(--fw-semibold) 20px/1 var(--font-ui);font-variant-numeric:tabular-nums;letter-spacing:0;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-sm);color:var(--text);white-space:nowrap}
.ds-timer--low{color:var(--signal);border-color:var(--signal);background:var(--signal-tint)}

/* Проверка: лист и предложения */
.ds-doc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-5) var(--space-4) var(--space-1);font:var(--fw-regular) var(--fs-doc)/var(--lh-doc) var(--font-ui);color:var(--text)}
.ds-doc p{margin:0 0 var(--space-5)}
.ds-s{cursor:pointer;border-radius:var(--radius-xs);padding:.32em 1px;margin:-.32em -1px;-webkit-box-decoration-break:clone;box-decoration-break:clone;-webkit-tap-highlight-color:transparent;transition:background var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.ds-s:hover,.ds-s:focus-visible{background:var(--surface-hover);outline:none}
.ds-s--choosing,.ds-s--choosing:hover{background:var(--accent-tint);box-shadow:0 0 0 1.5px var(--accent-line)}
.ds-s--marked,.ds-s--marked:hover{background:var(--accent-tint);box-shadow:inset 0 -2px 0 var(--accent-line)}
.ds-reason{display:inline-block;margin-left:6px;padding:0 6px;font:var(--fw-semibold) 12px/20px var(--font-ui);letter-spacing:.01em;background:var(--accent-fill);color:var(--accent-fill-fg);border-radius:var(--radius-xs);vertical-align:2px;white-space:nowrap}
.ds-reason--pending{background:transparent;color:var(--accent-fill);box-shadow:inset 0 0 0 1px var(--accent-fill)}
.ds-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-3) 0 var(--space-4)}
.ds-chip{appearance:none;min-height:var(--hit);padding:10px 14px;font:var(--fw-medium) 15px/20px var(--font-ui);background:var(--surface);color:var(--text);border:1px solid var(--line-strong);border-radius:var(--radius-sm);cursor:pointer;text-align:left}
.ds-chip:hover{border-color:var(--text)}
.ds-chip:active{transform:translateY(1px)}
.ds-chip[aria-pressed="true"]{background:var(--accent-fill);color:var(--accent-fill-fg);border-color:var(--accent-fill)}
.ds-chip--off{border-style:dashed;color:var(--text-muted)}

/* Проверка: задание и данные */
.ds-refs{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-4)}
.ds-refs__bar{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4)}
.ds-refs__close{margin-left:auto;appearance:none;background:none;border:0;color:var(--text-muted);width:var(--hit);height:var(--hit);display:inline-flex;align-items:center;justify-content:center;margin-right:-10px;cursor:pointer;border-radius:var(--radius-sm)}
.ds-refs__close:hover{color:var(--text)}
.ds-refs--sheet{border:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:var(--bg);box-shadow:var(--shadow-sheet);padding:var(--space-2) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom))}
.ds-refs--sheet::before{content:'';display:block;width:36px;height:4px;border-radius:2px;background:var(--line-strong);margin:0 auto var(--space-2)}
.ds-brief{margin:var(--space-2) 0 0;padding-left:1.1em;font-size:var(--fs-small);line-height:var(--lh-small)}
.ds-brief li+li{margin-top:6px}
.ds-facts{margin:var(--space-2) 0 0}
.ds-fact{padding:var(--space-2) 0;border-bottom:1px solid var(--line)}
.ds-fact:last-child{border-bottom:0}
.ds-fact dt{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-muted)}
.ds-fact dd{margin:2px 0 0;font-size:var(--fs-small);line-height:var(--lh-small);font-variant-numeric:tabular-nums}
.ds-bottombar{display:flex;gap:var(--space-2);padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}
.ds-bottombar>*{flex:1}
.ds-bottombar .ds-btn{padding-left:8px;padding-right:8px}
.ds-scrim{position:absolute;inset:0;background:var(--scrim)}

/* Результат */
.ds-score{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--space-2) var(--space-4)}
.ds-score__num{font:var(--fw-bold) var(--fs-score)/var(--lh-score) var(--font-ui);letter-spacing:-0.04em;font-variant-numeric:tabular-nums}
.ds-score__of{font-size:var(--fs-small);color:var(--text-muted);padding-bottom:6px}
.ds-level{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;font:var(--fw-semibold) 15px/1 var(--font-ui);background:var(--action-bg);color:var(--action-fg);border-radius:var(--radius-sm)}
.ds-status{display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 6px;font:var(--fw-semibold) 13px/16px var(--font-ui);border:1px solid transparent;border-radius:var(--radius-xs);white-space:nowrap}
.ds-status__glyph{width:10px;height:10px;flex:none;border:1.5px solid currentColor;border-radius:1px}
.ds-status--found{background:var(--accent-fill);color:var(--accent-fill-fg);border-color:var(--accent-fill)}
.ds-status--found .ds-status__glyph{background:currentColor}
.ds-status--wrong{color:var(--accent);border-color:var(--accent-line);background:var(--surface)}
.ds-status--wrong .ds-status__glyph{background:linear-gradient(135deg,currentColor 50%,transparent 50%)}
.ds-status--missed{background:var(--signal-fill);color:var(--signal-fill-fg);border-color:var(--signal-fill)}
.ds-status--false{color:var(--text-muted);border:1px dashed var(--line-strong);background:var(--surface)}
.ds-status--false .ds-status__glyph{border-style:dashed}
.ds-reveal{list-style:none;margin:0;padding:0;counter-reset:rv}
.ds-rv{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:var(--space-2);padding:var(--space-5) 0;border-top:1px solid var(--line)}
.ds-rv__n{font:var(--fw-semibold) var(--fs-caption)/24px var(--font-ui);color:var(--text-muted);font-variant-numeric:tabular-nums}
.ds-rv__body>*+*{margin-top:var(--space-3)}
.ds-rv__head{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--space-2);font-size:var(--fs-small);line-height:var(--lh-small)}
.ds-rv__kind{font-weight:var(--fw-semibold)}
.ds-rv__quote{background:var(--surface-sunken);border-radius:var(--radius-sm);padding:10px 12px;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text-2)}
.ds-rv__quote::before{content:'«'}.ds-rv__quote::after{content:'»'}
.ds-rv__catch{font-size:var(--fs-small);line-height:var(--lh-small)}

/* Готовая фраза */
.ds-phrase{position:relative;background:var(--surface-sunken);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-3) var(--space-3) 14px;font:var(--fw-regular) var(--fs-mono)/var(--lh-mono) var(--font-mono);color:var(--text);white-space:pre-wrap;word-break:break-word}
.ds-phrase-block>*+*{margin-top:var(--space-2)}
.ds-done{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-small);color:var(--accent)}

/* Таблица */
.ds-table{width:100%;border-collapse:collapse;font-size:var(--fs-small);line-height:var(--lh-small)}
.ds-table th,.ds-table td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
.ds-table th{font-size:var(--fs-caption);font-weight:var(--fw-semibold);color:var(--text-muted);border-bottom-color:var(--line-strong)}
.ds-table td:first-child{color:var(--text)}.ds-table td{color:var(--text-2)}
@media (max-width:559px){
.ds-table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ds-table--stack tr{display:block;padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
.ds-table--stack td{display:grid;grid-template-columns:76px minmax(0,1fr);gap:var(--space-2);padding:2px 0;border:0}
.ds-table--stack td:first-child{display:block;font-weight:var(--fw-medium);padding-bottom:6px}
.ds-table--stack td:not(:first-child)::before{content:attr(data-label);color:var(--text-muted);font-size:var(--fs-caption)}
}

/* Шаги */
.ds-steps{margin:0;padding:0;list-style:none;counter-reset:st}
.ds-steps>li{position:relative;padding:0 0 var(--space-4) 36px;counter-increment:st;font-size:var(--fs-body);line-height:var(--lh-body)}
.ds-steps>li::before{content:counter(st);position:absolute;left:0;top:1px;width:24px;height:24px;border:1px solid var(--line-strong);border-radius:var(--radius-xs);font:var(--fw-semibold) 13px/22px var(--font-ui);text-align:center;color:var(--text-2)}
.ds-steps strong{font-weight:var(--fw-semibold)}

/* ===== Site layer ===== */
/* Mobile first: 16px gutter (--gutter), one column of --measure, no horizontal scroll at 375px. */

[hidden] { display: none !important; }
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
b, strong { font-weight: var(--fw-semibold); }

/* Header and footer: the wrapper only centres, the inner row carries the gutter (kit: style padding 0). */
.k-bare { padding: 0; }
.k-brand-text { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

/* Mark: the polygons of components/brand/Mark.jsx, faces coloured by --mark-1..4. */
.ds-mark { display: block; flex: none; }
.ds-mark .m1 { fill: var(--mark-1); stroke: var(--mark-1); }
.ds-mark .m2 { fill: var(--mark-2); stroke: var(--mark-2); }
.ds-mark .m3 { fill: var(--mark-3); stroke: var(--mark-3); }
.ds-mark .m4 { fill: var(--mark-4); stroke: var(--mark-4); }

/* Lucide icons, inline: 18px in buttons, 16px in small buttons and the copy status, 22px to close. */
.k-ic { display: inline-block; flex: none; width: 18px; height: 18px; }
.ds-btn--small .k-ic, .ds-done .k-ic { width: 16px; height: 16px; }
.ds-refs__close .k-ic { width: 22px; height: 22px; }

/* Focus rings that a scrolling parent would clip are drawn inside. */
.ds-tabs .ds-tab:focus-visible { outline-offset: -2px; }

/* Page rhythm (kit.css) */
.k-main { padding-top: 12px; padding-bottom: 48px; }
.k-hero { padding-top: 28px; }
.k-hero > * + * { margin-top: 16px; }
.k-hero > .ds-eyebrow + * { margin-top: 8px; }
.k-hero > .k-cta { padding-top: 8px; }
.k-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.k-sec > * + * { margin-top: 16px; }
.k-sec > h2 { margin-top: 32px; }
.k-sec > .ds-eyebrow + h1 { margin-top: 4px; }
.k-sec > h2 + .ds-reveal { margin-top: 8px; }
.k-list { margin: 0; padding-left: 1.2em; }
.k-list li + li { margin-top: 8px; }
.k-panel > * + * { margin-top: 16px; }
.k-panel > h2 { margin-top: 32px; }

/* Exam. Phones (below 720px): the brief and the data as a compact card above
   the text; once it has scrolled away, a strip pinned to the top opens them
   under it on a tap, and the text stays in view below. From 720px they sit
   beside the text: a narrow column up to 899px, the full aside from 900px. */
.k-exam { padding-bottom: 88px; }
.k-exam-title { min-width: 0; }
.k-exam-title .ds-eyebrow { margin-bottom: 4px; }
.k-exam .k-bar, .k-exam .k-practice { margin-top: 12px; }
.k-task { margin: 12px 0 16px; }
.k-exam-grid { display: block; }
.k-refs { padding: 12px 14px; margin-bottom: 16px; }
.k-refs .k-rule { margin: 12px 0; }
@media (max-width: 719.98px) { .k-refs .ds-h3 { font-size: var(--fs-small); line-height: var(--lh-small); } }
.k-refs .ds-brief { margin-top: 6px; }
.k-refs .ds-facts { margin-top: 2px; }
.ds-facts .ds-fact { display: grid; grid-template-columns: minmax(84px, 36%) minmax(0, 1fr); gap: 0 12px; align-items: baseline; padding: 6px 0; }
.ds-facts .ds-fact dd { margin: 0; overflow-wrap: anywhere; }
.k-rule { height: 1px; background: var(--line); margin: 16px 0; }
.k-submit { display: none; }
.k-error { margin-top: 12px; }
.k-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; }
.k-bottom__count { align-self: center; }
.ds-s { scroll-margin-top: 64px; }
.k-pin {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; margin: 0 calc(-1 * var(--gutter)) 12px;
  background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
@media (max-width: 719.98px) {
  .k-exam-grid > .k-refs { display: none; }
  /* the strip shows the time; the head timer stays for screen readers (role=timer) */
  .ds-exam-head > .ds-timer { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
.k-pin--open { box-shadow: var(--shadow-pop); }
.k-pin__bar { display: flex; align-items: center; gap: 8px; padding: 4px var(--gutter); }
.k-pin__toggle {
  flex: 1; min-width: 0; min-height: var(--hit); display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 0; background: none; border: 0; color: var(--text); cursor: pointer; text-align: left;
  font: var(--fw-semibold) var(--fs-small)/var(--lh-small) var(--font-ui);
}
.k-pin__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-pin__hint { margin-left: auto; color: var(--text-muted); font-weight: var(--fw-regular); }
.k-pin__toggle .k-ic { flex: none; transition: transform var(--dur-fast) var(--ease); }
.k-pin--open .k-pin__toggle .k-ic { transform: rotate(180deg); }
.k-pin__timer { position: static; min-height: 32px; font-size: 17px; }
.k-pin__panel {
  max-height: 45vh; max-height: 45dvh; overflow: auto; overscroll-behavior: contain;
  padding: 0 var(--gutter) 12px; border-top: 1px solid var(--line);
}
.k-pin__h { margin: 12px 0 6px; font-size: var(--fs-small); line-height: var(--lh-small); }
.k-reasons {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  background: var(--bg); border-top: 1px solid var(--line); box-shadow: var(--shadow-sheet);
  padding: 8px var(--gutter) calc(12px + env(safe-area-inset-bottom));
}
.k-reasons > * { max-width: var(--wide); margin-left: auto; margin-right: auto; }
.k-reasons__q { margin-bottom: 8px; }
.k-reasons .ds-chips { margin-top: 0; margin-bottom: 0; }
@media (min-width: 720px) {
  .k-bottom, .k-pin { display: none; }
  .k-submit { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
  .k-exam { padding-bottom: 48px; }
  .k-exam-grid { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 16px; align-items: start; }
  .k-exam-grid > .ds-doc { grid-column: 1; grid-row: 1; }
  .k-exam-grid > .k-refs { grid-column: 2; grid-row: 1; margin: 0; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
  .ds-facts .ds-fact { display: block; padding: var(--space-2) 0; }
  .ds-facts .ds-fact dd { margin-top: 2px; }
}
@media (min-width: 900px) {
  .k-exam-grid { grid-template-columns: minmax(0, 1fr) var(--aside); }
  .k-refs { padding: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .k-pin__toggle .k-ic { transition: none; }
}

/* Result */
.k-score-side { display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; }
.k-score-side .ds-score__of { padding: 0; }
.k-share-text { font-size: 18px; line-height: 26px; font-weight: var(--fw-semibold); }
.k-share-url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-card > .k-share-url { margin: 8px -4px -4px; padding: 4px; } /* room for the focus ring inside overflow: hidden */
.k-share-url a { font: var(--fw-regular) 13px/20px var(--font-mono); }
.k-two { display: grid; gap: 16px; }
.k-two > * > * + * { margin-top: 8px; }
@media (min-width: 520px) { .k-two { grid-template-columns: 1fr 1fr; } }

/* A technique (result card and /technique/…) */
.k-tech > * + * { margin-top: 12px; }
.k-tech > .ds-eyebrow + * { margin-top: 4px; }
.k-tech .ds-steps > li:last-child { padding-bottom: 0; }
/* The ready prompt is long: a bounded, scrollable box, as the textarea it replaces was. */
.k-tech .ds-phrase { max-height: calc(var(--lh-mono) * 9 + 26px); overflow: auto; overscroll-behavior: contain; }

/* Copy row inside a sentence of /install steps (CopyBlock variant="inline") */
.k-inline { display: inline-flex; vertical-align: middle; }
.ds-steps code { -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Sign-in pages (internal/oauth): the same system, a form in a card. */
.k-auth { padding-top: 12px; }
.k-auth > .ds-card > h1 + * { margin-top: 16px; }
.k-label { display: block; margin: 16px 0 6px; font: var(--fw-semibold) var(--fs-small)/var(--lh-small) var(--font-ui); }
.k-input {
  display: block; width: 100%; min-height: var(--hit); padding: 9px 12px;
  font: var(--fw-regular) var(--fs-body)/24px var(--font-ui); color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease);
}
.k-input:hover { border-color: var(--text); }
.k-input--mono { font: var(--fw-regular) var(--fs-mono)/24px var(--font-mono); }
.k-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.k-auth details.code > summary { cursor: pointer; padding: 10px 0; color: var(--text-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.k-auth details.code > summary:hover { color: var(--text); }
/* Apple and Google buttons keep their own colours (their brand rules); size, type and radius are ours. */
.k-idp {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px;
  margin: 0; padding: 0 16px; border: 1px solid; border-radius: var(--radius-sm);
  font: var(--fw-semibold) 17px/22px var(--font-ui); text-decoration: none; cursor: pointer;
}
.k-idp:active { transform: translateY(1px); }
.k-idp svg { width: 20px; height: 20px; flex: none; }
.k-idp-apple, .k-idp-apple:hover { background: #000; color: #fff; border-color: #000; }
.k-idp-google, .k-idp-google:hover { background: #fff; color: #1f1f1f; border-color: #747775; }
.k-idp + .k-idp, .k-idp-form + .k-idp-form { margin-top: 12px; }
.k-idp-form { margin: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .k-idp-apple, :root:not([data-theme="light"]) .k-idp-apple:hover { background: #fff; color: #000; border-color: #fff; }
  :root:not([data-theme="light"]) .k-idp-google, :root:not([data-theme="light"]) .k-idp-google:hover { background: #131314; color: #e3e3e3; border-color: #8e918f; }
}
[data-theme="dark"] .k-idp-apple, [data-theme="dark"] .k-idp-apple:hover { background: #fff; color: #000; border-color: #fff; }
[data-theme="dark"] .k-idp-google, [data-theme="dark"] .k-idp-google:hover { background: #131314; color: #e3e3e3; border-color: #8e918f; }
.k-hint { margin-top: 8px; }
.k-auth details.code > * + * { margin-top: 12px; }

/* onboarding: the hint above the text, the empty-submit note, the details after the start button */
.k-doc-hint { margin: 0 0 var(--space-3); }
.k-empty { margin: 12px 0 0; }
.k-empty--bottom { margin: 0; border-radius: 0; padding-left: var(--gutter); padding-right: var(--gutter); }
.k-more { margin-top: var(--space-4); color: var(--text-2); }
.k-more p { margin: 0 0 var(--space-2); }

/* ===== sandbox (/s) =====
   The approved round-2 mockups (Claude Design canvas-v2/sbox.css, 22.10) on the site's DS tokens
   above: the page is its own column (.sb) with a top bar, the path of steps, the step and a sticky
   bottom bar with one main button. Everything secondary sits under «подробнее» (.sb-more).
   The ds-* components are restated under .sb with the mockup's exact values; no inline styles
   (the /s CSP has no 'unsafe-inline'). */
.sb{position:relative;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;max-width:640px;margin:0 auto;overflow-x:clip;background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;font-feature-settings:'cv11','ss03';overflow-wrap:break-word}
.sb h1,.sb h2,.sb h3{margin:0;font-weight:600;text-wrap:balance}
.sb p{margin:0;text-wrap:pretty}
.sb a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.sb a:hover{color:var(--link-hover)}
.sb :focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sb [tabindex="-1"]:focus{outline:none}
.sb .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sb svg.ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sb svg.ic--20{width:20px;height:20px}
.sb-app{display:flex;flex-direction:column;flex:1 0 auto}
.sb-noscript{margin:0 var(--gutter)}

/* top bar: the mark + the name, the section on the right */
.sb-top{display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h);padding:8px var(--gutter)}
.sb .sb-brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none}
.sb-brand .ds-mark{width:30px;height:30px}
.sb-brand__name{font:700 20px/1 var(--font-brand);letter-spacing:-0.01em}
.sb-top__section{margin-left:auto;font:500 15px/20px var(--font-ui);color:var(--text-2)}
.sb-top__lang{margin-left:16px;padding:12px 0;font:500 15px/20px var(--font-ui);color:var(--text-2);text-decoration:underline;text-underline-offset:3px}
.sb-top__lang:hover{color:var(--text)}

/* the path: the stops and the line of the way done; a stop already reachable is a button */
.sb-journey{padding:4px var(--gutter) 28px}
.sb-path{display:flex;align-items:center;list-style:none;margin:0;padding:0 2px;height:16px}
.sb-path li{flex:1 1 0;display:flex;align-items:center}
.sb-path li:last-child{flex:0 0 auto}
.sb-path li::after{content:'';flex:1;height:1px;margin:0 6px;background:var(--line-strong)}
.sb-path li:last-child::after{display:none}
.sb-path li.is-done::after{background:var(--text)}
.sb-dot{display:block;width:8px;height:8px;flex:none;border:1.5px solid var(--line-strong);border-radius:1px;background:var(--bg)}
.is-done .sb-dot{background:var(--text);border-color:var(--text)}
.is-now .sb-dot{width:12px;height:12px;background:var(--text);border-color:var(--text);box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--text)}
.sb-stop{appearance:none;position:relative;display:flex;margin:0;padding:0;border:0;background:none;cursor:pointer;border-radius:2px}
.sb-stop::before{content:'';position:absolute;inset:-14px -10px}
.sb-where{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:12px}
.sb-where__now{font:600 13px/18px var(--font-ui);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text)}
.sb-where__next{font:400 13px/18px var(--font-ui);color:var(--text-muted);text-align:right}

/* the step: a column with the mockup's gaps */
.sb-main{display:flex;flex-direction:column;gap:32px;padding:0 var(--gutter) 32px}
.sb-main--20{gap:20px}.sb-main--24{gap:24px}.sb-main--28{gap:28px}.sb-main--svod{gap:24px;padding-bottom:40px}
.sb-stack{display:flex;flex-direction:column;gap:12px}
.sb-stack--10{gap:10px}.sb-stack--14{gap:14px}.sb-stack--16{gap:16px}.sb-stack--18{gap:18px}.sb-stack--6{gap:6px}.sb-stack--4{gap:4px}
.sb-pack{display:flex;flex-direction:column;gap:12px;padding-top:8px;border-top:1px solid var(--line)}
.sb-pack--list{gap:10px}
.sb-pack--first{padding-top:0;border-top:0}
.sb .ds-eyebrow{font:600 var(--fs-caption)/var(--lh-caption) var(--font-ui);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.sb .ds-h1{font:600 var(--fs-h1)/var(--lh-h1) var(--font-ui);letter-spacing:var(--ls-h1)}
.sb .ds-h2{font:600 var(--fs-h2)/var(--lh-h2) var(--font-ui);letter-spacing:var(--ls-h2)}
.sb .ds-h3{font:600 var(--fs-h3)/var(--lh-h3) var(--font-ui)}
.sb .sb-terms-h{margin-bottom:14px}
.sb-lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--text-2)}
.sb-caption{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-muted)}
.sb .sb-caption--mt{margin-top:4px}
.sb-label{display:block;font:600 var(--fs-small)/var(--lh-small) var(--font-ui);color:var(--text)}
.sb-hr{height:1px;border:0;margin:0;background:var(--line)}
.sb-why,.sb-ctx{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-2)}
.sb-mini{display:flex;align-items:center;gap:8px;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text-2)}
.sb-k{font-weight:600;color:var(--text)}
.sb-block{display:block}
.sb-links{display:flex;flex-wrap:wrap;gap:4px 24px}

/* buttons */
.sb .ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--hit);padding:11px 18px;font:600 16px/20px var(--font-ui);letter-spacing:-0.005em;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.sb .ds-btn:hover{border-color:var(--text);color:var(--text)}
.sb .ds-btn:active{transform:translateY(1px)}
.sb .ds-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.sb .ds-btn--primary{background:var(--action-bg);border-color:var(--action-bg);color:var(--action-fg)}
.sb .ds-btn--primary:hover{background:var(--action-bg-hover);border-color:var(--action-bg-hover);color:var(--action-fg)}
.sb .ds-btn--big{width:100%;min-height:56px;padding:17px 20px;font-size:18px;line-height:22px}
.sb .ds-btn--small{min-height:32px;padding:5px 10px;font-size:14px;line-height:20px;gap:6px}
.sb .ds-btn--done,.sb .ds-btn--done:hover{background:var(--surface);color:var(--accent);border-color:var(--accent-line)}
.sb-textbtn{appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:var(--hit);padding:0;border:0;background:none;font:600 16px/20px var(--font-ui);color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--line-strong);cursor:pointer}
.sb-textbtn:hover{text-decoration-color:var(--text)}
.sb-textbtn--quiet{font-weight:500;font-size:15px;color:var(--text-2);white-space:nowrap}

/* the bottom bar: one main button */
.sb-bar{position:sticky;bottom:0;margin-top:auto;display:flex;align-items:center;gap:12px;padding:12px var(--gutter) 28px;padding-bottom:max(28px,env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);z-index:2}
/* nothing the browser or the script scrolls to (a focused field, the opened check) parks under the
   sticky bar: 12+48+28 px of the bar plus the phone's home strip (24.10: the case 2 fields hid under it) */
html:has(#sbox){scroll-padding:16px 0 calc(104px + env(safe-area-inset-bottom))}
.sb-bar__note{flex:1;min-width:0;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text-2)}
.sb-bar__note b{font-weight:600;color:var(--text)}
/* a second, quieter button (flow-1026): the note takes its own line, the buttons share the next */
.sb-bar--two{flex-wrap:wrap;row-gap:8px}.sb-bar--two .sb-bar__note{flex-basis:100%}
.sb-bar__btns{display:flex;flex-wrap:wrap;gap:8px 12px;width:100%}.sb-bar__btns>.ds-btn{min-height:48px;min-width:0;white-space:normal}
.sb-bar__btns>.ds-btn--primary{flex:1 1 180px}.sb-bar__btns>.ds-btn:not(.ds-btn--primary){flex:0 1 auto;padding-left:16px;padding-right:16px}
.sb-share__msg{white-space:pre-wrap;overflow-wrap:anywhere}
.sb-bar .ds-btn--primary:not(.ds-btn--big){min-height:48px;padding:13px 18px;font-size:17px}

/* notes */
.sb .ds-note{background:var(--surface-sunken);border-radius:var(--radius-sm);padding:12px 14px;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text)}
.sb .ds-note--body{font-size:var(--fs-body);line-height:var(--lh-body)}
.sb .ds-note--accent{background:var(--accent-tint)}
.sb .ds-note--sample{display:flex;flex-direction:column;gap:10px;padding:16px}
.sb .ds-note--sample>p:first-child{font-size:var(--fs-body);line-height:var(--lh-body)}
.sb .ds-note--signal{background:var(--signal-tint);color:var(--text)}
.sb-warn{margin:0 var(--gutter) 16px}

/* the terms: a numbered list without frames */
.sb-terms{list-style:none;margin:0;padding:0;counter-reset:t}
.sb-terms li{counter-increment:t;display:grid;grid-template-columns:28px minmax(0,1fr);font-size:16px;line-height:24px;color:var(--text)}
.sb-terms li+li{margin-top:12px}
.sb-terms li::before{content:counter(t);font:600 13px/24px var(--font-ui);color:var(--text-muted);font-variant-numeric:tabular-nums}

/* the conversation */
.sb-bubble{background:var(--surface);border:1px solid var(--line);border-radius:2px var(--radius-md) var(--radius-md) var(--radius-md);padding:14px 16px;font-size:var(--fs-body);line-height:var(--lh-body);max-width:330px}
.sb-bubble--sunken{background:var(--surface-sunken);border-color:transparent}
.sb-mail{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}
.sb-mail__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 16px 12px;border-bottom:1px solid var(--line)}
.sb-mail__who{font:600 15px/20px var(--font-ui)}
.sb-mail__meta{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-muted);text-align:right}
.sb-mail__body{padding:14px 8px;display:flex;flex-direction:column;gap:4px}
.sb-mail__plain{padding:16px;display:flex;flex-direction:column;gap:10px;font-size:var(--fs-doc);line-height:var(--lh-doc)}
.sb-line{appearance:none;display:block;width:100%;text-align:left;margin:0;padding:6px 8px;border:0;border-radius:var(--radius-xs);background:transparent;color:var(--text);font:400 var(--fs-doc)/var(--lh-doc) var(--font-ui);cursor:pointer;transition:background var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.sb-line:hover{background:var(--surface-hover)}
.sb-line.is-marked,.sb-line.is-marked:hover{background:var(--accent-tint);box-shadow:inset 0 -2px 0 var(--accent-line)}
/* the hook (first screen): the same lines, not to be tapped; «…» stands for the folded start */
.sb-line--still{cursor:default}
.sb-line--still:not(.is-marked):hover{background:transparent}
.sb-line--gap{color:var(--text-muted)}
.sb .ds-status.sb-hook-tag{margin-top:6px;white-space:normal}
.sb-cost{font-weight:600}

/* the review: statuses and lines */
.sb .ds-status{display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 6px;font:600 13px/16px var(--font-ui);border:1px solid transparent;border-radius:var(--radius-xs);white-space:nowrap}
.sb .ds-status__glyph{width:10px;height:10px;flex:none;border:1.5px solid currentColor;border-radius:1px}
.sb .ds-status--found{background:var(--accent-fill);color:var(--accent-fill-fg);border-color:var(--accent-fill)}
.sb .ds-status--found .ds-status__glyph{background:currentColor}
.sb .ds-status--missed{background:var(--signal-fill);color:var(--signal-fill-fg);border-color:var(--signal-fill)}
.sb .ds-status--false{color:var(--text-muted);border:1px dashed var(--line-strong);background:var(--surface)}
.sb .ds-status--false .ds-status__glyph{border-style:dashed}
.sb .ds-reveal{list-style:none;margin:0;padding:0}
.sb-reveal-end{border-bottom:1px solid var(--line)}
.sb .ds-rv{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:8px;padding:20px 0;border-top:1px solid var(--line)}
.sb .ds-rv__n{font:600 var(--fs-caption)/24px var(--font-ui);color:var(--text-muted);font-variant-numeric:tabular-nums}
.sb .ds-rv__body>*+*{margin-top:0}
.sb .ds-rv__head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:var(--fs-small);line-height:var(--lh-small)}
.sb .ds-rv__kind{font-weight:600;color:var(--text-2)}
.sb .ds-rv__quote{background:var(--surface-sunken);border-radius:var(--radius-sm);padding:10px 12px;font-size:16px;line-height:24px;color:var(--text)}
.sb .ds-rv__quote::before{content:'«'}.sb .ds-rv__quote::after{content:'»'}
html[lang="en"] .sb .ds-rv__quote::before{content:'“'}html[lang="en"] .sb .ds-rv__quote::after{content:'”'}

/* fields */
.sb-field{display:block;width:100%;margin:0;padding:12px 14px;font:400 var(--fs-body)/var(--lh-body) var(--font-ui);color:var(--text);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-sm);resize:vertical}
.sb-field::placeholder{color:var(--text-muted)}
.sb-field:hover{border-color:var(--text-muted)}
.sb-field--rule{padding:18px 16px;font-size:var(--fs-lead);line-height:var(--lh-lead);border-color:var(--line);border-radius:var(--radius-md);min-height:256px}
.sb-field--rule2{min-height:180px}
.sb-field--short{min-height:0;resize:none;overflow-y:auto}
.sb-err{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--signal)}

/* the text for the person's AI */
.sb .ds-phrase{max-height:286px;background:var(--surface-sunken);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 12px 12px 14px;font:400 var(--fs-mono)/var(--lh-mono) var(--font-mono);color:var(--text);white-space:pre-wrap;word-break:break-word;overflow-y:auto}

/* the checks */
.sb-check{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}
.sb-check__fold{appearance:none;display:block;width:100%;text-align:left;margin:0;padding:14px 16px 16px;border:0;background:none;color:var(--text);font:inherit;cursor:pointer;border-radius:var(--radius-md)}
.sb-check__fold:hover{background:var(--surface-hover)}
.sb-check__top{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:20px}
.sb-check__top .ic{color:var(--text-muted)}
.sb-check__kind{display:block;font:600 var(--fs-caption)/var(--lh-caption) var(--font-ui);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.sb-check__req{margin-top:6px;font-size:16px;line-height:24px;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sb-check__open{display:flex;flex-direction:column;gap:16px;padding:18px 16px 20px;border-color:var(--accent-line);box-shadow:inset 0 0 0 1px var(--accent-line)}
.sb-check__ask{margin-top:8px;font:500 var(--fs-lead)/var(--lh-lead) var(--font-ui);letter-spacing:-0.005em}
.sb-def{font-size:16px;line-height:24px;color:var(--text-2)}
.sb-def b{font-weight:600;color:var(--text)}
.sb-fs{border:0;margin:0;padding:0;min-width:0}
.sb-fs>legend{padding:0;margin-bottom:10px}
.sb-outcomes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sb .ds-chip{appearance:none;display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:10px 12px;font:500 15px/20px var(--font-ui);background:var(--surface);color:var(--text);border:1px solid var(--line-strong);border-radius:var(--radius-sm);cursor:pointer;text-align:left}
.sb .ds-chip:hover{border-color:var(--text)}
.sb .ds-chip:active{transform:translateY(1px)}
.sb .ds-chip[aria-pressed="true"]{background:var(--accent-fill);color:var(--accent-fill-fg);border-color:var(--accent-fill)}
/* the sign of an outcome: filled / half / empty / dashed — the language of the review statuses */
.sb-g{width:10px;height:10px;flex:none;border:1.5px solid currentColor;border-radius:1px}
.sb-g--held{background:currentColor}
.sb-g--violated{background:linear-gradient(135deg,currentColor 50%,transparent 50%)}
.sb-g--unsure{border-style:dashed}
.sb-tag{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:3px 8px 3px 6px;font:600 13px/16px var(--font-ui);color:var(--text);border:1px solid var(--line-strong);border-radius:var(--radius-xs);white-space:nowrap}
.sb-tag--none{border-style:dashed;color:var(--text-muted)}
.sb-rulepeek{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 14px;background:var(--surface-sunken);border-radius:var(--radius-sm)}
.sb-rulepeek__t{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sb-rulepeek .sb-textbtn{color:var(--link);text-decoration-color:currentColor;text-underline-offset:3px}

/* my rules */
.sb-rulecard{display:flex;flex-direction:column;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:24px 20px}
.sb-rulecard__text{font:400 var(--fs-doc)/var(--lh-doc) var(--font-ui);color:var(--text);white-space:pre-wrap}
.sb-result{font:600 var(--fs-h3)/var(--lh-h3) var(--font-ui);letter-spacing:-0.005em}
.sb-rulecard>.sb-more{margin-bottom:-18px}
.sb-rulecard .sb-more__body{font-size:var(--fs-body);line-height:var(--lh-body)}
.sb-nextcase{appearance:none;display:block;width:100%;margin:0;padding:20px 0;text-align:left;background:none;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--text);font:inherit;cursor:pointer}
.sb-nextcase .ds-eyebrow{display:block;margin-bottom:6px}
.sb-nextcase__row{display:flex;justify-content:space-between;align-items:center;gap:16px}
.sb-nextcase__row .ds-h3{display:block}

/* «подробнее»: everything secondary folded */
.sb-more{border-top:1px solid var(--line)}
.sb-more>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--hit);padding:10px 0;font:500 var(--fs-body)/var(--lh-body) var(--font-ui);color:var(--text-2);cursor:pointer}
.sb-more>summary::-webkit-details-marker{display:none}
.sb-more>summary::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--dur) var(--ease)}
.sb-more[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.sb-more[open]>summary{color:var(--text)}
.sb-more__body{display:flex;flex-direction:column;gap:12px;padding:4px 0 16px;color:var(--text-2)}
.sb-more--last{border-bottom:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){.sb *{transition:none!important}}
.sb-terms+.sb-caption{margin-top:12px}

/* ===== the work layer (/work): the sandbox's frame (.sb, top bar, bottom bar), the company's tools as cards */
.wk-main{display:flex;flex-direction:column;gap:22px;padding:8px var(--gutter) 28px}
.wk-sec{display:flex;flex-direction:column;gap:10px}
.wk-tool{display:flex;flex-direction:column;gap:6px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}
.sb .wk-tool__name{font:600 17px/22px var(--font-ui)}
.wk-tool__text{color:var(--text-2)}
.wk-tool__meta{font:500 13px/18px var(--font-ui);color:var(--text-muted)}
.wk-chips{display:flex;flex-wrap:wrap;gap:8px}
.sb a.wk-chip{display:inline-flex;align-items:center;color:var(--text);text-decoration:none}
.wk-form{display:flex;flex:1}
.wk-foot{padding:0 var(--gutter) 28px}

/* a role's ideas: one card per idea, a link to its scenario */
.wk-ideas{display:flex;flex-direction:column}
.sb a.wk-idea{display:flex;flex-direction:column;gap:6px;padding:18px 0;border-top:1px solid var(--line);color:var(--text);text-decoration:none}
.sb a.wk-idea:last-child{border-bottom:1px solid var(--line)}
.sb a.wk-idea:hover .wk-idea__title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.sb .wk-idea__title{font:600 18px/24px var(--font-ui)}
.wk-idea__text{color:var(--text-2)}
.wk-idea__meta,.wk-idea__access{font:500 13px/18px var(--font-ui);color:var(--text-muted)}
.wk-idea__access b{font-weight:600;color:var(--text-2)}
.wk-idea__access--ok{color:var(--accent)}
/* a scenario: the steps, the fields as chips (radio buttons) or a line, the job and the mark */
.wk-steps>li:last-child{padding-bottom:0}
.wk-field{display:flex;flex-direction:column;gap:8px}
.wk-chips{position:relative}
.wk-radio{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.sb .wk-radio:checked+.ds-chip{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.sb .wk-radio:focus-visible+.ds-chip{outline:2px solid var(--focus);outline-offset:2px}
.sb .wk-job,.sb .wk-cmd{max-height:none;overflow:visible}
.wk-copy{display:flex;flex-direction:column;align-items:center;gap:8px}
.wk-mark{padding-top:22px;border-top:1px solid var(--line)}
.wk-mark .sb-fs>legend{margin-bottom:12px}
.wk-saved{display:flex;flex-direction:column;gap:10px}