/* usdtcasinosites.com — «расчётная лента».
 *
 * Идея оформления одна и проводится везде: сайт меряет казино в одной
 * единице, поэтому его мир — это лента клиринга, а не игровой автомат.
 * Отсюда моноширинные цифры в каждом месте, где стоит величина, тонкая
 * насечка под заголовками и ряды-строки реестра вместо карточек.
 *
 * Тёмный первый экран и светлые внутренние — как на двух сайтах, на которые
 * показал владелец; всё остальное своё: своя пара шрифтов, своя палитра
 * (нефрит вместо сливы и янтаря) и свой памятный элемент — лента.
 */

/* --------------------------------------------------------------- токены -- */

:root {
  --display: "Funnel Display", "Segoe UI", system-ui, sans-serif;
  --body: "Recursive", "Segoe UI", system-ui, sans-serif;
  --mono: "Kode Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --bg: #f2f5f3;
  --surface: #ffffff;
  --surface-2: #e9eeeb;
  --ink: #0f1a16;
  --ink-2: #384740;
  --muted: #6c7c74;
  --rule: #d4ddd8;
  --rule-soft: #e6ece9;

  --chrome: #0b1512;
  --chrome-2: #122019;
  --chrome-ink: #eaf2ee;
  --chrome-muted: #8ba49a;
  --chrome-rule: #1e2f27;

  --accent: #0e7a5f;
  --accent-ink: #ffffff;
  --accent-soft: #e2f1ec;
  --accent-bright: #3dd9a4;
  --warn: #b07c00;
  --warn-soft: #fbf3df;
  --bad: #c0392f;
  --bad-soft: #fbeceb;

  --radius: 6px;
  --wrap: 68rem;
  --shadow: 0 1px 2px rgba(15, 26, 22, .06), 0 8px 24px -16px rgba(15, 26, 22, .25);
}

*, *::before, *::after { box-sizing: border-box }

html { -webkit-text-size-adjust: 100% }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto }

a { color: var(--accent); text-underline-offset: .18em }
a:hover { color: #0a5c47 }

:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 2px }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.012em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(2.1rem, 1.35rem + 3vw, 3.5rem) }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.05rem) }
h3 { font-size: 1.2rem; font-weight: 600 }

p { margin: 0 0 1.05em }

.wrap {
  width: min(100% - 2rem, var(--wrap));
  margin-inline: auto;
}

.prose { max-width: none }
.prose > * + h2 { margin-top: 2.6rem }
.prose > h2 + * { margin-top: .9rem }
.prose > * + h3 { margin-top: 1.9rem }

/* Текст читается колонкой в 42rem; таблицы, реестр, карточки и оффер живут во
   всей сетке — иначе на широком экране правая половина страницы пустует. */
.prose > p,
.prose > h2,
.prose > h3,
.prose > ul,
.prose > ol,
.prose > .note { max-width: 42rem }
.prose > ol.steps,
.prose > .faq,
.prose > .pc { max-width: 52rem }

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: #fff; padding: .6rem 1rem; z-index: 99;
}
.skip:focus { left: 1rem; top: 1rem }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- шапка -- */

.masthead { background: var(--chrome); color: var(--chrome-ink) }

.mast {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4rem;
}

.wordmark {
  display: inline-flex; align-items: baseline; gap: .1rem;
  font-family: var(--display); font-weight: 700; font-size: 1.3rem;
  color: #fff; text-decoration: none; letter-spacing: -.02em;
}
.wordmark b { color: var(--accent-bright); font-weight: 700 }
.wordmark:hover { color: #fff }

.mast nav ul {
  display: flex; flex-wrap: wrap; gap: .1rem 1.35rem;
  margin: 0; padding: 0; list-style: none;
}
.mast nav a {
  display: block; padding: .35rem 0;
  font-size: .95rem; font-weight: 500; color: var(--chrome-muted);
  text-decoration: none;
}
.mast nav a:hover, .mast nav a[aria-current] { color: #fff }
.mast nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--accent-bright) }

