/* ПРИМЕР «человечного» вида (24.10.2026): бумага вместо ночи, плоский цвет страницы, свои рисунки,
   без градиентов, свечения, плиток-подушек и чипов. Показывается на одной странице; на сайт не выложено. */
html:has(body.human){background:#F6F2EA}
body.pg.human{
  --night:#F6F2EA;--night-2:#FFFFFF;--night-3:#EFE9DD;--ink:#1B2430;--ink-2:#3A4556;--muted:#667085;--line:#DAD3C4;--coral:#C23B22;
  background:var(--night);color:var(--ink);font-size:18px;
}
/* шапка и первый экран одним куском цвета */
.human .pg-top{background:var(--bg)}
.human .pg-back{color:rgb(255 255 255 / .9)}
:where(.human) .pg-hero{background:var(--bg);border-radius:0}
.human .pg-hero .wrap{max-width:1040px;padding-block:28px 56px;display:grid;gap:18px;grid-template-columns:minmax(0,1fr);justify-items:start;position:relative}
.human .pg-hero h1{font-size:clamp(34px,6vw,58px);line-height:1.04;max-width:15ch;letter-spacing:-.045em}
.human .pg-hero h1 em{font-style:normal;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C14 2 22 11 36 6 S58 3 70 8 S98 11 118 4' fill='none' stroke='%23FFE08A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 0 100%/100% .28em no-repeat;padding-bottom:.1em}
.human .pg-lead{max-width:34ch;font-size:clamp(18px,2.2vw,22px);line-height:1.45}
.human .pg-who{letter-spacing:.1em}
.human .pg-vname,.human .pg-facts{display:none}
.human .pill{border-radius:10px;min-height:52px;padding:0 24px;box-shadow:3px 3px 0 rgb(0 0 0 / .28);font-size:16px}
.human .pill:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgb(0 0 0 / .28)}
.human .h-art{width:min(46vw,200px);aspect-ratio:1;border-radius:18px;border:5px solid #fff;transform:rotate(-4deg);box-shadow:6px 6px 0 rgb(0 0 0 / .22);justify-self:start;margin-top:6px}
.human .h-note{font-size:15px;color:rgb(255 255 255 / .86);max-width:36ch}
@media (min-width:760px){
  .human .pg-hero .wrap{grid-template-columns:minmax(0,1fr) 240px;align-items:center;column-gap:56px}
  .human .pg-hero .wrap > *:not(.h-art){grid-column:1}
  .human .h-art{grid-column:2;grid-row:1 / span 5;width:240px;justify-self:center;transform:rotate(3deg)}
}
/* статья: без карточек и теней, номера разделов как в тетради */
.human .pg-body .wrap{max-width:760px}
.human .pg-body article{gap:0;padding-block:12px 40px;counter-reset:sec}
.human .pg-body article > section:not(.pg-cta){padding:34px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;box-shadow:none;gap:14px}
.human .pg-body article > section:first-child{border-top:0}
.human .pg-body article > section.tool{padding:24px;border:1px solid var(--line);border-radius:14px;background:#fff;margin-block:18px}
.human .pg-body h2{font-size:clamp(24px,3.4vw,32px)}
.human .pg-body article > section:not(.tool):not(.pg-cta) > h2::before{counter-increment:sec;content:counter(sec) ".";display:inline;margin-right:.4em;color:var(--bg);font-family:var(--f-text);font-weight:700}
.human .pg-body p,.human .pg-list li,.human .pg-steps li{color:var(--ink-2)}
.human .pg-body b{color:var(--ink)}
.human .pg-note{border-left-color:var(--bg)}
.human .pg-list li::before{background:var(--bg)}
.human .pg-steps li::before{color:var(--bg)}
.human .pg-body .ul{color:var(--ink);text-decoration-color:var(--bg)}
/* блок «Открыть…» без цветной подушки: тонкая рамка и плоская кнопка */
.human .pg-body .pg-cta{border:0;border-top:2px solid var(--ink);border-radius:0;background:none;padding:28px 0 0;color:var(--ink)}
.human .pg-cta .btn-solid{background:var(--bg);color:#fff;border-radius:10px;box-shadow:3px 3px 0 rgb(0 0 0 / .25)}
.human .pg-cta .btn-line{border:2px solid var(--ink);color:var(--ink);border-radius:10px}
.human .pg-cta p,.human .pg-cta h2{color:var(--ink)}
/* поля и кнопки инструмента */
.human input,.human select,.human textarea{background:#fff;color:var(--ink);border-color:var(--line)}
.human .btn-tool,.human button.btn{border-radius:10px}
.human .pg-foot{border-top:2px solid var(--ink)}
.human .pg-foot .wrap{color:var(--muted)}
.human .pg-foot nav a{color:var(--ink)}

/* на страницах программ уже есть свой значок: делаем его такой же наклейкой */
.human .pg-icon{width:min(46vw,200px);height:auto;aspect-ratio:1;border-radius:18px;border:5px solid #fff;transform:rotate(-4deg);box-shadow:6px 6px 0 rgb(0 0 0 / .22);margin-top:6px}
@media (min-width:760px){.human .pg-icon{grid-column:2;grid-row:1 / span 5;width:240px;justify-self:center;transform:rotate(3deg)}}
/* плитки: плоский цвет, жёсткая тень, без свечения (у «Втайне» два цвета, как просили) */
.human .tile{background:linear-gradient(135deg,var(--c),var(--c2,var(--c)));border-radius:14px;box-shadow:3px 3px 0 rgb(0 0 0 / .22)}
.human .tile::after{display:none}
.human .tile:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgb(0 0 0 / .22)}
@media (hover:hover) and (pointer:fine){.human .tile:hover{filter:none;transform:translate(-1px,-1px);box-shadow:4px 4px 0 rgb(0 0 0 / .26)}}
/* «Второй»: тёмная шапка без свечения */
.human.pg-vtoroy .pg-hero{background:#0c0d10}
/* печать: чистый лист */
@media print{
  html:has(body.human),body.pg.human{background:#fff}
  .human .pg-hero{background:none !important}
}
/* текст в плитках всегда белый (общее правило «жирное тёмным» его не перебивает) */
.human .pg-body .tile .tile-tx b{color:#fff}
.human .pg-body .tile .tile-tx em{color:rgb(255 255 255 / .9)}
/* пометка под кнопкой берёт тон шапки, а плоская кнопка блока «Открыть» чуть темнее цвета страницы (читается и на светлых цветах) */
.human .h-note{color:var(--fg2)}
.human .pg-cta .btn-solid{background:color-mix(in srgb,var(--bg) 72%,#000)}
/* светлые цвета страниц (Сметчик, Кто когда): шапка тёмным по светлому */
.human.light .pg-back{color:var(--fg)}
.human.light .pg-top .logo img{filter:brightness(0)}
/* галочки цвета страницы */
.human .chk input:checked{background-color:var(--bg);border-color:var(--bg)}
.human .chk input:focus-visible{outline-color:var(--bg)}