/* Mistgate docs. Tokens follow the Mistgate design system; dark is the default look, light follows the system
   (color-scheme + light-dark()), and html[data-theme] pins one of them once the reader has toggled it. */

@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/onest-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: "Onest"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/onest-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/onest-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: "Onest"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/onest-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 700; 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: 500 700; 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: 500 700; 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500 700; 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; }

:root {
  color-scheme: light dark;
  --bg: light-dark(#f8f8f6, #0c0c0e);
  --surface: light-dark(#ffffff, #141417);
  --surface-2: light-dark(#efefec, #1d1d22);
  --border: light-dark(#e3e3df, #25252b);
  --text: light-dark(#16161a, #f3f3f5);
  --muted: light-dark(#6b6b73, #8b8b94);
  --faint: light-dark(#c4c4c8, #4a4a52);
  --accent: #b8acf2;
  --accent-soft: light-dark(#e8e5f9, #201e28);
  --accent-line: light-dark(#c6bfef, #6a6488);
  --accent-text: light-dark(#45405e, #b8acf2);
  --accent-fill: #6f5fc9;
  --accent-fill-hover: #6354bd;
  --focus: light-dark(#5b4cb5, #b8acf2);
  --ink-on-accent: #0c0c0e;
  --warning-soft: light-dark(rgba(254, 188, 46, 0.2), rgba(254, 188, 46, 0.12));
  --warning-line: light-dark(rgba(190, 130, 0, 0.45), rgba(254, 188, 46, 0.35));
  --warning-text: light-dark(#63470b, #febc2e);
  --ok: #7dd3a0; --warn: #febc2e; --danger: #ff5a5f;
  --danger-soft: rgba(255, 90, 95, 0.14);
  --danger-line: light-dark(rgba(200, 40, 50, 0.4), rgba(255, 90, 95, 0.4));
  --danger-text: light-dark(#8f1d25, #ff8589);
  --backdrop: rgba(0, 0, 0, 0.5);
  --shadow-pop: light-dark(0 12px 40px -12px rgba(20, 20, 30, 0.25), 0 14px 30px -10px rgba(0, 0, 0, 0.5));
  --tone-lavender: light-dark(#473a73, #b8acf2); --tone-lavender-bg: light-dark(#eae8fc, #2d2b38);
  --tone-sky: light-dark(#174e6a, #8ec8ea);      --tone-sky-bg: light-dark(#e0f0fa, #263037);
  --tone-sand: light-dark(#5c4a12, #dcc68c);     --tone-sand-bg: light-dark(#f5efdf, #332f25);
  --tone-sage: light-dark(#3b511d, #b0cc90);     --tone-sage-bg: light-dark(#e8f1e0, #2c3126);
  --tone-mint: light-dark(#00582f, #7dd3a0);     --tone-mint-bg: light-dark(#dcf3e4, #243229);
  --tone-rose: light-dark(#67343e, #e6a6b0);     --tone-rose-bg: light-dark(#f9e6e8, #362a2c);
  --font-sans: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif; /* the CJK names are only fallbacks for Chinese text: no web font is loaded */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "PingFang SC", "Microsoft YaHei", "Noto Sans Mono CJK SC", monospace;
  --r-chip: 7px; --r-ctl: 11px; --r-field: 14px; --r-card: 16px; --r-card-lg: 18px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --hh: 68px;
  --pad: 28px;
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
@supports (color: oklch(from red l c h)) {
  :root { --accent-fill: oklch(from var(--accent) 0.52 calc(c * 1.7) h); --accent-fill-hover: oklch(from var(--accent) 0.47 calc(c * 1.7) h); }
}
:root, [data-tone="lavender"] { --tone: var(--tone-lavender); --tone-bg: var(--tone-lavender-bg); }
[data-tone="sky"] { --tone: var(--tone-sky); --tone-bg: var(--tone-sky-bg); }
[data-tone="sand"] { --tone: var(--tone-sand); --tone-bg: var(--tone-sand-bg); }
[data-tone="sage"] { --tone: var(--tone-sage); --tone-bg: var(--tone-sage-bg); }
[data-tone="mint"] { --tone: var(--tone-mint); --tone-bg: var(--tone-mint-bg); }
[data-tone="rose"] { --tone: var(--tone-rose); --tone-bg: var(--tone-rose-bg); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body.mg { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 16px/1.65 var(--font-sans); -webkit-font-smoothing: antialiased; }
html.nav-open body { overflow: hidden; }
a { color: var(--accent-text); text-decoration: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
button { font: inherit; color: inherit; cursor: pointer; margin: 0; }
img { max-width: 100%; height: auto; }
[id] { scroll-margin-top: 88px; }
main:focus { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 10px 16px; border-radius: var(--r-ctl); background: var(--accent-fill); color: #fff; font-weight: 700; transition: top 0.15s; }
.skip:focus { top: 12px; }
.muted { color: var(--muted); }
.label { font-size: 11px; line-height: 1.4; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0; display: flex; align-items: center; gap: 6px; }
.js-only { display: none !important; }
.js .js-only { display: inline-flex !important; }
.wordmark { font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--text); white-space: nowrap; }
.wordmark span { color: var(--accent-text); }
.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-ctl); background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
/* the panel's IconChip: a tinted square with a tone-stroked icon; a tone names a section, never a state */
.id-chip { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: var(--r-chip); background: var(--tone-bg); color: var(--tone); }
.eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 11px; line-height: 1.4; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ico { display: block; flex: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--r-field); font-size: 14px; font-weight: 800; white-space: nowrap; transition: transform 0.2s var(--ease), background-color 0.2s; }
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--accent-fill); color: #fff; }
.btn--primary:hover { background: var(--accent-fill-hover); color: #fff; }
.btn--secondary { border-color: var(--border); background: var(--surface); color: var(--text); font-weight: 700; }
.btn--secondary:hover { border-color: var(--accent-line); }
.ib { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--surface); color: var(--text); transition: border-color 0.2s, background-color 0.2s; }
.ib:hover { border-color: var(--accent-line); background: var(--surface-2); color: var(--text); }
.theme-ico { display: none; }
:root:not([data-theme]) .theme-ico--sun { display: flex; }
:root[data-theme="dark"] .theme-ico--sun, :root[data-theme="light"] .theme-ico--moon { display: flex; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .theme-ico--sun { display: none; } :root:not([data-theme]) .theme-ico--moon { display: flex; } }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--border); background: color-mix(in oklch, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.top__in { max-width: 1360px; margin: 0 auto; padding: 0 var(--pad); height: var(--hh); display: flex; align-items: center; gap: 10px; }
.grow { flex: 1 1 auto; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 40px; color: var(--text); font-size: 17px; min-width: 0; }
.brand img { display: block; width: 32px; height: 32px; }
.menu-btn { display: none; }
.search-btn { align-items: center; gap: 10px; width: 340px; max-width: 100%; height: 44px; padding: 0 10px 0 12px; border: 1px solid var(--border); border-radius: var(--r-field); background: var(--surface); color: var(--muted); font-size: 14px; text-align: left; transition: border-color 0.2s; }
.search-btn:hover { border-color: var(--accent-line); }
.search-btn__t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kbds { display: flex; gap: 4px; }
kbd { display: inline-flex; align-items: center; justify-content: center; height: 24px; min-width: 24px; padding: 0 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--r-chip); background: var(--surface-2); color: var(--text); font: 700 12px var(--font-mono); }
/* language menu: <details> with a card of links; the accent marks only the current language */
.lang { position: relative; flex: none; }
.lang__btn { width: auto; gap: 6px; padding: 0 10px; list-style: none; cursor: pointer; font: 700 13px var(--font-sans); user-select: none; -webkit-tap-highlight-color: transparent; }
.lang__btn::-webkit-details-marker { display: none; }
.lang[open] > .lang__btn { border-color: var(--accent-line); background: var(--surface-2); }
.lang__chev { color: var(--muted); transition: transform 0.18s var(--ease); }
.lang[open] .lang__chev { transform: rotate(180deg); }
.lang__panel { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; width: 220px; max-width: calc(100vw - 2 * var(--pad)); margin: 0; padding: 6px; list-style: none; border: 1px solid var(--border); border-radius: var(--r-field); background: var(--surface); box-shadow: var(--shadow-pop); }
.lang__item { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: var(--r-ctl); font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--text); }
a.lang__item:hover { background: var(--surface-2); }
.lang__code { font: 600 11px var(--font-mono); letter-spacing: 0.04em; color: var(--muted); }
.lang__tick { display: grid; place-items: center; }
.lang__item[aria-current] { background: var(--accent-soft); color: var(--accent-text); cursor: default; }
.lang__item[aria-current] .lang__code { color: inherit; opacity: 0.75; }

/* ---------- shell ---------- */
.shell { max-width: 1360px; margin: 0 auto; padding: 0 var(--pad); display: flex; gap: 40px; align-items: flex-start; }
.main { flex: 1 1 0; min-width: 0; padding: 40px 0 72px; }
.side { flex: 0 0 232px; position: sticky; top: var(--hh); max-height: calc(100vh - var(--hh)); max-height: calc(100dvh - var(--hh)); overflow-y: auto; overscroll-behavior: contain; padding: 28px 0 40px; scrollbar-width: thin; }
.side__head, .side__tools { display: none; }
.side__scroll { display: flex; flex-direction: column; gap: 24px; }
.grp { display: flex; flex-direction: column; gap: 2px; }
/* the panel's sidebar: group labels in small caps, rows with the section icon in its pastel, the open page on surface-2 */
.grp__label { padding: 0 10px 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.nav-link { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px 10px; border-radius: var(--r-ctl); font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--muted); transition: background-color 0.18s, color 0.18s; }
.nav-link:hover { background: var(--surface-2); color: var(--text); }
.nav-link[aria-current] { background: var(--surface-2); color: var(--text); font-weight: 700; }
.nav-ico { display: flex; flex: none; color: var(--faint); transition: color 0.18s; }
.nav-ico[data-tone] { color: var(--tone); }
.nav-link:hover .nav-ico:not([data-tone]), .nav-link[aria-current] .nav-ico:not([data-tone]) { color: var(--muted); }
.toc { flex: 0 0 200px; position: sticky; top: var(--hh); max-height: calc(100vh - var(--hh)); max-height: calc(100dvh - var(--hh)); overflow-y: auto; padding: 40px 0; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; }
.toc ul, .toc-inline ul { list-style: none; margin: 0; padding: 0; }
.toc ul { border-left: 1px solid var(--border); }
.toc a { display: block; margin-left: -1px; padding: 5px 0 5px 14px; border-left: 2px solid transparent; font-size: 13px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; transition: color 0.18s, border-color 0.18s; }
.toc .l3 a { padding-left: 26px; }
.toc a:hover { color: var(--text); }
.toc a.is-active { color: var(--text); font-weight: 600; border-left-color: var(--tone); }
.backdrop { display: none; }
.toc-inline { display: none; }

/* drawer below 900 px */
@media (max-width: 899px) {
  :root { --hh: 60px; }
  .menu-btn { display: inline-flex; }
  .side { position: fixed; z-index: 50; left: 0; top: 0; bottom: 0; width: min(320px, 86vw); max-height: none; padding: 0; background: var(--bg); border-right: 1px solid var(--border); transform: translateX(-100%); visibility: hidden; transition: transform 0.3s var(--ease), visibility 0s 0.3s; display: flex; flex-direction: column; overflow: hidden; }
  .side:target, .nav-open .side { transform: none; visibility: visible; transition: transform 0.3s var(--ease); box-shadow: var(--shadow-pop); }
  .side__head { display: flex; align-items: center; justify-content: space-between; height: var(--hh); flex: none; padding: 0 12px 0 16px; border-bottom: 1px solid var(--border); }
  .side__scroll { flex: 1 1 auto; overflow-y: auto; padding: 20px 12px 28px; overscroll-behavior: contain; }
  .nav-link { min-height: 44px; font-size: 14px; }
  .side__tools { display: flex; gap: 8px; padding: 4px 10px 0; }
  .backdrop { display: block; position: fixed; inset: 0; z-index: 45; background: var(--backdrop); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
  .side:target + .backdrop, .nav-open .backdrop { opacity: 1; pointer-events: auto; }
  .search-btn { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: var(--r-ctl); }
  .search-btn__t, .search-btn .kbds { display: none; }
  .main { padding-top: 28px; }
}
@media (max-width: 1099px) { .shell { gap: 32px; } }
@media (min-width: 900px) { .search-btn { min-width: 220px; } }
@media (max-width: 1199px) {
  .toc { display: none; }
  .toc-inline { display: block; margin: 0 0 28px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
  .toc-inline summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 16px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
  .toc-inline summary::-webkit-details-marker { display: none; }
  .toc-inline summary::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.2s; }
  .toc-inline[open] summary::after { transform: rotate(-135deg); }
  .toc-inline ul { padding: 0 8px 10px; }
  .toc-inline a { display: flex; align-items: center; min-height: 40px; padding: 6px 8px; border-radius: var(--r-ctl); font-size: 14px; line-height: 1.35; color: var(--text); }
  .toc-inline a:hover { background: var(--surface-2); }
  .toc-inline .l3 a { padding-left: 24px; color: var(--muted); }
}
@media (max-width: 719px) {
  :root { --pad: 16px; }
  .hide-s, .js .hide-s { display: none !important; }
  .top__in { gap: 8px; }
  .chip.tag { display: none; }
}
@media (max-width: 479px) { .brand { font-size: 16px; } }
@media (max-width: 419px) { .js .hide-xs { display: none !important; } }
@media (max-width: 1100px), (pointer: coarse) {
  .lang__item { min-height: 40px; }
  .nav-link { min-height: 40px; }
}

/* ---------- document ---------- */
.doc { max-width: 800px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text); }
.doc-h1 { margin: 0; font-size: clamp(30px, 6vw, 44px); line-height: 1.1; font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; overflow-wrap: anywhere; }
.doc-lead { margin: 14px 0 0; max-width: 62ch; font-size: 17px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.doc-head { padding-bottom: 28px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }

.prose { margin-top: 28px; }
.prose > :first-child:not(h2) { margin-top: 0; }
.prose p, .prose ul, .prose ol { max-width: 74ch; }
.prose p { margin: 0 0 16px; text-wrap: pretty; }
.prose h2, .prose h3, .prose h4 { position: relative; font-weight: 800; letter-spacing: -0.035em; line-height: 1.3; text-wrap: balance; overflow-wrap: anywhere; }
.prose h2 { margin: 56px 0 16px; font-size: 26px; }
.prose h3 { margin: 36px 0 12px; font-size: 19px; letter-spacing: -0.025em; }
.prose h4 { margin: 28px 0 10px; font-size: 16px; letter-spacing: -0.02em; }
.prose h2 + h3 { margin-top: 24px; }
.anchor { display: inline-block; margin: -10px 0 -10px 4px; padding: 10px 8px; color: var(--muted); font-weight: 600; opacity: 0; transition: opacity 0.15s; }
:is(h2, h3, h4):hover .anchor, .anchor:focus-visible { opacity: 1; }
@media (hover: none) { .anchor { opacity: 0.55; } }
.prose a:not(.anchor) { text-decoration: underline; text-decoration-color: var(--accent-line); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; transition: text-decoration-color 0.15s; }
.prose a:not(.anchor):hover { text-decoration-color: currentColor; }
.prose strong { font-weight: 700; }
.pending { color: var(--muted); border-bottom: 1px dotted var(--faint); cursor: help; }
strong.planned { display: inline-block; padding: 0 7px; border-radius: 9px; background: var(--tone-sky-bg); color: var(--tone-sky); font-size: 0.78em; line-height: 1.7; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 0.08em; }
.prose hr { margin: 40px 0; border: 0; border-top: 1px solid var(--border); }

.prose ul { margin: 0 0 16px; padding-left: 1.3em; }
.prose li { margin: 6px 0; padding-left: 4px; }
.prose li::marker { color: color-mix(in oklch, var(--tone) 60%, var(--border)); }
.prose li > :is(p, ul, ol) { margin-top: 6px; margin-bottom: 6px; }
.prose ol { counter-reset: step; list-style: none; margin: 0 0 20px; padding: 0; }
.prose ol > li { counter-increment: step; position: relative; margin: 0; padding: 3px 0 14px 44px; }
.prose ol > li::before { content: counter(step); position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; background: var(--tone-bg); border: 1px solid color-mix(in oklch, var(--tone) 45%, var(--border)); color: var(--tone); font: 700 12px var(--font-mono); }
.prose ol > li::after { content: ""; position: absolute; left: 13.5px; top: 36px; bottom: 6px; width: 1px; background: var(--border); }
.prose ol > li:last-child::after { display: none; }
.prose ol ol, .prose ul ol { margin-top: 10px; }

code, kbd, samp { font-family: var(--font-mono); }
.prose :not(pre) > code { padding: 0.12em 0.4em; border-radius: var(--r-chip); background: var(--surface-2); font-size: 0.86em; font-weight: 500; overflow-wrap: anywhere; }
.prose blockquote { margin: 0 0 16px; padding: 2px 0 2px 16px; border-left: 3px solid color-mix(in oklch, var(--tone) 55%, var(--border)); color: var(--muted); max-width: 74ch; }
.prose blockquote > :last-child { margin-bottom: 0; }

/* callouts: Note / Warning (Важно / Внимание) */
.callout { margin: 0 0 20px; padding: 14px 16px; border-radius: var(--r-field); border: 1px solid var(--accent-line); background: var(--accent-soft); max-width: none; }
.callout--warning { border-color: var(--warning-line); background: var(--warning-soft); }
.callout--tip { border-color: color-mix(in oklch, var(--ok) 45%, var(--border)); background: var(--tone-mint-bg); }
.callout--danger { border-color: var(--danger-line); background: var(--danger-soft); }
.callout__label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.callout--warning .callout__label { color: var(--warning-text); }
.callout--tip .callout__label { color: var(--tone-mint); }
.callout--danger .callout__label { color: var(--danger-text); }
.callout__body { font-size: 15px; line-height: 1.6; color: var(--text); }
.callout__body > :last-child { margin-bottom: 0; }
.callout__body p, .callout__body ul, .callout__body ol { max-width: none; }
.callout__body p { margin-bottom: 10px; }
.callout .code { margin: 10px 0; }

/* tables scroll inside their own box */
.table-wrap { margin: 0 0 24px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
/* scroll shadows: an edge darkens only while there is more to scroll in that direction */
.table-wrap { background: linear-gradient(to right, var(--surface) 30%, transparent) left center / 40px 100% no-repeat local, linear-gradient(to left, var(--surface) 30%, transparent) right center / 40px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--text) 22%, transparent), transparent) left center / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--text) 22%, transparent), transparent) right center / 12px 100% no-repeat scroll, var(--surface); }
.table-wrap:focus-visible { outline-offset: 0; border-radius: var(--r-card); }
table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
/* the header row takes the page's section tone (data-tone on <body>; lavender when a page has no section) */
th { padding: 11px 14px; text-align: left; vertical-align: bottom; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tone); background: var(--tone-bg); white-space: nowrap; }
td { padding: 11px 14px; vertical-align: top; border-top: 1px solid var(--border); }
td:first-child { font-weight: 600; }
td code:not(.nw) { word-break: break-word; }
.nw { white-space: nowrap; }
tbody tr:nth-child(even) td { background: color-mix(in oklch, var(--surface-2) 45%, var(--surface)); }
tbody tr:hover td { background: color-mix(in oklch, var(--surface-2) 85%, var(--surface)); }

/* yes / no / partial in a cell: the panel's status pill (colour + glyph + word) */
.yn { --c: var(--ok); display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 4px; border-radius: 11px; border: 1px solid color-mix(in oklch, var(--c) 40%, var(--border)); background: light-dark(color-mix(in oklch, var(--c) 24%, #f8f8f6), color-mix(in oklch, var(--c) 14%, #0c0c0e)); color: light-dark(color-mix(in oklch, var(--c) 50%, #000), var(--c)); font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; vertical-align: 1px; }
.yn--no { --c: var(--muted); }
.yn--part { --c: var(--warn); }
.yn__g { display: grid; place-items: center; width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--c); color: var(--ink-on-accent); font-size: 10px; font-weight: 800; line-height: 1; }
.yn--yes .yn__g::before { content: ""; width: 3px; height: 6px; margin-top: -2px; border: solid var(--ink-on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.yn--no .yn__g::before { content: "\2013"; }
.yn--part .yn__g::before { content: "~"; }

/* below 720 px a row is a card (the panel's single breakpoint): the first cell is its title, the rest are labelled */
@media (max-width: 719px) {
  .table-wrap { overflow: visible; border: 0; border-radius: 0; background: none; }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: auto; }
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .table-wrap tr { margin: 0 0 10px; padding: 2px 14px 6px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
  .table-wrap tbody tr td, .table-wrap tbody tr:hover td { padding: 8px 0; border: 0; background: none; }
  .table-wrap tbody tr td + td { border-top: 1px solid var(--border); }
  .table-wrap tbody tr td:first-child { padding: 10px 0 8px; font-size: 15px; font-weight: 700; }
  .table-wrap td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; margin-bottom: 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tone); }
  .table-wrap table.cols-2 td::before { content: none !important; }
  .table-wrap td:empty { display: none; }
  .table-wrap td .nw { white-space: normal; overflow-wrap: anywhere; }
}

/* diagrams: hand-drawn SVG (.mgd, docs/<lang>/diagrams) and Mermaid rendered at build time (.mgm); both read these */
:root {
  --mgd-bg: var(--surface); --mgd-box: var(--bg); --mgd-line: var(--border); --mgd-text: var(--text); --mgd-muted: var(--muted);
  --mgd-lav: var(--tone-lavender); --mgd-lav-bg: var(--tone-lavender-bg); --mgd-sky: var(--tone-sky); --mgd-sky-bg: var(--tone-sky-bg);
  --mgd-mint: var(--tone-mint); --mgd-mint-bg: var(--tone-mint-bg); --mgd-sage: var(--tone-sage); --mgd-sage-bg: var(--tone-sage-bg);
  --mgd-sand: var(--tone-sand); --mgd-sand-bg: var(--tone-sand-bg); --mgd-rose: var(--tone-rose); --mgd-rose-bg: var(--tone-rose-bg);
  --dg-bg: var(--surface); --dg-fg: var(--text); --dg-line: var(--muted); --dg-accent: var(--accent-text); --dg-muted: var(--muted); --dg-surface: var(--surface-2); --dg-border: var(--border);
}
.diagram { margin: 8px 0 28px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; border-radius: var(--r-card); }
.diagram svg { display: block; width: 100%; height: auto; margin: 0 auto; }
.diagram--mermaid { padding: 20px; border: 1px solid var(--border); background: var(--surface); }
.diagram:focus-visible { outline-offset: 2px; }
.mgm .message text, .mgm .edge-label text { paint-order: stroke; stroke: var(--dg-bg); stroke-width: 4px; stroke-linejoin: round; }
/* a phone scrolls a wide diagram sideways instead of shrinking its text below reading size */
@media (max-width: 719px) {
  .diagram--svg svg { min-width: 600px; }
  .diagram--mermaid { padding: 12px; }
  .diagram--mermaid svg { min-width: min(100%, 420px); }
}

/* code */
.code { margin: 0 0 24px; border: 1px solid var(--border); border-radius: var(--r-field); background: var(--surface); overflow: hidden; }
.code__bar { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 4px 6px 4px 14px; border-bottom: 1px solid var(--border); background: color-mix(in oklch, var(--surface-2) 55%, var(--surface)); }
.code__lang { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.code__lang--file { font: 600 12px var(--font-mono); letter-spacing: 0; text-transform: none; color: var(--text); }
.code__lang--file > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code__kind { padding: 2px 6px; border-radius: var(--r-chip); background: var(--surface-2); color: var(--muted); font: 700 10px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; }
.copy { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; transition: background-color 0.15s, color 0.15s; }
.copy:hover { background: var(--surface-2); color: var(--text); }
.copy.is-done { color: var(--tone-mint); }
@media (pointer: coarse) { .copy { height: 40px; padding: 0 14px; } .code__bar { padding-block: 2px; } }
.code pre { margin: 0; padding: 14px 16px; overflow-x: auto; font: 500 13px/1.7 var(--font-mono); tab-size: 2; scrollbar-width: thin; -webkit-text-size-adjust: 100%; }
.code pre:focus-visible { outline-offset: -2px; }
.code code { font: inherit; }
.code .line span { color: light-dark(var(--shiki-light), var(--shiki-dark)); }
.code .line { min-height: 1.7em; }

/* previous / next, edit link */
.edit { margin: 40px 0 16px; font-size: 14px; }
.edit a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--muted); }
.edit a:hover { color: var(--text); }
.pns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.pn { display: flex; flex-direction: column; gap: 4px; min-height: 64px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); color: var(--text); transition: border-color 0.2s, transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1); }
.pn:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.pn--next { text-align: right; align-items: flex-end; grid-column: 2; }
.pn--prev { grid-column: 1; }
.pn .label { gap: 4px; }
.pn__t { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }
@media (max-width: 539px) { .pns { grid-template-columns: 1fr; } .pn--next, .pn--prev { grid-column: 1; text-align: left; align-items: flex-start; } .pn--next { order: -1; } }

/* ---------- home ---------- */
.doc--home { max-width: 1040px; }
.hero { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 8px 0 8px; }
.hero__arch { position: absolute; z-index: -1; right: 0; top: -8px; width: 300px; height: 260px; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); }
.hero__h1 { margin: 0; max-width: 17ch; font-size: clamp(36px, 5.4vw, 58px); line-height: 1.04; font-weight: 800; letter-spacing: -0.045em; text-wrap: balance; }
.hero__lead { margin: 0; max-width: 60ch; font-size: 18px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 8px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.shot { width: 100%; margin: 12px 0 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.shot img { display: block; width: 100%; height: auto; }
.shot__dark { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .shot__light { display: none !important; } :root:not([data-theme]) .shot__dark { display: block !important; } }
:root[data-theme="dark"] .shot__light { display: none !important; }
:root[data-theme="dark"] .shot__dark { display: block !important; }
.facts li { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); color: var(--muted); font: 600 12px var(--font-mono); white-space: nowrap; }

.home-sec { margin-top: 64px; }
.home-sec h2 { margin: 0 0 8px; font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -0.035em; }
.home-sec h3 { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 800; letter-spacing: -0.02em; }
.home-p { margin: 0 0 22px; max-width: 64ch; color: var(--muted); text-wrap: pretty; }
.home a:not(.btn, .proof__card) { text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.home a:not(.btn, .proof__card):hover { text-decoration-color: currentColor; }
.home code { padding: 0.1em 0.38em; border-radius: var(--r-chip); background: var(--surface-2); font-size: 0.88em; }
.id-chip--plain { background: var(--surface-2); color: var(--muted); }

/* why: four reasons in two columns, then the two pages that back them with numbers */
.why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; margin: 22px 0 28px; padding: 0; list-style: none; }
.why li { display: flex; gap: 14px; align-items: flex-start; }
.why .id-chip { margin-top: 1px; }
.why p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.why p a { color: var(--accent-text); font-weight: 600; white-space: nowrap; }
.proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.proof__card { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; padding: 18px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); color: var(--text); transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1), border-color 0.2s; }
.proof__card:hover { transform: translateY(-2px); border-color: var(--accent-line); }
.proof__t { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.proof__t .ico { color: var(--muted); }
.proof__p { grid-column: 1 / -1; font-size: 14px; line-height: 1.55; color: var(--muted); }

/* quick start: the panel's stepper */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps > li { counter-increment: step; position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 16px 16px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
.steps > li::before { content: counter(step); display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 4px; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-text); font: 700 12px var(--font-mono); }
.steps p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.steps strong { color: var(--text); font-weight: 700; }
.steps__links { display: flex; flex-direction: column; gap: 2px; margin-top: auto !important; padding-top: 6px; }
.steps__links a { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; color: var(--accent-text); font-size: 14px; font-weight: 600; }
.home .steps__links a, .home .sec-card a { text-decoration: none; }
.home .steps__links a:hover, .home .sec-card a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* the docs by admin section: one card per section of the panel's sidebar */
.sec-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sec-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 12px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
.sec-card h3 { display: flex; align-items: center; gap: 10px; }
.sec-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.sec-card ul { margin: 4px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.sec-card li a { display: flex; align-items: center; min-height: 36px; padding: 6px 0; border-bottom: 1px solid var(--border); color: var(--text); font-size: 14px; font-weight: 600; }
.sec-card li:last-child a { border-bottom: 0; }
.sec-card li a:hover { color: var(--accent-text); }
.home-status { margin: 24px 0 0; padding: 14px 16px; border-radius: var(--r-field); background: var(--surface-2); font-size: 14px; color: var(--muted); }
.home-status a { color: var(--accent-text); font-weight: 600; }

@media (max-width: 1099px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) {
  .hero__arch { display: none; }
  .hero__lead { font-size: 17px; }
  .home-sec { margin-top: 48px; }
  .home-sec h2 { font-size: 24px; }
  .why, .proof, .steps { grid-template-columns: 1fr; }
  .why { gap: 22px; }
  .prose h2 { font-size: 23px; margin-top: 44px; }
}
@media (pointer: coarse) { .steps__links a, .sec-card li a { min-height: 44px; } }

/* ---------- footer, 404 ---------- */
.foot { border-top: 1px solid var(--border); }
.foot__in { max-width: 1360px; margin: 0 auto; padding: 24px var(--pad) 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: 13px; color: var(--muted); }
.foot__brand { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.foot__brand img { display: block; width: 24px; height: 24px; }
.foot__links { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.foot__links a { display: inline-flex; align-items: center; min-height: 40px; color: var(--muted); }
.foot__links a:hover { color: var(--text); }
.nf { max-width: 640px; margin: 0 auto; padding: 72px var(--pad) 96px; display: flex; flex-direction: column; gap: 4px; }
.nf__code { margin: 0; font: 700 14px var(--font-mono); color: var(--accent-text); letter-spacing: 0.1em; }
.nf .hero__cta { margin-top: 24px; }

/* ---------- search dialog ---------- */
dialog.search { width: min(640px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 24px)); max-height: min(560px, calc(100dvh - 24px)); margin: 10vh auto auto; padding: 0; border: 1px solid var(--border); border-radius: var(--r-card-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop); overflow: hidden; }
dialog.search[open] { display: flex; flex-direction: column; animation: pop 0.2s var(--ease); }
dialog.search::backdrop { background: var(--backdrop); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.985); } }
.search__field { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--border); color: var(--muted); }
.search__field input { flex: 1 1 auto; min-width: 0; height: 48px; border: 0; outline: 0; background: transparent; color: var(--text); font: 500 16px var(--font-sans); }
.search__field input::placeholder { color: var(--muted); }
.search__field input::-webkit-search-cancel-button { display: none; }
.search__list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; }
.search__list:empty { display: none; }
.search__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: var(--r-ctl); color: var(--text); }
.search__list li[aria-selected="true"] a, .search__list a:hover { background: var(--surface-2); }
.search__list .t { display: flex; flex-direction: column; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.3; }
.search__list .t code { font-size: 13px; font-weight: 600; color: var(--accent-text); overflow-wrap: anywhere; }
.search__list .t small { font-size: 12px; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search__list .chip { flex: none; }
.search__empty { margin: 0; padding: 18px 18px 22px; font-size: 14px; color: var(--muted); }
@media (max-width: 719px) { dialog.search { margin-top: 8px; } }

/* ---------- roadmap (```roadmap blocks, roadmap.mjs) ----------
   Phases on a timeline: the line is solid through what shipped and dashed through what is planned. Each status has its
   own glyph and its h2 says it in words, so colour is never the only signal. What shipped is a grid by admin section;
   what is planned is a queue of wide cards; the road to 1.0 is a checklist with nothing ticked yet. */
.rm { --rm-rail: 48px; margin: 4px 0 8px; }
.prose .rm :where(ol, ul) { max-width: none; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.prose .rm :where(ol) > li { margin: 0; padding: 0; counter-increment: none; }
.prose .rm :where(ol) > li::before { content: none; }
.rm-mark { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--faint); background: var(--surface); color: var(--muted); }
.rm-mark[data-status="released"] { --c: var(--ok); border-color: color-mix(in oklch, var(--c) 60%, var(--border)); background: light-dark(color-mix(in oklch, var(--c) 26%, #f8f8f6), color-mix(in oklch, var(--c) 16%, #0c0c0e)); color: light-dark(color-mix(in oklch, var(--c) 45%, #000), var(--c)); }
.rm-mark[data-status="now"] { border-color: var(--accent-fill); background: var(--accent-fill); color: #fff; }
.rm-mark[data-status="next"] { border-color: var(--accent-line); color: var(--accent-text); }
.rm-mark[data-status="later"] { border-style: dashed; }
.rm-mark[data-status="goal"] { border-color: var(--text); background: var(--text); color: var(--bg); }

/* the phase strip: where the project is, at a glance, and a way to jump */
.rm-nav { margin: 0 0 44px; padding: 18px 6px 14px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
.prose .rm-nav ol { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.prose .rm-nav ol > li { position: relative; }
.prose .rm-nav ol > li::after { content: ""; position: absolute; z-index: 0; top: 13px; bottom: auto; left: calc(50% + 20px); right: calc(-50% + 20px); width: auto; height: 2px; border-radius: 1px; background: repeating-linear-gradient(to right, var(--faint) 0 5px, transparent 5px 10px); }
.prose .rm-nav ol > li[data-status="released"]::after { background: color-mix(in oklch, var(--ok) 65%, var(--border)); }
.prose .rm-nav ol > li[data-status="now"]::after { background: repeating-linear-gradient(to right, var(--accent-line) 0 5px, transparent 5px 10px); }
.prose .rm-nav ol > li:last-child::after { content: none; }
.prose .rm-nav a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px 2px; border-radius: var(--r-ctl); color: var(--text); text-align: center; text-decoration: none; }
.prose .rm-nav a:hover .rm-nav__t { color: var(--accent-text); }
.rm-nav .rm-mark { width: 28px; height: 28px; margin-bottom: 4px; }
.rm-nav__t { font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; transition: color 0.15s; }
.rm-nav__m { font: 600 11px/1.3 var(--font-mono); color: var(--muted); }

/* phases */
.prose .rm .rm-phases > li { position: relative; padding: 0 0 56px var(--rm-rail); }
.prose .rm .rm-phases > li:last-child { padding-bottom: 8px; }
.rm-phase > .rm-mark { position: absolute; left: 0; top: 1px; }
.rm-phase > .rm-mark[data-status="now"] { animation: rm-now 2.6s var(--ease) infinite; }
@keyframes rm-now { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent-fill) 50%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } }
.prose .rm .rm-phases > li::after { content: ""; position: absolute; left: 15px; right: auto; top: 42px; bottom: 8px; width: 2px; height: auto; border-radius: 1px; background: repeating-linear-gradient(to bottom, var(--faint) 0 6px, transparent 6px 12px); }
.prose .rm .rm-phases > li[data-status="released"]::after { background: linear-gradient(to bottom, color-mix(in oklch, var(--ok) 65%, var(--border)), color-mix(in oklch, var(--ok) 35%, var(--accent-line))); }
.prose .rm .rm-phases > li[data-status="now"]::after { background: repeating-linear-gradient(to bottom, var(--accent-line) 0 6px, transparent 6px 12px); }
.prose .rm .rm-phases > li:last-child::after { display: none; }
.rm-phase__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 34px; }
.prose .rm-phase__head h2 { margin: 0; font-size: 26px; line-height: 1.3; }
.rm-meta { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--muted); font: 600 12px var(--font-mono); white-space: nowrap; }
.prose .rm-lead { margin: 8px 0 0; max-width: 66ch; color: var(--muted); }

/* cards */
.prose .rm-cards { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
.prose .rm-phase[data-status="released"] .rm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.prose .rm-cards > li { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 16px 18px 18px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
.prose .rm-cards > li:last-child:nth-child(odd of :not(.rm-card--current)) { grid-column: 1 / -1; }
.rm-card__head { display: flex; align-items: flex-start; gap: 10px; }
.rm-card__head .id-chip { width: 28px; height: 28px; }
.rm-card__t { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-top: 2px; }
.prose .rm-card h3 { flex: 0 1 auto; min-width: 0; margin: 0; font-size: 16px; line-height: 1.4; letter-spacing: -0.02em; }
.rm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-ver, .rm-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; border: 1px solid; font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; }
.rm-ver { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-text); font-family: var(--font-mono); }
.rm-tag { gap: 6px; border-color: var(--warning-line); background: var(--warning-soft); color: var(--warning-text); }
.rm-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; }
.prose .rm-card p { max-width: none; margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.prose .rm-card p strong { color: var(--text); }
.prose .rm .rm-points { padding-left: 1.15em; list-style: disc; font-size: 14.5px; line-height: 1.55; }
.prose .rm-points li { margin: 5px 0 0; padding-left: 2px; }
.prose .rm-points li:first-child { margin-top: 0; }
/* a planned card reads as a row: the text lines up under its title */
.prose .rm-phase:not([data-status="released"]) .rm-card > :not(.rm-card__head) { margin-left: 38px; }
/* what the current release brought: across the row, on the accent */
.prose .rm-cards > .rm-card--current { grid-column: 1 / -1; padding: 20px 22px 22px; border-color: var(--accent-line); background: linear-gradient(150deg, var(--accent-soft), var(--surface) 62%); }
.prose .rm-card--current .rm-points { list-style: none; padding: 0; }
.prose .rm-card--current .rm-points li { position: relative; margin: 0; padding: 10px 0 10px 26px; border-top: 1px solid color-mix(in oklch, var(--accent-line) 45%, var(--border)); }
.prose .rm-card--current .rm-points li:first-child { border-top: 0; padding-top: 2px; }
.prose .rm-card--current .rm-points li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-fill); }
.prose .rm-card--current .rm-points li:first-child::before { top: 9px; }
/* plans read lighter the further they are */
.prose .rm-phase[data-status="later"] .rm-cards > li { border: 1px dashed color-mix(in oklch, var(--faint) 75%, var(--border)); background: transparent; }
/* the road to 1.0: one panel of conditions, each with an empty box until it holds */
.prose .rm-phase[data-status="goal"] .rm-cards { gap: 0; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.prose .rm-phase[data-status="goal"] .rm-cards > li { gap: 6px; border: 0; border-radius: 0; background: none; padding: 16px 18px; }
.prose .rm-phase[data-status="goal"] .rm-cards > li + li { border-top: 1px solid var(--border); }
.rm-phase[data-status="goal"] .rm-card__head .id-chip { width: 20px; height: 20px; margin: 3px 4px 0; border: 1.5px solid var(--muted); border-radius: 6px; background: transparent; }
.rm-phase[data-status="goal"] .rm-card__head .id-chip .ico { display: none; }
@media (max-width: 719px) {
  .rm { --rm-rail: 40px; }
  .rm-phase > .rm-mark { width: 28px; height: 28px; top: 0; }
  .prose .rm .rm-phases > li { padding-bottom: 44px; }
  .prose .rm .rm-phases > li::after { left: 13px; top: 36px; }
  .prose .rm-phase__head h2 { font-size: 23px; }
  .prose .rm-phase[data-status="released"] .rm-cards { grid-template-columns: 1fr; }
  .prose .rm-cards > li, .prose .rm-cards > .rm-card--current { padding: 14px 14px 16px; }
  .prose .rm-phase:not([data-status="released"]) .rm-card > :not(.rm-card__head) { margin-left: 0; }
  .rm-nav { margin-bottom: 36px; padding: 14px 0 10px; }
  .rm-nav .rm-mark { width: 26px; height: 26px; }
  .prose .rm-nav a { padding: 0 1px 2px; }
  .prose .rm-nav ol > li::after { top: 12px; left: calc(50% + 17px); right: calc(-50% + 17px); }
  .rm-nav__t { font-size: 11px; letter-spacing: -0.015em; }
  .rm-nav__m { display: none; }
}

/* ---------- motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
/* ---------- Chinese (html lang="zh-CN"): wider leading, no negative tracking (it crowds the glyphs), labels not shrunk to 11 px ---------- */
body.mg:lang(zh) { line-height: 1.75; }
:lang(zh) .doc-h1, :lang(zh) .hero__h1, :lang(zh) .prose h2, :lang(zh) .prose h3, :lang(zh) .prose h4, :lang(zh) .home-sec h2, :lang(zh) .home-sec h3,
:lang(zh) .pn__t, :lang(zh) .proof__t, :lang(zh) .rm-nav__t, :lang(zh) .rm-card h3 { letter-spacing: 0; line-height: 1.35; }
/* Han text wraps between any two characters: the headline wraps only at its phrase marks (U+200B in LANDING.zh.h1), a little
   smaller than the Latin one and measured in em, since 17ch holds only nine Han characters */
:lang(zh) .hero__h1 { max-width: 11em; font-size: clamp(32px, 4.6vw, 50px); word-break: keep-all; overflow-wrap: anywhere; }
:lang(zh) .label, :lang(zh) .eyebrow, :lang(zh) .code__lang, :lang(zh) .grp__label { letter-spacing: 0.04em; font-size: 12px; }
:lang(zh) .prose p, :lang(zh) .prose li, :lang(zh) .doc-lead, :lang(zh) .hero__lead, :lang(zh) .why p, :lang(zh) .steps p, :lang(zh) .sec-card p, :lang(zh) .callout__body, :lang(zh) .rm-card p, :lang(zh) .rm-points { line-height: 1.8; }
:lang(zh) .prose p, :lang(zh) .prose li { text-align: left; overflow-wrap: break-word; }

@media print { .top, .side, .toc, .toc-inline, .foot, .pns, .edit, .backdrop { display: none !important; } .shell { display: block; } }