/* ============================================================
   /guide — интерактивная документация. App UI register (DESIGN.md).
   Standalone stylesheet: /guide загружает только этот файл, без
   redesign.css/app.css — все базовые токены объявлены здесь заново.
   Раунд 4 (v4 Neutral): токены DESIGN.md, тема/акцент сменные, таблетки, hairline.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}

:root{
  /* ── Токены v4 Neutral (те же, что static/redesign.css; тема через [data-theme], акцент через [data-accent]) ── */
  --font-ui:'Inter',-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --bg:#FFFFFF; --bg-sidebar:#F9F9F9; --bg-well:#ECECEC; --bg-page:#F2F2F1; --bg-elev:#FFFFFF;
  --hairline:#E4E4E2; --hairline-soft:#EDEDEB; --hairline-strong:#D4D4D2;
  --ink:#0D0D0D; --ink-soft:#5D5D5D; --ink-mute:#8F8F8F;
  --shadow-card:0 1px 2px rgba(13,13,13,.04),0 4px 16px rgba(13,13,13,.05);
  --shadow-float:0 2px 6px rgba(13,13,13,.08),0 12px 32px rgba(13,13,13,.10);
  --err-bg:#FEE2E2; --err-on:#991B1B; --code-inv-bg:#212121; --code-inv-ink:#ECECEC;
  --sb-thumb:rgba(13,13,13,.18); --sb-thumb-hover:rgba(13,13,13,.32); --sb-thumb-active:rgba(13,13,13,.45);
  /* алиасы прежних имён этого файла */
  --paper:var(--bg-elev); --tint:var(--bg-well); --line:var(--hairline); --line-strong:var(--hairline-strong);
  --green:var(--accent); --green-hover:var(--accent-text);
  --green-strong:var(--accent-fill); --green-strong-hover:var(--accent-fill-hover); --on-green:var(--on-accent);
  --r-card:14px; --r-input:999px; --r-pop:16px; --r-pill:999px;
  --sh-xs:var(--shadow-card); --sh-sm:var(--shadow-card); --sh-lg:var(--shadow-float);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --header-h:60px;
  --header-offset:76px;
}
[data-theme="dark"]{
  --bg:#212121; --bg-sidebar:#171717; --bg-well:#2F2F2F; --bg-page:#171717; --bg-elev:#2A2A2A;
  --hairline:rgba(255,255,255,.09); --hairline-soft:rgba(255,255,255,.06); --hairline-strong:rgba(255,255,255,.18);
  --ink:#ECECEC; --ink-soft:#B4B4B4; --ink-mute:#8F8F8F;
  --shadow-card:0 1px 2px rgba(0,0,0,.25),0 4px 16px rgba(0,0,0,.25);
  --shadow-float:0 2px 6px rgba(0,0,0,.35),0 12px 32px rgba(0,0,0,.35);
  --err-bg:#3B1D1D; --err-on:#FCA5A5; --code-inv-bg:#171717;
  --sb-thumb:rgba(255,255,255,.16); --sb-thumb-hover:rgba(255,255,255,.28); --sb-thumb-active:rgba(255,255,255,.4);
}
:root,[data-accent="green"]{ --accent:#1DB954; --accent-fill:#14823B; --accent-fill-hover:#116F32; --on-accent:#FFFFFF; --accent-text:#116F32; }
[data-accent="blue"]{   --accent:#3B82F6; --accent-fill:#2563EB; --accent-fill-hover:#1D4ED8; --on-accent:#FFFFFF; --accent-text:#2563EB; }
[data-accent="black"]{  --accent:#0D0D0D; --accent-fill:#0D0D0D; --accent-fill-hover:#333333; --on-accent:#FFFFFF; --accent-text:#0D0D0D; }
[data-accent="orange"]{ --accent:#F97316; --accent-fill:#C2410C; --accent-fill-hover:#B3400B; --on-accent:#FFFFFF; --accent-text:#C2410C; }
[data-theme="dark"],[data-theme="dark"][data-accent="green"]{ --accent:#1DB954; --accent-fill:#1DB954; --accent-fill-hover:#22C55E; --on-accent:#0D0D0D; --accent-text:#1DB954; }
[data-theme="dark"][data-accent="blue"]{   --accent:#3B82F6; --accent-fill:#3B82F6; --accent-fill-hover:#60A5FA; --on-accent:#0D0D0D; --accent-text:#60A5FA; }
[data-theme="dark"][data-accent="black"]{  --accent:#ECECEC; --accent-fill:#ECECEC; --accent-fill-hover:#FFFFFF; --on-accent:#212121; --accent-text:#ECECEC; }
[data-theme="dark"][data-accent="orange"]{ --accent:#F97316; --accent-fill:#F97316; --accent-fill-hover:#FB923C; --on-accent:#0D0D0D; --accent-text:#FB923C; }
html{color-scheme:light}html[data-theme="dark"]{color-scheme:dark}
html,body{overflow-x:clip}
*{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hover)}
::-webkit-scrollbar-thumb:active{background:var(--sb-thumb-active)}

@media(max-width:879px){
  :root{ --header-h:56px; --header-offset:112px }
}

[hidden]{display:none!important}

html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  background:var(--bg); color:var(--ink); font-family:var(--font-ui);
  font-size:15px; line-height:1.5; font-weight:400; -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
img{display:block;max-width:100%}

:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
button:focus-visible,a:focus-visible{border-radius:8px}

/* ── Топбар: стеклянный, липкий ── */
.g-topbar{
  position:sticky; top:0; z-index:40; height:var(--header-h);
  display:flex; align-items:center; gap:var(--s5);
  padding:0 var(--s6);
  background:var(--bg);
  border-bottom:1px solid var(--hairline);
}
.g-back{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:600; color:var(--ink-soft);
  padding:8px 10px 8px 6px; border-radius:10px; flex:0 0 auto;
  transition:color .15s,background .15s;
}
.g-back svg{width:18px;height:18px;flex:0 0 auto}
.g-back{border-radius:var(--r-pill)}
.g-back:hover{color:var(--ink);background:var(--bg-well)}
.g-title{
  font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--ink);
  flex:0 0 auto; padding-left:var(--s4); border-left:1px solid var(--hairline);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px;
}
/* Поиск: свёрнут в иконку-лупу по умолчанию, разворачивается в поле по клику,
   остаётся в той же строке топбара на любой ширине (C-09: без переносов на 390px). */
.g-search-wrap{
  position:relative; margin-left:auto; flex:0 0 auto;
  display:flex; align-items:center; justify-content:flex-end; height:44px; max-width:44px;
  transition:max-width .18s ease;
}
.g-search-wrap.open{flex:1 1 auto; max-width:340px}
.g-search-btn{
  width:44px; height:44px; border-radius:50%; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink-soft); transition:background .15s,color .15s;
}
.g-search-btn svg{width:18px;height:18px}
.g-search-btn:hover{background:var(--bg-well); color:var(--ink)}
.g-search-wrap.open .g-search-btn{display:none}
#g-search{
  width:0; min-width:0; height:40px; border-radius:var(--r-input);
  border:1px solid transparent; background:var(--bg-elev);
  padding:0; margin:0; font:inherit; font-size:14px; color:var(--ink);
  opacity:0; pointer-events:none;
  transition:width .18s ease,opacity .12s ease,padding .18s ease,border-color .15s,box-shadow .15s;
}
.g-search-wrap.open #g-search{
  width:100%; opacity:1; pointer-events:auto; padding:0 40px 0 14px; border-color:var(--hairline);
}
#g-search::placeholder{color:var(--ink-mute)}
#g-search:hover{border-color:var(--hairline-strong)}
#g-search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
#g-search::-webkit-search-cancel-button{display:none}
.g-search-close{
  display:none; width:32px; height:32px; border-radius:50%; flex:0 0 auto;
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  align-items:center; justify-content:center; color:var(--ink-mute);
}
.g-search-close svg{width:14px;height:14px}
.g-search-close:hover{background:var(--bg-well); color:var(--ink)}
.g-search-wrap.open .g-search-close{display:inline-flex}
.g-search-count{
  position:absolute; right:0; top:calc(100% + 6px);
  font-size:12px; font-weight:600; color:var(--ink-soft);
  background:var(--bg-elev); border:1px solid var(--hairline); border-radius:var(--r-pill);
  padding:5px 12px; box-shadow:var(--sh-sm); white-space:nowrap; z-index:41;
}
@media(max-width:640px){
  .g-topbar{padding:0 var(--s4); gap:var(--s3)}
  .g-title{display:none}
  .g-back span{display:none}
  .g-search-wrap.open{max-width:none}
}
/* iOS зумит страницу, если текст в поле мельче 16px (C-09) */
@media(max-width:768px){
  #g-search{font-size:16px}
}

/* ── Layout: сайдбар + контент ── */
.g-layout{
  max-width:1260px; margin:0 auto;
  display:flex; align-items:flex-start; gap:var(--s7);
  padding:0 var(--s6);
}
@media(max-width:879px){
  .g-layout{flex-direction:column; align-items:stretch; gap:0; padding:0}
}

.g-sidebar{
  position:sticky; top:var(--header-offset);
  flex:0 0 216px; width:216px;
  display:flex; flex-direction:column; gap:1px;
  padding:var(--s6) 0 var(--s7);
  max-height:calc(100vh - var(--header-offset));
  overflow-y:auto;
}
.g-sidebar a{
  font-size:13.5px; font-weight:600; color:var(--ink-soft);
  padding:9px var(--s4) 9px 14px; border-radius:10px;
  border-left:2px solid transparent;
  transition:color .15s,background .15s,border-color .15s;
}
.g-sidebar a:hover{color:var(--ink); background:var(--bg-well)}
.g-sidebar a.active{color:var(--ink); border-left-color:var(--accent); background:var(--bg-well); font-weight:600}

@media(max-width:879px){
  .g-sidebar{
    position:sticky; top:var(--header-h); z-index:35; width:100%; flex:none; min-width:0;
    flex-direction:row; gap:8px; max-height:none; overflow-x:auto; overflow-y:hidden;
    padding:10px var(--s4); background:var(--bg);
    border-bottom:1px solid var(--hairline);
    scroll-snap-type:x proximity; -ms-overflow-style:none; scrollbar-width:none;
  }
  .g-sidebar::-webkit-scrollbar{display:none}
  .g-sidebar a{
    flex:0 0 auto; scroll-snap-align:start; white-space:nowrap;
    border-left:0; border:1px solid var(--hairline); border-radius:var(--r-pill);
    background:var(--bg-elev); padding:11px 16px; min-height:44px; display:flex; align-items:center;
  }
  .g-sidebar a:hover{background:var(--bg-elev); border-color:var(--hairline-strong)}
  .g-sidebar a.active{border-color:transparent; background:var(--accent-fill); color:var(--on-accent)}
}

.g-content{flex:1; min-width:0; max-width:820px; padding-bottom:var(--s7)}
@media(max-width:879px){ .g-content{padding:0 var(--s4)} }

/* ── Секции: ритм, счётчик, разделители ── */
.g-content{counter-reset:g-sec}
.g-section{counter-increment:g-sec; padding:var(--s7) 0; scroll-margin-top:var(--header-offset)}
.g-section:first-of-type{padding-top:var(--s6)}
.g-section + .g-section{border-top:1px solid var(--hairline)}
.g-section > *{margin:0}
.g-section > * + *{margin-top:var(--s5)}
.g-section h3 + *{margin-top:var(--s3)}
.g-section > h3,.g-section h3.g-scenario-group{margin-top:var(--s7)!important}

.g-section > h1:first-child,.g-section > h2:first-child{position:relative; padding-left:0}
.g-section > h1:first-child::before,.g-section > h2:first-child::before{
  content:counter(g-sec,decimal-leading-zero); display:block;
  font-size:12px; font-weight:600; letter-spacing:.12em; color:var(--ink-mute);
  margin-bottom:var(--s2);
}
.g-section h1{font-size:clamp(26px,3.4vw,36px); font-weight:700; letter-spacing:-.02em; line-height:1.1; color:var(--ink)}
.g-section h2{font-size:clamp(20px,2.4vw,26px); font-weight:700; letter-spacing:-.015em; line-height:1.2; color:var(--ink)}
.g-section h3{font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.g-lead{font-size:16.5px; line-height:1.6; color:var(--ink-soft); max-width:72ch}
.g-section p{font-size:15px; line-height:1.65; color:var(--ink-soft); max-width:72ch}
.g-section p strong,.g-section li strong{color:var(--ink); font-weight:600}
.g-section a:not(.g-open):not(.g-chip):not(.g-copy):not(.g-btn){
  color:var(--ink); font-weight:600; text-underline-offset:3px;
  text-decoration:underline; text-decoration-color:var(--hairline-strong);
  transition:text-decoration-color .15s;
}
.g-section a:not(.g-open):not(.g-chip):not(.g-copy):not(.g-btn):hover{text-decoration-color:var(--accent)}

.g-note{
  max-width:68ch; font-size:14px; line-height:1.6; color:var(--ink-soft);
  background:var(--bg-page); border-left:none;
  border-radius:var(--r-card); padding:var(--s3) var(--s4);
}

/* Простой список тезисов (.g-points) — используется в нескольких секциях */
.g-points{display:flex; flex-direction:column; gap:var(--s3); max-width:68ch}
.g-points > li{
  font-size:15px; line-height:1.6; color:var(--ink-soft);
  padding-left:var(--s4); position:relative;
}
.g-points > li::before{
  content:""; position:absolute; left:0; top:.65em; width:6px; height:6px;
  border-radius:50%; background:var(--hairline-strong);
}

/* Нумерованный «путь» (.g-path) и sos-шаги — общий рецепт круглых номеров */
.g-path,.g-sos-steps{
  display:flex; flex-direction:column; gap:var(--s5); max-width:68ch;
  counter-reset:g-step;
}
.g-path > li,.g-sos-steps > li{
  counter-increment:g-step; position:relative; padding-left:40px;
  font-size:15px; line-height:1.65; color:var(--ink-soft);
}
.g-path > li::before,.g-sos-steps > li::before{
  content:counter(g-step); position:absolute; left:0; top:0;
  width:28px; height:28px; border-radius:50%;
  border:1.5px solid var(--hairline-strong); color:var(--ink-soft);
  font-size:13px; font-weight:600; font-family:var(--font-ui);
  display:flex; align-items:center; justify-content:center;
}

/* ============================================================
   Схема «Веб / Агенты / Память» — примитивные SVG-пиктограммы
   ============================================================ */
.g-scheme{
  display:flex; align-items:stretch; gap:var(--s4);
  padding:var(--s5) 0;
}
.g-scheme-node{
  flex:1; min-width:0; background:var(--bg-elev); border:1px solid var(--hairline);
  border-radius:var(--r-card); box-shadow:var(--sh-xs);
  padding:var(--s5) var(--s4); display:flex; flex-direction:column; gap:10px;
  position:relative;
}
.g-scheme-node .g-scheme-ic{width:34px;height:34px;color:var(--ink-mute);flex:0 0 auto}
.g-scheme-node:first-child .g-scheme-ic{color:var(--accent)}
.g-scheme-node strong{font-size:16px; font-weight:600; color:var(--ink)}
.g-scheme-node span{font-size:13.5px; line-height:1.55; color:var(--ink-soft)}
.g-scheme-arrow{
  flex:0 0 32px; display:flex; align-items:center; justify-content:center; align-self:center;
  color:var(--hairline-strong);
}
.g-scheme-arrow svg{width:24px;height:24px}
@media(max-width:640px){
  .g-scheme{flex-direction:column; gap:0}
  .g-scheme-arrow{flex:0 0 32px; transform:rotate(90deg)}
}

/* ── Возможности: сетка групп ── */
.g-cap-groups{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
@media(max-width:879px){ .g-cap-groups{grid-template-columns:1fr} }
.g-cap-group{
  background:var(--bg-elev); border:1px solid var(--hairline); border-radius:var(--r-card);
  padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3);
}
.g-cap-group h3{font-size:14px; letter-spacing:.02em}
.g-cap-list{display:flex; flex-direction:column; gap:9px}
.g-cap-list > li{font-size:14px; line-height:1.55; color:var(--ink-soft)}
.g-cap-list > li a{
  color:var(--ink); font-weight:600; text-decoration:underline;
  text-decoration-color:var(--hairline-strong); text-underline-offset:2px;
}
.g-cap-list > li a:hover{text-decoration-color:var(--accent)}

/* ── Чек-лист быстрого старта ── */
.g-check-progress{
  display:inline-flex; align-self:flex-start; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--ink-soft);
  background:var(--bg-well); border-radius:var(--r-pill); padding:7px 14px;
}
.g-check-progress.all-done{background:var(--accent-fill); color:var(--on-accent)}
.g-checklist{display:flex; flex-direction:column; max-width:68ch}
.g-checklist > li{
  position:relative; padding:var(--s4) 0 var(--s4) 44px; border-top:1px solid var(--hairline);
  font-size:15px; line-height:1.6; color:var(--ink-soft);
}
.g-checklist > li:first-child{border-top:0}
.g-checklist > li.done{color:var(--ink-mute)}
.g-checklist > li.done strong{color:var(--ink-soft)}
.g-check-box{
  width:28px; height:28px; flex:0 0 auto;
  position:absolute; left:0; top:var(--s4);
  border-radius:8px; border:1.5px solid var(--hairline-strong); background:var(--bg-elev);
  transition:background .15s,border-color .15s,transform .1s;
}
.g-check-box:hover{border-color:var(--ink-mute)}
.g-check-box:active{transform:scale(.92)}
.g-check-box[aria-checked="true"]{background:var(--accent-fill); border-color:var(--accent-fill)}
.g-check-box[aria-checked="true"]::after{
  content:""; position:absolute; left:50%; top:45%; width:6px; height:11px;
  border:solid var(--on-accent); border-width:0 2px 2px 0;
  transform:translate(-50%,-55%) rotate(45deg);
}

/* ── Разделы веба: карточки-гриды ── */
.g-view-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4)}
@media(max-width:999px){ .g-view-grid{grid-template-columns:1fr} }
.g-view-card{
  background:var(--bg-elev); border:1px solid var(--hairline); border-radius:var(--r-card);
  box-shadow:var(--sh-xs); padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3);
}
.g-view-card h3{font-size:17px}
.g-view-card p{font-size:14.5px; line-height:1.6; color:var(--ink-soft); max-width:none}
.g-view-card ul{display:flex; flex-direction:column; gap:8px}
.g-view-card ul li{font-size:14px; line-height:1.55; color:var(--ink-soft)}
.g-view-card ul li strong{color:var(--ink)}
.g-open{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent-fill); color:var(--on-accent); font-weight:600; font-size:13.5px;
  border-radius:var(--r-pill); padding:11px 18px; min-height:44px;
  transition:background .15s,transform .1s;
}
.g-open::after{
  content:""; width:6px; height:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg); margin-left:2px;
}
.g-open:hover{background:var(--accent-fill-hover)}
.g-open:active{transform:scale(.97)}

