/* docs.watchers.io — публичный сайт документации. Каркас и размеры взяты с readme-темы живого сайта
   (сняты 06.09.2026): черная шапка, светлая/темная тема по системе с переключателем, сайдбар 288px,
   статья с колонкой 800px и оглавлением 280px справа. Без readme-специфики (версии, вкладки, опрос);
   шрифт Geist как в Houston (self-hosted), хлебные крошки, копирование кода.
   Типографика — в rem (уважает размер текста в браузере), отступы — сетка 4px, движение — токены ниже
   (тот же словарь, что у Houston, DESIGN §3.5): только transform/opacity, ≤300 мс, ease-out на вход,
   отклик на нажатие, reduced-motion — без движения, но с обратной связью. */
@font-face{font-family:'Geist';font-style:normal;font-weight:400 600;font-display:optional;src:url(/assets/fonts/geist-cyrillic-ext-400-600.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:'Geist';font-style:normal;font-weight:400 600;font-display:optional;src:url(/assets/fonts/geist-cyrillic-400-600.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Geist';font-style:normal;font-weight:400 600;font-display:optional;src:url(/assets/fonts/geist-vietnamese-400-600.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Geist';font-style:normal;font-weight:400 600;font-display:optional;src:url(/assets/fonts/geist-latin-ext-400-600.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:'Geist';font-style:normal;font-weight:400 600;font-display:optional;src:url(/assets/fonts/geist-latin-400-600.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:'Geist Mono';font-style:normal;font-weight:400 500;font-display:optional;src:url(/assets/fonts/geist-mono-cyrillic-ext-400-500.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:'Geist Mono';font-style:normal;font-weight:400;font-display:optional;src:url(/assets/fonts/geist-mono-cyrillic-400.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:optional;src:url(/assets/fonts/geist-mono-cyrillic-500.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:optional;src:url(/assets/fonts/geist-mono-other-2000-400-500.woff2) format('woff2');unicode-range:U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:optional;src:url(/assets/fonts/geist-mono-vietnamese-400-500.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:optional;src:url(/assets/fonts/geist-mono-latin-ext-400-500.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:'Geist Mono';font-style:normal;font-weight:400 500;font-display:optional;src:url(/assets/fonts/geist-mono-latin-400-500.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}
:root {
  --bg: #fff; --ink: #32343a; --muted: #666b79; --sb-link: #484c58; --line: rgba(0,0,0,.1);
  --active-bg: rgba(0,0,0,.09); --active-ink: #000; --code-bg: rgba(0,0,0,.05); --tbl-border: rgba(0,0,0,.1);
  --th-bg: rgba(0,0,0,.03); --row-bg: rgba(0,0,0,.02); --btn-border: rgba(0,0,0,.1); --btn-bg: #fff; --btn-hover: rgba(0,0,0,.04);
  --hdr-bg: #000; --hdr-ink: #fff; --hdr-muted: #aeb2bd; --hdr-pill: rgba(255,255,255,.1);
  --modal-bg: #fff; --modal-shadow: 0 20px 60px rgba(0,0,0,.35); --overlay: rgba(0,0,0,.4);
  --accent: #3b82f6;
  --callout-info-bg: rgba(59,130,246,.08); --callout-info-ink: #1d4ed8; --callout-info-line: #3b82f6;
  --callout-warn-bg: rgba(247,197,67,.12); --callout-warn-ink: #7a5a00; --callout-warn-line: #f7c543;
  --callout-error-bg: rgba(233,95,95,.1); --callout-error-ink: #b42323; --callout-error-line: #e95f5f;
  --callout-ok-bg: rgba(46,204,113,.1); --callout-ok-ink: #1f7a45; --callout-ok-line: #2ecc71;
  --callout-note-bg: rgba(0,0,0,.04); --callout-note-ink: #32343a; --callout-note-line: rgba(0,0,0,.25);
  --hl-kw: #d73a49; --hl-str: #032f62; --hl-num: #005cc5; --hl-cmt: #6a737d; --hl-fn: #6f42c1; --hl-attr: #22863a; --hl-lit: #005cc5;
  --sans: "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: "Geist Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  /* движение: ease-out — вход/появление, drawer — выезд панели на мобиле; hover — обычный ease */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 120ms; --dur-base: 200ms;
  color-scheme: light;
}
html[data-theme="dark"], :root:not([data-theme="light"]).sys-dark {
  --bg: #0b0c0d; --ink: #fff; --muted: #aeb2bd; --sb-link: #aeb2bd; --line: rgba(255,255,255,.1);
  --active-bg: rgba(255,255,255,.09); --active-ink: #fff; --code-bg: rgba(255,255,255,.075); --tbl-border: #232426;
  --th-bg: rgba(255,255,255,.03); --row-bg: rgba(255,255,255,.03); --btn-border: rgba(255,255,255,.1); --btn-bg: transparent; --btn-hover: rgba(255,255,255,.06);
  --modal-bg: #141517; --modal-shadow: 0 20px 60px rgba(0,0,0,.7); --overlay: rgba(0,0,0,.6);
  --callout-info-bg: rgba(59,130,246,.06); --callout-info-ink: #9cc4ff; --callout-info-line: #3b82f6;
  --callout-warn-bg: rgba(247,197,67,.05); --callout-warn-ink: #ffd885; --callout-warn-line: #f7c543;
  --callout-error-bg: rgba(233,95,95,.06); --callout-error-ink: #ffa3a3; --callout-error-line: #e95f5f;
  --callout-ok-bg: rgba(46,204,113,.06); --callout-ok-ink: #8fe6b3; --callout-ok-line: #2ecc71;
  --callout-note-bg: rgba(255,255,255,.04); --callout-note-ink: #fff; --callout-note-line: rgba(255,255,255,.25);
  --hl-kw: #ff7b72; --hl-str: #a5d6ff; --hl-num: #79c0ff; --hl-cmt: #8b949e; --hl-fn: #d2a8ff; --hl-attr: #7ee787; --hl-lit: #79c0ff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1rem/1.5 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
svg { display: block; }
.container { max-width: 1440px; margin: 0 auto; }
/* клавиатура: одно кольцо фокуса на всех ссылках и кнопках вместо браузерного по умолчанию */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.search-input input:focus-visible { outline: none; }
/* «к содержимому» — скрыт, пока не получит фокус с клавиатуры */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 12px; border-radius: 8px; background: var(--modal-bg); color: var(--ink); box-shadow: var(--modal-shadow); font-size: .875rem; text-decoration: none; }
.skip:focus-visible { left: 16px; }
/* смена темы: один кроссфейд снимка страницы (View Transitions, site.js), а не transition на цвет каждого
   элемента — тот заставлял текст перерисовываться промежуточными цветами и мерцать; без поддержки — мгновенно */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; animation-timing-function: ease; }

/* ---------- шапка: одна строка — логотип, поиск, ссылка в админку, тема ---------- */
.hdr { background: var(--hdr-bg); color: var(--hdr-ink); box-shadow: 0 1px 0 0 rgba(255,255,255,.1); position: sticky; top: 0; z-index: 20; }
.hdr-row { height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 26px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.logo img { height: 24px; width: auto; }
.logo span { font-size: .8125rem; color: var(--hdr-muted); padding-left: 10px; border-left: 1px solid rgba(255,255,255,.18); line-height: 1.25; }
.hdr-link, .theme-toggle, .menu-btn, .search-toggle { transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.hdr-link:active, .theme-toggle:active, .menu-btn:active, .search-toggle:active { transform: scale(.97); }
.hdr-link { display: flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 500; text-decoration: none; padding: 6px 10px; border-radius: 8px; color: var(--hdr-ink); }
.hdr-link:hover { background: var(--hdr-pill); }
.hdr-link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.theme-toggle { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--hdr-ink); }
.theme-toggle:hover { background: var(--hdr-pill); }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .sun { display: none; }
html[data-theme="dark"] .theme-toggle .sun, html.sys-dark:not([data-theme="light"]) .theme-toggle .sun { display: block; }
html[data-theme="dark"] .theme-toggle .moon, html.sys-dark:not([data-theme="light"]) .theme-toggle .moon { display: none; }
.search-toggle { width: 260px; height: 34px; border-radius: 8px; background: var(--hdr-pill); display: flex; align-items: center; gap: 8px; padding: 0 10px; font-size: .84375rem; color: var(--hdr-muted); }
.search-toggle:hover { background: rgba(255,255,255,.16); color: var(--hdr-ink); }
.search-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.search-toggle kbd { margin-left: auto; font: 500 .6875rem/1.6 var(--mono); padding: 0 6px; border-radius: 4px; background: rgba(255,255,255,.08); color: var(--hdr-muted); }
.menu-btn { display: none; width: 34px; height: 34px; border-radius: 8px; place-items: center; }
.menu-btn:hover { background: var(--hdr-pill); }
.menu-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ---------- каркас ---------- */
.page { display: flex; align-items: flex-start; }
.sidebar { flex: 0 0 288px; width: 288px; position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; overscroll-behavior: contain; box-shadow: 1px 1px 0 0 var(--line); padding: 1.75rem 1rem 2.5rem; font-size: .875rem; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.sidebar-scrim { display: none; }
.sb-heading { margin: .5rem 0; padding: 0 0 0 10px; font-size: .75rem; font-weight: 600; line-height: 1.35; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.sb-list { list-style: none; margin: 2px 0 1.25rem; padding: 0; }
.sb-list > li { margin: 1px 0; }
.sb-list .sb-list { margin: 0 0 0 10px; }
.sb-row { display: flex; align-items: center; }
.sb-link { flex: 1; display: flex; align-items: center; gap: 8px; padding: 6px 5px 6px 10px; border-radius: 8px; font-weight: 450; line-height: 1.43; color: var(--sb-link); text-decoration: none; }
.sb-link:hover { color: var(--active-ink); background: var(--btn-hover); }
.sb-link:active { background: var(--active-bg); }
.sb-link.active { color: var(--active-ink); background: var(--active-bg); }
.sb-row.has-children .sb-link { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 0; }
.sb-chev { flex: 0 0 auto; width: 26px; height: 32px; border-radius: 0 8px 8px 0; display: grid; place-items: center; color: var(--sb-link); transition: background-color var(--dur-fast) ease; }
.sb-chev:hover { background: var(--btn-hover); color: var(--active-ink); }
.sb-row.has-children .sb-link.active + .sb-chev { background: var(--active-bg); color: var(--active-ink); }
.sb-chev svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 150ms var(--ease-out); }
.sb-chev:active svg { transform: scale(.9); }
.sb-chev[aria-expanded="true"] svg { transform: rotate(90deg); }
.sb-chev[aria-expanded="true"]:active svg { transform: rotate(90deg) scale(.9); }
.sb-list[hidden] { display: none; }

.article { flex: 1; min-width: 0; padding: 2rem; max-width: 1280px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 .875rem; font-size: .8125rem; color: var(--muted); }
.crumbs a { color: inherit; text-decoration: none; } .crumbs a:hover { color: var(--ink); }
.crumbs svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; opacity: .6; }
.art-head { padding: 0 0 2rem; border-bottom: 1px solid var(--line); }
/* крупный текст — плотнее трекинг и интерлиньяж, заголовок без «висячего» последнего слова */
.art-head h1 { margin: 0; font-size: 1.9375rem; font-weight: 600; line-height: 1.29; letter-spacing: -0.015em; max-width: 800px; text-wrap: balance; }
.excerpt { margin: .5rem 0 0; font-size: 1.125rem; line-height: 1.5; max-width: 800px; text-wrap: pretty; }
.art-grid { display: grid; grid-template-columns: minmax(0, 800px) 280px; gap: 0 40px; }
.content { max-width: 800px; padding-top: 2rem; font-size: .9375rem; line-height: 1.5; }

/* ---------- оглавление справа ---------- */
.toc { position: sticky; top: 56px; max-height: calc(100vh - 56px); overflow-y: auto; padding: 2rem 1.25rem 2rem 0; font-size: .8125rem; line-height: 1.5; }
.copy-page { position: relative; display: inline-flex; margin-bottom: 1.5rem; }
.toc-label { margin: 0 0 .625rem 12px; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--btn-border); background: var(--btn-bg); border-radius: 8px; font-size: .8125rem; font-weight: 600; line-height: 1; transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: scale(.97); }
.btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.copy-page .copy-md { border-radius: 8px 0 0 8px; }
.copy-page .caret { border-radius: 0 8px 8px 0; border-left: 0; padding: 0 8px; }
/* меню под кнопкой: появляется из своего триггера (origin — верхний левый угол), уходит мгновенно */
.copy-menu { position: absolute; top: 36px; left: 0; min-width: 220px; background: var(--modal-bg); border: 1px solid var(--btn-border); border-radius: 8px; box-shadow: var(--modal-shadow); padding: 6px; z-index: 10; transform-origin: top left; transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out); }
@starting-style { .copy-menu { opacity: 0; transform: scale(.97) translateY(-2px); } }
.copy-menu[hidden] { display: none; }
.copy-menu a, .copy-menu button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; font-size: .8125rem; text-decoration: none; text-align: left; transition: background-color var(--dur-fast) ease; }
.copy-menu a:hover, .copy-menu button:hover { background: var(--btn-hover); }
.copy-menu a:active, .copy-menu button:active { background: var(--active-bg); }
.toc-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; border-left: 1px solid var(--line); }
.toc-nav ul ul { border-left: 0; margin-top: 8px; padding-left: 12px; }
.toc-nav a { display: block; padding: 0 0 0 12px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.toc-nav a:hover { color: var(--ink); }
.toc-nav a.active { color: var(--ink); border-left-color: var(--ink); }

/* ---------- подвал статьи ---------- */
.updated { display: flex; align-items: center; gap: 6px; padding: 1.25rem 0; font-size: .875rem; color: var(--muted); }
.updated svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 1.25rem 0; border-top: 1px solid var(--line); font-size: 1rem; }
.content .pager a { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 500; color: var(--active-ink); }
.content .pager a:hover { text-decoration: underline; }
.pager .next { justify-self: end; text-align: right; }
.pager svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.art-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: .5rem; padding: 1.25rem 0 0; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--muted); }
.content .art-foot a { color: inherit; text-decoration: none; } .content .art-foot a:hover { color: var(--ink); }
.art-foot nav { display: flex; gap: 16px; }

/* ---------- контент (markdown): вертикальный ритм на сетке 4px ---------- */
.content > :first-child { margin-top: 0; }
.content p { margin: 0 0 1rem; text-wrap: pretty; }
.content h2 { font-size: 1.40625rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin: 2rem 0 .5rem; }
.content h3 { font-size: 1.171875rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; margin: 1.5rem 0 .75rem; }
.content h4 { font-size: 1rem; font-weight: 600; line-height: 1.375; margin: 1.5rem 0 .5rem; }
.content h5, .content h6 { font-size: .9375rem; font-weight: 600; margin: 1rem 0 .5rem; }
.content h2, .content h3, .content h4 { position: relative; scroll-margin-top: 76px; text-wrap: balance; }
.content .h-anchor { position: absolute; left: -22px; top: 0; bottom: 0; width: 20px; display: flex; align-items: center; justify-content: center; opacity: 0; color: var(--muted); text-decoration: none; transition: opacity var(--dur-fast) ease; }
.content h2:hover .h-anchor, .content h3:hover .h-anchor, .content h4:hover .h-anchor, .content .h-anchor:focus-visible { opacity: .8; }
.content .h-anchor svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.content a { text-decoration: underline; text-underline-offset: 2px; }
.content strong { font-weight: 600; }
.content ul, .content ol { margin: 0 0 1rem; padding-left: 1.875rem; }
.content li { margin: 0 0 .375rem; }
.content li > ul, .content li > ol { margin: .375rem 0 0; }
.content li.task { list-style: none; margin-left: -1.125rem; }
.content li.task input { width: 13px; height: 13px; margin: 0 8px 4px 0; vertical-align: middle; accent-color: var(--ink); }
.content hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.content img { max-width: 100%; height: auto; }
.content img.img-center { display: block; margin: 0 auto 1rem; }
.content img.img-border { border: 1px solid var(--line); border-radius: 4px; }
.content img.img-inline { display: inline-block; vertical-align: middle; }
.content .img-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; margin: 0 0 1rem; }
.content p.caption { text-align: center; font-size: .8125rem; color: var(--muted); margin-top: -.5rem; }
.content figure { margin: 0 0 1rem; } .content figcaption { text-align: center; font-size: .8125rem; color: var(--muted); margin-top: .375rem; }
.content .cols { display: flex; gap: 20px; flex-wrap: wrap; margin: 0 0 1rem; } .content .cols .col { flex: 1; min-width: 200px; }
.content .embed, .content iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 4px; background: var(--code-bg); margin: 0 0 1rem; }
.content .embed iframe { margin: 0; }
.content video { max-width: 100%; }
.content details { margin: 0 0 1rem; } .content summary { cursor: pointer; font-weight: 600; }
.content kbd { font: .75rem var(--mono); padding: 1px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; }
.content mark { background: rgba(247,197,67,.35); color: inherit; }

.content code { font-family: var(--mono); font-size: .84375rem; background: var(--code-bg); border-radius: 3px; padding: 2px 5px; }
.content pre { margin: 0 0 1rem; background: var(--code-bg); border-radius: 3px; padding: .875rem; overflow: auto; font-size: .84375rem; line-height: 1.5; }
.content pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; white-space: pre; }
.content .code-block { margin: 1rem 0; position: relative; }
.content .code-block .code-tabs { display: flex; align-items: flex-end; }
.content .code-block .code-lang { font-size: .6875rem; padding: 6px 12px; background: var(--code-bg); border-radius: 3px 3px 0 0; text-transform: uppercase; letter-spacing: .03em; opacity: .85; }
.content .code-block pre { border-radius: 0 0 3px 3px; margin: 0; }
.content .code-block.nolang pre { border-radius: 3px; }
.content .code-copy { position: absolute; right: 6px; top: 34px; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 6px; font-size: .75rem; color: var(--muted); background: var(--bg); border: 1px solid var(--line); opacity: 0; transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out), color var(--dur-fast) ease; }
.content .code-block.nolang .code-copy { top: 6px; }
.content .code-block:hover .code-copy, .content .code-copy:focus-visible { opacity: 1; }
.content .code-copy:hover { color: var(--ink); }
.content .code-copy:active { transform: scale(.96); }
.content .code-copy svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name, .hljs-tag, .hljs-meta { color: var(--hl-kw); }
.hljs-string, .hljs-title, .hljs-section, .hljs-attribute, .hljs-symbol, .hljs-bullet, .hljs-addition, .hljs-template-tag, .hljs-template-variable, .hljs-quote { color: var(--hl-str); }
.hljs-number, .hljs-literal, .hljs-type, .hljs-params, .hljs-variable { color: var(--hl-num); }
.hljs-comment, .hljs-deletion { color: var(--hl-cmt); font-style: italic; }
.hljs-function .hljs-title, .hljs-title.function_, .hljs-class .hljs-title, .hljs-title.class_ { color: var(--hl-fn); }
.hljs-attr, .hljs-property, .hljs-regexp, .hljs-link { color: var(--hl-attr); }
.hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 600; }

