/* UnityHelper — прототипная дизайн-система.
   Источник: unity-docs-prototype.html (эталон интерфейса, ТЗ п. 8).
   Отличие от прототипа: рамка приложения шире (1480px против 1240px). */

:root{
  /* Окно-редактор для кода одинаково в обеих темах (панель IDE). */
  --ed-bg:#14181D; --ed-head:#1B2026; --ed-rule:#262C33; --ed-ink:#E6EAE4;
  --ed-dim:#8B948D; --ed-kw:#84B8EA; --ed-type:#6FD3C4; --ed-str:#E8B36F;
  --ed-com:#7E8B7A; --ed-num:#D6A5E0;
  --bg:#F2F4EF; --surface:#FBFCF9; --surface-2:#E9ECE4; --sunk:#E4E8DE;
  --ink:#15181A; --ink-2:#565C57; --ink-3:#878E86;
  --rule:#D6DBD1; --rule-2:#C4CABE;
  --focus:#2F5270; --done:#3C7A5E; --guest:#A8701C; --note:#A8701C; --bad:#A6402B;
  --shadow-sm:0 1px 2px rgba(20,24,20,.06);
  --shadow:0 2px 4px rgba(20,24,20,.05), 0 14px 32px -22px rgba(20,24,20,.45);
  --shadow-lg:0 24px 60px -28px rgba(20,24,20,.55);
  --book-shadow:0 1px 1px rgba(20,24,20,.18), 0 10px 22px -14px rgba(20,24,20,.6);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0F110E; --surface:#171A16; --surface-2:#1F231D; --sunk:#131612;
    --ink:#E9EBE5; --ink-2:#9DA499; --ink-3:#6E756C;
    --rule:#272C25; --rule-2:#343A31;
    --focus:#93B7D8; --done:#63B48D; --guest:#D9A54A; --note:#D9A54A; --bad:#C05A42;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 2px 4px rgba(0,0,0,.4), 0 14px 32px -22px rgba(0,0,0,.9);
    --shadow-lg:0 24px 60px -28px rgba(0,0,0,1);
    --book-shadow:0 1px 1px rgba(0,0,0,.5), 0 12px 26px -14px rgba(0,0,0,1);
  }
}
:root[data-theme="dark"]{
  --bg:#0F110E; --surface:#171A16; --surface-2:#1F231D; --sunk:#131612;
  --ink:#E9EBE5; --ink-2:#9DA499; --ink-3:#6E756C;
  --rule:#272C25; --rule-2:#343A31;
  --focus:#93B7D8; --done:#63B48D; --guest:#D9A54A; --note:#D9A54A; --bad:#C05A42;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 2px 4px rgba(0,0,0,.4), 0 14px 32px -22px rgba(0,0,0,.9);
  --shadow-lg:0 24px 60px -28px rgba(0,0,0,1);
  --book-shadow:0 1px 1px rgba(0,0,0,.5), 0 12px 26px -14px rgba(0,0,0,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Golos Text","Segoe UI",system-ui,sans-serif; font-size:17.05px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
/* ---------- app frame (как в прототипе, но шире) ---------- */
.shell{max-width:1480px; margin:0 auto; padding:22px 22px 40px;}
.frame{
  background:var(--surface); border:1px solid var(--rule-2); border-radius:8px;
  box-shadow:var(--shadow); overflow:clip;
  display:flex; flex-direction:column; min-height:calc(100vh - 86px);
}
main{flex:1; min-width:0;}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:2px;}

/* ---------- app chrome (full-width, sticky) ---------- */
.topbar{
  display:flex; align-items:center; gap:14px; padding:11px clamp(16px,2.5vw,32px);
  border-bottom:1px solid var(--rule); background:var(--surface-2); flex-wrap:wrap;
  position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; gap:9px; flex:none; text-decoration:none;}
.brand .mark{width:20px; height:20px; border-radius:4px; background:var(--ink); position:relative; flex:none;}
.brand .mark::after{content:""; position:absolute; inset:5px 5px auto auto; width:6px; height:6px; border-radius:50%; background:var(--bg);}
.brand span{font-family:"Unbounded",sans-serif; font-weight:600; font-size:14.85px; letter-spacing:-.01em; white-space:nowrap;}
.sections{display:flex; gap:2px; flex:none; background:var(--sunk); border-radius:7px; padding:2px;}
.sections a{
  font-size:13.75px; font-weight:600; padding:5px 13px; border-radius:5px; color:var(--ink-3); white-space:nowrap;
  text-decoration:none; transition:background .15s ease,color .15s ease;
}
.sections a[aria-current="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm);}
.sections a:hover{color:var(--ink);}
.searchbtn{
  flex:1; min-width:180px; max-width:420px; display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--rule-2); border-radius:6px;
  padding:6px 10px; font-size:14.3px; color:var(--ink-3); text-align:left;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.searchbtn:hover{border-color:var(--ink-3); box-shadow:var(--shadow-sm);}
.searchbtn .k{margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:11px; border:1px solid var(--rule-2); border-radius:3px; padding:1px 5px; color:var(--ink-3);}
.spacer{flex:1;}
.seg{display:flex; border:1px solid var(--rule-2); border-radius:6px; overflow:hidden; flex:none;}
.seg button, .seg a{font-family:"JetBrains Mono",monospace; font-size:12.1px; letter-spacing:.06em; padding:5px 10px; color:var(--ink-3); transition:background .15s ease,color .15s ease; text-decoration:none;}
.seg button[aria-pressed="true"], .seg a[aria-pressed="true"]{background:var(--ink); color:var(--bg);}
.iconbtn{width:30px; height:28px; display:grid; place-items:center; border:1px solid var(--rule-2); border-radius:6px; color:var(--ink-2); font-size:14.3px; flex:none; background:none;}
.iconbtn:hover{background:var(--surface);}
/* счётчики пользователей: зелёная точка — онлайн, синяя — всего в системе */
.userstats{
  display:flex; align-items:center; gap:9px; flex:none;
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.04em;
  color:var(--ink-2); border:1px solid var(--rule-2); border-radius:6px;
  padding:5px 11px; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.userstats .stat{display:flex; align-items:center; gap:6px;}
.userstats .stat b{font-weight:500; color:var(--ink-3); letter-spacing:.05em;}
.userstats .stat i{width:7px; height:7px; border-radius:50%; flex:none;}
.userstats .on i{background:var(--done); animation:pulse 2.4s ease-in-out infinite;}
.userstats .gu i{background:var(--guest);}
.userstats .all i{background:var(--focus);}
.userstats .sep{width:1px; height:12px; background:var(--rule-2);}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--done) 45%, transparent);}
  50%{box-shadow:0 0 0 4px color-mix(in srgb, var(--done) 0%, transparent);}
}
@media (max-width:1080px){ .userstats .stat b{display:none;} }
.userchip{
  display:flex; align-items:center; gap:8px; flex:none; text-decoration:none;
  font-size:13.75px; font-weight:600; color:var(--ink-2);
  border:1px solid var(--rule-2); border-radius:6px; padding:4px 10px;
}
.userchip:hover{background:var(--surface); color:var(--ink);}
.userchip .uc-mini{display:none;}