/* ============================================================
   Каталог агентов
   ============================================================ */
.g-agent-filters{display:flex; flex-wrap:wrap; gap:8px}
.g-chip{
  min-height:38px; padding:8px 16px; border-radius:var(--r-pill);
  border:1px solid var(--hairline); background:var(--bg-elev);
  font-size:13.5px; font-weight:500; color:var(--ink-soft);
  transition:background .15s,border-color .15s,color .15s;
}
.g-chip:hover{border-color:var(--hairline-strong); color:var(--ink)}
.g-chip.active{background:var(--accent-fill); border-color:transparent; color:var(--on-accent)}

.g-agent-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--s4);
}
.g-agent-card{
  background:var(--bg-elev); border:1px solid var(--hairline); border-radius:var(--r-card);
  box-shadow:var(--sh-xs); padding:var(--s4) var(--s4) var(--s4);
  display:flex; flex-direction:column; gap:var(--s3);
  transition:box-shadow .15s;
}
.g-agent-card.open{box-shadow:var(--sh-sm)}
.g-agent-head{display:flex; align-items:center; gap:12px}
.g-agent-avatar{
  width:44px; height:44px; border-radius:50%; flex:0 0 auto; object-fit:cover;
  background:var(--bg-well);
}
.g-agent-initial{
  display:flex; align-items:center; justify-content:center;
  color:#FFFFFF; font-size:17px; font-weight:600; font-family:var(--font-ui);
}
.g-agent-name{font-size:15px; font-weight:600; color:var(--ink)}
.g-agent-cat{font-size:12px; font-weight:600; color:var(--ink-soft); margin-top:2px}
.g-agent-desc{font-size:13.5px; line-height:1.55; color:var(--ink-soft); max-width:none}
.g-agent-more{
  align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:var(--accent-text);
  min-height:36px; padding:4px 2px;
}
.g-agent-more::after{
  content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .2s; margin-top:-3px;
}
.g-agent-card.open .g-agent-more::after{transform:rotate(225deg); margin-top:3px}
.g-agent-details{
  border-top:1px solid var(--hairline); padding-top:var(--s3);
  display:flex; flex-direction:column; gap:var(--s3);
  font-size:13.5px; color:var(--ink-soft);
}
.g-agent-strength{font-size:13.5px; line-height:1.55; color:var(--ink-soft); max-width:none}
.g-agent-block-title{font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute)}
.g-agent-block-list{display:flex; flex-direction:column; gap:8px; margin-top:8px}
.g-agent-block-list li{font-size:13.5px; line-height:1.5; color:var(--ink-soft)}
.g-agent-service{
  font-size:14px; line-height:1.6; color:var(--ink-soft); max-width:68ch;
}
.g-loading{
  grid-column:1/-1; text-align:center; font-size:14px; color:var(--ink-soft); padding:var(--s6) 0;
}

