/* Статья «Мидихлорианы» (/midi-chlorians/). Общие токены, шрифты, меню языков и подвал — из style.css.
   Состояния «ещё не доехали до экрана» включаются только с JS (.mc-js) и без prefers-reduced-motion. */
.mc-page {
  --mc-cyan: #7ff3ff;
  --mc-teal: #2ec4b6;
  --mc-orange: #ff9f43;
  --mc-pink: #ff8fd8;
  --mc-sw: #c28400;
  --mc-bio: #4a8fe0;
  --mc-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
}
.mc-page .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Справа налево (ar, fa): рисунки не зеркалим — подписи в SVG («1 µm», имена) и «20 000+» читаются слева направо */
.mc-page svg { direction: ltr; }
.mc-hud-v, .mc-readout-v { direction: ltr; unicode-bidi: isolate; }

/* ---------- Первый экран ---------- */
.mc-hero { padding: 40px 0 24px; overflow-x: clip; }
.mc-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  grid-template-areas: "text scope" "facts scope";
  align-items: center;
  gap: 18px 44px;
}
.mc-hero-text { grid-area: text; align-self: end; }
.mc-scope { grid-area: scope; }
.mc-facts { grid-area: facts; align-self: start; }
.mc-kicker {
  margin: 0 0 10px;
  font-family: var(--mc-mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--crawl-blue);
}
.mc-h1 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(34px, 7.4vw, 88px);
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--yellow);
  text-shadow: 0 0 28px rgba(255, 232, 31, .28);
  overflow-wrap: break-word;
}
/* Заголовок — одно длинное слово («Midikloriaanit», «ミディ＝クロリアン»): кегль подбираем по ширине колонки,
   чтобы слово стояло в одну строку, а не рвалось посередине. --em — ширина слова в em, её считает build.mjs */
