/* Визуальное лицо KENO v0.2 (каноны #214/#213). «Почти видео»: сайт = видео-конструктор.
   Три разных мира — серифная проза / сансериф-пузыри / CRT-терминал. Тёмная midnight-blue книга. */
:root{
  --bg:#14202c; --bg2:#0f1820;
  --ink:#e9e0cf; --soft:#93a1b0; --quiet:#bcae98;
  --amber:#e0a86a; --cream:#f2e8d5;
  --line:rgba(233,224,207,.14);

  --bub-user-bg:#43331e; --bub-user-ink:#f4ead6;     /* Алексей — тёплый, справа */
  --bub-model-bg:#1d2c3a; --bub-model-ink:#dde7ef;   /* модель — прохладный, слева */

  --serif:"Literata","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Inter","SF Pro Text","Segoe UI",system-ui,sans-serif;   /* пузыри чата */
  --crt-body:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; /* тело терминала (кириллица) */
  --crt-chrome:"VT323",ui-monospace,monospace;                     /* ретро-латиница: шапка/служебные */

  --pad:2.5rem;            /* боковые поля колонки (рамка-кадр) */
}
*{box-sizing:border-box}
html{font-size:18px}
body{
  margin:0; color:var(--ink); line-height:1.68; font-family:var(--serif);
  background:var(--bg);
  background:linear-gradient(180deg,#16242f 0%,var(--bg) 40%,var(--bg2) 100%) fixed;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* колонка чтения 820–900px + рамка-«кадр» по бокам (заготовка видеокадра) */
.wrap{max-width:54rem; margin:0 auto; padding:6vh var(--pad) 14vh;
  border-left:1px solid var(--line); border-right:1px solid var(--line);
  background:rgba(242,232,213,.018)}
a{color:var(--amber)}

/* ---- постоянное боковое оглавление ---- */
.sidenav{position:fixed; left:0; top:0; height:100vh; width:230px; z-index:30; overflow:auto;
  background:var(--bg2); border-right:1px solid var(--line); padding:1.6rem 1.15rem;
  transform:translateX(-100%); transition:none}
.sn-book{display:block; font-family:var(--serif); font-size:1.12rem; color:var(--cream);
  text-decoration:none; line-height:1.2; margin-bottom:1.3rem; border-bottom:1px solid var(--line);
  padding-bottom:1.1rem}
.sidenav ol{list-style:none; margin:0; padding:0}
.sidenav li{margin:0 0 .85rem}
.sidenav li a{display:block; color:var(--ink); text-decoration:none; font-size:.95rem; line-height:1.35}
.sidenav li a:hover{color:var(--amber)}
.sidenav li.cur > a{color:var(--amber); font-weight:600}
/* мелкий маркер вкладыша в боковом оглавлении: «+ вкладыш», не полное имя */
.sn-vkl-row{display:block; padding-left:.8rem; margin-top:.2rem; font-family:var(--sans);
  font-size:.66rem; letter-spacing:.06em; color:var(--soft); text-transform:lowercase}
.sn-vkl{color:inherit !important; text-decoration:none; font-size:inherit !important}
.sn-vkl:hover{color:var(--amber) !important}
.nav-burger{position:fixed; left:.7rem; top:.7rem; z-index:32; cursor:pointer; user-select:none;
  width:2.3rem; height:2.3rem; border:1px solid var(--line); border-radius:9px; background:var(--bg2);
  display:flex; align-items:center; justify-content:center; color:var(--amber); font-size:1.15rem}
.nav-scrim{display:none}
.nav-cb:checked ~ .sidenav{transform:none; box-shadow:0 0 40px rgba(0,0,0,.5)}
.nav-cb:checked ~ .nav-scrim{display:block; position:fixed; inset:0; z-index:29; background:rgba(0,0,0,.4)}
/* на широком экране — оглавление всегда видно, кнопка прячется, контент сдвинут */
@media (min-width:1300px){
  body{padding-left:230px}
  .sidenav{transform:none}
  .nav-burger{display:none}
}

/* переключалка языков RU/EN/ES */
.langs{display:flex; gap:.2rem; justify-content:flex-end; margin:0 0 1.5rem; font-family:var(--sans)}
.langs a{text-decoration:none; color:var(--soft); font-size:.78rem; letter-spacing:.05em;
  padding:.25rem .55rem; border-radius:6px}
.langs a.on{color:var(--bg); background:var(--amber); font-weight:600}
.langs a:not(.on):hover{color:var(--amber)}

/* ---- главная / оглавление ---- */
.home-head{text-align:center; margin:9vh 0 6vh}
.book-title{font-size:2.7rem; line-height:1.12; margin:0 0 .7rem; color:var(--cream); font-weight:600}
.book-annotation{color:var(--soft); font-style:italic; margin:0}
.toc ol{list-style:none; padding:0; margin:0}
.toc li{border-bottom:1px solid var(--line)}
.toc li:first-child{border-top:1px solid var(--line)}
.toc a{display:flex; align-items:center; gap:1rem; padding:1rem .2rem; text-decoration:none;
  color:var(--ink); font-size:1.2rem}
.toc a:hover{color:var(--amber)}
.toc-cover{width:120px; aspect-ratio:16/9; object-fit:cover; border-radius:6px; flex:none}
/* двухслойка в оглавлении: слот главы + вкладыш */
.toc-slot{padding:1rem .2rem}
.toc-chap{display:block; font-size:1.2rem; color:var(--ink); text-decoration:none}
.toc-chap:hover{color:var(--amber)}
/* мелкий маркер «+ вкладыш» — присутствие, не внимание */
.toc-vkl-row{display:block; padding-left:1rem; margin-top:.2rem; font-family:var(--sans);
  font-size:.7rem; letter-spacing:.06em; color:var(--soft); text-transform:lowercase}
.toc-vkl{color:inherit; text-decoration:none}
.toc-vkl:hover{color:var(--amber)}
.toc-vkl:hover{color:var(--amber)}

/* ---- шапка главы ---- */
.ch-cover{width:100%; border-radius:10px; margin-bottom:2.5rem}
.ch-head{text-align:center; margin:3vh 0 3vh}
.ch-num{letter-spacing:.24em; text-transform:uppercase; font-size:.76rem; color:var(--soft); margin:0 0 .9rem}
.ch-title{font-size:2.7rem; line-height:1.13; margin:0 auto; color:var(--cream); font-weight:600}
.ch-title::after{content:""; display:block; width:3.4rem; height:1px; margin:1.4rem auto 0;
  background:var(--amber); opacity:.7}
.ch-epigraph{margin:1.5rem auto 0; max-width:26rem; font-style:italic; color:var(--quiet)}

/* ---- тело ---- */
.ch-body{font-size:1.08rem}
.blk{margin:0 0 1.55rem}
.blk p{margin:0 0 1rem}
.blk p:last-child{margin-bottom:0}

/* проза — серифный «фон книги» */
.blk-prose-inner{font-style:italic; color:var(--quiet); margin-left:1.7rem}

/* ---- чат-пузыри: мессенджерский САНСЕРИФ (сильный отрыв от прозы) ---- */
.blk-dialog-user,.blk-dialog-model{
  font-family:var(--sans); font-size:1rem; line-height:1.5;
  max-width:74%; padding:.85rem 1.1rem; border-radius:16px; margin:1.5rem 0;
}
.blk-dialog-user::before,.blk-dialog-model::before{
  display:block; font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.02em; opacity:.7; margin-bottom:.4rem;
}
.blk-dialog-user{margin-left:auto; background:var(--bub-user-bg); color:var(--bub-user-ink);
  border-bottom-right-radius:5px}
.blk-dialog-user::before{content:var(--user-name,"Алексей"); text-align:right; color:var(--amber)}
.blk-dialog-model{margin-right:auto; background:var(--bub-model-bg); color:var(--bub-model-ink);
  border-bottom-left-radius:5px}
.blk-dialog-model::before{content:var(--model-name,"Клайд"); color:#8fb3d6}

/* ---- терминал — старый CRT (тело IBM Plex Mono для кириллицы, ретро-латиница VT323 в служебных) ---- */
.blk-terminal,.blk-system-report{
  font-family:var(--crt-body); font-size:1rem; line-height:1.5;
  color:#73f59a; background:#05140d;
  background-image:repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 3px);
  border:1px solid #0c3320; border-radius:7px; margin:2rem 0; padding:.95rem 1.1rem;
  text-shadow:0 0 3px rgba(90,255,140,.35); overflow-x:auto;
  box-shadow:0 12px 32px rgba(0,0,0,.5), inset 0 0 70px rgba(0,45,18,.5);
}
.blk-terminal::before,.blk-system-report::before{
  display:block; font-family:var(--crt-chrome); font-size:1.1rem; color:#46a06a;
  border-bottom:1px solid #103e26; margin:-.15rem 0 .65rem; padding-bottom:.3rem;
  letter-spacing:.02em; text-shadow:none;
}
.blk-terminal::before{content:"Windows PowerShell    —    agent ready"}
.blk-system-report::before{content:"Windows PowerShell"}
.blk-terminal p{margin:.2rem 0}
.blk-terminal p::before{content:"Agent: "; color:#a6efbd}
.blk-terminal::after{content:"[exit code 0]"; display:block; font-family:var(--crt-chrome);
  font-size:1.05rem; color:#46a06a; margin-top:.65rem; text-shadow:none}

/* действие модели — техническая ремарка, тот же CRT-моно, не пузырь */
.blk-action{font-family:var(--crt-body); font-size:.9rem; color:#8fb3a0;
  background:#101a14; border:1px solid var(--line); border-radius:8px; padding:.5rem .85rem}

/* секция вкладыша (двухслойка #240): отдельная единица ниже главы, со своим собеседником.
   Явный «шов» — вензель + поясняющая надпись + щедрый воздух, чтобы глава не перетекала незаметно. */
.vkladysh-section{margin-top:9rem; padding-top:3.5rem; position:relative;
  border-top:1px solid var(--line)}
.vkl-divider{text-align:center; color:var(--amber); font-size:2.4rem; line-height:1;
  margin:0 0 1.4rem; opacity:.9}
.vkl-kicker{text-align:center; font-family:var(--sans); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--soft); margin:0 0 2.2rem}
.vkladysh-head{font-family:var(--serif); font-size:1.8rem; line-height:1.2; color:var(--amber);
  font-weight:600; margin:0 0 2.5rem; display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.8rem 1rem; justify-content:center; text-align:center}
.vkl-back{font-family:var(--sans); font-size:.72rem; font-weight:400; color:var(--soft);
  text-decoration:none; white-space:nowrap}
.vkl-back:hover{color:var(--amber)}

/* сводка — голос редактора (пересказ вкладыша), не герои. Двухслойка #240 */
.blk-svodka{font-family:var(--serif); font-style:italic; color:var(--quiet);
  background:rgba(224,168,106,.06); border-left:3px solid var(--amber);
  border-radius:0 8px 8px 0; padding:1rem 1.2rem; margin:2rem 0}
.blk-svodka::before{content:"✎  от редактора"; display:block; font-family:var(--sans);
  font-style:normal; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--amber); opacity:.8; margin-bottom:.5rem}
.blk-svodka p:last-child{margin-bottom:0}

/* вложенная переписка — врезка «принёс показать» */
.blk-dialog-nested{border:1px solid var(--line); border-radius:10px; background:rgba(0,0,0,.2);
  padding:1rem 1.1rem; font-size:.98rem}
.blk-quote-external{border-left:3px solid var(--amber); padding:.2rem 0 .2rem 1.1rem;
  color:var(--quiet); font-style:italic}
.blk-time-gap{text-align:center; font-style:italic; color:var(--soft); margin:2rem 0}
.blk-nested-break{text-align:center; color:var(--soft); font-style:italic; font-size:.92rem; margin:1.4rem 0}

/* иллюстрация — во всю колонку, воздух, лёгкая тень. Подпись в самой картинке. */
.blk-illustration{margin:3.2rem 0; text-align:center}
.blk-illustration img{max-width:100%; border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,.4)}
/* обложка главы = баннер во всю ширину кадра (с выходом за поля колонки) */
.blk-cover{margin:1rem calc(-1 * var(--pad)) 3.6rem}
.blk-cover img{width:100%; border-radius:0; box-shadow:0 14px 38px rgba(0,0,0,.5); display:block}

/* SCENE_BREAK = *** */
hr{border:0; text-align:center; margin:3.5rem 0}
hr::before{content:"* * *"; letter-spacing:.7em; color:var(--soft)}

/* inline */
em{font-style:italic}
strong{font-weight:600}
/* INLINE_CAPS: лёгкая разрядка для читаемости капса (без маркера; см. заметку Камертону) */

/* ---- низ главы ---- */
.ch-nav{display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  margin:5.5rem 0 2.5rem; padding-top:1.5rem; border-top:1px solid var(--line);
  font-size:.95rem; font-family:var(--sans)}
.ch-nav a{text-decoration:none}
.ch-nav .nav-home{color:var(--soft)}
.disclaimer{color:var(--soft); font-size:.8rem; line-height:1.5; text-align:center; font-style:italic;
  border-top:1px solid var(--line); padding-top:1.5rem}
/* подпись Голоса-сборщика (канон #252): достоинство роли, не маркетинг */
.site-sig{margin-top:5rem; padding-top:1.5rem; border-top:1px solid var(--line); text-align:center;
  font-family:var(--sans); font-size:.74rem; letter-spacing:.1em; color:var(--soft)}
.site-sig b{color:var(--amber); font-weight:600}