/* ============================================================
   Сценарии: копируемые фразы, группы, шаги
   ============================================================ */
.g-scenario-group{
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute); padding-bottom:var(--s3); border-bottom:1px solid var(--hairline);
}
.g-scenario{display:flex; flex-direction:column; gap:var(--s3); max-width:68ch}
.g-scenario h3{font-size:17px}
.g-scenario ol{display:flex; flex-direction:column; gap:12px; counter-reset:g-sstep}
.g-scenario ol > li{
  counter-increment:g-sstep; position:relative; padding-left:32px;
  font-size:15px; line-height:1.65; color:var(--ink-soft);
}
.g-scenario ol > li::before{
  content:counter(g-sstep); position:absolute; left:0; top:1px;
  width:22px; height:22px; border-radius:50%; border:1.5px solid var(--hairline-strong);
  color:var(--ink-soft); font-size:11.5px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}

.g-copy{
  display:inline-flex; align-items:center; gap:6px; vertical-align:middle;
  background:var(--bg-well); border:1px dashed var(--hairline-strong); border-radius:var(--r-pill);
  padding:5px 12px 5px 10px; margin:2px 0; font-size:14px; font-weight:600; color:var(--ink);
  min-height:32px; transition:background .15s,border-color .15s,color .15s;
}
.g-copy::before{
  content:""; width:13px; height:13px; flex:0 0 auto; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.55;
}
.g-copy:hover{border-color:var(--accent); background:var(--bg-elev)}
.g-copy.copied{background:var(--accent-fill); border-color:var(--accent-fill); border-style:solid; color:var(--on-accent)}
.g-copy.copied::before{opacity:1}