/* ---------- shared ---------- */
.pad{padding:28px clamp(22px,3vw,48px) 34px;}
.eyebrow{font-family:"JetBrains Mono",monospace; font-size:11.55px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); margin:0 0 12px;}
h1{font-family:"Unbounded",sans-serif; font-weight:700; letter-spacing:-.025em; font-size:clamp(1.98rem,3.96vw,2.75rem); line-height:1.08; margin:0 0 12px; text-wrap:balance; overflow-wrap:break-word; hyphens:auto;}
.sub{color:var(--ink-2); max-width:80ch; margin:0;}
.hero{border-bottom:1px solid var(--rule); padding-bottom:18px; margin-bottom:20px;}
.back{font-family:"JetBrains Mono",monospace; font-size:12.1px; letter-spacing:.08em; color:var(--ink-3); display:inline-flex; align-items:center; gap:6px; margin-bottom:16px; text-decoration:none;}
.back:hover{color:var(--ink);}
.btn{border:1px solid var(--rule-2); border-radius:6px; padding:8px 14px; font-size:14.85px; font-weight:500; background:var(--surface); color:var(--ink); transition:background .15s ease,border-color .15s ease; text-decoration:none; display:inline-block; line-height:1.4;}
.btn:hover{background:var(--surface-2); border-color:var(--ink-3); color:var(--ink);}
.btn.primary{background:var(--ink); color:var(--bg); border-color:var(--ink);}
.btn.primary:hover{opacity:.88; background:var(--ink); color:var(--bg);}
.bar{height:5px; border-radius:3px; background:var(--sunk); flex:1; min-width:120px; overflow:hidden;}
.bar i{display:block; height:100%; background:var(--line); border-radius:3px; transition:width .35s ease;}

/* ---------- routes: cards ---------- */
.resume{display:flex; align-items:center; gap:18px; flex-wrap:wrap; border:1px solid var(--rule-2); border-left:4px solid var(--line,var(--ink)); border-radius:6px; background:var(--surface-2); padding:16px 18px; margin-bottom:30px; cursor:pointer; width:100%; text-align:left; transition:box-shadow .15s ease, transform .15s ease; text-decoration:none;}
.resume:hover{box-shadow:var(--shadow); transform:translateY(-1px);}
.resume .lbl{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:4px;}
.resume .t{font-weight:600; font-size:1.122rem;}
.resume .go{margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:12.65px; color:var(--line,var(--ink)); white-space:nowrap;}
.routes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;}
/* компактная сетка «Разделы руководства»: 3 в ряд, карточки ниже */
.routes.compact{grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;}
.rcard.mini{min-height:150px; padding:18px 18px 16px; gap:8px;}
.rcard.mini h3{font-size:1.02rem;}
.rcard.mini p{font-size:.88rem; color:var(--ink-3);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.rcard.mini .foot{margin-top:auto;}
.rcard.mini .mbar{flex:1; height:4px; border-radius:2px; background:var(--sunk); overflow:hidden;}
.rcard.mini .mbar i{display:block; height:100%; background:var(--line); border-radius:2px;}
.rcard.mini .foot{display:flex; align-items:center; gap:10px;}
/* отступы шагов маршрута-раздела повторяют иерархию руководства */
.line li.dep1 .step{padding-left:18px;}
.line li.dep2 .step{padding-left:36px;}
.line li.dep3 .step{padding-left:54px;}
.line li.dep4 .step{padding-left:72px;}
.line li.dep1 .txt .tt{font-weight:500;}
.line li.dep2 .txt .tt, .line li.dep3 .txt .tt, .line li.dep4 .txt .tt{font-weight:400; color:var(--ink-2);}
.sidesteps .line li.dep1 .step{padding-left:14px;}
.sidesteps .line li.dep2 .step{padding-left:26px;}
.sidesteps .line li.dep3 .step{padding-left:38px;}
.sidesteps .line li.dep4 .step{padding-left:50px;}
.sectionshero{margin-top:38px;}
.sectionshero h2{font-family:"Unbounded",sans-serif; font-size:1.45rem; letter-spacing:-.015em; margin:0 0 8px;}
@media (max-width:1080px){ .routes.compact{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){ .routes.compact{grid-template-columns:1fr;} }
.rcard{position:relative; text-align:left; width:100%; min-height:230px; background:var(--surface); border:1px solid var(--rule); border-radius:7px; padding:24px 24px 22px; display:flex; flex-direction:column; gap:11px; transition:box-shadow .16s ease, transform .16s ease, border-color .16s ease; text-decoration:none;}
.rcard::before{content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:var(--line);}
.rcard:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--rule-2);}
.rcard .meta{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--line); font-weight:500;}
.rcard h3{font-family:"Unbounded",sans-serif; font-weight:600; font-size:1.166rem; letter-spacing:-.015em; margin:0; text-wrap:balance;}
.rcard p{margin:0; color:var(--ink-2); font-size:0.99rem;}
.rcard .foot{display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:6px;}
.dots{display:flex; gap:4px;}
.dots i{width:7px; height:7px; border-radius:50%; background:var(--rule-2); display:block;}
.dots i.on{background:var(--line);}
.rcard .count{font-family:"JetBrains Mono",monospace; font-size:11.55px; color:var(--ink-3); margin-left:auto;}
.rcard.soon{opacity:.72;}
.rcard .tagsoon{font-family:"JetBrains Mono",monospace; font-size:9.9px; letter-spacing:.1em; text-transform:uppercase; border:1px dashed var(--rule-2); border-radius:3px; padding:2px 6px; color:var(--ink-3); align-self:flex-start;}
.escape{margin-top:28px; padding-top:22px; border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; gap:12px; align-items:center;}
.escape p{margin:0; color:var(--ink-2); font-size:1.023rem; flex:1; min-width:260px;}

/* ---------- metro line ---------- */
.rhead{border-bottom:1px solid var(--rule); padding-bottom:24px; margin-bottom:26px;}
.rprog{display:flex; align-items:center; gap:14px; margin-top:18px; flex-wrap:wrap;}
.rprog .n{font-family:"JetBrains Mono",monospace; font-size:12.65px; color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap;}
.line{list-style:none; margin:0; padding:0; position:relative;}
.line::before{content:""; position:absolute; left:11px; top:14px; bottom:22px; width:2px; background:var(--rule-2);}
.line li{position:relative; padding:0 0 4px 40px;}
.station{position:absolute; left:4px; top:12px; width:16px; height:16px; border-radius:50%; background:var(--surface); border:2px solid var(--rule-2); z-index:1;}
.line li.done .station{background:var(--line); border-color:var(--line);}
.line li.cur .station{border-color:var(--line); box-shadow:0 0 0 4px color-mix(in srgb, var(--line) 18%, transparent);}
.line li.cur .station::after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--line);}
.step{width:100%; text-align:left; display:flex; gap:14px; align-items:baseline; padding:9px 12px; border-radius:6px; transition:background .14s ease; text-decoration:none;}
.step:hover{background:var(--surface-2);}
.step .idx{font-family:"JetBrains Mono",monospace; font-size:12.1px; color:var(--ink-3); flex:none; width:20px; font-variant-numeric:tabular-nums;}
.step .txt{flex:1; min-width:0;}
.step .tt{font-weight:600; font-size:1.078rem; display:block;}
.line li.done .step .tt{color:var(--ink-2); font-weight:500;}
.step .slug{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-3); display:block; margin-top:2px; overflow:hidden; text-overflow:ellipsis;}
.step .state{font-family:"JetBrains Mono",monospace; font-size:10.45px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); flex:none;}
.line li.cur .step .state{color:var(--line);}

