:root {
	--bg: #eceef2;
	--surface: #ffffff;
	--surface-2: #f5f6f9;
	--ink: #14161b;
	--ink-soft: #474d58;
	--ink-faint: #79808d;
	--border: #d8dce3;
	--border-strong: #c3c9d3;
	--accent: #35618e;
	--accent-soft: rgba(53, 97, 142, 0.10);
	--danger: #a83a3a;
	--danger-bg: #f6e8e8;
	--danger-bd: #e6c9c9;
	--good: #2c7350;
	--good-bg: #e6f1eb;
	--good-bd: #c5e0d1;
	--neutral-bg: #eceef2;
	--neutral-bd: #d3d8e0;
	--console-bg: #14171d;
	--console-ink: #d6dbe4;
	--console-accent: #7fb0e0;
	--console-dim: #7d8598;
	--radius: 10px;
	--maxw: 940px;
	--mono: ui-monospace, "SF Mono", "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", monospace;
	--sans: ui-sans-serif, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0e1014;
		--surface: #171a20;
		--surface-2: #1d212a;
		--ink: #e7e9ee;
		--ink-soft: #a8aebb;
		--ink-faint: #6f7787;
		--border: #292e39;
		--border-strong: #363c48;
		--accent: #6fa3d6;
		--accent-soft: rgba(111, 163, 214, 0.12);
		--danger: #e08079;
		--danger-bg: rgba(224, 128, 121, 0.10);
		--danger-bd: rgba(224, 128, 121, 0.28);
		--good: #6cc596;
		--good-bg: rgba(108, 197, 150, 0.10);
		--good-bd: rgba(108, 197, 150, 0.28);
		--neutral-bg: rgba(255,255,255,0.04);
		--neutral-bd: #313745;
		--console-bg: #0a0c10;
		--console-ink: #d6dbe4;
		--console-accent: #7fb0e0;
		--console-dim: #6b7284;
	}
}
:root[data-theme="light"] {
	--bg: #eceef2; --surface: #ffffff; --surface-2: #f5f6f9; --ink: #14161b;
	--ink-soft: #474d58; --ink-faint: #79808d; --border: #d8dce3; --border-strong: #c3c9d3;
	--accent: #35618e; --accent-soft: rgba(53,97,142,0.10);
	--danger: #a83a3a; --danger-bg: #f6e8e8; --danger-bd: #e6c9c9;
	--good: #2c7350; --good-bg: #e6f1eb; --good-bd: #c5e0d1;
	--neutral-bg: #eceef2; --neutral-bd: #d3d8e0;
	--console-bg: #14171d; --console-ink: #d6dbe4; --console-accent: #7fb0e0; --console-dim: #7d8598;
}
:root[data-theme="dark"] {
	--bg: #0e1014; --surface: #171a20; --surface-2: #1d212a; --ink: #e7e9ee;
	--ink-soft: #a8aebb; --ink-faint: #6f7787; --border: #292e39; --border-strong: #363c48;
	--accent: #6fa3d6; --accent-soft: rgba(111,163,214,0.12);
	--danger: #e08079; --danger-bg: rgba(224,128,121,0.10); --danger-bd: rgba(224,128,121,0.28);
	--good: #6cc596; --good-bg: rgba(108,197,150,0.10); --good-bd: rgba(108,197,150,0.28);
	--neutral-bg: rgba(255,255,255,0.04); --neutral-bd: #313745;
	--console-bg: #0a0c10; --console-ink: #d6dbe4; --console-accent: #7fb0e0; --console-dim: #6b7284;
}