.mast-cta {
  padding: .5rem 1rem; border-radius: 4px;
  background: var(--accent-bright); color: #05231a;
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  text-decoration: none; white-space: nowrap;
}
.mast-cta:hover { background: #63e4b7; color: #05231a }

/* Переключатель языка. Стоит рядом с кнопкой наружу и всегда назван словом
   на том языке, на который ведёт: «Español» по-английски и «English»
   по-испански, — читателю не приходится угадывать флажок. Печатается только
   там, где парная страница действительно собрана. */
.langsw {
  padding: .4rem .7rem;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 4px;
  font-size: .88rem; font-weight: 500; line-height: 1;
  color: var(--chrome-muted); text-decoration: none; white-space: nowrap;
}
.langsw:hover, .langsw:focus-visible {
  color: #fff; border-color: var(--accent-bright);
}

@media (max-width: 62rem) {
  .mast { flex-wrap: wrap; padding-block: .7rem }
  .mast nav { order: 3; width: 100% }
  .mast nav ul { gap: .1rem 1.1rem }
}

/* ------------------------------------------------------------ первый экран */

.hero {
  background: var(--chrome);
  color: var(--chrome-ink);
  padding-block: clamp(2.5rem, 1rem + 6vw, 4.5rem);
  border-bottom: 1px solid var(--chrome-rule);
}

.hero-grid {
  display: grid; gap: 2.2rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: start;
}
@media (max-width: 58rem) { .hero-grid { grid-template-columns: 1fr } }

.eyebrow {
  margin: 0 0 1rem;
  font-family: var(--mono); font-size: .76rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent-bright);
}
.eyebrow span { color: var(--chrome-muted) }

.hero h1 { color: #fff }
.hero h1 em { font-style: normal; color: var(--accent-bright) }

.hero .lede {
  margin: 1.1rem 0 0; max-width: 34rem;
  font-size: 1.05rem; color: #c3d2cb;
}

.hero-acts { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem }

.btn {
  display: inline-block; padding: .7rem 1.25rem; border-radius: 4px;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  text-decoration: none; border: 1px solid transparent;
}
.btn-a { background: var(--accent-bright); color: #05231a }
.btn-a:hover { background: #63e4b7; color: #05231a }
.btn-b { border-color: #2c4339; color: var(--chrome-ink) }
.btn-b:hover { border-color: var(--accent-bright); color: #fff }

/* Памятный элемент: расчётная лента. Одна проводка, показанная как строка
   клиринга. Цифры моноширинные, насечки — фоном, чтобы не плодить разметку. */

.tape {
  background: var(--chrome-2);
  border: 1px solid var(--chrome-rule);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem 1rem;
}

.tape-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem; padding-bottom: .7rem; border-bottom: 1px dashed var(--chrome-rule);
}
.tape-unit {
  font-family: var(--mono); font-size: 1.7rem; font-weight: 700; color: #fff;
}
.tape-unit i { font-style: normal; color: var(--accent-bright) }
.tape-label {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--chrome-muted);
}

.tape-rows { margin: .8rem 0 0; padding: 0; list-style: none; display: grid; gap: .55rem }
.tape-rows li {
  display: grid; grid-template-columns: 1.6rem 1fr auto; align-items: baseline;
  gap: .7rem; font-size: .92rem;
}
.tape-rows b {
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  color: var(--chrome-muted);
}
.tape-rows span { color: #cadbd3 }
.tape-rows em {
  font-style: normal; font-family: var(--mono); font-weight: 700; color: #fff;
}
.tape-rows .out em { color: var(--accent-bright) }

/* Насечка под лентой: ряд штрихов, нарисованный фоном. */
.tape-rule {
  height: 10px; margin-top: .9rem;
  background-image: repeating-linear-gradient(90deg,
    var(--chrome-rule) 0 1px, transparent 1px 9px);
}

.tape-note {
  margin: .7rem 0 0; font-size: .74rem; line-height: 1.5; color: var(--chrome-muted);
}

@media (prefers-reduced-motion: no-preference) {
  .tape-rows li { animation: uc-row .5s ease-out both }
  .tape-rows li:nth-child(2) { animation-delay: .22s }
  .tape-rows li:nth-child(3) { animation-delay: .44s }
  .tape-rows li:nth-child(4) { animation-delay: .66s }
}
@keyframes uc-row {
  from { opacity: 0; transform: translateY(6px) }
  to { opacity: 1; transform: none }
}

/* Лента как партнёрская ссылка и кнопка под ней. Заказано владельцем
   25.09.2026. Подпись внутри ленты прямо говорит, куда она ведёт: карточка
   нарисованная, и читатель должен знать это до нажатия, а не после. */

.tape-link { display: block; text-decoration: none; color: inherit;
  transition: border-color .18s ease, transform .18s ease }
.tape-link:hover { border-color: var(--accent-bright); transform: translateY(-1px) }
.tape-link:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px }

/* Единственная бесконечная анимация на сайте: по кнопке идёт волна света, а
   заливка перетекает между тремя оттенками. В покое — сплошная заливка. */
.tape-cta {
  position: relative;
  overflow: hidden;
  display: block;
  margin-top: .9rem;
  padding: .95rem 1.2rem;
  border-radius: var(--radius);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  color: #05231a;
  background: var(--accent-bright);
  background-image: linear-gradient(100deg,
    #0e7a5f 0%, #3dd9a4 22%, #b6f2d8 40%, #3dd9a4 58%, #14b384 78%, #0e7a5f 100%);
  background-size: 320% 100%;
  background-position: 0% 50%;
  box-shadow: 0 0 0 0 rgba(61, 217, 164, .42);
}
.tape-cta:hover { color: #05231a; box-shadow: 0 0 0 4px rgba(61, 217, 164, .22) }
.tape-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px }
.tape-cta-in { position: relative; z-index: 2 }

/* Волна света. Собственный элемент, а не ::before: псевдоэлемент на ссылке
   с фоном-градиентом пришлось бы тянуть поверх заливки, и в Safari он
   подрезался по радиусу через раз. */
.tape-cta-sheen {
  position: absolute;
  z-index: 1;
  top: -60%;
  bottom: -60%;
  left: 0;
  width: 42%;
  transform: translateX(-160%) skewX(-18deg);
  background: linear-gradient(90deg, transparent,
    rgba(255, 255, 255, .62) 46%, rgba(255, 255, 255, .8) 52%, transparent);
  opacity: 0;
  pointer-events: none;
}

.tape-cta-note {
  margin: .5rem 0 0;
  font-size: .72rem;
  line-height: 1.45;
  color: var(--chrome-muted);
}

@media (prefers-reduced-motion: no-preference) {
  .tape-cta { animation: uc-flow 7s linear infinite, uc-glow 2.6s ease-in-out infinite }
  .tape-cta-sheen { opacity: 1; animation: uc-sheen 3.4s cubic-bezier(.4, 0, .2, 1) infinite }
}
@keyframes uc-flow {
  from { background-position: 0% 50% }
  to { background-position: 320% 50% }
}
@keyframes uc-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 217, 164, .40) }
  50% { box-shadow: 0 0 22px 2px rgba(61, 217, 164, .40) }
}
@keyframes uc-sheen {
  0% { transform: translateX(-160%) skewX(-18deg) }
  55%, 100% { transform: translateX(340%) skewX(-18deg) }
}

@media (max-width: 40rem) {
  .tape-cta { font-size: 1rem; padding: .9rem 1rem }
}

/* ------------------------------------------------------------- разделы --- */

.band { padding-block: clamp(2.2rem, 1rem + 4vw, 3.6rem) }
.band + .band { border-top: 1px solid var(--rule-soft) }
.band-tint { background: var(--surface-2) }

.kicker {
  margin: 0 0 .5rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent);
}