/* ---------- article / reader shell ---------- */
/* --topbarH выставляет app.js по фактической высоте шапки (1–3 ряда) */
.artbar{display:flex; align-items:center; gap:14px; padding:9px clamp(16px,2.5vw,32px); border-bottom:1px solid var(--rule); background:var(--surface); position:sticky; top:var(--topbarH,51px); z-index:10; flex-wrap:wrap;}
.artbar .rt{display:flex; align-items:center; gap:8px; font-size:13.75px; font-weight:600; white-space:nowrap; min-width:0; flex:0 1 auto;}
.artbar .rt .tt{overflow:hidden; text-overflow:ellipsis;}
.artbar .rt em{width:9px; height:9px; border-radius:50%; background:var(--line); font-style:normal; flex:none;}
.artbar .stepno{font-family:"JetBrains Mono",monospace; font-size:12.1px; color:var(--ink-2); white-space:nowrap; font-variant-numeric:tabular-nums;}
.artbar .bar{max-width:200px; min-width:80px;}
.artbar .back{margin-bottom:0;}
.art{display:grid; grid-template-columns:minmax(220px,260px) minmax(0,1fr) minmax(180px,230px);}
.art.wide{grid-template-columns:minmax(220px,260px) minmax(0,1fr);}
.art.solo{grid-template-columns:minmax(0,1fr) minmax(180px,230px);}
.sidesteps{border-right:1px solid var(--rule); padding:20px 12px 34px; background:var(--sunk);}
/* Панель шагов закреплена: при прокрутке двигается только центр (как правое
   оглавление); длинный список прокручивается внутри панели. */
.sidesteps .wrap{
  position:sticky; top:calc(var(--topbarH,51px) + 61px);
  max-height:calc(100vh - var(--topbarH,51px) - 85px); overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--rule-2) transparent;
}
.sidesteps .h{font-family:"JetBrains Mono",monospace; font-size:10.45px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); padding:0 10px; margin-bottom:12px;}
.sidesteps .line::before{left:14px; top:12px; bottom:16px;}
.sidesteps .line li{padding-left:34px;}
.sidesteps .station{left:8px; top:9px; width:12px; height:12px; border-width:2px;}
.sidesteps .step{padding:5px 8px; gap:8px;}
.sidesteps .step .tt{font-size:0.9405rem; font-weight:500; line-height:1.35;}
.sidesteps .step .idx,.sidesteps .step .slug,.sidesteps .step .state{display:none;}
.sidesteps li.cur .step{background:var(--surface); box-shadow:var(--shadow-sm);}
.sidesteps li.cur .step .tt{font-weight:700;}
.sidesteps li.done .step .tt{color:var(--ink-3);}
.sidesteps li.out .step{opacity:.45;}
.body{padding:30px clamp(24px,3vw,48px) 46px; min-width:0;}
.crumbs{font-family:"JetBrains Mono",monospace; font-size:11.55px; color:var(--ink-3); margin-bottom:14px; display:flex; gap:7px; flex-wrap:wrap;}
.crumbs a{color:var(--ink-3); text-decoration:none;}
.crumbs a:hover{color:var(--ink);}
.body h1{font-size:clamp(1.705rem,3.08vw,2.255rem); margin-bottom:16px;}
.prose{max-width:none;}
.prose p{margin:0 0 15px; color:var(--ink-2);}
.prose p strong{color:var(--ink); font-weight:600;}
.prose h2, .prose h3{font-family:"Unbounded",sans-serif; font-weight:600; font-size:1.166rem; margin:30px 0 9px; color:var(--ink); letter-spacing:-.015em;}
.prose h4{font-weight:700; font-size:1.078rem; margin:22px 0 8px; color:var(--ink);}
.prose ul,.prose ol{margin:0 0 15px; padding-left:20px; color:var(--ink-2);}
.prose li{margin-bottom:6px;}
.prose code{font-family:"JetBrains Mono",monospace; font-size:.86em; background:var(--surface-2); padding:1px 5px; border-radius:3px; color:var(--ink);}
/* внутри окна кода плашка инлайн-кода не нужна: .prose code перебивал
   pre code по специфичности, и каждая строка красилась тёмным прямоугольником */
.prose pre code{background:none; padding:0; border-radius:0; color:inherit; font-size:inherit;}
/* Белая подложка: многие PNG документации прозрачные и нарисованы под белый
   фон — на тёмной теме без неё видны только белые заливки. Непрозрачным
   скриншотам подложка не видна. Иконки в таблицах остаются как есть. */