/* таблица шире колонки (длинные URL, много столбцов) прокручивается внутри обертки, а не ломает страницу */
.content .table-wrap { margin: 0 0 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.content table { border-collapse: collapse; width: 100%; margin: 0 0 1rem; font-size: .9375rem; }
.content .table-wrap table { margin: 0; }
.content th, .content td { border: 1px solid var(--tbl-border); padding: 6px 13px; text-align: left; vertical-align: top; }
.content th { font-weight: 600; background: var(--th-bg); }
.content tr:nth-child(even) td { background: var(--row-bg); }
.content table code { font-size: .8125rem; }

.content blockquote { margin: 0 0 1rem; padding: 0 0 0 16px; border-left: 3px solid var(--line); color: var(--muted); }
.content blockquote.callout { display: flex; gap: 12px; padding: 1.25rem; margin: 1rem 0; border: 0; border-left: 4px solid var(--callout-note-line); border-radius: 2px; background: var(--callout-note-bg); color: var(--ink); }
.content .callout-icon { flex: 0 0 auto; font-size: 1.125rem; line-height: 1.5; margin-left: -8px; font-style: normal; }
.content .callout-body { flex: 1; min-width: 0; }
.content .callout-body > :last-child { margin-bottom: 0; }
.content .callout-heading { font-size: 1.171875rem; font-weight: 500; line-height: 1.3; margin: 0 0 .625rem; color: var(--callout-note-ink); text-wrap: pretty; }
.content .callout-heading strong { font-weight: 600; }
.content blockquote.callout-info { background: var(--callout-info-bg); border-left-color: var(--callout-info-line); } .content .callout-info .callout-heading { color: var(--callout-info-ink); }
.content blockquote.callout-warn { background: var(--callout-warn-bg); border-left-color: var(--callout-warn-line); } .content .callout-warn .callout-heading { color: var(--callout-warn-ink); }
.content blockquote.callout-error { background: var(--callout-error-bg); border-left-color: var(--callout-error-line); } .content .callout-error .callout-heading { color: var(--callout-error-ink); }
.content blockquote.callout-ok { background: var(--callout-ok-bg); border-left-color: var(--callout-ok-line); } .content .callout-ok .callout-heading { color: var(--callout-ok-ink); }
.content blockquote.callout table { background: var(--bg); }

/* ---------- поиск (Ctrl-K): открывается и закрывается мгновенно — это клавиатурное действие ---------- */
.search-overlay { position: fixed; inset: 0; background: var(--overlay); backdrop-filter: blur(2px); z-index: 50; display: flex; justify-content: center; align-items: flex-start; padding: 150px 20px 40px; }
.search-overlay[hidden] { display: none; }
.search-modal { width: min(1000px, 100%); background: var(--modal-bg); border-radius: 8px; box-shadow: var(--modal-shadow); overflow: hidden; }
.search-head { padding: 18px 18px 0; }
.search-input { display: flex; align-items: center; gap: 10px; height: 40px; border: 2px solid var(--accent); border-radius: 6px; padding: 0 12px; }
.search-input svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; color: var(--muted); }
.search-input input { flex: 1; border: 0; outline: 0; background: none; font: .9375rem var(--sans); color: var(--ink); }
.search-tabs { display: flex; gap: 6px; padding: 16px 0 0; border-bottom: 1px solid var(--line); }
.search-tabs span { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: .9375rem; font-weight: 600; border-bottom: 2px solid var(--ink); margin-bottom: -1px; }
.search-tabs span svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.search-body { min-height: 380px; max-height: 60vh; overflow: auto; padding: 8px; }
.search-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 360px; color: var(--muted); font-size: 1rem; }
.search-empty svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.search-hit { display: block; padding: 10px 12px; border-radius: 6px; text-decoration: none; }
.search-hit:hover, .search-hit.sel { background: var(--btn-hover); }
.search-hit:active { background: var(--active-bg); }
.search-hit .t { font-weight: 600; font-size: .9375rem; }
.search-hit .c { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; margin-left: 8px; }
.search-hit .s { font-size: .8125rem; color: var(--muted); margin-top: 2px; }
.search-hit mark { background: rgba(247,197,67,.4); color: inherit; border-radius: 2px; }