.g-agent-block-list .g-copy{display:inline-flex}

/* ── Токены и подключения ── */
.g-token-list{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px;
  max-width:none;
}
/* li = вся строка-карточка (ссылка на заголовок + текст пояснения рядом, вне <a> в разметке).
   Не display:flex: заголовок-ссылка и текст пояснения - обычный смешанный инлайн-контент,
   должен переноситься как текст, а не как нерастягивающиеся flex-элементы в ряд. */
.g-token-list > li{
  position:relative; background:var(--bg-elev); border:1px solid var(--hairline); border-radius:var(--r-input);
  padding:13px 34px 13px var(--s4); font-size:13.5px; line-height:1.5; color:var(--ink-soft); font-weight:500;
  min-height:44px; display:block;
  transition:border-color .15s,box-shadow .15s;
}
.g-token-list > li > a{color:var(--ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--hairline-strong)}
.g-token-list > li > a:hover{text-decoration-color:var(--accent)}
.g-token-list > li::after{
  content:""; position:absolute; right:14px; top:50%; width:7px; height:7px;
  border-right:1.5px solid var(--ink-mute); border-top:1.5px solid var(--ink-mute);
  transform:translateY(-60%) rotate(45deg);
}
.g-token-list > li:hover{border-color:var(--hairline-strong); box-shadow:var(--sh-xs)}