.prose img{max-width:100%; height:auto; border:1px solid var(--rule); border-radius:6px; margin:4px 0 6px; background:#fff;}
.prose td img{background:transparent; border:none; border-radius:0; margin:0;}
/* крупные скриншоты (naturalWidth >= 600, ставит app.js) — на всю колонку;
   иконки и мелкие врезки остаются в натуральную величину */
.prose img.wide{width:100%;}
/* серии мелких изображений app.js собирает в один ряд */
.imgrow{display:flex; flex-wrap:wrap; gap:6px 18px; align-items:flex-start; margin:4px 0 12px;}
.imgrow .imgcell{flex:0 1 auto; min-width:0; max-width:100%;}
.imgrow .imgcell figure, .imgrow .imgcell p{margin:0;}
.imgrow .imgcell img{margin:0 0 4px;}
.imgrow .imgcell figcaption, .imgrow .imgcell p{font-size:.85rem; color:var(--ink-3);}
.prose figure{margin:0 0 16px;}
.prose figcaption{font-size:0.935rem; color:var(--ink-3); margin-top:6px;}
.prose table{border-collapse:collapse; margin:0 0 16px; font-size:1.012rem; display:block; overflow-x:auto; max-width:100%;}
.prose th,.prose td{border:1px solid var(--rule); padding:7px 11px; text-align:left; color:var(--ink-2); vertical-align:top;}
.prose th{color:var(--ink); background:var(--surface-2); font-weight:600;}
.prose blockquote{margin:0 0 15px; padding:2px 16px; border-left:3px solid var(--rule-2); color:var(--ink-2);}
/* ---------- код: окно редактора (вариант 2) ---------- */
pre{
  font-family:"JetBrains Mono",monospace; font-size:13.75px; line-height:1.62;
  background:var(--ed-bg); border:1px solid var(--ed-rule); border-radius:7px;
  padding:14px 16px; overflow-x:auto; margin:0 0 16px; color:var(--ed-ink);
  position:relative;
}
pre b{color:var(--ed-ink); font-weight:600;}
pre code{background:none; padding:0; font-size:inherit; color:inherit; font-family:inherit;}
/* метка языка в статьях (в читалке её несёт шапка окна) */
.prose pre::before{
  content:"C#"; position:absolute; top:8px; right:10px;
  font-size:10px; letter-spacing:.1em; color:var(--ed-dim);
  border:1px solid var(--ed-rule); border-radius:3px; padding:1px 7px;
}
.ed{border:1px solid var(--ed-rule); border-radius:7px; overflow:clip; margin:0 0 15px; background:var(--ed-bg);}
.ed .edhead{display:flex; align-items:center; gap:8px; padding:7px 12px; background:var(--ed-head); border-bottom:1px solid var(--ed-rule);}
.ed .edhead i{width:9px; height:9px; border-radius:50%; background:var(--ed-rule); display:block;}
.ed .edhead .lang{margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.1em; color:var(--ed-dim); border:1px solid var(--ed-rule); border-radius:3px; padding:1px 7px;}
.ed pre{border:none; border-radius:0; margin:0;}
.para.two .ed pre{font-size:12.65px;}
/* подсветка (расставляет static/js/app.js) */
.tok-k{color:var(--ed-kw);} .tok-t{color:var(--ed-type);} .tok-s{color:var(--ed-str);}
.tok-c{color:var(--ed-com); font-style:italic;} .tok-n{color:var(--ed-num);} .tok-d{color:var(--ed-dim);}
.callout{border:1px solid var(--rule-2); border-radius:6px; background:var(--surface-2); padding:13px 15px; margin:0 0 16px; font-size:1.012rem; color:var(--ink-2);}
.callout .h{font-family:"JetBrains Mono",monospace; font-size:10.45px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:5px;}
.toc{padding:30px 16px; border-left:1px solid var(--rule);}
.toc .h{font-family:"JetBrains Mono",monospace; font-size:10.45px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-bottom:11px;}
.toc a{display:block; font-size:0.935rem; color:var(--ink-2); text-decoration:none; padding:4px 0 4px 10px; border-left:2px solid var(--rule); line-height:1.35;}
.toc a:hover{color:var(--ink); border-left-color:var(--ink-3);}
.toc a.on{color:var(--ink); border-left-color:var(--line); font-weight:600;}
.toc .wrap{position:sticky; top:calc(var(--topbarH,51px) + 59px);}
.artfoot{border-top:1px solid var(--rule); margin-top:34px; padding-top:22px; max-width:none;}
.artfoot.full{max-width:none;}
.markdone{display:flex; align-items:center; gap:11px; width:100%; border:1px solid var(--rule-2); border-radius:7px; padding:12px 15px; background:var(--surface); font-weight:600; font-size:1.045rem; margin-bottom:18px; transition:border-color .15s ease, background .15s ease;}
.markdone:hover{border-color:var(--line);}
.markdone .box{width:19px; height:19px; border-radius:4px; border:2px solid var(--rule-2); display:grid; place-items:center; flex:none; font-size:12.1px; color:transparent; transition:all .18s ease;}
.markdone[aria-pressed="true"]{background:color-mix(in srgb, var(--done) 9%, var(--surface)); border-color:var(--done);}
.markdone[aria-pressed="true"] .box{background:var(--done); border-color:var(--done); color:#fff;}
.markdone[aria-pressed="true"] span.t{color:var(--done);}
.prevnext{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.pn{text-align:left; border:1px solid var(--rule); border-radius:7px; padding:12px 14px; background:var(--surface); transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; text-decoration:none; display:block;}
.pn:hover{border-color:var(--rule-2); transform:translateY(-1px); box-shadow:var(--shadow-sm);}
.pn .l{font-family:"JetBrains Mono",monospace; font-size:10.45px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:5px;}
.pn .t{font-weight:600; font-size:1.023rem; line-height:1.35; display:block;}
.pn.next{text-align:right; border-color:var(--line);}
.pn.disabled{opacity:.4; pointer-events:none;}

/* ---------- books: library ---------- */
/* Ширина обложки следует за высотой окна, чтобы обе полки помещались без
   прокрутки: высота двух обложек ≈ 100vh минус шапка, hero и подписи. */
.shelf{
  --coverw:clamp(170px, calc((100vh - 650px) * .375), 280px);
  display:grid; grid-template-columns:repeat(3, var(--coverw));
  justify-content:center; gap:28px 72px;
}
.bcard{text-align:left; display:flex; flex-direction:column; gap:8px; width:100%; text-decoration:none;}
.cover{
  aspect-ratio:3/4; border-radius:3px; background:var(--line); position:relative; overflow:hidden;
  box-shadow:var(--book-shadow); padding:16px 15px; display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.bcard:hover .cover{transform:translateY(-4px) rotate(-.4deg); box-shadow:0 3px 3px rgba(20,24,20,.2), 0 20px 34px -16px rgba(20,24,20,.7);}
.cover::before{content:""; position:absolute; left:0; top:0; bottom:0; width:7px; background:rgba(0,0,0,.22);}
.cover .pub{font-family:"JetBrains Mono",monospace; font-size:8.8px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:auto; padding-left:6px;}
.cover .ct{
  font-family:"Unbounded",sans-serif; font-weight:700; font-size:clamp(0.99rem,1.65vw,1.122rem); line-height:1.16;
  letter-spacing:-.02em; color:#fff; text-wrap:balance; padding-left:6px;
  overflow-wrap:break-word; hyphens:auto;
}
.cover .cr{height:2px; width:34px; background:rgba(255,255,255,.6); margin:11px 0 9px 6px;}
.cover .cm{font-family:"JetBrains Mono",monospace; font-size:9.35px; letter-spacing:.1em; color:rgba(255,255,255,.75); padding-left:6px;}
.bcard .bt{
  font-weight:600; font-size:1.034rem; line-height:1.32; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.bcard .bm{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-3); letter-spacing:.06em; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.langpill{border:1px solid var(--rule-2); border-radius:3px; padding:1px 5px; letter-spacing:.08em;}
.bprog{display:flex; align-items:center; gap:8px;}
.bprog .bar{height:3px; min-width:0;}

/* ---------- books: book page ---------- */
.bookhead{display:grid; grid-template-columns:240px minmax(0,1fr); gap:36px; align-items:start; border-bottom:1px solid var(--rule); padding-bottom:28px; margin-bottom:26px;}
.bookhead .en{font-family:"JetBrains Mono",monospace; font-size:12.65px; color:var(--ink-3); margin:0 0 14px;}
.bookmeta{display:flex; gap:0; flex-wrap:wrap; border:1px solid var(--rule); border-radius:7px; overflow:hidden; margin:18px 0 20px; background:var(--surface); max-width:640px;}
.bookmeta div{padding:11px 16px; flex:1; min-width:110px;}
.bookmeta div + div{border-left:1px solid var(--rule);}
.bookmeta b{display:block; font-family:"Unbounded",sans-serif; font-weight:600; font-size:1.232rem; font-variant-numeric:tabular-nums;}
.bookmeta span{display:block; font-family:"JetBrains Mono",monospace; font-size:10.45px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:3px;}
.acts{display:flex; gap:10px; flex-wrap:wrap;}
.chapters{list-style:none; margin:0; padding:0;}
.chapters li{border-top:1px solid var(--rule);}
.chapters li:last-child{border-bottom:1px solid var(--rule);}
.ch{display:flex; align-items:baseline; gap:14px; width:100%; text-align:left; padding:12px 10px; transition:background .14s ease; text-decoration:none;}
.ch:hover{background:var(--surface-2);}
.ch .n{font-family:"JetBrains Mono",monospace; font-size:12.1px; color:var(--ink-3); width:22px; flex:none; font-variant-numeric:tabular-nums;}
.ch .t{flex:1; min-width:0;}
.ch .t b{display:block; font-weight:600; font-size:1.056rem; color:var(--ink);}
.ch .t i{display:block; font-style:normal; font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-3); margin-top:2px;}
.ch .p{font-family:"JetBrains Mono",monospace; font-size:11.55px; color:var(--ink-3); flex:none; font-variant-numeric:tabular-nums;}
.chapters li.readdone .ch .t b{color:var(--ink-2); font-weight:500;}
.tick{width:15px; flex:none; color:var(--done); font-size:12.1px; text-align:center;}

/* ---------- books: reader ---------- */
.para{display:grid; grid-template-columns:minmax(0,1fr); gap:0 clamp(26px,3vw,56px);}
.para.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
/* без min-width:0 длинная строка кода растягивает колонку, и рамка окна
   уезжает за край; с ним прокрутка остаётся внутри pre */
.para .col{min-width:0;}
.plang{font-family:"JetBrains Mono",monospace; font-size:10.45px; letter-spacing:.13em; text-transform:uppercase; padding-bottom:6px; margin-bottom:12px; border-bottom:1px solid var(--rule);}
.plang.ru{color:var(--line);} .plang.en{color:var(--ink-3);}
.para .col p{margin:0 0 14px; color:var(--ink-2);}
.para.two .col p{font-size:1.023rem;}
.para .col img{max-width:100%; height:auto; border:1px solid var(--rule); border-radius:6px; margin:4px 0 14px; display:block; background:#fff;}
/* Крупные иллюстрации (natural width ≥ 900px) растягиваются на ширину блока;
   мелкие остаются в натуральную величину, чтобы не мылить апскейлом. */
.para .col img.wide{width:100%;}
.readbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.pagemark{
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.08em; color:var(--ink-3);
  border:1px solid var(--rule); border-radius:3px; padding:2px 7px;
}

/* ---------- palette ---------- */
.scrim{position:fixed; inset:0; background:rgba(15,18,15,.5); backdrop-filter:blur(3px); display:none; align-items:flex-start; justify-content:center; padding:9vh 20px 20px; z-index:50;}
.scrim.open{display:flex;}
.pal{width:100%; max-width:620px; background:var(--surface); border:1px solid var(--rule-2); border-radius:10px; box-shadow:var(--shadow-lg); overflow:hidden;}
.pal input{width:100%; border:none; background:none; padding:16px 18px; font:inherit; font-size:1.1rem; color:var(--ink); border-bottom:1px solid var(--rule); box-shadow:none;}
.pal input::placeholder{color:var(--ink-3);}
.pal input:focus{outline:none; box-shadow:none;}
.palres{max-height:min(48vh,400px); overflow-y:auto; padding:6px;}
.pr{display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:9px 12px; border-radius:6px; text-decoration:none;}
.pr[data-sel="1"]{background:var(--surface-2);}
.pr .tag{font-family:"JetBrains Mono",monospace; font-size:9.9px; letter-spacing:.08em; padding:2px 6px; border-radius:3px; border:1px solid var(--rule-2); color:var(--ink-3); flex:none;}
.pr .tag.fill{border-color:transparent; color:#fff; background:var(--line);}
:root[data-theme="dark"] .pr .tag.fill{color:#12140F;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pr .tag.fill{color:#12140F;}}
.pr .t{flex:1; min-width:0; font-size:1.023rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink);}
.pr .sub{font-family:"JetBrains Mono",monospace; font-size:10.45px; color:var(--ink-3); flex:none;}
.palfoot{display:flex; gap:16px; padding:9px 16px; border-top:1px solid var(--rule); background:var(--surface-2); font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-3); letter-spacing:.06em;}
.empty{padding:26px 18px; color:var(--ink-3); font-size:0.99rem; text-align:center;}

/* ---------- auth / profile ---------- */
.authwrap{display:flex; justify-content:center; padding:48px 20px 64px;}
.authcard{width:100%; max-width:440px; background:var(--surface); border:1px solid var(--rule); border-radius:8px; box-shadow:var(--shadow); padding:28px 28px 24px;}
.authcard h1{font-size:1.65rem; margin-bottom:18px;}
.authcard label{display:block; font-size:0.935rem; font-weight:600; color:var(--ink-2); margin:0 0 4px;}
.authcard .field{margin-bottom:14px;}
.authcard input{
  width:100%; border:1px solid var(--rule-2); border-radius:6px; background:var(--surface);
  color:var(--ink); font:inherit; font-size:1.045rem; padding:8px 11px;
}
.authcard input:focus{outline:2px solid var(--focus); outline-offset:1px; border-color:var(--focus); box-shadow:none;}
.authcard .btn{width:100%; text-align:center; margin-top:6px;}
.authcard .alt{margin-top:16px; font-size:0.968rem; color:var(--ink-2); text-align:center;}
.authcard .alt a{color:var(--ink); font-weight:600;}
.formerr{border:1px solid color-mix(in srgb, #B23A20 45%, var(--rule-2)); background:color-mix(in srgb, #B23A20 8%, var(--surface)); color:var(--ink); border-radius:6px; padding:10px 13px; font-size:0.99rem; margin-bottom:14px;}
.lblrow{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.minibtn{font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.05em; color:var(--focus); border:1px solid var(--rule-2); border-radius:4px; padding:2px 8px; margin-bottom:4px;}
.minibtn:hover{border-color:var(--ink-3); background:var(--surface-2);}
.fieldhint{font-size:.8rem; color:var(--ink-3); margin-top:5px; line-height:1.45;}
.fieldstatus{font-family:"JetBrains Mono",monospace; font-size:11.5px; margin-top:5px;}
.fieldstatus.good{color:var(--done);}
.fieldstatus.bad{color:#C05A42;}
.fieldstatus.mid{color:var(--ink-3);}
.pwwrap{position:relative;}
.pwwrap input{padding-right:96px;}
.pwtoggle{position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.04em;
  color:var(--ink-3); border:1px solid var(--rule-2); border-radius:4px; padding:3px 8px; background:var(--surface);}
.pwtoggle:hover{color:var(--ink); border-color:var(--ink-3);}
.pwrules{list-style:none; margin:9px 0 0; padding:0; display:grid; gap:3px;}
.pwrules li{font-size:.8rem; color:var(--ink-3); padding-left:20px; position:relative;}
.pwrules li::before{content:"○"; position:absolute; left:2px; top:0; font-size:11px;}
.pwrules li.ok{color:var(--done);}
.pwrules li.ok::before{content:"✓"; font-weight:700;}
/* ---------- профиль ---------- */
.profhead{display:flex; align-items:center; gap:22px; flex-wrap:wrap; border-bottom:1px solid var(--rule); padding-bottom:24px; margin-bottom:24px;}
.avatar{
  width:72px; height:72px; border-radius:50%; flex:none;
  display:grid; place-items:center; background:var(--ink); color:var(--bg);
  font-family:"Unbounded",sans-serif; font-weight:700; font-size:1.5rem; letter-spacing:.02em;
  text-transform:uppercase;
}
.profhead .who{min-width:0; flex:1;}
.profhead .who h1{margin-bottom:6px;}
.profhead .who .sub{overflow-wrap:anywhere;}
.profhead .logoutform{margin-left:auto;}
.profilegrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start;}
.pcard.span2{grid-column:1 / -1;}
/* «Как пользоваться сайтом» — руководство для новичка в профиле */
.guide .gintro{margin:0 0 18px; max-width:none;}
.ggrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
.gcard{border:1px solid var(--rule); border-radius:8px; background:var(--sunk); padding:16px 18px;}
.gcard p{margin:0 0 8px; font-size:.93rem; color:var(--ink-2);}
.gcard p:last-child{margin-bottom:0;}
.gh{display:flex; align-items:center; gap:10px; font-weight:600; font-size:1rem; margin-bottom:9px;}
.gico{width:30px; height:28px; flex:none; display:grid; place-items:center; border:1px solid var(--rule-2);
  border-radius:6px; background:var(--surface); color:var(--note); font-size:14px;}
.gico.gkbd{width:auto; padding:0 8px; font-family:"JetBrains Mono",monospace; font-size:10.5px;
  letter-spacing:.06em; color:var(--ink-2);}
.gico.gbook{position:relative;}
.gico.gbook::after{content:"3"; position:absolute; top:-6px; right:-7px; min-width:15px; height:15px;
  border-radius:8px; background:var(--note); color:var(--surface); font-size:9px; line-height:15px;
  text-align:center; font-family:"JetBrains Mono",monospace; border:2px solid var(--sunk);
  padding:0 2px; box-sizing:content-box;}
@media (max-width:760px){ .ggrid{grid-template-columns:1fr;} }
.pcard{background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:22px 24px; min-width:0;}
.pcard h2{font-family:"Unbounded",sans-serif; font-size:1.122rem; font-weight:600; margin:0 0 14px;}
.pcard .field{margin-bottom:14px;}
.pcard label{display:block; font-size:.9rem; font-weight:600; color:var(--ink-2); margin:0 0 4px;}
.pcard input{
  width:100%; border:1px solid var(--rule-2); border-radius:6px; background:var(--surface);
  color:var(--ink); font:inherit; font-size:1rem; padding:8px 11px;
}
.pcard input:focus{outline:2px solid var(--focus); outline-offset:1px; border-color:var(--focus); box-shadow:none;}
.sesslist{list-style:none; margin:0; padding:0;}
.sessrow{display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--rule); font-size:0.95rem; flex-wrap:wrap;}
.sessrow:first-child{border-top:none; padding-top:2px;}
.sessrow .dot{width:8px; height:8px; border-radius:50%; background:var(--rule-2); flex:none;}
.sessrow.cur .dot{background:var(--done);}
.sessrow .dev{font-weight:600; color:var(--ink); flex:1; min-width:140px;}
.sessrow .meta{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-3); white-space:nowrap;}
.sessrow form{margin:0;}
@media (max-width:900px){
  .profilegrid{grid-template-columns:1fr;}
  .profhead .logoutform{margin-left:0; width:100%;}
}
.tag-this{font-family:"JetBrains Mono",monospace; font-size:9.9px; letter-spacing:.08em; text-transform:uppercase; color:var(--done); border:1px solid var(--done); border-radius:3px; padding:1px 6px;}

/* ---------- закладки и конспекты ---------- */
.notesrail{display:flex; gap:8px; align-items:center; flex:none;}
.bmbtn,.notebtn{
  width:30px; height:28px; display:grid; place-items:center;
  border:1px solid var(--rule-2); border-radius:6px; color:var(--ink-3); background:none;
}
.bmbtn:hover,.notebtn:hover{border-color:var(--ink-3); color:var(--ink);}
/* закладка всегда фирменного янтарно-оранжевого цвета (--note), независимо
   от цвета книги или маршрута — так её видно с одного взгляда */
.bmbtn.on{color:var(--note); border-color:var(--note);}
.flagico{display:inline-block; width:11px; height:14px; background:currentColor;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);}
.flagico.small{width:9px; height:12px; color:var(--note);}
.notebtn{font-family:"JetBrains Mono",monospace; font-weight:700; font-size:13px;}
.bmark{position:absolute; top:0; right:clamp(24px,3vw,48px); width:16px; height:46px;
  background:var(--note); z-index:2;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);}
.body{position:relative;}
/* точная закладка: флажок у самого элемента, где остановился читатель */
.bmhere{position:relative;
  box-shadow:-4px 0 0 0 color-mix(in srgb, var(--note) 65%, transparent);}
.bmhere::before{content:""; position:absolute; left:-24px; top:3px; width:12px; height:17px;
  background:var(--note); clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);}
.banchor, .prose h2[id]{scroll-margin-top:74px;}
@media (max-width:820px){ .bmhere::before{left:-17px; width:10px; height:14px;} }
/* вариант A «карточка-стикер»: сплошная рамка + тёплый фон + корешок + тень */
.noteblock{border:1px solid color-mix(in srgb, var(--note) 55%, var(--rule-2));
  border-left:4px solid var(--note);
  background:color-mix(in srgb, var(--note) 13%, var(--surface));
  border-radius:8px; padding:12px 16px; margin:8px 0 18px; font-size:.95rem; color:var(--ink-2);
  box-shadow:0 2px 8px -4px color-mix(in srgb, var(--note) 40%, transparent);
  max-width:none;}
.noteblock .nh{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--note); display:flex; gap:12px; justify-content:space-between;
  flex-wrap:wrap; margin-bottom:5px;}
.noteblock .nact{display:flex; gap:10px;}
.noteblock .nact button{font:inherit; color:var(--ink-3); letter-spacing:.05em; text-transform:none;}
.noteblock .nact button:hover{color:var(--ink);}
.noteblock .nb-body{white-space:pre-wrap; overflow-wrap:break-word; color:var(--ink);}
.noteedit{border:1px solid color-mix(in srgb, var(--note) 55%, var(--rule-2));
  border-left:4px solid var(--note); border-radius:8px;
  padding:10px 12px; margin:8px 0 18px;
  background:color-mix(in srgb, var(--note) 6%, var(--surface));}
.noteedit textarea{width:100%; min-height:84px; border:none; background:none; resize:vertical;
  font:inherit; font-size:.95rem; color:var(--ink); outline:none;}
.noteedit .ne-acts{display:flex; gap:10px; margin-top:8px;}
.h2note{opacity:0; margin-left:10px; font-family:"JetBrains Mono",monospace; font-weight:700;
  font-size:12px; color:var(--note); border:1px solid transparent; border-radius:4px;
  padding:1px 7px; vertical-align:middle; transition:opacity .12s ease;}
h2:hover .h2note, .h2note:focus-visible{opacity:1; border-color:var(--rule-2);}
.nbadge{display:inline-grid; place-items:center; min-width:16px; height:16px; border-radius:8px;
  background:var(--note); color:var(--surface); font-family:"JetBrains Mono",monospace;
  font-size:9.5px; padding:0 4px; margin-left:6px;}
.notesbtn{position:relative;}
.bmpop{position:fixed; z-index:70; background:var(--surface); border:1px solid var(--rule-2);
  border-radius:8px; box-shadow:var(--shadow-lg); padding:5px; display:grid; min-width:190px;}
.bmpop button{text-align:left; font-size:.9rem; padding:8px 12px; border-radius:5px; color:var(--ink);}
.bmpop button:hover{background:var(--surface-2);}
.bmpop button.danger{color:var(--bad);}
.nbadge.top{position:absolute; top:-6px; right:-7px; margin:0; border:2px solid var(--surface-2);}

/* страница «Записная книжка» */
.nbwrap{display:grid; grid-template-columns:minmax(220px,290px) minmax(0,1fr); gap:24px; align-items:start;}
.nbtree{border:1px solid var(--rule); border-radius:8px; background:var(--sunk); padding:8px 0 12px; position:sticky; top:calc(var(--topbarH,51px) + 25px);}
.nb-h{font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); padding:12px 16px 5px;}
.nb-item{display:flex; align-items:center; gap:8px; padding:7px 16px; font-size:.93rem; color:var(--ink-2);
  text-decoration:none; border-left:3px solid transparent;}
.nb-item:hover{color:var(--ink); background:var(--surface-2);}
.nb-item.on{color:var(--ink); font-weight:600; background:var(--surface); border-left-color:var(--line);}
.nb-item .nbadge{margin-left:auto;}
.cardnote{border:1px solid var(--rule); border-left:3px solid var(--note); border-radius:7px; background:var(--surface); padding:13px 16px; margin-bottom:12px;}
.cardnote.bm{border-left:3px solid var(--line);}
.cardnote .crumb{font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:7px; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.cardnote .nb-body{margin:0 0 10px; font-size:.95rem; color:var(--ink-2); white-space:pre-wrap;}
.cardnote .cardacts{display:flex; gap:10px;}
.noteink{color:var(--note); font-weight:700;}
@media (max-width:900px){ .nbwrap{grid-template-columns:1fr;} .nbtree{position:static;} }

/* промо: модал первого входа + тост на главной */
.promo{background:var(--surface); border:1px solid var(--rule-2); border-radius:10px;
  box-shadow:var(--shadow-lg); padding:20px 22px;}
.promo .p-h{font-family:"Unbounded",sans-serif; font-weight:600; font-size:1.1rem; margin-bottom:8px;}
.promo p{margin:0 0 14px; color:var(--ink-2); font-size:.95rem; max-width:52ch;}
.promo .p-acts{display:flex; gap:10px; flex-wrap:wrap;}
.promo .p-never{margin-top:12px; font-size:.8rem; color:var(--ink-3); text-decoration:underline;}
.promo .p-never:hover{color:var(--ink);}
.promo.modalbox{max-width:440px; width:100%;}
.promo.toast{position:fixed; right:18px; bottom:18px; z-index:60; max-width:360px;
  border-left:3px solid var(--note);}
.promoscrim{align-items:center;}
@media (max-width:560px){ .promo.toast{left:12px; right:12px; bottom:12px; max-width:none;} }

/* сброс прогресса: подтверждение + отсчёт 10 с */
.btn.bad{background:var(--bad); border-color:var(--bad); color:#FFF; font-weight:600;}
.btn.bad:hover{filter:brightness(.92);}
.btn.badline{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 50%, var(--rule-2));}
.btn.badline:hover{border-color:var(--bad); background:color-mix(in srgb, var(--bad) 9%, var(--surface));}
.resetscrim{align-items:center;}
.resetbox{border-color:color-mix(in srgb, var(--bad) 35%, var(--rule-2));}
.resetlist{list-style:none; margin:0 0 18px; padding:0; display:grid; gap:8px;}
.resetlist li{display:flex; align-items:center; gap:10px; color:var(--ink-2); font-size:.93rem;}
.resetlist .ri{width:26px; height:26px; flex:none; display:grid; place-items:center;
  border:1px solid color-mix(in srgb, var(--bad) 40%, var(--rule-2)); border-radius:6px;
  color:var(--bad); font-size:13px;}
.resetlist .flagico.small{color:var(--bad);}
.resetcount{position:fixed; right:18px; bottom:18px; z-index:60; display:flex; align-items:center; gap:14px;
  background:var(--surface); border:1px solid color-mix(in srgb, var(--bad) 45%, var(--rule-2));
  border-radius:12px; padding:12px 14px; box-shadow:var(--shadow-lg); animation:rcin .22s ease;}
.resetcount[hidden]{display:none;}
@keyframes rcin{from{transform:translateY(8px); opacity:0;} to{transform:none; opacity:1;}}
.resetcount .rwrap{position:relative; width:44px; height:44px; flex:none;}
.resetcount svg{width:44px; height:44px; display:block;}
.resetcount circle{fill:none; stroke-width:3.5;}
.resetcount .bgc{stroke:var(--rule-2);}
.resetcount .fgc{stroke:var(--bad); stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%;}
.resetcount .num{position:absolute; inset:0; display:grid; place-items:center;
  font-family:"JetBrains Mono",monospace; font-weight:700; font-size:14px; color:var(--bad);
  font-variant-numeric:tabular-nums;}
.resetcount .rc-txt{display:grid; gap:1px; min-width:0;}
.resetcount .rc-txt b{font-size:14.5px;}
.resetcount .rc-txt > span{font-size:.83rem; color:var(--ink-3); white-space:nowrap;}
.resetcount .rc-txt i{font-style:normal; font-family:"JetBrains Mono",monospace; color:var(--bad);
  font-variant-numeric:tabular-nums;}
.resetcount .btn{flex:none;}
.resetok p{margin:0;}
@media (max-width:560px){
  .resetcount{left:12px; right:12px; bottom:12px; justify-content:space-between; gap:10px;}
}

/* перки на странице входа */
.perks{border-top:1px solid var(--rule); margin-top:18px; padding-top:14px;}
.perks-h{font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:9px;}
.perk{display:flex; align-items:center; gap:10px; font-size:.88rem; color:var(--ink-2); padding:4px 0;}
.perk .dot{width:8px; height:8px; border-radius:50%; flex:none;}
.perk .flagico.small{color:var(--note);}

/* ---------- reference landing ---------- */
.refgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; max-width:900px;}
.art.single{grid-template-columns:minmax(0,1fr);}
.rtlink{text-decoration:none;}
.rtlink:hover{text-decoration:underline;}

/* ---------- браузер справочника: деревья ---------- */
/* боковое дерево на страницах руководства и API */
.sidesteps .reft{list-style:none; margin:0; padding:0; font-size:13.4px; line-height:1.45;}
.sidesteps .reft .reft{padding-left:13px; border-left:1px solid var(--rule);
  margin-left:5px;}
.sidesteps .reft li{margin:1px 0;}
.sidesteps .reft a{display:block; padding:3px 7px; border-radius:5px; color:var(--ink-3);
  text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sidesteps .reft a:hover{color:var(--ink); background:var(--surface);}
.sidesteps .reft li.on > a{color:var(--ink);}
.sidesteps .reft li.cur > a{color:var(--line,var(--ink)); background:var(--surface); font-weight:600;}
.sidesteps .reft .grp{display:block; padding:6px 7px 2px; font-family:"JetBrains Mono",monospace;
  font-size:9.8px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);}

/* полное дерево руководства */
.reftreewrap{max-width:860px; border:1px solid var(--rule); border-radius:10px;
  background:var(--surface); padding:10px 6px;}
.reftreewrap .dot{width:9px; height:9px; border-radius:50%; background:var(--line,var(--ink-3)); flex:none;}
.reftreewrap > .tnode[data-root]{border-bottom:1px solid var(--rule);}
.reftreewrap > .tnode[data-root]:last-child, .reftreewrap > .rootleaf:last-child{border-bottom:none;}
.tnode[data-root] > summary{padding:11px 14px;}
.tnode[data-root] > summary .cnt{margin-left:auto;}
.tnode[data-root][open] > summary{background:var(--surface-2);}
/* раздел-одиночка на верхнем уровне выглядит как остальные корни */
.tleaf.rootleaf{display:flex; align-items:center; gap:8px; margin-left:0; padding:11px 14px 11px 34px;
  border-bottom:1px solid var(--rule); border-radius:6px;
  font-family:"Unbounded",sans-serif; font-size:14.3px; font-weight:600; color:var(--ink);}
.tleaf.rootleaf:hover{background:var(--surface-2); color:var(--ink);}
.tleaf.rootleaf .cnt{margin-left:auto; font-weight:400;}
.tnode summary{display:flex; align-items:center; gap:8px; padding:6px 12px; border-radius:6px;
  cursor:pointer; list-style:none; font-size:15.4px;}
.tnode summary::-webkit-details-marker{display:none;}
.tnode summary::before{content:"›"; color:var(--ink-3); flex:none; width:12px;
  transition:transform .15s ease; transform:translateY(-1px);}
.tnode[open] > summary::before{transform:rotate(90deg) translateX(-1px);}
.tnode summary:hover{background:var(--surface-2);}
.tnode summary a, .tnode summary span{color:var(--ink-2); text-decoration:none; font-weight:500;}
.tnode summary a:hover{color:var(--ink); text-decoration:underline;}
.tnode[data-root] > summary{font-family:"Unbounded",sans-serif; font-size:14.3px;}
.tnode[data-root] > summary a, .tnode[data-root] > summary span{color:var(--ink);}
.tnode .tkids{padding-left:19px; border-left:1px solid var(--rule); margin-left:17px;}
.tleaf{display:block; padding:4px 12px; margin-left:12px; border-radius:6px; font-size:14.3px;
  color:var(--ink-3); text-decoration:none;}
.tleaf:hover{color:var(--ink); background:var(--surface-2);}

/* индекс API: группы пространств имён */
.nsgroup{margin:0 0 26px;}
.nsgroup h2{font-size:1.25rem; margin:0 0 10px;}
.nsgroup h2 a{text-decoration:none;}
.nsgroup h2 a:hover{text-decoration:underline;}
.cnt{font-style:normal; font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-3);
  margin-left:6px; font-variant-numeric:tabular-nums;}
.nsgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:8px;}
.nsitem{display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  border:1px solid var(--rule); border-radius:7px; padding:8px 12px; background:var(--surface);
  text-decoration:none; color:var(--ink-2); font-size:14.3px; min-width:0;}
.nsitem .tt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.nsitem:hover{border-color:var(--line,var(--rule-2)); color:var(--ink);}
.nsh1{overflow-wrap:anywhere;}

/* ---------- страницы API: структура для быстрой ориентации ---------- */
/* шапка класса: «класс в …», наследование, модуль — компактной панелью */
.apihead{border:1px solid var(--rule); background:var(--sunk); border-radius:8px;
  padding:10px 16px; margin:0 0 18px; font-size:.93rem; color:var(--ink-2);
  display:flex; flex-wrap:wrap; gap:4px 26px;}
.apihead p{margin:0 !important;}
.apihead a{color:var(--focus); text-decoration:none;}
.apihead a:hover{text-decoration:underline;}

/* чипы-якоря по разделам страницы (виден и на телефоне, где скрыт правый TOC) */
.seqchips{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 20px;}
.seqchips a{font-size:.84rem; font-weight:500; color:var(--ink-2); border:1px solid var(--rule-2);
  border-radius:99px; padding:4px 12px; text-decoration:none; white-space:nowrap; flex:none;}