@supports (font-size: 1cqi) {
  .mc-hero-text { container-type: inline-size; }
  .mc-h1 { font-size: clamp(24px, calc(100cqi / var(--em, 11)), 88px); white-space: nowrap; }
}
:lang(ja) .mc-h1, :lang(zh) .mc-h1, :lang(ko) .mc-h1 { line-height: 1.15; }
.mc-lead { margin: 18px 0 0; max-width: 40em; font-size: 19px; line-height: 1.55; color: #cdd4e3; }
.mc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 0; }
.mc-facts div { padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.mc-facts dt { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.mc-facts dd { margin: 2px 0 0; font-weight: 700; font-size: 15.5px; line-height: 1.3; }

/* Окуляр микроскопа */
.mc-scope {
  position: relative;
  width: min(460px, 100%);
  margin: 0 auto;
  padding: 14px 14px 12px;
  border: 1px solid rgba(75, 213, 238, .25);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(8, 22, 30, .9), rgba(4, 8, 14, .92));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 24px 60px rgba(0, 0, 0, .55), 0 0 60px rgba(75, 213, 238, .08);
}
.mc-hud { display: block; font-family: var(--mc-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(127, 243, 255, .75); }
.mc-hud-top { padding: 0 6px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-scope-view {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 46%, #0f3442 0%, #082029 45%, #02080c 75%);
  box-shadow: inset 0 0 0 2px rgba(127, 243, 255, .25), inset 0 0 50px rgba(0, 0, 0, .85);
}
.mc-scope-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mc-reticle { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mc-reticle circle, .mc-reticle path { fill: none; stroke: rgba(127, 243, 255, .28); stroke-width: 1; }
.mc-reticle .mc-cross { stroke: rgba(127, 243, 255, .16); }
.mc-reticle .mc-scale { stroke: rgba(233, 237, 246, .75); stroke-width: 1.6; }
.mc-reticle text { fill: rgba(233, 237, 246, .8); font-family: var(--mc-mono); font-size: 12px; text-anchor: middle; }
.mc-hud-bottom { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 6px 2px; }
.mc-hud-k { flex: 1 1 auto; }
.mc-hud-v { font-family: var(--f-display); font-size: 26px; letter-spacing: .02em; color: var(--yellow); text-transform: none; }
.mc-off {
  padding: 2px 8px;
  border: 1px solid rgba(255, 77, 94, .7);
  border-radius: 6px;
  font-family: var(--mc-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
}
.mc-js .mc-off { opacity: 0; }
.mc-js .mc-off.on { opacity: 1; animation: mc-blink 1.1s steps(2, jump-none) infinite; }
@keyframes mc-blink { 50% { opacity: .25; } }

/* ---------- Оглавление ---------- */
.mc-toc { margin-top: 18px; }
.mc-toc-h { margin: 0 0 10px; font-family: var(--mc-mono); font-weight: 400; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.mc-toc ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.mc-toc a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(10, 14, 26, .5);
  color: var(--muted);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.mc-toc a span { font-family: var(--f-display); font-weight: 400; font-size: 13px; color: var(--crawl-blue); }
.mc-toc a:hover { border-color: rgba(255, 232, 31, .45); color: var(--text); }

/* ---------- Текст статьи ---------- */
.mc-article { max-width: 1080px; padding-top: 12px; }
.mc-sec { padding-top: 56px; scroll-margin-top: 16px; }
.mc-sec-head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.mc-sec-num { font-family: var(--f-display); font-size: 18px; color: var(--crawl-blue); }
.mc-sec-head h2 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(22px, 3.4vw, 32px);
  line-height: 1.15;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--yellow);
  overflow-wrap: break-word;
}
.mc-sec > p { margin: 14px 0; font-size: 18px; line-height: 1.65; color: #d3d9e6; }
.mc-ref { line-height: 0; font-size: .68em; margin-inline-start: 1px; }
.mc-ref a { color: var(--crawl-blue); text-decoration: none; font-weight: 700; }
.mc-ref a:hover { text-decoration: underline; }
.mc-quote { margin: 22px 0; padding: 4px 0 4px 22px; border-inline-start: 3px solid var(--yellow); }
[dir="rtl"] .mc-quote { padding: 4px 22px 4px 0; }
.mc-quote blockquote { margin: 0; }
.mc-quote p { margin: 0; font-size: 21px; line-height: 1.5; color: var(--text); }
.mc-quote figcaption { margin-top: 8px; font-size: 14.5px; color: var(--muted); }
.mc-h3 { margin: 30px 0 14px; font-family: var(--f-display); font-weight: 400; font-size: 18px; letter-spacing: .05em; text-transform: uppercase; color: var(--text); }
.mc-btn {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(88, 180, 255, .55);
  border-radius: 10px;
  background: rgba(88, 180, 255, .08);
  color: var(--blue);
  font-weight: 700;
  font-size: 14.5px;
  transition: background .2s, box-shadow .2s;
}
.mc-btn:hover { background: rgba(88, 180, 255, .16); box-shadow: 0 0 22px rgba(88, 180, 255, .25); }

/* Все упоминания: вертикальная лента с постерами */
.mc-mentions { position: relative; margin: 0; padding: 0; list-style: none; }
.mc-mentions::before { content: ''; position: absolute; top: 10px; bottom: 10px; inset-inline-start: 31px; width: 2px; background: linear-gradient(var(--line-2), rgba(255, 232, 31, .35), var(--line-2)); }
.mc-m { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 10px 0; }
.mc-m-poster { position: relative; display: block; width: 64px; height: 96px; border-radius: 8px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--line-2), 0 8px 18px rgba(0, 0, 0, .5); }
.mc-m-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mc-m-year { font-family: var(--f-display); font-size: 14px; color: var(--crawl-blue); }
.mc-m-title { margin: 2px 0 4px; font-size: 17px; line-height: 1.25; }
.mc-m-title a { color: var(--text); text-decoration: none; }
.mc-m-title a:hover { color: var(--yellow); text-decoration: underline; }
.mc-m p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--muted); }

/* ---------- Рисунки ---------- */
.mc-fig {
  position: relative;
  margin: 26px 0;
  padding: 44px 20px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(13, 18, 33, .88), rgba(8, 11, 20, .88));
}
.mc-fig-tag {
  position: absolute;
  top: 14px;
  inset-inline-start: 20px;
  font-family: var(--mc-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--crawl-blue);
}
.mc-fig figcaption { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.mc-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.mc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--text);
  border-radius: 50%;
  font-family: var(--f-display);
  font-size: 12px;
  line-height: 1;
}

