/* Fly Along, дизайн «Затемнення»: кольори й шрифти з brand/README.md каналу «Між зорями». */
@font-face { font-family: Montserrat; src: url(../fonts/montserrat.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(../fonts/plexmono.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --bg: #050507; --panel: #111114; --fg: #F4F4F2; --mut: #8E8E93; --rule: #2A2A2E; --acc: #FFC98A; --sig: #6EC1FF;
  --sans: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --pad: clamp(20px, 5vw, 48px);
  --gap: clamp(72px, 11vw, 136px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; }
img, svg, canvas { display: block; max-width: 100%; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 0.2em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
[hidden] { display: none !important; }

.wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--pad); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--pad); top: -64px; z-index: 60; padding: 12px 16px; background: var(--acc); color: var(--bg); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.num { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.ic { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }

h1, h2 { text-wrap: balance; }
h1 { margin: 0; font-weight: 700; font-size: clamp(2rem, 6.2vw, 3.5rem); line-height: 1.06; letter-spacing: -0.02em; }
h2 { margin: 0 0 0.7em; max-width: 24ch; font-weight: 600; font-size: clamp(1.5rem, 3.8vw, 2.25rem); line-height: 1.16; letter-spacing: -0.012em; }
h3 { margin: 0 0 0.8em; font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.lead { max-width: 58ch; color: var(--mut); }
section { padding-block: calc(var(--gap) / 2); }

/* Шапка */
.top { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: clamp(1.1rem, 1.6vw, 1.3rem); letter-spacing: 0.01em; text-decoration: none; }
.lang { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 14px; border: 1px solid var(--rule); border-radius: 999px; font-size: 0.875rem; font-weight: 500; text-decoration: none; }

/* Перший екран */
.hero { padding-block: clamp(28px, 6vw, 72px) clamp(36px, 6vw, 72px); }
.eyebrow { margin: 0 0 1.1rem; color: var(--acc); font: 500 0.78rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.odo { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 0.28em; margin: clamp(22px, 4.5vw, 44px) 0 0.35em; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.odo__num { font-size: clamp(1.72rem, 8.5vw, 5.4rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.odo__unit { font-size: clamp(1.1rem, 4vw, 2.2rem); font-weight: 600; color: var(--mut); }
.hero__sub { max-width: 44ch; margin: 0; font-size: clamp(1rem, 2.4vw, 1.2rem); }
.hero__sub .num { white-space: nowrap; }
.count { margin-top: clamp(30px, 5vw, 44px); padding-top: clamp(22px, 4vw, 30px); border-top: 1px solid var(--rule); }
.count__label { margin: 0 0 0.5em; color: var(--mut); font-size: 0.95rem; }
.count__time { margin: 0 0 0.55em; font-size: clamp(1.5rem, 6.4vw, 2.5rem); line-height: 1.1; color: var(--acc); white-space: nowrap; }
.count__time small { font-size: 0.5em; margin: 0 0.5em 0 0.12em; color: var(--mut); }
.count__note { max-width: 46ch; margin: 0; color: var(--mut); font-size: 0.95rem; }
.count__local { margin: 0.4em 0 0; color: var(--mut); font-size: 0.95rem; }
.srcline { margin: clamp(22px, 4vw, 34px) 0 0; color: var(--mut); font-size: 0.8rem; line-height: 1.5; }
@media (min-width: 900px) {
  .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: start; margin-top: 8px; }
  .count { margin-top: 0; padding: 0 0 0 48px; border-top: 0; border-left: 1px solid var(--rule); }
}

/* Схема */
.scene-sec { padding-bottom: 0; }
.scene { position: relative; overflow: hidden; height: clamp(420px, 70svh, 760px); margin-top: clamp(20px, 3vw, 32px); border-block: 1px solid var(--rule); background: var(--bg); }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; outline-offset: -3px; }
.scene canvas:active { cursor: grabbing; }
.scene__readout { position: absolute; left: max(var(--pad), calc((100% - 1120px) / 2 + var(--pad))); top: 16px; pointer-events: none; font-size: 0.82rem; line-height: 1.45; color: var(--mut); text-shadow: 0 0 6px var(--bg), 0 0 2px var(--bg); }
.scene__readout p { margin: 0; }
.ro__date { color: var(--acc); font-size: 0.9rem; margin-bottom: 0.25em !important; }
.scene__readout .num { color: var(--fg); }
.ro__tag { margin-top: 0.35em !important; font-size: 0.75rem; }
.scene__tools { position: absolute; right: max(12px, calc((100% - 1120px) / 2 + var(--pad))); bottom: 16px; display: grid; gap: 8px; }
.tool { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--rule); border-radius: 999px; background: rgba(5, 5, 7, 0.78); cursor: pointer; }
.scene__hint { position: absolute; left: max(var(--pad), calc((100% - 1120px) / 2 + var(--pad))); right: 72px; bottom: 18px; max-width: 30ch; margin: 0; color: var(--mut); font-size: 0.8rem; line-height: 1.4; pointer-events: none; transition: opacity 0.4s; text-shadow: 0 0 6px var(--bg); }
.scene__hint.is-off { opacity: 0; }
.scene__pulse { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 1px solid var(--acc); border-radius: 50%; pointer-events: none; opacity: 0; will-change: translate, scale, opacity; }
.scene.is-immersive { position: fixed; inset: 0; z-index: 50; height: auto; margin: 0; border: 0; }
.scene.is-immersive canvas { touch-action: none; }
.scene.is-immersive .scene__tools { bottom: calc(16px + env(safe-area-inset-bottom)); }
.scene.is-immersive .scene__readout { top: calc(16px + env(safe-area-inset-top)); }
.scene.is-immersive .scene__hint { bottom: calc(18px + env(safe-area-inset-bottom)); }
body.is-locked { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .scene__pulse.is-live { animation: pulse 2.6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
  @keyframes pulse { 0% { opacity: 0.9; scale: 1; } 70%, 100% { opacity: 0; scale: 3.2; } }
}

.panel { padding-top: 20px; }
.row { display: grid; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--acc); color: var(--bg); font-weight: 600; font-size: 0.95rem; text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn:active { transform: translateY(1px); }
.btn--ghost { border: 1px solid var(--rule); background: transparent; color: var(--fg); }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 44px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; font-size: 0.875rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
.chip.is-on { border-color: var(--fg); background: rgba(244, 244, 242, 0.08); }
.chip__y { color: var(--acc); font-size: 0.8rem; }
.time { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.time input { flex: 1; min-width: 0; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.time input::-webkit-slider-runnable-track { height: 2px; background: var(--rule); }
.time input::-moz-range-track { height: 2px; background: var(--rule); }
.time input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border: 0; border-radius: 50%; background: var(--acc); }
.time input::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--acc); }
.miles { display: flex; gap: 8px; margin: 14px calc(var(--pad) * -1) 0; padding: 0 var(--pad) 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent); }
.miles::-webkit-scrollbar { display: none; }
.miles .chip { scroll-snap-align: start; flex: none; }
.mile-cap { min-height: 4.8em; max-width: 62ch; margin: 16px 0 0; font-size: 0.95rem; }
.mile-cap .num { color: var(--acc); }
.legend { display: grid; gap: 6px 24px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--mut); font-size: 0.8rem; }
.legend li { display: flex; align-items: center; gap: 10px; }
.legend i { flex: none; width: 28px; height: 0; border-top: 2px solid var(--fg); }
.legend .l-pred { border-top-style: dashed; }
.legend .l-fut { border-top: 2px dotted var(--mut); }
.legend .l-light { border-top: 2px solid var(--acc); opacity: 0.6; }
@media (min-width: 720px) {
  .row { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 24px; }
  .seg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mile-cap { min-height: 3.2em; }
  .legend { grid-template-columns: repeat(2, max-content); }
}
@media (min-width: 1080px) {
  .miles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-inline: 0; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .miles .chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 1080px) { .legend { display: flex; flex-wrap: wrap; } }

/* Головна: карта Сонячної системи */
.hero--map { padding-block: clamp(16px, 2.6vw, 32px) clamp(14px, 2vw, 22px); }
.hero--map h1 { font-size: clamp(1.9rem, 5.4vw, 3.2rem); }
.hero__lead { max-width: 64ch; margin: clamp(12px, 2vw, 20px) 0 0; color: var(--mut); font-size: clamp(1rem, 2.2vw, 1.12rem); line-height: 1.5; text-wrap: pretty; }
.event { margin: clamp(10px, 1.6vw, 16px) 0 0; font-size: 0.95rem; line-height: 1.5; }
.event a { display: inline-flex; align-items: baseline; gap: 10px; min-height: 44px; padding-block: 6px; text-decoration: none; }
.event__count { color: var(--mut); }
.event__count .num { color: var(--acc); }
.event__count small { font-size: 0.75em; margin: 0 0.35em 0 0.1em; color: var(--mut); }
.event__go { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 0.2em; white-space: nowrap; }
.live__dot { position: relative; top: -1px; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }
.live__dot::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--acc); border-radius: 50%; opacity: 0; }

.map { padding-top: 0; }
.map__stage { position: relative; overflow: hidden; height: clamp(340px, 58svh, 680px); border-block: 1px solid var(--rule); background: var(--bg); }
.map__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; outline-offset: -3px; }
.map__stage .map__gl { pointer-events: none; }
/* Полотно 3D-моделі апарата лежить над схемою; місце й розмір йому задає скрипт. Дотики проходять крізь нього до схеми. */
.map__stage .map__craft { inset: auto; width: auto; height: auto; pointer-events: none; }
.map__hint { position: absolute; left: max(var(--pad), calc((100% - 1120px) / 2 + var(--pad))); bottom: 14px; max-width: min(36ch, calc(100% - var(--pad) - 76px)); margin: 0 0 0 -10px; padding: 6px 10px; border-radius: 10px; background: rgba(5, 5, 7, 0.82); color: var(--mut); font-size: 0.8rem; line-height: 1.4; pointer-events: none; transition: opacity 0.4s; }
.map__hint.is-off { opacity: 0; }
.map__noscript { position: absolute; left: var(--pad); right: var(--pad); top: 40%; margin: 0; color: var(--mut); text-align: center; }
.map__error { position: absolute; left: var(--pad); right: var(--pad); top: 50%; translate: 0 -50%; display: grid; justify-items: center; gap: 12px; max-width: 420px; margin: 0 auto; padding: 16px; border: 1px solid var(--rule); border-radius: 14px; background: rgba(5, 5, 7, 0.88); font-size: 0.9rem; text-align: center; }
.map__tools { position: absolute; right: max(12px, calc((100% - 1120px) / 2 + var(--pad))); bottom: 12px; display: grid; gap: 8px; }
.tool__close { display: none; }
.is-full .tool__open { display: none; }
.is-full .tool__close { display: block; }
.map__time { display: none; position: absolute; left: max(var(--pad), calc((100% - 1120px) / 2 + var(--pad))); right: calc(max(12px, calc((100% - 1120px) / 2 + var(--pad))) + 60px); bottom: 10px; align-items: center; gap: 12px; }
.map__time input { flex: 1; min-width: 0; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.map__time input::-webkit-slider-runnable-track { height: 2px; background: var(--rule); }
.map__time input::-moz-range-track { height: 2px; background: var(--rule); }
.map__time input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border: 0; border-radius: 50%; background: var(--acc); }
.map__time input::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--acc); }
.map__time .chip { background: rgba(5, 5, 7, 0.78); }
.map__date { min-width: 10ch; color: var(--acc); font-size: 0.85rem; text-shadow: 0 0 6px var(--bg); }
/* Картка на телефоні закриває низ схеми: кнопки й повзунок підіймаються над нею (--free-b ставить map.js) */
.map__stage.has-card .map__tools { bottom: calc(12px + var(--free-b, 0px)); }
.map__views { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 0; }
.map__views .chip { flex: none; min-width: 44px; padding: 0 10px; }
.chip[aria-pressed="true"] { border-color: var(--fg); background: rgba(244, 244, 242, 0.08); }
/* Прапорець у формі чипа («Усі назви»). Сам input прозорий і накриває весь чип: зона дотику це весь чип, а не квадратик. */
.check { position: relative; user-select: none; -webkit-user-select: none; }
.check__in { position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px); margin: 0; border-radius: inherit; opacity: 0; cursor: pointer; }
.check__box { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid #B4B4B8; border-radius: 5px; transition: background-color 0.15s, border-color 0.15s; }
.check__box::after { content: ""; width: 5px; height: 9px; margin-top: -2px; border: solid var(--bg); border-width: 0 2px 2px 0; rotate: 45deg; opacity: 0; transition: opacity 0.15s; }
.check__in:checked + .check__box { border-color: var(--acc); background: var(--acc); }
.check__in:checked + .check__box::after { opacity: 1; }
.check__in:focus-visible + .check__box { outline: 2px solid var(--acc); outline-offset: 3px; }
/* той самий чип для вибору одного з кількох (тип повідомлення у формі відгуку): кружок із цяткою замість квадратика з галочкою */
.check__box--dot { border-radius: 50%; }
.check__box--dot::after { width: 8px; height: 8px; margin: 0; border: 0; border-radius: 50%; background: var(--bg); rotate: none; }

/* Форма відгуку. Кружок: на головній стоїть першим серед кнопок схеми, на решті сторінок висить у нижньому правому куті.
   Рамка й значок кольору акценту відрізняють його від кнопок масштабу. Вікно це <dialog>: браузер сам тримає фокус усередині. */
.fb__open { border-color: color-mix(in srgb, var(--acc) 60%, var(--rule)); color: var(--acc); }
.fb__open .ic { width: 1.3em; height: 1.3em; }
.fb__open--float { position: fixed; z-index: 30; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); background: rgba(5, 5, 7, 0.92); }
/* Підпис кружка. У куті сторінки на широкому вікні він стоїть поруч зі значком (кнопка стає пігулкою). На схемі
   підпис з'являється ліворуч від кружка при наведенні й фокусі: постійний напис заважав би карті. */