/* ── FAQ / типовые ситуации (details-summary) ── */
.g-faq{display:flex; flex-direction:column; max-width:68ch}
.g-faq details{border-top:1px solid var(--hairline)}
.g-faq details:first-child{border-top:0}
.g-faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s4) 0; font-size:15.5px; font-weight:600; color:var(--ink);
  min-height:44px;
}
.g-faq summary::-webkit-details-marker{display:none}
.g-faq summary::after{
  content:""; flex:0 0 auto; width:9px; height:9px;
  border-right:2px solid var(--ink-mute); border-bottom:2px solid var(--ink-mute);
  transform:rotate(45deg); transition:transform .2s;
}
.g-faq details[open] summary::after{transform:rotate(225deg)}
.g-faq details p{padding-bottom:var(--s4); max-width:none}

/* ── Глоссарий ── */
.g-glossary{display:block}
.g-glossary dt{
  font-weight:600; color:var(--ink); font-size:15px;
  padding-top:var(--s4); border-top:1px solid var(--hairline);
}
.g-glossary dt:first-child{border-top:0; padding-top:0}
.g-glossary dd{font-size:14.5px; line-height:1.6; color:var(--ink-soft); padding-top:6px; padding-bottom:var(--s4); max-width:68ch}
@media(min-width:720px){
  .g-glossary{display:grid; grid-template-columns:200px 1fr; column-gap:var(--s5)}
  .g-glossary dt{padding-top:var(--s4); border-top:1px solid var(--hairline)}
  .g-glossary dt:first-child{border-top:0; padding-top:0}
  .g-glossary dd{padding-top:var(--s4); padding-left:0; border-top:1px solid var(--hairline); max-width:none}
  .g-glossary dt:first-child + dd{border-top:0; padding-top:0}
}