.seqchips a:hover{border-color:var(--line,var(--ink-3)); color:var(--ink);}

/* таблицы членов класса и параметров: первая колонка — моно */
.apiprose .sec-members table{width:100%;}
.apiprose .sec-members td:first-child, .apiprose .sec-params td:first-child{
  font-family:"JetBrains Mono",monospace; font-size:.88em; white-space:nowrap;}
.apiprose .sec-members td:first-child a{color:var(--focus); text-decoration:none;}
.apiprose .sec-members td:first-child a:hover{text-decoration:underline;}
.apiprose .sec-members tbody tr:hover td{background:color-mix(in srgb, var(--surface-2) 55%, transparent);}

/* унаследованные члены — свёрнутый блок, контент целиком внутри */
.inhblock{border:1px solid var(--rule); border-radius:8px; margin:8px 0 18px; background:var(--surface);}
.inhblock > summary{cursor:pointer; padding:12px 16px; font-weight:600; list-style:none;
  display:flex; align-items:center; gap:9px;}
.inhblock > summary::-webkit-details-marker{display:none;}
.inhblock > summary::before{content:"›"; color:var(--ink-3); transition:transform .15s ease;}
.inhblock[open] > summary::before{transform:rotate(90deg);}
.inhblock > *:not(summary){margin-left:16px !important; margin-right:16px;}
.inhblock > h3{font-size:1.02rem; margin-top:14px;}
.inhblock[open]{padding-bottom:12px;}