* { box-sizing: border-box; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ---------- header ---------- */
.topbar {
	position: sticky; top: 0; z-index: 20;
	background: color-mix(in srgb, var(--bg) 86%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);
}
.topbar-inner {
	max-width: var(--maxw); margin: 0 auto; padding: 11px 20px;
	display: flex; align-items: center; gap: 16px; justify-content: space-between;
}
.brandmark { display: flex; align-items: center; gap: 10px; min-width: 0; }
.glyph {
	flex: none; width: 30px; height: 30px; border-radius: 7px;
	background: var(--console-bg); color: var(--console-accent);
	display: grid; place-items: center; font-family: var(--mono);
	font-weight: 700; font-size: 15px; letter-spacing: -0.5px;
}
.brandtext { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brandtext span { color: var(--ink-faint); font-weight: 500; }
.controls { display: flex; align-items: center; gap: 8px; flex: none; }
.seg {
	display: inline-flex; background: var(--surface-2);
	border: 1px solid var(--border); border-radius: 8px; padding: 2px; gap: 2px;
}
.seg button {
	font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: 0.03em;
	border: 0; background: transparent; color: var(--ink-soft);
	padding: 4px 11px; border-radius: 6px; cursor: pointer; transition: background .15s, color .15s;
}
.seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }
:root[data-theme="dark"] .seg button[aria-pressed="true"],
.seg button[aria-pressed="true"] { color: #fff; }
@media (prefers-color-scheme: dark) { .seg button[aria-pressed="true"] { color: #0e1014; } }
:root[data-theme="dark"] .seg button[aria-pressed="true"] { color: #0e1014; }
:root[data-theme="light"] .seg button[aria-pressed="true"] { color: #fff; }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- hero ---------- */
.hero { padding: 46px 0 34px; border-bottom: 1px solid var(--border); }
.eyebrow {
	font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--accent); margin: 0 0 14px;
}
h1 {
	font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.5rem);
	line-height: 1.12; margin: 0 0 8px; letter-spacing: -0.02em; text-wrap: balance;
	font-weight: 720;
}
h1 .mono { font-family: var(--mono); font-weight: 700; font-size: 0.86em; letter-spacing: -0.01em; }
.subhead { color: var(--ink-soft); font-size: 1.05rem; max-width: 60ch; margin: 6px 0 22px; }
.metastrip { display: flex; flex-wrap: wrap; gap: 8px; }
.metabadge {
	font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em;
	padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border-strong);
	background: var(--surface); color: var(--ink-soft);
}
.metabadge b { color: var(--ink); font-weight: 600; }

/* ---------- sections ---------- */
section { padding: 34px 0; border-bottom: 1px solid var(--border); }
.sec-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 4px; }
.sec-num {
	font-family: var(--mono); font-size: 13px; color: var(--accent);
	font-weight: 700; flex: none; padding-top: 2px;
}
h2 { font-size: 1.42rem; margin: 0; letter-spacing: -0.012em; font-weight: 680; text-wrap: balance; }
section > .wrap > p, section > p { max-width: 66ch; color: var(--ink-soft); }
section p { margin: 12px 0; }
section p strong, li strong { color: var(--ink); font-weight: 650; }
.lead { font-size: 1.06rem; color: var(--ink); }

ul.clean { max-width: 66ch; padding-left: 0; list-style: none; margin: 14px 0; display: flex; flex-direction: column; gap: 9px; }
ul.clean li { position: relative; padding-left: 22px; color: var(--ink-soft); }
ul.clean li::before {
	content: ""; position: absolute; left: 4px; top: 0.62em; width: 6px; height: 6px;
	border-radius: 50%; background: var(--accent);
}
ol.steps { max-width: 66ch; padding-left: 0; list-style: none; counter-reset: s; margin: 14px 0; display: flex; flex-direction: column; gap: 10px; }
ol.steps li { position: relative; padding-left: 34px; color: var(--ink-soft); counter-increment: s; }
ol.steps li::before {
	content: counter(s); position: absolute; left: 0; top: 0; width: 22px; height: 22px;
	border-radius: 6px; background: var(--accent-soft); color: var(--accent);
	font-family: var(--mono); font-size: 12px; font-weight: 700; display: grid; place-items: center;
}

code, .k {
	font-family: var(--mono); font-size: 0.855em;
	background: var(--surface-2); border: 1px solid var(--border);
	padding: 1px 5px; border-radius: 5px; color: var(--ink); word-break: break-word;
}

/* ---------- callout ---------- */
.callout {
	background: var(--surface); border: 1px solid var(--border);
	border-left: 3px solid var(--accent); border-radius: var(--radius);
	padding: 18px 20px; margin: 6px 0 0;
}
.callout p { margin: 0 0 10px; color: var(--ink-soft); max-width: none; }
.callout p:last-child { margin-bottom: 0; }

.proof-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.proof-tags .tt {
	font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em;
	background: var(--accent-soft); color: var(--accent);
	border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
	padding: 4px 9px; border-radius: 20px;
}

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; margin: 16px 0 4px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 520px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
thead th {
	font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase;
	color: var(--ink-faint); font-weight: 650; background: var(--surface-2);
	position: sticky; top: 0;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-2); }
td.mono, .val { font-family: var(--mono); font-size: 12.5px; color: var(--ink); font-variant-numeric: tabular-nums; word-break: break-word; }
td .src { color: var(--ink-faint); font-family: var(--mono); font-size: 11.5px; }
.attr { font-weight: 600; color: var(--ink); }

/* ---------- chips ---------- */
.chip {
	display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
	letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px;
	white-space: nowrap; border: 1px solid transparent;
}
.chip.central { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.chip.cluster { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-bd); }
.chip.typo { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-bd); }
.chip.infra { background: var(--neutral-bg); color: var(--ink-soft); border-color: var(--neutral-bd); }
.chip.genuine { background: var(--good-bg); color: var(--good); border-color: var(--good-bd); }

