:root{
  --фон:#f4f6f6; --карточка:#fff; --текст:#12211f; --приглушённый:#5d6d6b;
  --акцент:#0f4f47; --акцент-свет:#e6efed; --рамка:#dfe5e4;
  --тень:0 1px 2px rgba(18,33,31,.06),0 8px 24px rgba(18,33,31,.06);
  --тревога:#8a2020; --тревога-фон:#fdecec; --тревога-рамка:#f3c9c9;
  --внимание:#7a5310; --внимание-фон:#fdf3e3;
}
*{box-sizing:border-box}
body{margin:0;background:var(--фон);color:var(--текст);
  font:16px/1.6 Montserrat,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--акцент)}

/* ── вход ── */
.вход{min-height:100vh;display:grid;place-items:center;padding:20px}
.вход form{width:100%;max-width:380px;background:var(--карточка);border:1px solid var(--рамка);
  border-radius:16px;padding:32px;box-shadow:var(--тень)}
.вход h1{margin:0 0 4px;font-size:23px}
.вход p{margin:0 0 22px;color:var(--приглушённый);font-size:14.5px}

/* ── каркас ── */
header.шапка{background:var(--карточка);border-bottom:1px solid var(--рамка);position:sticky;top:0;z-index:5}
.шапка .внутри{max-width:1060px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.лого{font-weight:700;font-size:16.5px;white-space:nowrap}
.вкладки{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.вкладка{padding:8px 14px;border-radius:9px;cursor:pointer;font-size:14.5px;color:var(--приглушённый);
  border:1px solid transparent;background:none;font-family:inherit}
.вкладка:hover{background:var(--акцент-свет);color:var(--акцент)}
.вкладка.выбрана{background:var(--акцент);color:#fff}
.кто{font-size:13.5px;color:var(--приглушённый);white-space:nowrap}
main{max-width:1060px;margin:0 auto;padding:24px 20px 80px}
.раздел{display:none}
.раздел.видно{display:block}
h2.заголовок{font-size:20px;margin:0 0 6px}
p.пояснение{margin:0 0 20px;color:var(--приглушённый);font-size:14.5px;max-width:70ch}

/* ── элементы ── */
input,select,textarea,button{font:inherit;font-size:15px}
input[type=text],input[type=password],select,textarea{width:100%;padding:12px 14px;background:var(--карточка);
  border:1.5px solid var(--рамка);border-radius:10px;color:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--акцент)}
button.главная{padding:12px 24px;font-weight:600;background:var(--акцент);color:#fff;border:0;
  border-radius:10px;cursor:pointer;white-space:nowrap}
button.главная:hover{background:#0b3d37}
button.главная:disabled{opacity:.5;cursor:default}
button.тихая{padding:6px 12px;font-size:13.5px;background:none;border:1px solid var(--рамка);
  border-radius:8px;cursor:pointer;color:var(--приглушённый)}
button.тихая:hover{border-color:var(--акцент);color:var(--акцент)}
.строка{display:flex;gap:10px;align-items:center}
label.поле{display:block;margin:0 0 14px}
label.поле span{display:block;font-size:13.5px;color:var(--приглушённый);margin-bottom:5px}
.галка{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--приглушённый);cursor:pointer}
.галка input{width:auto}

.блок{background:var(--карточка);border:1px solid var(--рамка);border-radius:14px;
  padding:22px 24px;margin:16px 0;box-shadow:var(--тень)}
.блок h3{margin:0 0 12px;font-size:12.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--акцент)}

.этап{display:none;align-items:center;gap:10px;margin:20px 0;color:var(--приглушённый);font-size:14.5px}
.этап.видно{display:flex}
.точка{width:9px;height:9px;border-radius:50%;background:var(--акцент);animation:пульс 1.1s infinite}
@keyframes пульс{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

.ошибка{display:none;padding:14px 18px;background:var(--тревога-фон);border:1px solid var(--тревога-рамка);
  border-radius:12px;color:var(--тревога);margin:14px 0}
.ошибка.видно{display:block}
.заметка{padding:11px 14px;background:var(--внимание-фон);border-radius:8px;font-size:14px;
  color:var(--внимание);margin:12px 0}

.ответ{font-size:18px;line-height:1.65;white-space:pre-wrap}
.примеры{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.пример{padding:7px 13px;font-size:13.5px;background:var(--карточка);border:1px solid var(--рамка);
  border-radius:999px;cursor:pointer;color:var(--приглушённый)}
.пример:hover{border-color:var(--акцент);color:var(--акцент)}

.фрагмент{border-top:1px solid var(--рамка);padding:15px 0}
.фрагмент:first-of-type{border-top:0;padding-top:0}
.шапка-фр{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:8px}
.номер{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:6px;
  background:var(--акцент-свет);color:var(--акцент);font-size:12px;font-weight:700}
.документ{font-weight:600;font-size:14.5px}
.раздел-путь{color:var(--приглушённый);font-size:13px}
.метка{font-size:11.5px;padding:3px 8px;border-radius:999px;background:var(--акцент-свет);
  color:var(--акцент);font-weight:600}
.цитата{margin:0;padding:12px 14px;background:#fbfcfc;border-left:3px solid var(--акцент-свет);
  border-radius:0 8px 8px 0;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:12.5px;line-height:1.6;white-space:pre-wrap;overflow-x:auto;color:#2a3b39}

table.список{width:100%;border-collapse:collapse;font-size:14.5px}
table.список th{text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--приглушённый);font-weight:700;padding:0 10px 8px 0;border-bottom:1px solid var(--рамка)}
table.список td{padding:11px 10px 11px 0;border-bottom:1px solid var(--рамка);vertical-align:top}
table.список tr:last-child td{border-bottom:0}
.тихо{color:var(--приглушённый);font-size:13px}
.полоска{height:5px;background:var(--рамка);border-radius:3px;overflow:hidden;min-width:70px;margin-top:5px}
.полоска i{display:block;height:100%;background:var(--акцент)}
.пусто{padding:34px;text-align:center;color:var(--приглушённый)}

.текст-документа{font-size:14.5px;line-height:1.75;white-space:pre-wrap;max-height:65vh;overflow:auto;
  padding:18px;background:#fbfcfc;border-radius:10px;border:1px solid var(--рамка)}

@media (prefers-color-scheme:dark){
  :root{--фон:#0e1817;--карточка:#152322;--текст:#e8eeed;--приглушённый:#93a5a3;
    --акцент:#5ec7b4;--акцент-свет:#1b3330;--рамка:#243634;
    --тень:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
    --тревога:#f0a8a8;--тревога-фон:#2c1616;--тревога-рамка:#4d2626;
    --внимание:#e9c67a;--внимание-фон:#33280f}
  button.главная,.вкладка.выбрана{color:#08201d}
  .цитата,.текст-документа{background:#101c1b;color:#c3d2d0}
}