.band > .wrap > p { max-width: 42rem; color: var(--ink-2) }

.band-head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.4rem;
}

/* --------------------------------------------------------- реестр строк --- */

.ledger { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--surface) }

.led-head, .led-row {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 2fr) minmax(0, 1.4fr) auto;
  gap: 1rem; align-items: center;
  padding: .85rem 1.1rem;
}

.led-head {
  background: var(--surface-2);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}

.led-row { border-top: 1px solid var(--rule-soft) }
.led-row:hover { background: #f7faf8 }
.led-row.is-partner { background: var(--accent-soft) }
.led-row.is-partner:hover { background: #d7ebe4 }

.led-rank { font-family: var(--mono); font-size: .95rem; color: var(--muted) }
.led-row.is-partner .led-rank { color: var(--accent); font-weight: 700 }

.led-name { min-width: 0 }
.led-name a {
  font-family: var(--display); font-weight: 700; font-size: 1.08rem;
  color: var(--ink); text-decoration: none;
}
.led-name a:hover { color: var(--accent) }
.led-sub { display: block; font-size: .82rem; color: var(--muted); margin-top: .1rem }
.led-tag {
  display: inline-block; margin-left: .45rem; padding: .05rem .4rem;
  border: 1px solid var(--accent); border-radius: 3px;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); vertical-align: .12em;
}

.led-rails { display: flex; flex-wrap: wrap; gap: .3rem }
.chip {
  padding: .1rem .45rem; border: 1px solid var(--rule); border-radius: 3px;
  background: var(--surface-2);
  font-family: var(--mono); font-size: .7rem; color: var(--ink-2);
}
.chip-none { border-style: dashed; color: var(--muted); background: transparent }

.led-go {
  padding: .45rem .85rem; border-radius: 4px;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--display); font-weight: 700; font-size: .88rem;
  text-decoration: none; white-space: nowrap;
}
.led-go:hover { background: #0a5c47; color: #fff }

@media (max-width: 58rem) {
  .led-head { display: none }
  .led-row {
    grid-template-columns: 2.2rem 1fr;
    grid-template-areas: "rank name" ". rails" ". go";
    row-gap: .6rem;
  }
  .led-rank { grid-area: rank }
  .led-name { grid-area: name }
  .led-rails { grid-area: rails }
  .led-go { grid-area: go; justify-self: start }
}

.ledger-foot {
  margin: .8rem 0 0; font-size: .8rem; line-height: 1.55; color: var(--muted);
}

/* -------------------------------------------------------------- карточки -- */

.cards {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}

.card {
  display: block; padding: 1.1rem 1.2rem;
  background: var(--surface); border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: 0 0 var(--radius) var(--radius);
  color: inherit; text-decoration: none;
}
.card:hover { border-color: var(--accent); box-shadow: var(--shadow) }
.card h3 { margin: 0 0 .35rem; color: var(--ink) }
.card p { margin: 0; font-size: .9rem; color: var(--ink-2) }
.card .card-meta {
  display: block; margin-top: .6rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}

/* --------------------------------------------------------- таблица фактов - */

.facts {
  width: 100%; border-collapse: collapse;
  background: var(--surface); border: 1px solid var(--rule);
  font-size: .94rem;
}
.facts caption {
  caption-side: top; text-align: left; padding: 0 0 .6rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.facts th, .facts td { padding: .6rem .9rem; text-align: left; vertical-align: top }
.facts th {
  width: 40%; font-weight: 500; color: var(--muted);
  border-right: 1px solid var(--rule-soft);
}
.facts tr + tr th, .facts tr + tr td { border-top: 1px solid var(--rule-soft) }
.facts td { font-family: var(--mono); font-size: .88rem; color: var(--ink) }
.facts .nofile { color: var(--muted); font-family: var(--body); font-style: italic }

.readmark {
  margin: .6rem 0 0;
  font-family: var(--mono); font-size: .72rem; color: var(--muted);
}

/* ------------------------------------------------------------ плюсы/минусы */

.pc { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) }
.pc > div {
  padding: 1rem 1.1rem; background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.pc h3 {
  margin: 0 0 .5rem; font-family: var(--mono); font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
}
.pc-good h3 { color: var(--accent) }
.pc-bad h3 { color: var(--bad) }
.pc ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem }
.pc li { font-size: .92rem; color: var(--ink-2) }

/* ------------------------------------------------------------- врезки ----- */

.note {
  margin: 1.6rem 0; padding: .9rem 1.1rem;
  background: var(--surface); border: 1px solid var(--rule);
  border-left: 4px solid var(--warn); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .94rem; color: var(--ink-2);
}
.note b { color: var(--ink) }

.steps { margin: 1.4rem 0; padding: 0; list-style: none; display: grid; gap: .9rem; counter-reset: s }
.steps li {
  display: grid; grid-template-columns: 2rem 1fr; gap: .9rem;
  counter-increment: s;
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--mono); font-size: .8rem; font-weight: 700; color: var(--accent);
  padding-top: .18rem;
}
.steps b { display: block; font-family: var(--display); font-size: 1.02rem }
.steps span { font-size: .94rem; color: var(--ink-2) }