.fb__tip { display: none; font-size: 0.8125rem; font-weight: 500; line-height: 1; white-space: nowrap; }
@media (min-width: 900px) {
  .fb__open--float { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 0 16px 0 12px; }
  .fb__open--float .fb__tip { display: inline; color: var(--fg); }
  /* після прокрутки сторінки пігулка згортається в кружок (клас ставить feedback.js): напис не накриває текст і кнопки */
  .fb__open--float.is-compact { display: grid; width: 44px; padding: 0; }
  .fb__open--float.is-compact .fb__tip { display: none; }
}
@media (hover: hover) and (min-width: 720px) and (min-height: 561px) {
  .map__tools .fb__open { position: relative; }
  .map__tools .fb__open .fb__tip { display: block; position: absolute; right: calc(100% + 8px); top: 50%; translate: 0 -50%; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 999px; background: rgba(5, 5, 7, 0.92); color: var(--fg); opacity: 0; pointer-events: none; transition: opacity 0.15s; }
  .map__tools .fb__open:hover .fb__tip, .map__tools .fb__open:focus-visible .fb__tip { opacity: 1; }
}
/* Поки плашка згоди на статистику на екрані, кружок стоїть над нею (висоту плашки дає stats.js) */
.has-consent .fb__open--float { bottom: calc(18px + var(--consent-h, 92px) + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .has-consent .fb__open--float { bottom: calc(32px + var(--consent-h, 70px)); } }
.fb { width: min(460px, calc(100vw - 24px)); max-height: min(740px, calc(100dvh - 24px)); padding: 0; border: 1px solid var(--rule); border-radius: 16px; background: var(--panel); color: var(--fg); overflow: auto; overscroll-behavior: contain; }
.fb:not([open]) { display: none; }   /* браузер без <dialog> сам закрите вікно не сховає */
.fb::backdrop { background: rgba(5, 5, 7, 0.62); }
.fb__form, .fb__done { display: grid; gap: 8px; padding: 16px 18px 18px; outline: none; }
/* Шапка вікна липне до верху: на низькому екрані вікно гортається, а назва й хрестик лишаються на місці */
.fb__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin: -16px -18px 0; padding: 16px 18px 6px; background: var(--panel); }
.fb__head::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; background: linear-gradient(to bottom, var(--panel), transparent); pointer-events: none; }
.fb__title { max-width: none; margin: 0; padding-top: 6px; font-size: 1.15rem; line-height: 1.25; }
.fb__close { flex: none; margin: -4px -8px 0 0; border-color: transparent; background: transparent; }
.fb__lead, .fb__hint, .fb__note { max-width: none; margin: 0; color: var(--mut); font-size: 0.85rem; line-height: 1.45; }
.fb__note a { color: var(--fg); }
.fb__kind { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 6px 0 0; padding: 0; border: 0; }
.fb__kind legend { margin-bottom: 6px; padding: 0; font-size: 0.85rem; font-weight: 600; }
.fb__label { margin-top: 8px; font-size: 0.85rem; font-weight: 600; }
/* 16 пкс у полях: з меншим кеглем Safari на телефоні наближає сторінку під час набору */
.fb__input { width: 100%; padding: 10px 12px; border: 1px solid #6A6A72; border-radius: 10px; background: rgba(5, 5, 7, 0.6); color: var(--fg); font: inherit; font-size: 1rem; line-height: 1.4; }
textarea.fb__input { min-height: 112px; resize: vertical; }
.fb__input:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-color: var(--acc); }
.fb__input[aria-invalid="true"] { border-color: #FF9E90; }
.fb__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fb__captcha:empty { display: none; }
.fb__note { margin-top: 6px; }
.fb__status { margin: 0; color: #FF9E90; font-size: 0.875rem; line-height: 1.4; }
.fb__status:empty { display: none; }
/* Низ форми липне до низу вікна: на низькому екрані кнопку «Надіслати» й повідомлення про помилку видно без прокрутки */
.fb__foot { position: sticky; bottom: 0; display: grid; gap: 8px; margin: 4px -18px -18px; padding: 10px 18px 18px; background: linear-gradient(to top, var(--panel) calc(100% - 10px), transparent); }
.fb__actions { display: flex; justify-content: flex-end; }
.fb__actions .btn[aria-disabled="true"] { opacity: 0.6; cursor: default; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.chips li.chip--place { cursor: default; }
.chip--place b { color: var(--acc); font-weight: 500; font-size: 0.8rem; }
.legend--map { margin-top: 16px; }
.legend .lm { flex: none; width: 8px; height: 8px; border: 0; }
.legend .lm--dot { border-radius: 50%; background: var(--acc); }
.legend .lm--est { border: 1.3px solid var(--acc); rotate: 45deg; }
.legend .lm--grp { width: auto; height: 18px; padding: 0 6px; border: 1px solid var(--acc); border-radius: 9px; color: var(--acc); font-size: 0.7rem; line-height: 16px; font-style: normal; }
.map__counts { max-width: 80ch; margin: 16px 0 0; color: var(--mut); font-size: 0.9rem; text-wrap: pretty; }

/* Картка вибраного об'єкта: на телефоні виїжджає знизу, на ширшому екрані стоїть у куті схеми.
   Заголовок із кнопкою закриття й низ із головною дією нерухомі, гортається лише середина. */
.card { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; flex-direction: column; max-height: 62svh; border-top: 1px solid var(--rule); border-radius: 16px 16px 0 0; background: var(--panel); outline: none; }
.card__head { display: flex; align-items: flex-start; gap: 8px; padding: 12px 8px 0 var(--pad); }
.card__title { flex: 1; min-width: 0; max-width: none; margin: 8px 0 10px; font-size: 1.2rem; font-weight: 600; line-height: 1.25; letter-spacing: 0; }
.card__close { flex: none; border-color: transparent; background: transparent; }
.card__body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 var(--pad) calc(18px + env(safe-area-inset-bottom)); }
.card__body > :first-child { margin-top: 0; }
.card__foot { padding: 12px var(--pad) calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); }
.card__foot .btn { width: 100%; }
.card__sub { margin: 16px 0 6px; color: var(--mut); font-size: 0.8rem; font-weight: 500; }
.card__dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 0.9rem; }
.card__dl dt { color: var(--mut); }
.card__dl dd { margin: 0; }
.card__dl--nums { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--rule); }
.card__dl--nums dt { margin-top: 8px; font-size: 0.8rem; }
.card__dl--nums dd { font-size: 1.05rem; white-space: nowrap; }
.card__note { margin: 10px 0 0; color: var(--mut); font-size: 0.9rem; }
.card__note + .card__dl { margin-top: 10px; }
.card__calc, .card__small { margin: 10px 0 0; color: var(--mut); font-size: 0.75rem; line-height: 1.45; }
.card__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 14px 0 0; font-size: 0.9rem; }
.card__links a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }
.card__list { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.card__pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; font-size: 0.9rem; text-align: left; cursor: pointer; }
.card__pick b { color: var(--acc); font-weight: 500; }
.card__zoom { margin-top: 14px; }
.card__h { margin: 18px 0 2px; font-size: 0.95rem; font-weight: 600; }
.card__dl--facts { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.card__small a { overflow-wrap: anywhere; }
/* посилання на джерело й умови використання: зона дотику не менша за 44 пкс */
.credits__a { display: inline-flex; align-items: center; min-height: 44px; }
.card__dl--live { margin-top: 0; padding-top: 0; border-top: 0; }
.card__list--gap { margin-top: 12px; }
.card__nums .chip { margin-top: 10px; }
/* Низьке вікно (телефон боком): кнопки схеми стають у рядок, картка нижча */
@media (max-height: 460px) {
  .map__tools { grid-auto-flow: column; }
  .card { max-height: 56svh; }
}

/* Перелік апаратів */
.list__search { display: grid; gap: 6px; max-width: 420px; margin: 18px 0 10px; }
.list__search label { color: var(--mut); font-size: 0.85rem; }
.list__search input { width: 100%; height: 48px; padding: 0 18px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--fg); font: inherit; }
.list__status { min-height: 1.5em; color: var(--mut); font-size: 0.85rem; }
.list__note { max-width: 86ch; margin: 12px 0 0; color: var(--mut); font-size: 0.85rem; line-height: 1.55; text-wrap: pretty; }
.lgroup { border-top: 1px solid var(--rule); }
.lgroup:last-of-type { border-bottom: 1px solid var(--rule); }
.lgroup summary { display: flex; align-items: center; gap: 12px; min-height: 56px; cursor: pointer; list-style: none; font-weight: 600; }
.lgroup summary::-webkit-details-marker { display: none; }
.lgroup__n { color: var(--acc); font-size: 0.85rem; font-weight: 500; }
.lgroup summary .ic { margin-left: auto; transition: rotate 0.2s; }
.lgroup[open] summary .ic { rotate: 45deg; }
.lrows { display: grid; margin: 0; padding: 0 0 14px; list-style: none; }
.lrow { display: grid; gap: 2px 20px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--rule) 55%, transparent); font-size: 0.9rem; }
.lrow:first-child { border-top: 0; }
.lrow__name { justify-self: start; font-weight: 600; font-size: 1rem; }
button.lrow__name { min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 0.2em; }
.lrow.is-on .lrow__name { color: var(--acc); }
.lrow__meta, .lrow__state { color: var(--mut); }
.lrow__state--working, .lrow__state--en_route { color: var(--fg); }
.lrow__links { display: flex; flex-wrap: wrap; gap: 0 16px; }
.lrow__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mut); font-size: 0.85rem; white-space: nowrap; }
/* Історія місії, зображення й посилання на офіційні сервіси: у переліку згорнуто, у картці апарата розгорнуто */
.lrow__more summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--mut); font-size: 0.85rem; list-style: none; cursor: pointer; }
.lrow__more summary::-webkit-details-marker { display: none; }
.lrow__more summary .ic { width: 0.95em; height: 0.95em; transition: rotate 0.2s; }
.lrow__more[open] summary .ic { rotate: 45deg; }
.fig { margin: 4px 0 0; }
.fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; background: var(--rule); }
.fig figcaption { margin-top: 6px; color: var(--mut); font-size: 0.75rem; line-height: 1.45; }
.fig figcaption a, .story__src a { display: inline; min-height: 0; padding-block: 4px; }
.fig--none { padding: 8px 10px; border: 1px dashed var(--rule); border-radius: 10px; color: var(--mut); font-size: 0.75rem; line-height: 1.45; }
.story__p { margin: 12px 0 0; font-size: 0.9rem; line-height: 1.5; }
.story__p b { font-weight: 600; }
.story__src, .live__checked { margin: 3px 0 0; color: var(--mut); font-size: 0.75rem; line-height: 1.45; }
.live { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); }
.live__h { margin: 0; font-size: 0.95rem; font-weight: 600; }
.live__row { margin: 0; font-size: 0.9rem; }
.live__row a { display: inline-flex; align-items: center; min-height: 44px; }
.live__row small { display: block; margin-top: -8px; color: var(--mut); font-size: 0.75rem; line-height: 1.4; }
.card .fig { margin: 0 0 14px; }
.card .story { margin-top: 14px; padding-top: 2px; border-top: 1px solid var(--rule); }
.card__model { margin: 0 0 12px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 10px; color: var(--mut); font-size: 0.75rem; line-height: 1.45; }
.card__model .chip { margin-top: 8px; }
.next { max-width: 860px; margin: clamp(18px, 3vw, 28px) 0 0; padding: 0; list-style: none; display: grid; gap: 8px 32px; }
.lead--fg { color: var(--fg); }
@media (prefers-reduced-motion: no-preference) {
  .live__dot::after { animation: live-dot 2.6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
  @keyframes live-dot { 0% { opacity: 0.9; scale: 1; } 70%, 100% { opacity: 0; scale: 2.6; } }
}
@media (hover: hover) and (pointer: fine) {
  .map__stage canvas { cursor: grab; }
  .map__stage canvas:active { cursor: grabbing; }
  .map__stage canvas.is-pick { cursor: pointer; }
}
@media (min-width: 720px) {
  .map__views { gap: 8px; }
  .map__views .chip { padding: 0 16px; }
  .card { position: absolute; left: auto; right: max(12px, calc((100% - 1120px) / 2 + var(--pad))); top: 12px; bottom: auto; width: 340px; max-height: calc(100% - 24px); border: 1px solid var(--rule); border-radius: 14px; }
  .card__head { padding: 10px 6px 0 18px; }
  .card__body { padding: 0 18px 16px; }
  .card__foot { padding: 12px 18px 14px; }
  .has-card .map__tools { right: calc(max(12px, calc((100% - 1120px) / 2 + var(--pad))) + 352px); }
  .has-card .map__time { right: calc(max(12px, calc((100% - 1120px) / 2 + var(--pad))) + 412px); }
  .next { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .map__time { display: flex; }
  .map__hint { bottom: 62px; }
  .lrow { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.7fr) minmax(0, 1.5fr) 250px; align-items: center; }
}

/* Головна як застосунок: карта на все вікно, шапка, заголовок, перелік і картка лежать поверх неї.
   Сторінка не гортається, тому коліщатко й жести належать карті. Без JavaScript nojs.css повертає звичайну сторінку.
   Шари: карта 0, заголовок 20, шапка 30, перелік 40, картка 45, згода 50. */
.app { --edge: clamp(12px, 2.4vw, 28px); --top-h: 108px; --bot-h: 64px; overflow: hidden; height: 100vh; height: 100dvh; }
.app .wrap--top { position: fixed; z-index: 30; inset: 0 0 auto 0; max-width: none; padding-inline: var(--edge); background: linear-gradient(rgba(5, 5, 7, 0.94), rgba(5, 5, 7, 0.78) 62%, rgba(5, 5, 7, 0)); pointer-events: none; }
.app .top { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "brand list lang" "nav nav nav"; align-items: center; column-gap: 8px; height: auto; padding-top: 6px; }
.app .top > * { pointer-events: auto; }
.app .brand { grid-area: brand; justify-self: start; }
.app .lang { grid-area: lang; background: rgba(5, 5, 7, 0.78); }
.top__list { grid-area: list; background: rgba(5, 5, 7, 0.78); }
.top__list b { color: var(--acc); font-weight: 500; font-size: 0.8rem; }
.bodies { grid-area: nav; display: flex; gap: 4px; margin-inline: calc(var(--edge) * -1); padding: 4px var(--edge) 14px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent); }
.bodies::-webkit-scrollbar { display: none; }
.bodies__b { flex: none; min-height: 44px; padding: 0 13px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #B4B4B8; font-size: 0.875rem; font-weight: 500; white-space: nowrap; cursor: pointer; scroll-snap-align: start; transition: color 0.18s, background-color 0.18s, border-color 0.18s; }
.bodies__b[aria-pressed="true"] { border-color: var(--rule); background: rgba(244, 244, 242, 0.1); color: var(--fg); }
.app .map { padding: 0; }
.app .map__stage { position: fixed; inset: 0; height: auto; border: 0; }
.app .map__stage canvas { touch-action: none; }
.app .hero--map { position: fixed; z-index: 20; top: calc(var(--top-h) + 2px); left: var(--edge); max-width: min(430px, calc(100vw - 2 * var(--edge))); padding: 0; pointer-events: none; transition: opacity 0.25s, visibility 0.25s; }
.app .hero--map .wrap { max-width: none; padding: 0; }
.app .hero--map a { pointer-events: auto; }
.app .hero--map .eyebrow { margin-bottom: 0.55rem; font-size: 0.68rem; }
.app .hero--map h1 { font-size: clamp(1.2rem, 2.2vw, 1.85rem); text-shadow: 0 0 14px var(--bg), 0 0 3px var(--bg); }
.app .hero__lead { margin-top: 8px; font-size: 0.875rem; text-shadow: 0 0 8px var(--bg), 0 0 2px var(--bg); }
.app .event { margin-top: 2px; font-size: 0.85rem; text-shadow: 0 0 8px var(--bg), 0 0 2px var(--bg); }
.app.is-object .hero--map { opacity: 0; visibility: hidden; }
.app .map__hint { left: var(--edge); bottom: calc(var(--bot-h) + 60px + env(safe-area-inset-bottom)); margin: 0; }
.app .map__views { position: absolute; left: var(--edge); bottom: calc(var(--bot-h) + 4px + env(safe-area-inset-bottom)); margin: 0; }
.app .map__views .chip { background: rgba(5, 5, 7, 0.78); }
.app.is-object .map__views { display: none; }
/* відкрита панель переліку накриває рядок виглядів, а галочку назв різала навпіл: з панеллю рядок сховано цілком */
.app.has-sheet .map__views { visibility: hidden; }
.app .map__time { display: flex; left: var(--edge); right: calc(var(--edge) + 56px); bottom: calc(10px + env(safe-area-inset-bottom)); }
.app .map__tools { right: var(--edge); bottom: calc(12px + env(safe-area-inset-bottom)); }
.app .map__stage.has-card .map__tools { bottom: calc(12px + max(env(safe-area-inset-bottom), var(--free-b, 0px))); }
.app .map__stage.has-card .map__time { bottom: calc(10px + max(env(safe-area-inset-bottom), var(--free-b, 0px))); }
.app .map__stage.has-card .map__views { bottom: calc(var(--bot-h) + 4px + max(env(safe-area-inset-bottom), var(--free-b, 0px))); }
/* Плашка згоди на головній не накриває кнопки схеми: стоїть над рядком виглядів (тимчасово закриває лише підказку),
   а на широкому вікні праворуч від нього, біля стовпчика кнопок. Правила для малого й широкого вікна стоять нижче. */
.app .consent { z-index: 50; bottom: calc(var(--bot-h) + 56px + env(safe-area-inset-bottom)); }

/* Перелік: панель, що виїжджає зліва. Весь текст сторінки (перелік, довідка про планети, джерела, підвал) живе в ній. */
.sheet { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; width: min(460px, 100vw); border-right: 1px solid var(--rule); background: var(--panel); visibility: hidden; translate: -102% 0; transition: translate 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0.28s; }
/* видимість вмикається одразу (інакше фокус не переходить у панель), а вимикається після того, як панель виїхала */
.sheet.is-open { visibility: visible; translate: 0 0; transition: translate 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 8px 20px; border-bottom: 1px solid var(--rule); }
.sheet__title { margin: 0; max-width: none; font-size: 1.15rem; }
.sheet__head .tool { flex: none; border-color: transparent; background: transparent; }
.sheet__body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 20px calc(20px + env(safe-area-inset-bottom)); }
.sheet__body > section { padding-block: 22px; border-top: 1px solid var(--rule); }
.sheet__body > section:first-child { border-top: 0; padding-top: 14px; }
.sheet__body h2 { font-size: 1.15rem; }
.sheet__body .lead { font-size: 0.9rem; }
.sheet .list__search { margin-top: 12px; }
.sheet .lrow { grid-template-columns: minmax(0, 1fr); }
.sheet .chips { margin-top: 18px; }
.sheet .foot { margin-top: 0; padding-block: 22px 0; }
.sheet .foot .wrap { max-width: none; padding: 0; }
.sheet .next { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
.brows { display: grid; margin: 12px 0 0; padding: 0; list-style: none; }
.brow { padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--rule) 55%, transparent); }
.brow:first-child { border-top: 0; }
.brow__name { font-weight: 600; font-size: 1rem; }
button.brow__name { min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 0.2em; }
.brow__facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 14px; margin: 4px 0 0; font-size: 0.85rem; }
.brow__facts dt { color: var(--mut); }
.brow__facts dd { margin: 0; }
.brow__note, .brow__image { margin: 8px 0 0; color: var(--mut); font-size: 0.8rem; line-height: 1.45; }
.blist .src { margin-top: 14px; }
.credits { margin-top: 14px; border-top: 1px solid var(--rule); }
.credits summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-weight: 600; font-size: 0.9rem; list-style: none; cursor: pointer; }
.credits summary::-webkit-details-marker { display: none; }
.credits summary .ic { color: var(--mut); transition: rotate 0.2s; }
.credits[open] summary .ic { rotate: 45deg; }
.credits__list { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--mut); font-size: 0.75rem; line-height: 1.5; }
.credits__list b { color: var(--fg); font-weight: 600; }
.credits__list a { color: var(--fg); overflow-wrap: anywhere; }