.genuine-note {
	display: flex; gap: 12px; align-items: flex-start; margin-top: 16px;
	background: var(--good-bg); border: 1px solid var(--good-bd);
	border-radius: var(--radius); padding: 14px 16px;
}
.genuine-note .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--good); margin-top: 8px; }
.genuine-note p { margin: 0; color: var(--ink-soft); font-size: 14px; max-width: none; }
.genuine-note b { color: var(--good); }

/* ---------- code / console ---------- */
.console {
	background: var(--console-bg); border-radius: var(--radius); margin: 16px 0 4px;
	border: 1px solid rgba(255,255,255,0.06); overflow: hidden;
}
.console-bar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.console-title { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--console-dim); }
.copybtn {
	font: inherit; font-family: var(--mono); font-size: 11.5px; font-weight: 600;
	background: rgba(255,255,255,0.06); color: var(--console-ink);
	border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; padding: 4px 10px; cursor: pointer;
	transition: background .15s;
}
.copybtn:hover { background: rgba(255,255,255,0.12); }
.copybtn:focus-visible { outline: 2px solid var(--console-accent); outline-offset: 2px; }
.console pre {
	margin: 0; padding: 15px 16px; overflow-x: auto;
	font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--console-ink);
	font-variant-numeric: tabular-nums;
}
.console pre .cm { color: var(--console-dim); }
.console pre .hl { color: var(--console-accent); }

.codeblock {
	background: var(--console-bg); color: var(--console-ink); border-radius: var(--radius);
	padding: 14px 16px; margin: 12px 0; overflow-x: auto; border: 1px solid rgba(255,255,255,0.06);
}
.codeblock pre { margin: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.65; }
.codeblock .cm { color: var(--console-dim); }
.codeblock .hl { color: var(--console-accent); }
.filed { color: var(--console-dim); font-family: var(--mono); font-size: 11.5px; display: block; margin-bottom: 6px; }

/* ---------- footer ---------- */
footer { padding: 30px 0 60px; color: var(--ink-faint); font-size: 13px; }
footer p { margin: 6px 0; max-width: 70ch; }

.lang-ru { display: none; }
:root.l-ru .lang-en { display: none; }
:root.l-ru .lang-ru { display: block; }

@media (max-width: 560px) {
	.brandtext { display: none; }
	.hero { padding: 34px 0 26px; }
	section { padding: 28px 0; }
	.sec-head { flex-direction: row; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.foxmark{width:38px;height:38px;flex:none;object-fit:contain;background:#fff;border-radius:7px;padding:2px;border:1px solid var(--border-strong);}