/* Сборка по слоям (assembly.js). Цвета берутся из токенов сайта, если они есть. */
html[lang="ru"] .asm [lang="en"], html[lang="en"] .asm [lang="ru"] { display: none; }
.asm { --asm-bg: var(--bg, #fff); --asm-line: var(--muted, #8a8f9c); --asm-on: var(--accent, #0C58D8);
  --asm-ink: var(--ink, #14161C); position: relative; height: 340svh; }
.asm-sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 220px 1fr;
  align-items: center; gap: 32px; overflow: hidden; }
.asm-kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--asm-line); margin: 0 0 14px; }
.asm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 10px; }
.asm-list li { display: flex; gap: 10px; align-items: center; color: var(--asm-line); font-size: 14px; transition: color .25s; }
.asm-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; transition: background .25s; }
.asm-list li.on { color: var(--asm-ink); }
.asm-list li.on::before { background: var(--asm-on); border-color: var(--asm-on); }
.asm-list .n { font-variant-numeric: tabular-nums; opacity: .6; }

.asm-stage { position: relative; height: calc(100svh - 96px); aspect-ratio: var(--asm-ratio); max-width: 62%; justify-self: start; }
.asm-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.asm-root { transform-origin: 0 0; will-change: transform; }
.asm-layer, .asm-assembled { transition: opacity .2s linear; will-change: transform; }
.asm-fill { fill: var(--asm-bg); }
.asm-line { fill: none; stroke: var(--asm-line); stroke-width: 1; stroke-linecap: round; vector-effect: non-scaling-stroke;
  transition: stroke .35s; }
.asm-layer.on .asm-line, .asm-assembled .asm-line { stroke: var(--asm-on); }
.asm-leader { transition: opacity .25s; }
.asm-leader line { stroke: var(--asm-line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 2 3; }
.asm-leader circle { fill: var(--asm-on); }

.asm-note { position: absolute; transform: translate(10px, -50%); width: 220px; opacity: 0; transition: opacity .25s;
  pointer-events: none; font-size: 13px; line-height: 1.35; color: var(--asm-line); }
.asm-note b { display: block; color: var(--asm-ink); font-weight: 600; font-size: 14px; }
.asm-note .n { color: var(--asm-on); font-variant-numeric: tabular-nums; margin-right: 6px; }

/* узкий экран: без выносок, список слоёв — подпись под рисунком */
@media (max-width: 900px) {
  .asm { height: 300svh; }
  .asm-sticky { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 12px; padding: 56px 16px 24px; }
  .asm-stage { max-width: 100%; max-height: 72svh; height: auto; width: 100%; justify-self: center; }
  .asm-note, .asm-leader { display: none; }
  .asm-copy { order: 2; }
  .asm-list { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
  .asm-list li:not(.on) { display: none; }
}
/* без анимации: просто собранный рисунок и список */
.asm.asm-static { height: auto; }
.asm.asm-static .asm-sticky { position: static; height: auto; padding: 48px 0; }