@font-face {
  font-family: 'Sans';
  src: local('Inter'), local('Helvetica Neue'), local('Arial');
}

:root {
  --bg: #0d1117;
  --bg-raised: #131a24;
  --bg-card: #141b26;
  --line: #24303f;
  --line-soft: #1b2530;
  --ink: #d7dee8;
  --ink-dim: #8b98a9;
  --ink-faint: #5c6b7d;
  --accent: #6c9bd9;
  --accent-soft: #6c9bd933;
  --accent-ink: #071522;
  --calm: #5a9b8a;
  --calm-bg: #5a9b8a1a;
  --warn: #cf9a4c;
  --warn-bg: #cf9a4c1a;
  --hot: #c46a5a;
  --hot-bg: #c46a5a1a;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --sans: 'Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

:root[data-theme="light"] {
  --bg: #f5f3ee;
  --bg-raised: #ffffff;
  --bg-card: #ffffff;
  --line: #ddd6c8;
  --line-soft: #e8e3d6;
  --ink: #26221a;
  --ink-dim: #6b6455;
  --ink-faint: #a49c89;
  --accent: #3a6ea8;
  --accent-soft: #3a6ea822;
  --accent-ink: #f5f9ff;
  --calm: #3f7d6c;
  --calm-bg: #3f7d6c14;
  --warn: #a87a2e;
  --warn-bg: #a87a2e14;
  --hot: #a3503f;
  --hot-bg: #a3503f14;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f5f3ee;
    --bg-raised: #ffffff;
    --bg-card: #ffffff;
    --line: #ddd6c8;
    --line-soft: #e8e3d6;
    --ink: #26221a;
    --ink-dim: #6b6455;
    --ink-faint: #a49c89;
    --accent: #3a6ea8;
    --accent-soft: #3a6ea822;
    --accent-ink: #f5f9ff;
    --calm: #3f7d6c;
    --calm-bg: #3f7d6c14;
    --warn: #a87a2e;
    --warn-bg: #a87a2e14;
    --hot: #a3503f;
    --hot-bg: #a3503f14;
  }
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  padding: 0 0 6rem;
}

.wrap {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 2rem;
}

header.top {
  border-bottom: 1px solid var(--line);
  padding: 2.6rem 0 2.2rem;
  background:
    radial-gradient(ellipse 80% 60% at 15% 0%, var(--accent-soft), transparent 60%);
}

.breadcrumb {
  font-family: var(--mono);
  font-size: 0.78rem;
  margin: 0 0 1.2rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--ink-faint);
  text-decoration: none;
}

.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { color: var(--ink-faint); }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.9rem;
}

h1 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 1rem;
  max-width: 30ch;
}

.dek {
  font-size: 1.02rem;
  color: var(--ink-dim);
  max-width: 62ch;
  margin: 0;
}

.badges {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.1rem;
  flex-wrap: wrap;
}

.chip {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border-radius: 100px;
  white-space: nowrap;
}

.chip.calm { background: var(--calm-bg); color: var(--calm); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.hot { background: var(--hot-bg); color: var(--hot); }
.chip.dim { background: var(--line-soft); color: var(--ink-faint); }
.chip.interview { background: var(--accent-soft); color: var(--accent); }

section {
  padding: 2.6rem 0;
  border-bottom: 1px solid var(--line-soft);
}

section:last-of-type { border-bottom: none; }

.section-head {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}

h2 {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.section-note {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
}

p.lead {
  max-width: 66ch;
  color: var(--ink-dim);
  margin: 0 0 1.4rem;
}

section > p {
  max-width: 68ch;
  color: var(--ink-dim);
  margin: 0 0 1rem;
}

section > p:last-child { margin-bottom: 0; }
section strong { color: var(--ink); font-weight: 600; }

section code {
  font-family: var(--mono);
  background: var(--bg-card);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.86em;
  color: var(--accent);
  border: 1px solid var(--line-soft);
}

/* ---- code blocks ---- */

pre {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.1rem 1.3rem;
  overflow-x: auto;
  margin: 0 0 1.2rem;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.55;
  white-space: pre;
}

.code-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.5rem;
}

/* ---- syntax highlighting (static spans, no JS) ---- */

:root {
  --syn-kw: #c586c0;
  --syn-type: #4ec9b0;
  --syn-str: #ce9178;
  --syn-num: #b5cea8;
  --syn-comment: #6a9955;
  --syn-func: #dcdcaa;
  --syn-preproc: #9cdcfe;
}

:root[data-theme="light"] {
  --syn-kw: #a626a4;
  --syn-type: #0b7285;
  --syn-str: #986801;
  --syn-num: #4078b5;
  --syn-comment: #6b7a52;
  --syn-func: #7c6f00;
  --syn-preproc: #2464a8;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --syn-kw: #a626a4;
    --syn-type: #0b7285;
    --syn-str: #986801;
    --syn-num: #4078b5;
    --syn-comment: #6b7a52;
    --syn-func: #7c6f00;
    --syn-preproc: #2464a8;
  }
}

pre code .kw   { color: var(--syn-kw); }
pre code .tp   { color: var(--syn-type); }
pre code .str  { color: var(--syn-str); }
pre code .num  { color: var(--syn-num); }
pre code .cm   { color: var(--syn-comment); font-style: italic; }
pre code .fn   { color: var(--syn-func); }
pre code .pp   { color: var(--syn-preproc); }

/* ---- comparison / before-after ---- */

.compare {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
}

.compare > div {
  flex: 1 1 20rem;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.1rem 1.2rem;
}

.compare .tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
  display: inline-block;
}

.compare .tag.before { color: var(--hot); }
.compare .tag.after { color: var(--calm); }