/* ---------- тач: кнопка Copy у кода видна всегда (hover нет), цели нажатия не меньше 40px ---------- */
@media (hover: none) {
  .content .code-copy { opacity: 1; }
  .theme-toggle, .menu-btn, .search-toggle, .hdr-link { min-height: 40px; }
  .theme-toggle, .menu-btn { width: 40px; }
  .sb-link { padding-top: 9px; padding-bottom: 9px; }
  .sb-chev { height: 38px; width: 34px; }
}

/* ---------- адаптив ---------- */
@media (max-width: 1100px) { .art-grid { grid-template-columns: minmax(0, 1fr); } .toc { display: none; } }
@media (max-width: 800px) {
  .menu-btn { display: grid; }
  /* сайдбар выезжает слева по кривой шторки, за ним затемнение; закрывается тапом мимо, Esc или кнопкой */
  .sidebar { position: fixed; left: 0; top: 56px; bottom: 0; height: auto; background: var(--bg); z-index: 30; transform: translateX(-100%); transition: transform 250ms var(--ease-drawer); box-shadow: 1px 0 0 0 var(--line), 12px 0 32px rgba(0,0,0,.18); }
  .sidebar.open { transform: none; }
  .sidebar-scrim { display: block; position: fixed; inset: 56px 0 0; background: var(--overlay); z-index: 25; opacity: 0; pointer-events: none; transition: opacity var(--dur-base) ease; }
  .sidebar-scrim.on { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
  .article { padding: 1.25rem 1rem; }
  .art-head h1 { font-size: 1.75rem; }
  .hdr-row { padding: 0 10px 0 12px; gap: 6px; }
  .logo span, .hdr-link span { display: none; }
  .search-toggle { width: 34px; padding: 0; justify-content: center; } .search-toggle span, .search-toggle kbd { display: none; }
  .search-overlay { padding: 12px 8px; }
  .content .h-anchor { display: none; }
}

/* ---------- reduced motion: без движения, обратная связь цветом остается ---------- */
@media (prefers-reduced-motion: reduce) {
  .hdr-link:active, .theme-toggle:active, .menu-btn:active, .search-toggle:active, .btn:active, .content .code-copy:active, .sb-chev:active svg, .sb-chev[aria-expanded="true"]:active svg { transform: none; }
  .sb-chev[aria-expanded="true"] svg { transform: rotate(90deg); }
  .sb-chev svg, .copy-menu, .sidebar, .sidebar-scrim { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  @starting-style { .copy-menu { transform: none; } }
  @media (max-width: 800px) {
    .sidebar { transform: none; opacity: 0; pointer-events: none; transition: opacity var(--dur-base) ease; }
    .sidebar.open { opacity: 1; pointer-events: auto; }
  }
}

/* ---------- печать: только статья ---------- */
@media print {
  .hdr, .sidebar, .sidebar-scrim, .toc, .pager, .art-foot, .search-overlay, .code-copy, .menu-btn, .skip, .crumbs { display: none !important; }
  .article { padding: 0; max-width: none; }
  .art-grid { display: block; }
  .content { max-width: none; }
  .content pre { white-space: pre-wrap; word-break: break-word; }
  .content a { text-decoration: none; }
}