/* Светлая — по умолчанию; тёмная — по системной настройке или по выбору в меню. */
:root {
  --bg:#fbfaf7; --line:#e5e2db; --fg:#22272b; --dim:#697077; --accent:#2f6f63;
  --shot-shadow:0 1px 3px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#15181a; --line:#2b3135; --fg:#e2e5e5; --dim:#98a0a5; --accent:#7fb6a6;
    --shot-shadow:none;
  }
}
:root[data-theme="dark"] {
  --bg:#15181a; --line:#2b3135; --fg:#e2e5e5; --dim:#98a0a5; --accent:#7fb6a6;
  --shot-shadow:none;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--fg);
       font:16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
       -webkit-font-smoothing:antialiased; }
code,.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.92em; }
a { color:var(--accent); text-underline-offset:2px; }

.layout { display:grid; grid-template-columns:210px minmax(0,1fr); gap:52px;
          max-width:1220px; margin:0 auto; padding:0 40px 96px; align-items:start; }

/* ---------- меню ---------- */
.side { position:sticky; top:0; max-height:100vh; overflow-y:auto; padding:40px 0 32px; }
.side .home { display:block; font-size:18px; font-weight:600; letter-spacing:-.01em;
              color:var(--fg); text-decoration:none; }
.side .home span { color:var(--accent); }
.side .sub { font-size:13px; color:var(--dim); margin:1px 0 22px; }
.side details { border-top:1px solid var(--line); }
.side details:last-of-type { border-bottom:1px solid var(--line); }
.side summary { list-style:none; cursor:pointer; padding:9px 2px; font-size:11px; font-weight:600;
                letter-spacing:.11em; text-transform:uppercase; color:var(--dim);
                display:flex; justify-content:space-between; align-items:center; }
.side summary::-webkit-details-marker { display:none; }
.side summary::after { content:"+"; font-weight:400; font-size:13px; opacity:.6; }
.side details[open] summary::after { content:"–"; }
.side summary:hover { color:var(--fg); }
.side ul { list-style:none; margin:0 0 10px; padding:0; }
.side li a { display:block; padding:3px 0 3px 12px; font-size:14px; line-height:1.4;
             color:var(--dim); text-decoration:none; border-left:1px solid var(--line); }
.side li a:hover { color:var(--fg); }
.side li a.on { color:var(--fg); border-left-color:var(--accent); border-left-width:2px; }
.side .foot { margin-top:20px; font-size:13px; }
.side .foot a { display:block; color:var(--dim); text-decoration:none; padding:2px 0; }
.side .foot a:hover { color:var(--accent); }
/* Переключатель темы: фиксирован справа сверху, доступен на любой странице
   и в любом размере окна — в оглавлении он прятался вместе с меню на мобильном. */
.theme-btn { position:fixed; top:14px; right:18px; z-index:30;
             background:var(--bg); border:1px solid var(--line); border-radius:16px;
             color:var(--dim); font:inherit; font-size:13px; line-height:1;
             padding:7px 14px; cursor:pointer; }
.theme-btn:hover { color:var(--fg); border-color:var(--dim); }
@media (max-width:880px) { .theme-btn { top:10px; right:12px; padding:6px 12px; font-size:12px; } }

/* ---------- контент ---------- */
main { padding-top:40px; }
h1 { font-size:29px; font-weight:600; letter-spacing:-.02em; margin:0 0 10px; line-height:1.25; }
.intro { color:var(--dim); max-width:62ch; margin:0 0 6px; font-size:17px; }
h2 { font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--dim);
     font-weight:600; margin:52px 0 4px; }

.feat { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:44px;
        padding:26px 0; border-top:1px solid var(--line); scroll-margin-top:20px; align-items:start; }