.compare pre {
  margin: 0;
  background: var(--bg-raised);
}

@media (max-width: 760px) {
  .compare > div { flex-basis: 100%; }
}

/* ---- gotcha / callout list ---- */

.gotchas {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.gotcha {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--hot);
  border-radius: 6px;
  padding: 1rem 1.2rem;
}

.gotcha.warn { border-left-color: var(--warn); }
.gotcha.calm { border-left-color: var(--calm); }

.gotcha h4 {
  margin: 0 0 0.35rem;
  font-size: 0.92rem;
  font-weight: 700;
}

.gotcha p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-dim);
  max-width: none;
}

/* ---- how-it-works steps ---- */

.steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.step {
  display: flex;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px dashed var(--line-soft);
}

.step:last-child { border-bottom: none; }

.step-num {
  flex: 0 0 2.2rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 700;
}

.step-body {
  flex: 1 1 auto;
  min-width: 0;
}

.step h4 {
  margin: 0 0 0.3rem;
  font-size: 0.92rem;
  font-weight: 700;
}

.step p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-dim);
  max-width: none;
}

/* ---- real-world examples (same skeleton as .steps, code-bearing) ---- */

.examples { display: flex; flex-direction: column; gap: 0; }

.example {
  display: flex;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px dashed var(--line-soft);
}

.example:last-child { border-bottom: none; }

.example-num {
  flex: 0 0 2.2rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 700;
}

.example-body { flex: 1 1 auto; min-width: 0; }

.example-body h4 {
  margin: 0 0 0.3rem;
  font-size: 0.92rem;
  font-weight: 700;
}

.example-body p {
  margin: 0 0 0.7rem;
  font-size: 0.88rem;
  color: var(--ink-dim);
  max-width: none;
}

.example-body pre { margin: 0; }

/* ---- related / links ---- */

.related-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.related-card {
  flex: 1 1 14rem;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color 0.15s ease;
}

.related-card:hover, .related-card:focus-visible {
  border-color: var(--accent);
}

.related-card .rel-tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.3rem;
}

.related-card h4 {
  margin: 0 0 0.3rem;
  font-size: 0.88rem;
  font-weight: 700;
  font-family: var(--mono);
}

.related-card p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-dim);
  max-width: none;
}

@media (max-width: 760px) {
  .related-card { flex-basis: 100%; }
}

.ext-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ext-links li {
  font-size: 0.9rem;
  color: var(--ink-dim);
}

.ext-links a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
}

.ext-links a:hover, .ext-links a:focus-visible {
  border-bottom-color: var(--accent);
}

.ext-links code {
  color: inherit;
}

/* ---- table ---- */

.table-scroll { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

th {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  padding: 0 0.9rem 0.7rem 0;
  border-bottom: 1px solid var(--line);
}

td {
  padding: 0.75rem 0.9rem 0.75rem 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  color: var(--ink-dim);
}

td:first-child {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

td.mono, .table-scroll .mono { font-family: var(--mono); font-size: 0.83rem; }

/* ---- closing ---- */

.closer {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.6rem 1.8rem;
}

.closer .eyebrow { margin-bottom: 0.7rem; }

.pagenav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2.6rem;
  font-family: var(--mono);
  font-size: 0.82rem;
}

.pagenav a {
  color: var(--ink-dim);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.6rem 1rem;
  flex: 1;
}

.pagenav a:hover, .pagenav a:focus-visible {
  border-color: var(--accent);
  color: var(--ink);
}

.pagenav a.next { text-align: right; }
.pagenav .pagenav-label { display: block; font-size: 0.68rem; color: var(--ink-faint); margin-bottom: 0.2rem; text-transform: uppercase; letter-spacing: 0.06em; }

@media (max-width: 760px) {
  .related-card { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- language toggle ---- */
/* usage: wrap each translatable text run as
   <span class="i18n-ru">русский</span><span class="i18n-en">english</span>
   — works inline inside p/h1/h2/h4/li/code-label/chip alike. */

.i18n-en { display: none; }

:root[data-lang="en"] .i18n-ru { display: none; }
:root[data-lang="en"] .i18n-en { display: inline; }

.lang-toggle {
  position: fixed;
  bottom: 1.4rem;
  right: 1.4rem;
  z-index: 100;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.55rem 1rem;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: border-color 0.15s ease, transform 0.1s ease;
}

.lang-toggle:hover, .lang-toggle:focus-visible {
  border-color: var(--accent);
}

.lang-toggle:active {
  transform: scale(0.96);
}

@media (max-width: 600px) {
  .lang-toggle {
    bottom: 0.9rem;
    right: 0.9rem;
    padding: 0.45rem 0.85rem;
    font-size: 0.72rem;
  }
}

.theme-toggle {
  position: fixed;
  bottom: 1.4rem;
  right: 5.2rem;
  z-index: 100;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--accent);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0.55rem 0.8rem;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: border-color 0.15s ease, transform 0.1s ease;
}

.theme-toggle:hover, .theme-toggle:focus-visible {
  border-color: var(--accent);
}

.theme-toggle:active {
  transform: scale(0.96);
}

@media (max-width: 600px) {
  .theme-toggle {
    bottom: 0.9rem;
    right: 3.9rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.85rem;
  }
}


/* ---- mobile reading (phone-friendly type & spacing) ---- */

@media (max-width: 560px) {
  .wrap { padding: 0 1rem; }

  body { font-size: 17.5px; line-height: 1.65; }

  section { padding: 1.8rem 0; }

  .dek { font-size: 1.05rem; }

  pre { padding: 0.9rem 1rem; }

  pre code { font-size: 0.82rem; line-height: 1.6; }

  table { font-size: 0.86rem; }
}