/* Макет: узкая колонка чтения + оглавление сбоку на широком экране; скриншоты во всю колонку */
  :root {
    --bg: #f6f8f8;
    --surface: #ffffff;
    --fg: #17201f;
    --muted: #5b6968;
    --line: #dde5e4;
    --accent: #0fa898;
    --accent-soft: #e2f7f4;
    --warn: #b4540b;
    --warn-soft: #fdf1e5;
    --tg: #2aa3e0;
    --wa: #25b35f;
    --display: "Unbounded", "Golos Text", system-ui, sans-serif;
    --body: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #101716; --surface: #18211f; --fg: #e6eeec; --muted: #9aaba8; --line: #2a3634;
      --accent: #3fd9c6; --accent-soft: #163a35; --warn: #f2a65c; --warn-soft: #3a2a1a;
      --tg: #5bbcf0; --wa: #4fd384; color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #101716; --surface: #18211f; --fg: #e6eeec; --muted: #9aaba8; --line: #2a3634;
    --accent: #3fd9c6; --accent-soft: #163a35; --warn: #f2a65c; --warn-soft: #3a2a1a;
    --tg: #5bbcf0; --wa: #4fd384; color-scheme: dark;
  }

  * { box-sizing: border-box; }
  body {
    background: var(--bg); color: var(--fg);
    font: 16px/1.6 var(--body);
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-block: 32px 64px;
  }
  .wrap { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; }
  @media (max-width: 860px) { .wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

  nav.toc { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 24px); align-self: start; font-size: 14px; }
  nav.toc b { display: block; font: 600 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
  nav.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: s; }
  nav.toc a { display: block; padding: 5px 10px; border-radius: 8px; color: var(--fg); text-decoration: none; }
  nav.toc a:hover, nav.toc a:focus-visible { background: var(--accent-soft); outline: none; }
  @media (max-width: 860px) {
    nav.toc { position: static; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
    nav.toc ol { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  }

  main { min-width: 0; max-width: 720px; }
  header.top { display: grid; gap: 12px; margin-bottom: 40px; }
  header.top .eyebrow { font: 600 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
  h1 { font: 700 clamp(28px, 5vw, 42px)/1.1 var(--display); margin: 0; text-wrap: balance; }
  header.top p { margin: 0; color: var(--muted); font-size: 18px; max-width: 60ch; }

  section { padding-top: 40px; margin-top: 40px; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
  h2 { font: 600 22px/1.25 var(--display); margin: 0 0 16px; text-wrap: balance; }
  h3 { font: 600 17px/1.3 var(--body); margin: 24px 0 8px; }
  p { margin: 0 0 12px; max-width: 65ch; }
  ul, ol { margin: 0 0 12px; padding-left: 22px; max-width: 65ch; }
  li { margin-bottom: 6px; }
  b, strong { font-weight: 600; }
  code, .k { font: 500 14px/1.4 ui-monospace, "SF Mono", Menlo, monospace; background: var(--accent-soft); padding: 1px 6px; border-radius: 6px; }

  figure { margin: 20px 0 24px; }
  figure img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
  figure.phone { display: flex; gap: 16px; flex-wrap: wrap; }
  figure.phone img { width: calc(50% - 8px); min-width: 0; max-width: 300px; }
  figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }

  .note, .warn {
    border-radius: 12px; padding: 14px 16px; margin: 16px 0; max-width: 65ch;
    background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  }
  .warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
  .note p:last-child, .warn p:last-child, .note ul:last-child, .warn ul:last-child { margin-bottom: 0; }
  .warn b:first-child { color: var(--warn); }

  .legend { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 12px 0 16px; max-width: 65ch; }
  .legend dt { font-weight: 600; }
  .legend dd { margin: 0; color: var(--fg); }
  .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
  .ch { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff; }
  .ch.tg { background: var(--tg); } .ch.wa { background: var(--wa); } .ch.av { background: #8f5bd8; } .ch.app { background: var(--accent); color: #062b27; }

  .table-wrap { overflow-x: auto; margin: 12px 0 16px; }
  table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15px; background: var(--surface); border-radius: 12px; overflow: hidden; }
  th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
  th { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
  tr:last-child td { border-bottom: 0; }

  .rules { list-style: none; padding: 0; display: grid; gap: 10px; counter-reset: r; }
  .rules li { counter-increment: r; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px 12px 52px; position: relative; margin: 0; }
  .rules li::before { content: counter(r); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--surface); font: 700 14px/26px var(--body); text-align: center; }

  .compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0 16px; }
  @media (max-width: 560px) { .compare { grid-template-columns: minmax(0, 1fr); } }
  .compare div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 15px; }
  .compare .lbl { display: block; font: 600 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
  .compare .bad .lbl { color: var(--warn); } .compare .good .lbl { color: var(--accent); }

  footer { margin-top: 48px; color: var(--muted); font-size: 14px; }
  a { color: var(--accent); }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

  .back { display: inline-flex; gap: 6px; align-items: center; margin-bottom: 20px; font-weight: 600; text-decoration: none; }