@media (max-width: 719px) {
  /* на телефоні картка тіла нижча, щоб над нею лишалось місце для самого тіла */
  .app.is-object .card { max-height: 46svh; }
}
@media (max-width: 719px), (max-height: 600px) {
  /* мало місця: вступний рядок лишається лише читачам екрана й пошуковикам */
  .app .hero__lead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .app.has-card .hero--map, .app.has-card .map__views, .app.has-card .map__hint { opacity: 0; visibility: hidden; }
}
@media (min-width: 720px) {
  /* картка лишає під собою місце для стовпчика кнопок масштабу й шкали часу */
  .app .card { top: calc(var(--top-h) + 6px); right: var(--edge); width: 372px; max-height: calc(100% - var(--top-h) - 6px - 232px); }
  .app .has-card .map__tools { right: var(--edge); }
  .app .has-card .map__time { right: calc(var(--edge) + 56px); }
  .app .consent { left: var(--edge); right: auto; margin: 0; }
}
@media (min-width: 1100px) {
  /* перелік стоїть збоку під шапкою: назва сайту й навігація по тілах лишаються видними */
  .sheet { top: var(--top-h); border-top: 1px solid var(--rule); }
}
@media (min-width: 1180px) {
  .app { --top-h: 64px; }
  .app .top { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "brand nav list lang"; column-gap: 14px; height: 64px; padding-top: 0; }
  .bodies { justify-content: center; margin: 0; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}
@media (hover: hover) { .bodies__b:hover { color: var(--fg); background: rgba(244, 244, 242, 0.06); } }
.bodies { scroll-padding-inline: var(--edge); }
@media (max-width: 719px), (max-height: 560px) {
  /* Малий екран: кнопки масштабу стоять рядком над шкалою часу. Стовпчик із трьох кнопок над карткою діставав до шапки. */
  .app .map__tools { grid-auto-flow: column; bottom: calc(var(--bot-h) + 4px + env(safe-area-inset-bottom)); }
  .app .map__stage.has-card .map__tools { bottom: calc(var(--bot-h) + 4px + max(env(safe-area-inset-bottom), var(--free-b, 0px))); }
  .app .map__time { right: var(--edge); }
  /* вигляди схеми стоять окремим рядком над кнопками масштабу: в одному рядку на 360 пкс вони не вміщаються */
  .app .map__views { right: var(--edge); bottom: calc(var(--bot-h) + 56px + env(safe-area-inset-bottom)); }
  /* галочка назв стоїть рядком нижче, ліворуч від кнопок масштабу: у рядку виглядів на 360 пкс їй немає місця */
  .app .map__names { position: absolute; left: 0; top: calc(100% + 8px); }
  .app .map__hint { bottom: calc(var(--bot-h) + 112px + env(safe-area-inset-bottom)); }
  .app .card { max-height: 50svh; }
  .app.is-object .card { max-height: 46svh; }
}
@media (max-width: 719px), (max-height: 560px) { .app .consent { bottom: calc(var(--bot-h) + 108px + env(safe-area-inset-bottom)); } }
/* На телефоні відкрита картка займає низ екрана, а заголовок сторінки схований: плашка стає під шапку, на вільну схему */
@media (max-width: 719px) { .app.has-card .consent { top: calc(var(--top-h) + 6px); bottom: auto; } }
/* Панель переліку закриває сторінку для клавіатури й дотику: плашка чекає, поки панель закриють */
.app.has-sheet .consent { visibility: hidden; }
@media (min-width: 1100px) and (min-height: 561px) { .app .consent { left: auto; right: calc(var(--edge) + 56px); bottom: calc(var(--bot-h) + 14px + env(safe-area-inset-bottom)); } }
@media (min-width: 720px) and (max-height: 560px) {
  /* Телефон боком: картка стоїть праворуч на всю висоту під шапкою, керування зсувається ліворуч від неї */
  .app .card, .app.is-object .card { max-height: calc(100% - var(--top-h) - 14px); }
  .app .has-card .map__tools, .app .has-card .map__time { right: calc(var(--edge) + 384px); }
  .app .has-card .map__views { right: calc(var(--edge) + 384px); }
}
@media (max-width: 719px) and (max-height: 420px) {
  /* Зовсім низьке вікно (малий телефон боком) з відкритою карткою: кнопкам масштабу немає місця між шапкою й карткою.
     Схему тут наближають двома пальцями. */
  .app .map__stage.has-card .map__tools { display: none; }
}
@media (max-width: 1099px) {
  /* Перший екран біля Землі: на вужчому вікні вступний рядок не має лягати на планету */
  .app.is-intro .hero__lead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 720px) and (max-width: 1099px) {
  /* Середня ширина: з відкритою карткою заголовок сторінки не має наїжджати на неї */
  .app.has-card .hero--map { max-width: calc(100vw - 372px - 3 * var(--edge)); }
  .app.has-card .hero__lead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Цифри */
.figs { display: grid; gap: 40px 48px; }
.fig__label { margin: 0 0 0.5em; color: var(--mut); font-size: 0.95rem; }
.fig__value { margin: 0 0 0.3em; font-weight: 700; font-size: clamp(2.2rem, 8vw, 3rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fig__value small { font-size: 0.42em; font-weight: 600; color: var(--mut); letter-spacing: 0; }
.fig__text { max-width: 34ch; margin: 0 0 0.5em; color: var(--mut); }
.src { margin: 0; color: var(--mut); font-size: 0.75rem; line-height: 1.5; }
.panel .src { margin-top: 16px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 28px 24px; margin-top: clamp(40px, 6vw, 64px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--rule); }
.fact { display: flex; flex-direction: column; }
.fact__value { margin: 0 0 0.3em; font-weight: 600; font-size: clamp(1.15rem, 3.6vw, 1.5rem); line-height: 1.15; }
.fact__text { margin: 0 0 0.6em; color: var(--mut); font-size: 0.9rem; line-height: 1.45; }
.fact .src { margin-top: auto; }
@media (min-width: 720px) {
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig__value { font-size: clamp(2.2rem, 5.2vw, 4rem); }
}
@media (min-width: 900px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Пояснення */
.prose p { max-width: 60ch; }
.formula { margin: clamp(28px, 4vw, 40px) 0 0; }
.formula__a { margin: 0 0 0.5em; color: var(--mut); font: 500 clamp(0.85rem, 2.6vw, 1rem)/1.4 var(--mono); }
.formula__b { margin: 0 0 0.6em; font-weight: 700; font-size: clamp(1.5rem, 6.4vw, 2.75rem); line-height: 1.05; letter-spacing: -0.02em; white-space: nowrap; }
.formula__note { max-width: 40ch; margin: 0 0 0.6em; color: var(--mut); font-size: 0.9rem; }
@media (min-width: 900px) {
  .split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 72px; align-items: end; }
  .formula { margin-top: 0; }
  .formula__b { font-size: clamp(1.5rem, 3.6vw, 2.75rem); }
}

.chart { position: relative; margin: clamp(24px, 4vw, 40px) 0 0; aspect-ratio: 1.45; }
.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart__curve { fill: none; stroke: var(--fg); stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.chart__day { stroke: var(--acc); stroke-width: 1; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; opacity: 0.7; }
.chart__tick { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart b, .chart span { position: absolute; }
.chart b { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--acc); }
.chart span { color: var(--mut); font: 500 0.72rem/1.25 var(--mono); white-space: nowrap; }
.chart .c-day { color: var(--acc); transform: translateY(-140%); }
.chart .c-title { left: 0; top: 0; color: var(--fg); }
.chart .c-pt { color: var(--fg); transform: translate(10px, 40%); }
.chart .c-year { transform: translate(-50%, 6px); }
.chart b.is-ring, .chart-keys b.is-ring { background: var(--bg); border: 2px solid var(--acc); }
.chart .c-year--end { transform: translate(-100%, 6px); }
.chart-keys { display: grid; gap: 8px 32px; margin: 34px 0 0; padding: 0; list-style: none; font: 500 0.8rem/1.4 var(--mono); }
.chart-keys li { display: flex; align-items: center; gap: 10px; }
.chart-keys b { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--acc); }
.chart-cap { max-width: 60ch; margin: 16px 0 0.5em; color: var(--mut); font-size: 0.9rem; }
@media (min-width: 720px) { .chart-keys { grid-template-columns: repeat(2, max-content); } }
@media (min-width: 720px) { .chart { aspect-ratio: 2.6; } }

/* Виміряно і розраховано */
.cols { display: grid; gap: 36px; }
.cols ul { margin: 0; padding: 0; list-style: none; }
.cols li { max-width: 52ch; margin: 0 0 0.9em; padding-left: 1.1em; position: relative; color: var(--fg); }
.cols li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 6px; height: 1px; background: var(--mut); }
.cols h3 { color: var(--acc); font: 500 0.78rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.how { margin-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--rule); }
.how summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; font-weight: 600; font-size: 1.05rem; list-style: none; cursor: pointer; }
.how summary::-webkit-details-marker { display: none; }
.how summary .ic { color: var(--mut); transition: rotate 0.25s; }
.how[open] summary .ic { rotate: 45deg; }
.how ul { padding-bottom: 8px; }
.how li { color: var(--mut); }
.how .src { padding-bottom: 24px; }
@media (min-width: 820px) {
  .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
  .how ul { columns: 2; column-gap: 64px; }
  .how li { break-inside: avoid; }
}

/* Випуск */
.cta__img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.cta__body { margin-top: 28px; }
.cta__text { max-width: 46ch; color: var(--mut); }
.cta__from { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--mut); font-size: 0.9rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (min-width: 820px) {
  .cta { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 64px; align-items: center; }
  .cta__body { margin-top: 0; }
}

/* Коротко */
.faq { max-width: 760px; }
.faq details + details { border-top: 1px solid var(--rule); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 0; font-weight: 600; font-size: 1.05rem; line-height: 1.35; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--mut); transition: rotate 0.25s; }
.faq details[open] summary .ic { rotate: 45deg; }
.faq details p { max-width: 60ch; margin: 0; padding: 0 0 22px; color: var(--mut); }

/* Джерела й підвал */
.sources ol { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 16px 56px; }
.sources li { counter-increment: s; position: relative; padding-left: 2.2em; font-size: 0.875rem; line-height: 1.5; color: var(--mut); }
.sources li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 0.1em; color: var(--acc); font: 500 0.75rem/1.6 var(--mono); }
.sources li a { color: var(--fg); }
.sources .note { max-width: 62ch; margin: 28px 0 0; color: var(--mut); font-size: 0.8rem; }
@media (min-width: 900px) { .sources ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.foot { margin-top: calc(var(--gap) / 2); padding-block: 32px calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); color: var(--mut); font-size: 0.85rem; }
body:not(.app) .foot { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }   /* місце для кружка відгуку в куті */
.doc__back a { display: inline-flex; align-items: center; min-height: 44px; }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.foot__row a { display: inline-flex; align-items: center; min-height: 44px; }
.chan-mark { width: 24px; height: 24px; flex: none; }
.foot__channel { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; }
.foot__small { margin: 14px 0 0; font-size: 0.75rem; }
.mtech-shimmer { font-weight: 600; background: linear-gradient(90deg, #8B5CF6, #C4B5FD, #FFC98A, #8B5CF6); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .mtech-shimmer { animation: shimmer 4.5s linear infinite; }
  @keyframes shimmer { to { background-position: -300% 0; } }
}

/* Згода на статистику */
.consent { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; gap: 12px; max-width: 560px; margin-inline: auto; padding: 10px 10px 10px 14px; background: var(--panel); border: 1px solid var(--rule); font-size: 0.8rem; line-height: 1.35; }
.consent p { flex: 1; min-width: 0; margin: 0; }
.consent a { color: var(--mut); }
.consent__row { display: flex; flex: none; gap: 8px; }
.consent .btn, .consent .chip { min-height: 44px; min-width: 52px; padding-inline: 16px; font-size: 0.875rem; }
@media (min-width: 900px) { .consent { left: auto; right: 24px; bottom: 24px; max-width: 440px; margin: 0; } }

/* Службові сторінки */
.doc { max-width: 720px; padding-block: clamp(32px, 6vw, 72px); }
.doc h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin-bottom: 0.6em; }
.doc h2 { font-size: 1.2rem; margin-top: 2em; max-width: none; }
.doc p, .doc li { color: var(--mut); }
.doc ul { padding-left: 1.2em; }