/* ---------------------------------------------------------- блок партнёра - */

.offer {
  margin: 2rem 0;
  background: var(--chrome); color: var(--chrome-ink);
  border-radius: var(--radius); overflow: hidden;
  display: block; text-decoration: none;
}
.offer-in { padding: 1.3rem 1.4rem }
.offer-kick {
  margin: 0 0 .4rem; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent-bright);
}
.offer h3 { margin: 0 0 .5rem; color: #fff; font-size: 1.32rem }
.offer p { margin: 0 0 .9rem; font-size: .95rem; color: #c3d2cb; max-width: 40rem }
.offer-terms {
  margin: 0 0 1rem; padding: 0; list-style: none;
  display: grid; gap: .3rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.offer-terms li { font-size: .88rem; color: #cadbd3 }
.offer-terms b { display: block; font-family: var(--mono); font-size: .8rem; color: #fff }
.offer-go {
  display: inline-block; padding: .65rem 1.2rem; border-radius: 4px;
  background: var(--accent-bright); color: #05231a;
  font-family: var(--display); font-weight: 700;
}
.offer:hover .offer-go { background: #63e4b7 }
.offer-note { margin: .8rem 0 0; font-size: .74rem; color: var(--chrome-muted) }

/* --------------------------------------------------------------- прочее --- */

.toc {
  margin: 1.6rem 0 2rem; padding: 1rem 1.2rem;
  background: var(--surface); border: 1px solid var(--rule);
  border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
}
.toc p {
  margin: 0 0 .5rem; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.toc ol { margin: 0; padding-left: 1.3rem; columns: 2; column-gap: 2rem }
.toc li { font-size: .92rem; margin-bottom: .2rem; break-inside: avoid }
@media (max-width: 44rem) { .toc ol { columns: 1 } }

.crumbs {
  margin: 0; padding: .9rem 0 0; font-size: .8rem; color: var(--muted);
  font-family: var(--mono);
}
.crumbs a { color: var(--muted) }

.faq { margin: 2rem 0; display: grid; gap: .6rem }
.faq details {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
}
.faq summary {
  padding: .8rem 1.1rem; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: 1.02rem;
}
.faq summary::marker { color: var(--accent) }
.faq div { padding: 0 1.1rem 1rem; font-size: .94rem; color: var(--ink-2) }

.next {
  margin-top: 2.6rem; padding-top: 1.2rem; border-top: 2px solid var(--rule);
}
.next p {
  margin: 0 0 .6rem; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.next ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem }

/* ---------------------------------------------------------------- подвал -- */

.foot {
  background: var(--chrome); color: var(--chrome-muted);
  padding-block: 2.4rem; margin-top: 3rem;
  font-size: .9rem;
}
.foot-cols {
  display: grid; gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.foot h4 {
  margin: 0 0 .6rem; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; color: #fff; font-weight: 500;
}
.foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem }
.foot a { color: var(--chrome-muted); text-decoration: none }
.foot a:hover { color: #fff }
.foot-legal {
  margin: 1.8rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--chrome-rule);
  font-size: .8rem; line-height: 1.6; max-width: 52rem;
}

/* Липкая полоса внизу — как на обоих сайтах, на которые показал владелец. */
.bar {
  position: sticky; bottom: 0; z-index: 20;
  background: var(--chrome-2); border-top: 1px solid var(--chrome-rule);
  padding: .6rem 0;
}
.bar .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem;
}
.bar p { margin: 0; font-size: .85rem; color: var(--chrome-muted) }
.bar a {
  padding: .5rem 1.05rem; border-radius: 4px;
  background: var(--accent-bright); color: #05231a;
  font-family: var(--display); font-weight: 700; font-size: .92rem; text-decoration: none;
}

/* ------------------------------------------------------------- схемы ----- */

.fig { margin: 1.6rem 0; padding: 0 }
.fig svg { display: block; width: 100%; height: auto }
.fig figcaption {
  margin-top: .7rem; max-width: 42rem;
  font-size: .84rem; line-height: 1.55; color: var(--muted);
  border-left: 2px solid var(--rule); padding-left: .8rem;
}

.d-h { font-family: var(--display); font-size: 17px; font-weight: 700; fill: var(--ink) }
.d-l { font-family: var(--body); font-size: 13.5px; font-weight: 500; fill: var(--ink) }
.d-m { font-family: var(--body); font-size: 12.5px; fill: var(--muted) }
.d-n { font-family: var(--mono); font-size: 11px; fill: var(--muted); text-anchor: middle }
.d-inv { font-family: var(--mono); font-size: 12px; font-weight: 500; fill: #fff }
.d-em { font-style: italic; fill: var(--ink-2) }

.d-track { fill: var(--surface-2) }
.d-bar { fill: var(--accent) }
.d-bar-warn { fill: var(--warn) }
.d-bar-mut { fill: var(--ink-2) }
.d-box { fill: var(--surface); stroke: var(--rule) }
.d-box-acc { fill: var(--accent-soft); stroke: var(--accent) }
.d-arrow { fill: none; stroke: var(--muted); stroke-width: 1.5 }
.d-brace { fill: none; stroke: var(--rule); stroke-width: 1.5 }
.d-rule { stroke: var(--rule-soft); stroke-width: 1 }
.d-pin { fill: var(--rule) }

.tape-unit { white-space: nowrap }

/* Картинки страниц. Соотношение задано и здесь, и атрибутами в разметке:
   атрибуты спасают от прыжка до загрузки CSS, aspect-ratio — после. */
.pic { margin: 2rem 0; max-width: 52rem; }
.pic img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--ink-2); object-fit: cover;
}
.pic figcaption {
  margin-top: .6rem; font-size: .82rem; line-height: 1.5;
  color: var(--dim); max-width: 42rem;
}

/* Снимки экрана не обрезаются под 16:9: у лаунчера своя пропорция, и
   кроп срезает как раз нижнюю панель с цифрами, ради которой кадр и снят. */
.pic-shot img { aspect-ratio: auto; object-fit: contain; background: #05070f; }