h2 + .feat { border-top:1px solid var(--fg); }
.feat h3 { font-size:19px; margin:0 0 8px; font-weight:600; letter-spacing:-.01em; }
.feat .why { color:var(--fg); margin:0 0 10px; max-width:56ch; }
.feat p { margin:0 0 10px; color:var(--dim); max-width:56ch; font-size:15px; }
.feat p:last-child { margin-bottom:0; }
.feat b { color:var(--fg); font-weight:600; }
.feat figure { margin:0; }
.feat img { width:100%; display:block; border-radius:6px; border:1px solid var(--line);
            box-shadow:var(--shot-shadow); }
.feat figcaption { font-size:12px; color:var(--dim); margin-top:8px; line-height:1.45; }

.cols { display:block; }
.box, a.box { display:block; text-decoration:none; color:inherit;
              padding:15px 0; border-top:1px solid var(--line); }
.cols > :first-child { border-top:1px solid var(--fg); }
.box h4 { margin:0 0 3px; font-size:17px; font-weight:600; color:var(--fg); }
.box p { margin:0; color:var(--dim); font-size:15px; max-width:70ch; }
a.box:hover h4 { color:var(--accent); }

table { width:100%; border-collapse:collapse; font-size:14px; margin-top:4px; }
th,td { text-align:left; padding:9px 12px 9px 0; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-weight:600;
     border-bottom:1px solid var(--fg); }
td.mono { color:var(--dim); font-size:13px; }

ul.plain { list-style:none; padding:0; margin:4px 0 0; color:var(--dim); font-size:15px; }
ul.plain li { padding:10px 0; border-bottom:1px solid var(--line); max-width:74ch; }
ul.plain li:first-child { border-top:1px solid var(--fg); }
ul.plain li:last-child { border-bottom:0; }
ul.plain b { color:var(--fg); font-weight:600; }

footer { border-top:1px solid var(--line); margin-top:52px; padding:18px 0 0;
         color:var(--dim); font-size:14px; }
footer a { text-decoration:none; }
footer p { margin:0 0 4px; }
.lang { font-size:14px; color:var(--dim); }
.lang a { text-decoration:none; }

.doc h2 { text-transform:none; letter-spacing:0; font-size:19px; color:var(--fg);
          margin:34px 0 8px; font-weight:600; }
.doc p, .doc li { color:var(--dim); font-size:15px; max-width:74ch; }
.doc .updated { margin:6px 0 0; color:var(--dim); font-size:14px; }
.doc ul, .doc ol { margin:8px 0 14px; padding-left:20px; }
/* Первая строка таблицы в документе получает ту же жирную линию сверху,
   что и списки: заголовочной строки в таких таблицах нет. */
.doc table tr:first-child td { border-top:1px solid var(--fg); }

.menu-btn { display:none; position:fixed; right:16px; bottom:16px; z-index:20;
            background:var(--fg); color:var(--bg); border:0; border-radius:20px;
            padding:11px 20px; font-size:14px; font-weight:500; cursor:pointer;
            box-shadow:0 3px 12px rgba(0,0,0,.22); }
@media (max-width:1000px) { .feat { grid-template-columns:1fr; gap:20px; } .feat img { max-width:340px; } }
@media (max-width:880px) {
  body { font-size:15px; }
  .layout { grid-template-columns:1fr; gap:0; padding:0 22px 96px; }
  .side { position:static; max-height:none; padding:26px 0 16px; border-bottom:1px solid var(--line); }
  .side .groups { display:none; }
  body.menu-open .side .groups { display:block; margin-top:14px; }
  .menu-btn { display:block; }
  main { padding-top:26px; }
  h1 { font-size:24px; }
}

/* Снимок открывается во весь экран по клику: на карточке он мелкий,
   а разбирать надо конкретные значения на экране приложения. */
.feat figure a.zoom { display:block; cursor:zoom-in; }
#lb { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.86);
      display:flex; align-items:center; justify-content:center; padding:28px; cursor:zoom-out; }
#lb[hidden] { display:none; }
#lb img { max-width:100%; max-height:100%; border-radius:8px;
          box-shadow:0 14px 44px rgba(0,0,0,.55); }