/* v16 — компьютер (html[data-layout=d]): слева липкая сцена с ручкой (потрогать),
   справа колонка текста (прочитать); оглавление — тонкая рейка у левого края. */

[data-layout=d] main { max-width: 1180px; margin: 0 auto; padding: 0 32px 0 88px; }
[data-layout=d] .hero { padding: 72px 0 40px; max-width: 820px; }
[data-layout=d] .hero h1 { font-size: 64px; line-height: 1.02; }
[data-layout=d] .hero-qs { grid-template-columns: 1fr 1fr; }
[data-layout=d] .lead { font-size: 20px; }

[data-layout=d] .ch { padding: 64px 0 40px; border-top: 1px solid var(--line); }
[data-layout=d] .ch-head h2 { font-size: 44px; line-height: 1.08; max-width: 18em; }
[data-layout=d] .ch-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: start; }
[data-layout=d] .ch-fig { position: sticky; top: 72px; }
[data-layout=d] .stage { height: min(56vh, 480px); min-height: 320px; }
[data-layout=d] .ch-read { padding-top: 26px; }

[data-layout=d] .build-body { max-width: 720px; }

[data-layout=d] .toc {
  position: fixed; left: 20px; top: 50%; z-index: 15; transform: translateY(-50%);
  display: grid; gap: 10px; opacity: 0; transition: opacity .3s;
}
[data-layout=d] .toc.shown { opacity: 1; }
[data-layout=d] .toc a { position: relative; display: flex; align-items: center; }
[data-layout=d] .toc-t {
  position: absolute; left: 40px; white-space: nowrap; padding: 4px 10px; border-radius: 8px;
  background: var(--ink); color: var(--paper); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .15s;
}
[data-layout=d] .toc a:hover .toc-t, [data-layout=d] .toc a:focus-visible .toc-t { opacity: 1; }

[data-layout=d] .foot { max-width: 1180px; margin: 40px auto 0; padding-left: 88px; }