/* ── Футер ── */
.g-footer{
  max-width:1260px; margin:0 auto; padding:var(--s6) var(--s6) var(--s7);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s3);
  border-top:1px solid var(--hairline);
}
.g-footer p{font-size:13px; color:var(--ink-soft); max-width:52ch}
.g-footer a{font-size:13px; font-weight:600; color:var(--ink); text-decoration:underline; text-decoration-color:var(--hairline-strong)}
.g-footer a:hover{text-decoration-color:var(--accent)}
@media(max-width:879px){ .g-footer{padding:var(--s5) var(--s4) var(--s6)} }

/* ============================================================
   Поиск: скрытие непопавших блоков
   ============================================================ */
body.g-searching .g-miss{display:none!important}
body.g-searching .g-section-empty{display:none!important}

/* ============================================================
   Встраивание в «Настройки → Гайд» (/guide?embed=1, /rescue?embed=1)
   Раздел веба уже даёт свою шапку и заголовок, поэтому собственный
   топбар страницы прячется, а ссылки наружу открывает верхнее окно.
   ============================================================ */
/* Правка владельца 22.09.2026: своя строка внутри вкладки «Помощь» — второй ряд
   там, где во всей системе он один (лупа переехала в общую полосу веба, поиск
   по-прежнему ведёт #g-search — просто поле теперь скрыто вместе со всем
   топбаром и получает текст снаружи через postMessage, см. guide.js). Топбар
   гасится целиком на любой ширине, а не только внутренние элементы. */