/* Рис. 1 — анатомия */
.mc-anatomy .mc-art { max-width: 760px; margin: 0 auto; }
.mcA-halo { fill: none; stroke: var(--mc-cyan); stroke-width: 7; opacity: .45; }
.mcA-body { fill: url(#mcA-matrix); stroke: var(--mc-cyan); stroke-width: 3; }
.mcA-inner { fill: none; stroke: var(--crawl-blue); stroke-width: 2; opacity: .85; }
.mcA-folds path { fill: rgba(75, 213, 238, .1); stroke: var(--crawl-blue); stroke-width: 2; }
.mcA-ribo circle { fill: #c9f7ff; opacity: .7; }
.mcA-dna { transform-box: view-box; animation: mc-spin 16s linear infinite; }
.mcA-dna-2 { animation-duration: 11s; animation-direction: reverse; }
.mcA-dna circle { fill: none; stroke: var(--mc-pink); stroke-width: 2.2; }
.mcA-dna circle + circle { stroke-dasharray: 5 4; opacity: .8; }
.mcA-ant path { stroke: var(--yellow); stroke-width: 2; stroke-linecap: round; }
.mcA-ant circle { fill: var(--yellow); filter: drop-shadow(0 0 4px rgba(255, 232, 31, .9)); animation: mc-pulse 2.4s ease-in-out var(--d) infinite; }
.mcA-waves path { fill: none; stroke: var(--yellow); stroke-width: 2.2; stroke-linecap: round; opacity: 0; animation: mc-wave 2.4s ease-out var(--d, 0s) infinite; }
.mcA-call path { stroke: rgba(233, 237, 246, .45); stroke-width: 1.2; }
.mcA-call circle { fill: #03040a; stroke: var(--text); stroke-width: 1.5; }
.mcA-call text { fill: var(--text); font-family: var(--f-display); font-size: 13px; text-anchor: middle; }
.mcA-guess path { stroke: rgba(255, 232, 31, .55); stroke-dasharray: 3 3; }
.mcA-guess circle { stroke: var(--yellow); stroke-dasharray: 3 2.4; }
.mcA-guess text { fill: var(--yellow); }
@keyframes mc-spin { to { transform: rotate(360deg); } }
@keyframes mc-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes mc-wave { 0% { opacity: .9; transform: translateX(0); } 100% { opacity: 0; transform: translateX(26px); } }
.mc-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px 26px; margin: 18px 0 0; padding: 0; list-style: none; }
.mc-legend li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: #cdd4e3; }
.mc-legend .mc-guess .mc-badge { border-style: dashed; border-color: var(--yellow); color: var(--yellow); }

/* Рис. 2 — эндосимбиоз */
.mc-endo .mc-art { max-width: 720px; margin: 0 auto; }
/* заливка непрозрачная: ложноножки (шаг 2) лежат под клеткой и сливаются с ней */
.mcE-host { fill: #0d1a2c; stroke: var(--blue); stroke-width: 2; }
.mcE-nuc { fill: rgba(88, 180, 255, .16); stroke: var(--blue); stroke-width: 1.5; }
.mcE-arms { fill: #0d1a2c; stroke: var(--blue); stroke-width: 2; opacity: 0; transition: opacity .8s; }
.mcE-vac { fill: none; stroke: rgba(255, 159, 67, .55); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0; transition: opacity .8s; }
.mcE-b { transition: transform 1.3s cubic-bezier(.45, .05, .25, 1), opacity .8s; }
.mcE-bin rect { fill: var(--mc-orange); stroke: #ffc078; stroke-width: 1.5; }
.mcE-crista { stroke: #7a3d00; stroke-width: 1.4; opacity: .55; }
.mcE-flag { fill: none; stroke: #ffc078; stroke-width: 2; stroke-linecap: round; transition: opacity .6s; animation: mc-flag .7s linear infinite; }
@keyframes mc-flag { 50% { transform: translateY(2px) scaleY(.7); } }
.mcE-b1 { transform: translate(520px, 140px); }
.mcE-b2 { transform: translate(520px, 140px); opacity: 0; }
.mcE-a, .mcE-b4 { transition: opacity .9s; }
.mcE-b4 { opacity: 0; }
.mcE-mito { fill: var(--mc-orange); stroke: #ffc078; stroke-width: 1.2; }
[data-step="2"] .mcE-b1, [data-step="2"] .mcE-b2 { transform: translate(372px, 140px); }
[data-step="2"] .mcE-arms { opacity: 1; }
[data-step="2"] .mcE-flag, [data-step="3"] .mcE-flag, [data-step="4"] .mcE-flag { opacity: 0; }
[data-step="3"] .mcE-b1 { transform: translate(292px, 170px); }
[data-step="3"] .mcE-b2 { transform: translate(300px, 104px); opacity: 1; }
[data-step="3"] .mcE-vac { opacity: 1; }
[data-step="4"] .mcE-a { opacity: 0; }
[data-step="4"] .mcE-b4 { opacity: 1; }
[data-step="4"] .mcE-mito { animation: mc-mito 1.4s ease calc(.8s + var(--i) * .09s) forwards; }
@keyframes mc-mito {
  to { fill: var(--mc-cyan); stroke: #e8feff; filter: drop-shadow(0 0 5px rgba(127, 243, 255, .95)); }
}
.mc-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.mc-steps ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; flex: 1 1 520px; margin: 0; padding: 0; list-style: none; }
.mc-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.3;
  text-align: start;
  transition: border-color .2s, color .2s, background .2s;
}
.mc-step:hover { color: var(--text); border-color: var(--line-2); }
.mc-step[aria-pressed="true"] { color: var(--text); border-color: rgba(255, 159, 67, .7); background: rgba(255, 159, 67, .08); }
.mc-step[aria-pressed="true"] .mc-badge { border-color: var(--mc-orange); color: var(--mc-orange); }

/* Рис. 3 — сколько их (логарифмическая шкала) */
.mc-chart { --c-sw: var(--mc-sw); --c-bio: var(--mc-bio); }
.mc-chart-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.mc-chart-legend li { display: inline-flex; align-items: center; gap: 8px; }
.mc-key { display: inline-block; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 2px; background: var(--c); }
.mc-sw { --c: var(--c-sw); }
.mc-bio { --c: var(--c-bio); }
.mc-plot { position: relative; padding-bottom: 30px; }
.mc-grid { position: absolute; inset: 0 0 30px; pointer-events: none; }
.mc-grid > span { position: absolute; top: 0; bottom: 0; inset-inline-start: var(--x); width: 1px; background: rgba(255, 255, 255, .07); }
.mc-grid > span > span {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mc-grid > span:first-child > span { transform: none; }
.mc-grid > span:last-child > span { transform: translateX(-100%); }
[dir="rtl"] .mc-grid > span > span { left: auto; right: 0; transform: translateX(50%); }
[dir="rtl"] .mc-grid > span:first-child > span { transform: none; }
[dir="rtl"] .mc-grid > span:last-child > span { transform: translateX(100%); }
.mc-bars { position: relative; margin: 0; padding: 0; list-style: none; }
.mc-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label value" "track track";
  gap: 4px 14px;
  padding: 7px 0;
}
.mc-bar-label { grid-area: label; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--text); min-width: 0; }
.mc-bar-value { grid-area: value; align-self: center; font-size: 14px; color: var(--muted); text-align: end; }
.mc-bar-track { grid-area: track; position: relative; height: 14px; }
.mc-bar-fill, .mc-bar-range { position: absolute; top: 0; bottom: 0; }
.mc-bar-fill { inset-inline-start: 0; width: var(--a); background: var(--c); border-start-end-radius: 4px; border-end-end-radius: 4px; }
.mc-bar-range { inset-inline-start: var(--a); width: calc(var(--b) - var(--a)); background: var(--c); opacity: .5; border-start-end-radius: 4px; border-end-end-radius: 4px; }
/* у «больше 20 000» нет конца: полоса растворяется */
.mc-open .mc-bar-range { width: 9%; opacity: 1; background: linear-gradient(to right, var(--c), transparent); border-radius: 0; }
[dir="rtl"] .mc-open .mc-bar-range { background: linear-gradient(to left, var(--c), transparent); }
.mc-bar:hover .mc-bar-label { color: #fff; }
.mc-bar:hover .mc-bar-fill, .mc-bar:hover .mc-bar-range { filter: brightness(1.2); }
.mc-js .mc-bar-fill, .mc-js .mc-bar-range { transform-origin: 0 50%; transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
[dir="rtl"].mc-js .mc-bar-fill, [dir="rtl"].mc-js .mc-bar-range { transform-origin: 100% 50%; }
.mc-js .mc-bar-range { transition-delay: .7s; }
.mc-js .mc-chart:not(.in) .mc-bar-fill, .mc-js .mc-chart:not(.in) .mc-bar-range { transform: scaleX(0); }
.mc-axis-note { margin: 8px 0 0; font-size: 13px; color: var(--dim); }

/* Рис. 4 — калькулятор */
.mc-calc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 32px; align-items: center; }
.mc-calc-view { position: relative; width: 100%; max-width: 420px; margin: 0 auto; }
.mc-calc-view canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.mc-calc-view.burst canvas { animation: mc-shake .45s linear; }
@keyframes mc-shake { 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -2px); } 60% { transform: translate(-3px, -1px); } 80% { transform: translate(2px, 2px); } }
.mc-calc-ui { min-width: 0; }
.mc-field { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font-weight: 700; color: var(--muted); font-size: 15px; }
.mc-field output { font-family: var(--f-display); font-size: 24px; color: var(--text); }
#calc-range { width: 100%; margin: 10px 0 12px; accent-color: var(--yellow); height: 28px; }
.mc-presets { display: grid; gap: 6px; margin-bottom: 16px; }
.mc-presets button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 12px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  text-align: start;
}
.mc-presets button b { font-family: var(--f-display); font-weight: 400; color: var(--text); }
.mc-presets button:hover { border-color: rgba(255, 232, 31, .5); color: var(--text); }
.mc-presets button[aria-pressed="true"] { border-color: var(--yellow); background: rgba(255, 232, 31, .08); color: var(--text); }
.mc-sizes { margin: 8px 0 16px; flex-wrap: wrap; }
.mc-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0; }
.mc-result b { font-family: var(--f-display); font-weight: 400; font-size: 44px; line-height: 1.05; color: var(--yellow); }
.mc-result > span:first-of-type { color: var(--muted); font-weight: 700; }
.mc-verdict {
  flex-basis: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
}
.mc-verdict::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.mc-verdict[data-level="1"] { color: var(--green); }
.mc-verdict[data-level="2"] { color: var(--yellow); }
.mc-verdict[data-level="3"] { color: var(--mc-orange); }
.mc-verdict[data-level="4"] { color: var(--red); }
.mc-note { margin: 14px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--dim); }

/* Рис. 5 — сканер */
.mc-gauge-wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px 28px; align-items: center; }
.mc-gauge-art svg { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; overflow: visible; }
.mcG-track { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 16; }
.mcG-band { fill: none; stroke-width: 16; }
.mcG-ok { stroke: rgba(75, 213, 238, .45); }
.mcG-hi { stroke: rgba(255, 232, 31, .55); }
.mcG-max { stroke: rgba(255, 77, 94, .75); }
.mcG-maj, .mcG-min { stroke: var(--muted); stroke-width: 2; }
.mcG-min { stroke-width: 1; opacity: .6; }
.mcG text { fill: var(--muted); font-size: 12.5px; text-anchor: middle; font-variant-numeric: tabular-nums; }
.mcG-needle path { fill: #f4fbff; filter: drop-shadow(0 0 6px rgba(127, 243, 255, .9)); }
.mcG-needle { transform: rotate(var(--deg, 98deg)); }
.mcG-hub { fill: #0b111d; stroke: var(--text); stroke-width: 2; }
.mcG-pin { fill: var(--red); }
.mcG-crack path { fill: none; stroke: #e9edf6; stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 80; stroke-dashoffset: 0; }
.mc-js .mcG-crack path { stroke-dashoffset: 80; transition: stroke-dashoffset .5s ease-out; }
.mc-js .broken .mcG-crack path { stroke-dashoffset: 0; }
.mc-readout { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mc-readout-k { font-family: var(--mc-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--crawl-blue); }
.mc-readout-v { font-family: var(--f-display); font-size: clamp(34px, 5vw, 50px); line-height: 1; color: var(--yellow); }
#gauge-run { margin-top: 12px; }

/* Рис. 6 — хромосомы */
.mc-chr-rows { display: grid; gap: 10px; }
.mc-chr-row {
  display: grid;
  grid-template-columns: minmax(130px, 200px) minmax(0, 1fr);
  align-items: center;
  gap: 8px 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
}
.mc-chr-name { font-weight: 700; font-size: 15.5px; }
.mc-chr-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.mc-box { display: inline-flex; flex-direction: column; gap: 4px; padding: 6px 10px; border: 1px dashed var(--line-2); border-radius: 10px; }
.mc-box-k { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.mc-box-v, .mc-kid, .mc-kids { display: inline-flex; align-items: center; gap: 5px; }
.mc-kids { flex-wrap: wrap; gap: 6px 8px; }
.mc-op { font-size: 20px; color: var(--muted); }
.mc-or { color: var(--dim); }
.chr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 30px;
  padding: 0 6px;
  border: 1.5px solid var(--cc);
  border-radius: 8px;
  background: color-mix(in srgb, var(--cc) 16%, transparent);
  color: var(--cc);
  font-family: var(--f-display);
  font-size: 15px;
  line-height: 1;
}
.chr-x { --cc: var(--mc-pink); }
.chr-y { --cc: #58b4ff; }
.chr-z { --cc: var(--crawl-blue); }
.chr-w { --cc: #ffb84d; }
.chr-q { --cc: var(--yellow); border-style: dashed; }
.mc-sex { margin-inline-start: 2px; font-size: 18px; color: var(--muted); }
.mc-kid-no { opacity: .45; }
.mc-kid-no .chr { text-decoration: line-through; }
.mc-box-force { border-color: rgba(127, 243, 255, .6); border-style: solid; box-shadow: 0 0 18px rgba(127, 243, 255, .18); }
.mc-chr-anakin { border-color: rgba(127, 243, 255, .3); background: rgba(127, 243, 255, .04); }
.chr-glow { --cc: var(--mc-cyan); box-shadow: 0 0 12px rgba(127, 243, 255, .7); animation: mc-pulse 1.8s ease-in-out infinite; }

/* Рис. 7 — родословная */
.mc-ped .mc-art { max-width: 540px; margin: 0 auto; }
.mcP-lines path { fill: none; stroke: rgba(233, 237, 246, .28); stroke-width: 1.5; }
.mcP-flow path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 9; animation: mc-flow 1.4s linear infinite; }
.mcP-f-shmi { stroke: var(--mc-teal); }
.mcP-f-padme { stroke: var(--mc-bio); }
@keyframes mc-flow { to { stroke-dashoffset: -20; } }
.mcP-stop { fill: none; stroke: var(--mc-teal); stroke-width: 3; stroke-linecap: round; }
.mcP-dot { stroke: rgba(3, 4, 10, .9); stroke-width: 2; }
.mcP-shmi .mcP-dot { fill: var(--mc-teal); }
.mcP-padme .mcP-dot { fill: var(--mc-bio); }
.mcP-other .mcP-dot { fill: #3a4152; }
.mcP-ring { fill: none; stroke: var(--yellow); stroke-width: 2.5; filter: drop-shadow(0 0 5px rgba(255, 232, 31, .8)); animation: mc-pulse 2.6s ease-in-out infinite; }
.mcP-node text { fill: var(--text); font-size: 15px; font-weight: 700; text-anchor: middle; }
.mc-ped-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: #cdd4e3; }
.mc-ped-legend li { display: inline-flex; align-items: center; gap: 8px; }
.mc-ped-legend .mc-key { width: 14px; height: 14px; border-radius: 50%; }
.mc-l-shmi .mc-key { background: var(--mc-teal); }
.mc-l-padme .mc-key { background: var(--mc-bio); }
.mc-l-force .mc-key { background: none; border: 2.5px solid var(--yellow); box-shadow: 0 0 6px rgba(255, 232, 31, .7); }

/* ---------- Мидихлорианы в жизни ---------- */
.mc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 18px; }
.mc-card { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.mc-card-ico svg { display: block; width: 52px; height: 52px; fill: none; stroke: var(--crawl-blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mc-card-ico .ico-glow { fill: var(--mc-cyan); stroke: none; filter: drop-shadow(0 0 4px var(--mc-cyan)); animation: mc-pulse 2.2s ease-in-out infinite; }
.mc-card-ico .ico-mito { fill: rgba(255, 159, 67, .25); stroke: var(--mc-orange); }
.mc-card h3 { margin: 12px 0 6px; font-size: 18px; line-height: 1.25; }
.mc-card h3 i { font-style: italic; }
.mc-card p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* ---------- Вердикт ---------- */
.mc-verdict-list { display: grid; gap: 8px; margin: 16px 0 6px; padding: 0; list-style: none; }
.mc-v {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "claim tag" "note note";
  gap: 2px 14px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--vc);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
}
.mc-v-claim { grid-area: claim; font-weight: 700; font-size: 16px; }
.mc-v-note { grid-area: note; font-size: 14px; color: var(--muted); }
.mc-tag {
  grid-area: tag;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border: 1px solid var(--vc);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.mc-tag span { color: var(--vc); }
.mc-v-real { --vc: var(--green); }
.mc-v-partly { --vc: var(--yellow); }
.mc-v-no { --vc: var(--red); }
.mc-v-beyond { --vc: var(--violet); }

/* ---------- Источники и призыв ---------- */
.mc-sources { max-width: 1080px; padding-top: 56px; }
.mc-sources h2 { margin: 0 0 12px; font-family: var(--f-display); font-weight: 400; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mc-refs { margin: 0; padding-inline-start: 26px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.mc-refs li { margin-bottom: 4px; scroll-margin-top: 20px; }
.mc-refs li:target { color: var(--text); }
.mc-refs a { color: var(--crawl-blue); text-decoration: none; overflow-wrap: anywhere; }
.mc-refs a:hover { text-decoration: underline; }
.mc-cta { max-width: 1080px; padding-top: 40px; }
.mc-cta-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 22px 24px;
  border: 1px solid rgba(255, 232, 31, .3);
  border-radius: 18px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 232, 31, .08), transparent 60%), var(--panel);
}
.mc-cta h2 { margin: 0 0 4px; font-family: var(--f-display); font-weight: 400; font-size: 22px; letter-spacing: .04em; text-transform: uppercase; color: var(--yellow); }
.mc-cta p { margin: 0; color: var(--muted); }
.mc-cta-btn {
  flex: 0 0 auto;
  padding: 12px 20px;
  border: 1px solid rgba(88, 180, 255, .55);
  border-radius: 12px;
  background: rgba(88, 180, 255, .1);
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
  transition: background .2s, box-shadow .2s;
}
.mc-cta-btn:hover { background: rgba(88, 180, 255, .18); box-shadow: 0 0 22px rgba(88, 180, 255, .3); }
.mc-page .footer .panel { margin-bottom: 0; }

/* ---------- Узкие экраны ---------- */
@media (max-width: 900px) {
  .mc-hero-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "scope" "facts"; }
  .mc-hero-text { align-self: auto; }
  .mc-calc-grid, .mc-gauge-wrap { grid-template-columns: minmax(0, 1fr); }
  .mc-readout { align-items: center; text-align: center; }
  .mc-gauge-wrap + #gauge-run { display: flex; margin: 12px auto 0; }
  .mc-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mc-hero { padding-top: 24px; }
  .mc-lead { font-size: 17px; }
  .mc-facts { grid-template-columns: minmax(0, 1fr); }
  .mc-sec { padding-top: 44px; }
  .mc-sec > p { font-size: 17px; }
  .mc-quote p { font-size: 18px; }
  .mc-fig { padding: 40px 12px 14px; margin-inline: -4px; }
  .mc-fig-tag { inset-inline-start: 14px; }
  .mc-chr-row { grid-template-columns: minmax(0, 1fr); }
  /* длинная метка вердикта («Más allá de la ciencia») не оставляет места утверждению — ставим её отдельной строкой */
  .mc-v { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tag" "claim" "note"; gap: 4px; }
  /* подпись и значение столбика — друг под другом: длинное значение («mais de 20.000 — …») сжимало подпись */
  .mc-bar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "value" "track"; gap: 2px; }
  .mc-bar-value { text-align: start; }
  .mc-tag { justify-self: start; white-space: normal; }
  .mcP-node text { font-size: 21px; }
  .mc-hud-top { white-space: normal; letter-spacing: .04em; line-height: 1.5; }
  .mc-steps ol { grid-template-columns: minmax(0, 1fr); }
  .mc-cta-btn { width: 100%; text-align: center; }
}
/* ---------- Без анимаций ---------- */
@media (prefers-reduced-motion: reduce) {
  .mcA-dna, .mcA-ant circle, .mcA-waves path, .mcE-flag, .mcP-flow path, .mcP-ring, .chr-glow, .mc-card-ico .ico-glow { animation: none !important; }
  .mcA-waves path { opacity: .6; }
  .mc-js .mc-off.on { animation: none; }
}