@media (hover: hover) {
  .btn:hover { background: #ffd9ac; }
  .btn--ghost:hover, .chip:hover, .tool:hover, .lang:hover { border-color: var(--fg); background: rgba(244, 244, 242, 0.06); }
  .card__pick:hover { border-color: var(--fg); background: rgba(244, 244, 242, 0.06); }
  a:hover { text-decoration-color: currentColor; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
@media (max-width: 359px) {
  /* Найвужчі телефони: англійська шапка («Spacecraft» і «Українською») інакше виходить за правий край вікна */
  .app .top { column-gap: 4px; }
  .app .top__list, .app .lang { padding-inline: 9px; font-size: 0.8125rem; }
  .app .top__list b { display: none; }   /* лічильник апаратів тут не вміщається */
  .app .brand { font-size: 1rem; white-space: nowrap; }
}
@media (max-width: 350px) {
  /* Найвужчі телефони: у рядку під виглядами стоять галочка назв і кружки. Чотири кружки не вміщаються, тож кнопку
     «На весь екран» тут сховано (сторінка й так займає все вікно). Вигляди дрібніші, щоб стояли одним рядком. */
  .app #full { display: none; }
  .app .map__views .chip { padding: 0 8px; font-size: 0.8125rem; }
}

/* Графік: позиції з даних */
.cp-day{right:0;top:88.19%}.cp-cross{left:2.20%;top:88.19%}.cp-min{left:22.03%;top:86.23%}.cp-y2027{left:7.70%;top:100%}.cp-y2028{left:53.79%;top:100%}.cp-y2029{left:99.80%;top:100%}