/* Арканатсал - компоненты */

/* ── бренд ────────────────────────────────────────────── */
.brand{font-family:var(--display);font-weight:400;font-size:13px;letter-spacing:var(--ls-brand);text-transform:uppercase;color:var(--text)}
.brand-sub{margin-top:var(--s-2);line-height:1.7}

/* ── строка «ключ - значение» ─────────────────────────── */
.kv{display:flex;justify-content:space-between;gap:var(--s-3);padding:5px 0;border-bottom:1px solid var(--line)}
.kv b{color:var(--text);font-weight:500}
.kv:last-child{border-bottom:none}

/* ── миниатюры тел ────────────────────────────────────── */
.bodies{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-2)}
button.body{
  cursor:pointer;text-align:center;padding:6px 2px 5px;
  border:1px solid transparent;background:none;color:inherit;
  text-transform:none;letter-spacing:0;
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease);
}
button.body:hover:enabled,button.body.is-active{border-color:var(--line-2);background:var(--panel);color:inherit}
button.body canvas{width:100%;aspect-ratio:1;display:block}
button.body span{
  display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.05em;
  text-transform:none;margin-top:5px;white-space:nowrap;color:var(--muted);
}
button.body.is-active span{color:var(--text)}

.card{margin-top:var(--s-3);border:1px solid var(--line);padding:var(--s-3);min-height:116px}
.card h3{font-size:15px;margin-bottom:var(--s-2)}
.card .row{display:flex;justify-content:space-between;padding:3px 0}
.card .row b{color:var(--text);font-weight:500}
.card .note{color:var(--muted);line-height:1.7;margin-top:var(--s-2)}

/* ── эфемериды ────────────────────────────────────────── */
.eph{
  display:grid;grid-template-columns:1fr auto auto;gap:var(--s-2);
  padding:4px 3px;transition:background var(--fast) var(--ease);
}
.eph:hover,.eph.is-linked{background:var(--panel)}
.eph .deg{color:var(--text)}
.eph .rate{opacity:.5}

/* ── шкала времени ────────────────────────────────────── */
.tline{display:flex;justify-content:space-between;font-size:10px}
.tline b{color:var(--text);font-weight:500}

#spark{width:100%;height:38px;display:block;margin-top:var(--s-3)}

/* ── первый экран ─────────────────────────────────────── */
.hero h1{max-width:17ch}
.hero h1 em{font-style:normal;color:var(--muted)}
.hero .lede{margin-top:var(--s-5);max-width:52ch;color:var(--text-dim);font-size:17px}

/* терминатор - граница света и тени, следует за курсором */
.terminator{
  height:1px;margin:var(--s-8) 0 0;
  background:linear-gradient(90deg,
    var(--line) 0%,
    var(--line) calc(var(--tx,50%) - 90px),
    var(--flare) var(--tx,50%),
    var(--line) calc(var(--tx,50%) + 90px),
    var(--line) 100%);
}

.controls{display:flex;gap:var(--s-2);align-items:flex-end;flex-wrap:wrap;margin-top:var(--s-8)}
.field label{display:block;margin-bottom:6px}
.hint{margin-top:var(--s-3);color:var(--muted);font-family:var(--mono);font-size:10.5px;letter-spacing:.05em}

/* ── лог расчёта и поток ──────────────────────────────── */
.trace{
  font-family:var(--mono);font-size:11.5px;line-height:2;color:var(--muted);
  border-left:1px solid var(--line);padding-left:var(--s-4);
  margin-bottom:var(--s-8);min-height:22px;
}
.trace .ok{color:var(--signal)}

.stream{max-width:var(--measure);white-space:pre-wrap;min-height:120px}
.stream .tag{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--signal);border:1px solid var(--line);padding:3px 7px;margin-right:9px;white-space:nowrap;
}
.stream .tag.is-warm{color:var(--flare)}
.caret{display:inline-block;width:7px;height:16px;background:var(--flare);vertical-align:-3px;animation:blink .9s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ── карточки слоёв ───────────────────────────────────── */
.layers{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:var(--s-6)}
.layer{background:var(--void);padding:var(--s-6);transition:background var(--fast) var(--ease)}
.layer:hover{background:var(--panel)}
.layer .rubric{display:block;margin-bottom:var(--s-3)}
.layer h3{margin-bottom:var(--s-2)}
.layer p{margin:0;color:var(--text-dim);font-size:15px}

.section h2{max-width:20ch}
.section .lede{margin-top:var(--s-4);max-width:var(--measure);color:var(--text-dim)}

.page-footer{color:var(--muted);font-family:var(--mono);font-size:10.5px;line-height:1.9;max-width:var(--measure)}

@media (prefers-reduced-motion:reduce){
  .caret{animation:none}
  *{transition-duration:.01ms !important}
}