.g-embed body{background:var(--bg)}
/* display:none на .g-topbar убрал бы из рендера и .g-toc-btn — фикс-позиция
   ребёнка не спасает: display:none на предке выключает всё поддерево, даже
   position:fixed. Поэтому полоса схлопывается высотой (без границы и фона),
   а не выключается — кнопка оглавления рисует себя поверх контента сама. */
.g-embed .g-topbar{height:0; min-height:0; padding:0; margin:0; border:0; background:transparent; overflow:hidden}
.g-embed .g-back,.g-embed .g-title,.g-embed .g-search-wrap{display:none}
.g-embed .g-layout{max-width:none; padding:0 var(--s5); gap:var(--s6)}
.g-embed .g-sidebar{top:0; max-height:100vh; padding-top:var(--s4); flex-basis:220px; width:220px}
.g-embed .g-content{max-width:820px}
.g-embed .g-section{scroll-margin-top:var(--s4)}
.g-embed .g-section:first-of-type{padding-top:var(--s6)}
.g-embed .g-footer a{display:none}

/* Оглавление в embed: на широком экране постоянно открыто, кнопки нет вовсе
   (иначе дублирует иконку «свернуть меню» самого веба рядом). На узком экране
   прячется и открывается ОДНОЙ кнопкой со списком (не панель-иконкой) поверх
   контента, как выдвижка; закрывается пунктом, крестиком, тапом вне и Esc
   (JS: guideTocDrawer в guide.js, класс g-toc-open на <html>). */
.g-toc-btn{display:none; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; color:var(--ink-soft); cursor:pointer; flex:0 0 auto}
.g-toc-btn:hover{background:var(--bg-well); color:var(--ink)}
.g-toc-btn svg{width:19px; height:19px}
.g-toc-head{display:none}
.g-toc-scrim{display:none; position:fixed; inset:0; background:rgba(13,13,13,.32); z-index:65}
@media(max-width:879px){
  .g-embed .g-layout{padding:0}
  /* Без своей строки кнопке оглавления негде стоять наверху — плавающая круглая
     кнопка внизу справа (тот же язык, что .g-toc-btn: круг, список внутри).
     Строка ПЕРЕД первым заголовком отпадает: длинный гайд читают со скроллом,
     и кнопка в начале контента уехала бы за экран уже на первом разделе —
     плавающая остаётся под рукой (доступна большим пальцем) всё время чтения. */
  .g-embed .g-toc-btn{display:inline-flex; position:fixed; right:var(--s4); bottom:var(--s4); z-index:60;
    width:48px; height:48px; background:var(--bg-elev); border:1px solid var(--hairline);
    box-shadow:var(--shadow-float)}
  .g-embed .g-toc-btn:hover{background:var(--bg-well)}
  .g-embed .g-sidebar{
    position:fixed; top:0; left:0; z-index:70;
    width:260px; max-width:82vw; flex-basis:auto;
    height:100dvh; max-height:none;
    flex-direction:column; align-items:stretch; gap:1px;
    background:var(--bg-elev); border-right:1px solid var(--hairline); border-bottom:0;
    box-shadow:var(--shadow-float); padding:var(--s4);
    overflow-x:hidden; overflow-y:auto; scroll-snap-type:none;
    transform:translateX(-100%); transition:transform .18s ease-out;
  }
  .g-embed .g-sidebar a{
    flex:0 0 auto; scroll-snap-align:none; white-space:normal;
    border:0; border-radius:10px; background:none;
    padding:11px 14px; min-height:44px; display:flex; align-items:center;
  }
  .g-embed .g-sidebar a:hover{background:var(--bg-well); border-color:transparent}
  .g-embed .g-sidebar a.active{border-left-color:transparent; background:var(--bg-well); color:var(--ink)}
  .g-embed .g-toc-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:2px 4px 12px; margin-bottom:8px; border-bottom:1px solid var(--hairline);
  }
  .g-toc-head-title{font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute)}
  .g-toc-close{width:36px; height:36px; border-radius:50%; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-soft)}
  .g-toc-close:hover{background:var(--bg-well); color:var(--ink)}
  .g-toc-close svg{width:16px; height:16px}
  html.g-embed.g-toc-open .g-sidebar{transform:translateX(0)}
  html.g-embed.g-toc-open .g-toc-scrim{display:block}
  html.g-embed.g-toc-open .g-toc-btn{color:var(--ink); background:var(--bg-well)}
  html.g-embed.g-toc-open body{overflow:hidden}
}