/* страница пространства имён: сетка классов */
.clsgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:2px 16px;}
.clscell{font-size:14.3px; padding:3px 0; min-width:0;}
.clscell > a{color:var(--ink-2); text-decoration:none; overflow-wrap:anywhere;}
.clscell > a:hover{color:var(--ink); text-decoration:underline;}
.clscell .grp{font-family:"JetBrains Mono",monospace; font-size:9.8px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);}
.clssub{list-style:none; margin:2px 0 4px; padding:0 0 0 14px; border-left:1px solid var(--rule);}
.clssub a{color:var(--ink-3); text-decoration:none; font-size:13.2px;}
.clssub a:hover{color:var(--ink); text-decoration:underline;}

/* ---------- responsive (как в прототипе) ---------- */
@media (max-width:1080px){ .art{grid-template-columns:minmax(200px,220px) minmax(0,1fr);} .art.solo{grid-template-columns:minmax(0,1fr);} .toc{display:none;} }
@media (max-width:900px){ .bookhead{grid-template-columns:150px minmax(0,1fr); gap:22px;} .para.two{grid-template-columns:1fr;} .routes{grid-template-columns:1fr;} .shelf{grid-template-columns:repeat(2,minmax(0,280px)); justify-content:center; gap:32px 48px;} }
@media (max-width:700px){
  .bookhead{grid-template-columns:1fr; gap:20px;}
  .bookhead .cover{width:min(200px, 56vw);}
  h1{font-size:clamp(1.55rem,7vw,1.98rem);}
}
@media (max-width:560px){
  .shelf{grid-template-columns:minmax(0,280px); justify-content:center;}
  /* телефон: топбар укладывается явными рядами от одной левой линии:
     [лого + разделы] / [поиск во всю ширину] / [счётчики · RU/EN · тема · вход] */
  .topbar{gap:8px 10px; padding:10px 12px;}
  .brand{order:1;}
  .sections{order:2;}
  .searchbtn{order:3; flex:1 1 100%; max-width:none; min-width:0;}
  .searchbtn .k{display:none;}
  .spacer{display:none;}
  .userstats{order:4; padding:5px 9px; gap:7px;}
  #langseg{order:5;}
  .iconbtn{order:6;}
  .userchip{order:7; margin-left:0;}
  .userchip .uc-full{display:none;}
  .userchip .uc-mini{display:grid; place-items:center;}
  .userchip[href="/profile"]{width:30px; height:28px; padding:0; justify-content:center;
    font-family:"Unbounded",sans-serif; font-size:12px;}
  .sections a{padding:5px 10px; font-size:13px;}
  .artbar{gap:10px; padding:8px 14px;}
  .artbar .bar{display:none;}
  .bookmeta div{min-width:90px; padding:9px 12px;}
  .prevnext{grid-template-columns:1fr;}
}
@media (max-width:820px){
  .art,.art.wide{grid-template-columns:1fr;} .sidesteps{display:none;}
  .body{padding:24px 20px 36px;} .pad{padding:24px 20px 34px;}
  .prevnext{grid-template-columns:1fr;} .brand span:not(.mark){display:none;}
  /* телефон: только на страницах чтения (есть .artbar) шапка уезжает со
     скроллом, а панель шага/главы с закладкой липнет к самому верху; на
     списках (полка книг, главная, справочник) шапка остаётся закреплённой */
  .frame:has(.artbar) .topbar{position:static;}
  .artbar{top:0;}
  /* чипы разделов страницы — горизонтальная прокрутка одной строкой */
  .seqchips{flex-wrap:nowrap; overflow-x:auto; margin:0 -20px 18px; padding:0 20px 6px;
    scrollbar-width:none;}
  .seqchips::-webkit-scrollbar{display:none;}
  /* крошка пространства имён в панели — тесно рядом с закладкой */
  .nswrap{display:none;}
  /* отступы глубины поменьше, чтобы заголовки не сжимались в столбик */
  .line li.dep2 .step{padding-left:26px;}
  .line li.dep3 .step{padding-left:36px;}
  .line li.dep4 .step{padding-left:44px;}
  .tnode .tkids{padding-left:10px; margin-left:9px;}
  .apihead{gap:2px 16px;}
  .inhblock > summary{padding:10px 12px;}
  .shell{padding:0;}
  .frame{border:none; border-radius:0; box-shadow:none; min-height:100vh;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important; scroll-behavior:auto;}}