/* ============================================================
   /rescue — памятка «если система не открывается»
   ============================================================ */
code{
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:.92em; background:var(--bg-well); border:none;
  border-radius:6px; padding:1px 6px; white-space:nowrap;
}

/* Команда для терминала: блок с кнопкой «скопировать» справа */
.g-cmd{
  position:relative; max-width:72ch; background:var(--code-inv-bg); color:var(--code-inv-ink);
  border-radius:var(--r-input); padding:var(--s4) 64px var(--s4) var(--s4);
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:13.5px; line-height:1.7; white-space:pre-wrap; word-break:break-word;
  overflow-wrap:anywhere;
}
.g-cmd .g-cmd-copy{
  position:absolute; top:10px; right:10px;
  font-size:12px; font-weight:600; color:var(--code-inv-ink);
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-pill); padding:6px 12px; min-height:32px;
  font-family:var(--font-ui); transition:background .15s;
}
.g-cmd .g-cmd-copy:hover{background:rgba(255,255,255,.22)}
.g-cmd .g-cmd-copy.done{background:var(--accent-fill); border-color:var(--accent-fill); color:var(--on-accent)}
.g-cmd + .g-cmd{margin-top:var(--s3)}

/* Готовая задача для Claude: длинный текст, который копируют целиком */
.g-task{
  max-width:68ch; background:var(--bg-elev); border:1px solid var(--hairline);
  border-left:3px solid var(--accent); border-radius:0 var(--r-card) var(--r-card) 0;
  padding:var(--s4) var(--s5); box-shadow:var(--sh-xs);
}
.g-task pre{
  margin:0; font-family:var(--font-ui); font-size:14.5px; line-height:1.65;
  color:var(--ink); white-space:pre-wrap; word-break:break-word;
}
.g-task-foot{display:flex; align-items:center; gap:var(--s3); margin-top:var(--s4); flex-wrap:wrap}

/* Кнопки страницы: скачать памятку, открыть отдельно */
.g-btn{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  padding:0 var(--s5); border-radius:var(--r-pill);
  font-size:14px; font-weight:600; color:var(--ink);
  background:var(--bg-elev); border:1px solid var(--hairline); box-shadow:none;
  transition:background .15s,border-color .15s,transform .1s;
}
.g-btn:hover{background:var(--bg-well)}
.g-btn:active{transform:translateY(1px)}
.g-btn svg{width:17px;height:17px;flex:0 0 auto}
.g-btn.primary{background:var(--accent-fill); border-color:var(--accent-fill); color:var(--on-accent)}
.g-btn.primary:hover{background:var(--accent-fill-hover)}
.g-btn-row{display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center}

/* Предупреждение: то, чего делать нельзя */
.g-warn{
  max-width:72ch; background:var(--err-bg); border:none;
  border-radius:var(--r-card); padding:var(--s4) var(--s5);
  font-size:14.5px; line-height:1.65; color:var(--err-on);
}
.g-warn strong{color:var(--err-on)}
.g-warn ul{display:flex; flex-direction:column; gap:var(--s2); margin-top:var(--s3)}
.g-warn li{padding-left:var(--s4); position:relative}
.g-warn li::before{content:""; position:absolute; left:0; top:.6em; width:6px; height:6px;
  border-radius:50%; background:var(--err-on)}

/* Ссылка в оглавлении, ведущая на другую страницу */
.g-side-out{display:flex; align-items:center; gap:6px}
.g-side-out::after{
  content:""; width:11px; height:11px; flex:0 0 auto; background:currentColor; opacity:.55;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Скачанный файл открывают без сервера: кнопки, которые там не работают, прячутся */
.g-offline .g-online-only,.g-offline .g-back,.g-offline .g-footer a{display:none!important}
.g-cmd-copy-note{font-size:13px; color:var(--ink-mute)}
/* Во фрейме «Настроек» кнопки страницы дублировали бы кнопки раздела */
.g-embed .g-btn-row{display:none}
.g-offline .g-title{padding-left:0;border-left:0}