/* marketing harness · shaper b&w shell, forked from aim-sim-office atelier tokens */
:root{
  --bg:#ffffff; --ink:#0a0a0a; --soft:#dcdcdc; --hair:#ececec; --grid:#f1f1f1;
  --muted:#8a8a8a; --accent:#d92027; --paper:#fafafa;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--mono); font-size:12px; line-height:1.45;
  letter-spacing:.02em; font-feature-settings:"tnum"; -webkit-font-smoothing:antialiased;
  display:grid; grid-template-rows:auto minmax(0,1fr) auto; height:100dvh; overflow:hidden;
  padding:10px 12px; gap:8px;
}
button{font:inherit; color:inherit; background:var(--bg); border:1px solid var(--ink); padding:5px 10px; cursor:pointer; letter-spacing:.04em}
button:hover{background:var(--ink); color:var(--bg)}
button.on{background:var(--ink); color:var(--bg)}
h1,h2,p{margin:0}

/* header */
#hd{display:grid; grid-template-columns:34px minmax(0,1fr) auto auto; align-items:center; gap:10px 20px; border-bottom:1px solid var(--ink); padding-bottom:9px}
.logo{width:34px; height:34px; object-fit:contain}
.brand h1{font-size:19px; font-weight:700; letter-spacing:.01em}
.brand p{color:var(--muted); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; margin-top:2px}
.modes{display:flex}
.modes button + button{border-left:none}
.clock{display:flex; flex-direction:column; align-items:flex-end; gap:1px; min-width:190px}
.clock b{font-size:12px}
.clock span{color:var(--muted); font-size:11px; max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* grid */
#grid{display:grid; grid-template-columns:240px minmax(0,1fr) 340px; gap:8px; min-height:0}
.panel{border:1px solid var(--ink); padding:9px 10px; min-height:0; display:flex; flex-direction:column; background:var(--bg)}
.panel h2{display:flex; justify-content:space-between; align-items:baseline; font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding-bottom:6px; border-bottom:1px dashed var(--soft); margin-bottom:6px}
.panel h2 em{font-style:normal; color:var(--ink); letter-spacing:.04em}
.panel h2.sub{margin-top:10px}
.scroll{overflow:auto; min-height:0}

/* tree */
#colL{overflow:hidden}
#tree{flex:1 1 auto}
.fold{margin:6px 0 2px; color:var(--muted); font-size:10.5px; letter-spacing:.06em}
.fold b{color:var(--ink); font-weight:500}
.file{display:grid; grid-template-columns:14px minmax(0,1fr); gap:6px; padding:1px 4px; cursor:pointer; white-space:nowrap}
.file span:last-child{overflow:hidden; text-overflow:ellipsis}
.file:hover{background:var(--hair)}
.file.new{color:var(--accent)}
.file.new .g{animation:blink 1s steps(2) 3}
.g{display:inline-block; width:14px; text-align:center}
#commits{list-style:none; margin:0; padding:0; max-height:170px; overflow:auto; flex:0 0 auto}
#commits li{display:grid; grid-template-columns:62px minmax(0,1fr); gap:6px; padding:2px 0; border-bottom:1px dotted var(--hair)}
#commits li b{color:var(--accent); font-weight:500}
#commits li.fresh{background:#fff2f1}

/* graph */
#colC{padding:9px 10px 0}
.gh{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; border-bottom:1px dashed var(--soft); margin-bottom:0}
.gh h2{border:none; margin:0}
#legend{display:flex; flex-wrap:wrap; gap:3px 10px; justify-content:flex-end; font-size:10px; color:var(--muted); padding-bottom:6px}
#legend span{display:inline-flex; align-items:center; gap:4px}
#legend svg{width:12px; height:12px; overflow:visible}
#stage{position:relative; flex:1 1 auto; min-height:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px; margin:0 -10px}
#graph{position:absolute; inset:0; width:100%; height:100%; cursor:grab}
#graph:active{cursor:grabbing}
#empty{position:absolute; inset:0; display:grid; place-content:center; text-align:center; font-size:15px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); pointer-events:none; transition:opacity .6s}
#empty small{font-size:10.5px; letter-spacing:.12em}
#liveHint{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:420px; border:1px solid var(--ink); background:var(--bg); padding:14px 16px; line-height:1.6}
#liveHint code{background:var(--hair); padding:1px 4px}
.link{stroke:#cfcfcf; stroke-width:1}
.link.agent{stroke:var(--accent); stroke-dasharray:3 3; stroke-width:1.2}
.link.agent-idle{stroke:#b5b5b5; stroke-dasharray:3 3}
.link.wiki{stroke:#cfcfcf}
.link.plan{stroke:#d6d6d6}
.link.hot{stroke:var(--ink); stroke-width:1.4}
.node path{stroke:var(--ink); stroke-width:1.3; vector-effect:non-scaling-stroke}
.node text{font-size:9px; fill:var(--ink); paint-order:stroke; stroke:#fff; stroke-width:3px; stroke-linejoin:round; pointer-events:none}
.node.ghost path{stroke:#b9b9b9; stroke-dasharray:2 2; fill:#fff}
.node.ghost text{fill:#a8a8a8}
.node.agent text{fill:var(--accent); font-weight:700}
.node{cursor:pointer}
.dim{opacity:.15}
.ring{fill:none; stroke:var(--accent); stroke-width:1.5; animation:ping 1.8s var(--ease) forwards; pointer-events:none}
.pulse{fill:none; stroke:var(--accent); stroke-width:1; animation:pulse 1.4s ease-in-out infinite; pointer-events:none}
@keyframes ping{from{r:6; opacity:1} to{r:34; opacity:0}}
@keyframes pulse{0%,100%{r:12; opacity:.9} 50%{r:18; opacity:.2}}
@keyframes blink{50%{opacity:0}}

#narr{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:center; border-top:1px solid var(--ink); margin:0 -10px; padding:8px 10px; min-height:48px}
#narrTag{background:var(--ink); color:var(--bg); padding:3px 7px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap}
#narrText{font-size:12.5px}

/* right column */
#colR{display:grid; grid-template-rows:auto auto minmax(220px,1fr); gap:8px; min-height:0}
#qa{margin:0; display:grid; grid-template-columns:96px minmax(0,1fr); gap:3px 8px; align-items:start}
#qa dt{color:var(--muted); font-size:10.5px; padding-top:1px}
#qa dd{margin:0; min-height:15px; border-left:2px solid var(--hair); padding-left:6px; font-size:11px; line-height:1.35;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}
#anketaP.compact #qa dd{-webkit-line-clamp:1}
#anketaP.compact #qa{gap:1px 8px}
#qa dd.on{border-left-color:var(--ink)}
#qa dd.typing::after{content:"▍"; color:var(--accent); animation:blink 1s steps(2) infinite}
#qa dd.wait{color:#c4c4c4}
.lane{display:grid; grid-template-columns:14px 94px minmax(0,1fr); gap:6px; align-items:center; padding:4px 0; border-bottom:1px dotted var(--hair)}
.lane .dot{width:10px; height:10px; border:1.3px solid var(--ink); border-radius:50%}
.lane.running .dot{background:var(--accent); border-color:var(--accent); animation:blink 1s steps(2) infinite}
.lane.done .dot{background:var(--ink)}
.lane.waiting .dot{border-style:dashed}
.lane b{font-weight:500}
.lane small{display:block; color:var(--muted); font-size:10px}
.lane .tgt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px}
.lane .bar{height:3px; background:var(--hair); margin-top:3px; position:relative; overflow:hidden}
.lane.running .bar::after{content:""; position:absolute; inset:0; width:40%; background:var(--accent); animation:slide 1.1s linear infinite}
.lane.done .bar{background:var(--ink)}
@keyframes slide{from{transform:translateX(-100%)} to{transform:translateX(250%)}}
#dashP{overflow:hidden; padding-top:0}
#tabs{display:flex; border-bottom:1px solid var(--ink); margin:0 -10px 6px}
#tabs button{border:none; border-right:1px solid var(--ink); padding:7px 10px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; background:var(--bg); color:var(--muted)}
#tabs button.on{background:var(--ink); color:var(--bg)}
#tabBody{overflow:auto; min-height:0; flex:1}
body:not(.live) .liveonly{display:none}
.trow{display:grid; grid-template-columns:12px 78px minmax(0,1fr); gap:6px; align-items:center; padding:4px 0; border-bottom:1px dotted var(--hair); font-size:11px}
.trow i{width:9px; height:9px; border:1.3px solid var(--ink); border-radius:50%}
.trow.ok i{background:var(--ink)}
.trow:not(.ok):not(.link) i{border-color:var(--accent)}
.trow.link{cursor:pointer}.trow.link:hover{background:var(--hair)}
.trow span{color:var(--muted); overflow:hidden; text-overflow:ellipsis}
.trow code{background:var(--hair); padding:0 3px; color:var(--ink)}
#consoleForm{display:grid; gap:6px}
.crow{display:flex; gap:6px; align-items:center}
#consoleForm select,#consoleForm input,#consoleForm textarea{font:inherit; font-size:11.5px; border:1px solid var(--ink); padding:5px 6px; background:var(--bg); color:var(--ink); min-width:0}
#consoleForm input{flex:1}
#consoleForm textarea{resize:vertical; text-transform:none}
#cPresets{display:flex; flex-wrap:wrap; gap:4px}
#cPresets button{padding:2px 7px; font-size:10.5px; border-color:var(--soft)}
#consoleForm button[type=submit]{background:var(--ink); color:var(--bg)}
.run{border-bottom:1px dotted var(--hair); padding:4px 0; font-size:11px}
.run summary{cursor:pointer; display:flex; gap:6px; align-items:center; list-style:none}
.run summary i{width:9px; height:9px; border-radius:50%; border:1.3px solid var(--ink); flex:0 0 auto}
.run.running summary i{background:var(--accent); border-color:var(--accent); animation:blink 1s steps(2) infinite}
.run.done summary i{background:var(--ink)}
.run.failed summary i{border-color:var(--accent)}
.run summary span{margin-left:auto; color:var(--muted); white-space:nowrap}
.run summary button{padding:0 6px; font-size:10px}
.run pre{white-space:pre-wrap; max-height:160px; overflow:auto; background:var(--paper); padding:6px; margin:4px 0 0; font-size:10.5px}
#pvFrame{flex:1; border:none; width:100%; background:#fff}
#metrics{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--ink); border-left:1px solid var(--ink)}
.m{border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); padding:5px 6px}
.m b{display:block; font-size:18px; font-weight:500; line-height:1.1}
.m span{font-size:9.5px; color:var(--muted); letter-spacing:.06em}
.m.up b{color:var(--accent)}
#coverage{margin-top:8px}
#coverage table{border-collapse:collapse; width:100%; font-size:10.5px}
#coverage th{font-weight:500; color:var(--muted); text-align:center; padding:2px}
#coverage th:first-child{text-align:left}
#coverage td{text-align:center; padding:2px; border-top:1px dotted var(--hair)}
#coverage td:first-child{text-align:left}
#coverage i{display:inline-block; width:11px; height:11px; border:1px solid var(--ink)}
#coverage i.f{background:var(--ink)}
#coverage i.gap{border-color:var(--accent); border-style:dashed}
.cap{font-size:10px; color:var(--muted); margin-top:4px}

/* timeline */
#tl{display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto 4px; gap:6px 10px; border-top:1px solid var(--ink); padding-top:8px}
.ctrl{display:flex}
.ctrl button{min-width:38px}
.ctrl button + button{border-left:none}
#phases{display:grid; gap:0}
.ph{border:1px solid var(--ink); border-left:none; padding:5px 6px; font-size:10.5px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; position:relative}
.ph:first-child{border-left:1px solid var(--ink)}
.ph.done{color:var(--muted)}
.ph.done::before{content:"✓ "}
.ph.now{background:var(--ink); color:var(--bg)}
#bar{grid-column:1 / -1; background:var(--hair); position:relative}
#bar i{position:absolute; inset:0 auto 0 0; width:0; background:var(--ink)}
body.live #ctrl{display:none}
body.live #tl{grid-template-columns:minmax(0,1fr)}
body.live #bar i{background:var(--accent)}

/* preview */
#preview{position:fixed; top:64px; right:12px; bottom:70px; width:min(460px,calc(100vw - 24px)); background:var(--bg); border:1px solid var(--ink); box-shadow:8px 8px 0 rgba(0,0,0,.08); display:flex; flex-direction:column; z-index:5}
#preview[hidden]{display:none}
#preview header{display:flex; justify-content:space-between; gap:10px; padding:9px 10px; border-bottom:1px solid var(--ink)}
#preview header b{display:block; font-size:13px}
#preview header span{color:var(--muted); font-size:10.5px}
#preview header button{align-self:flex-start; padding:0 8px}
#pvLinks{padding:6px 10px; border-bottom:1px dashed var(--soft); font-size:10.5px; color:var(--muted); line-height:1.8}
#pvLinks a{color:var(--ink); cursor:pointer; border-bottom:1px solid var(--soft); margin-right:8px}
#pvBody{margin:0; padding:10px; overflow:auto; white-space:pre-wrap; font:inherit; font-size:11.5px; line-height:1.55; flex:1}
#pvBar{display:flex; flex-wrap:wrap; gap:0; padding:6px 10px; border-bottom:1px dashed var(--soft)}
#pvBar button{padding:2px 7px; font-size:10.5px; border-color:var(--soft)}
#pvBar button + button{border-left:none}
#pvBar button.on{border-color:var(--ink)}
#pvBar .sp{flex:1; min-width:8px}
#pvBar #pvSave{background:var(--accent); border-color:var(--accent); color:#fff; margin-right:8px}
#pvWrap{flex:1; min-height:0; display:flex}
#pvWrap > *{flex:1; min-width:0}
#pvEditor{font:inherit; font-size:11.5px; line-height:1.55; border:none; border-right:1px solid var(--ink); padding:10px; resize:none; outline:none; background:var(--paper); color:var(--ink); tab-size:2}
#preview.editing{width:min(1040px,calc(100vw - 24px))}
#preview.dirty #pvTitle::after{content:" ●"; color:var(--accent)}
#pvNote{padding:4px 10px 6px; margin:0; border-top:1px dashed var(--soft); min-height:22px}
#pvNote:empty{display:none}
.md{padding:10px 14px; overflow:auto; font-size:12px; line-height:1.6}
.md h1{font-size:16px; font-weight:700; margin:4px 0 8px}
.md h2{font-size:13px; font-weight:700; margin:14px 0 6px; border-bottom:1px dashed var(--soft); padding-bottom:3px}
.md h3{font-size:12px; font-weight:700; margin:10px 0 4px}
.md p{margin:0 0 8px}
.md ul,.md ol{margin:0 0 8px; padding-left:18px}
.md li{margin:1px 0}
.md code{background:var(--hair); padding:0 3px}
.md pre{background:var(--paper); border:1px solid var(--hair); padding:6px 8px; overflow:auto; white-space:pre-wrap; margin:0 0 8px}
.md pre code{background:none; padding:0}
.md table{border-collapse:collapse; margin:0 0 10px; font-size:11px; width:100%}
.md th,.md td{border:1px solid var(--soft); padding:3px 5px; text-align:left; vertical-align:top}
.md th{font-weight:500; background:var(--paper)}
.md blockquote{border-left:2px solid var(--ink); margin:0 0 8px; padding-left:8px; color:#444}
.md .fm{border:1px dashed var(--soft); padding:5px 7px; margin-bottom:10px; font-size:10.5px; color:var(--muted); white-space:pre-wrap}
.md a.wl{color:var(--ink); border-bottom:1px solid var(--accent); cursor:pointer}
.md a.wl.miss{border-bottom-style:dashed; color:var(--muted)}
.md hr{border:none; border-top:1px dashed var(--soft); margin:10px 0}

/* phase stop: plain-language card between phases */
#stop{position:fixed; inset:0; z-index:9; display:grid; place-items:center; background:rgba(255,255,255,.72); backdrop-filter:blur(2px)}
#stop[hidden]{display:none}
#stop .card,#intro .card{width:min(620px,calc(100vw - 32px)); max-height:calc(100vh - 40px); overflow:auto; background:var(--bg); border:1px solid var(--ink); box-shadow:10px 10px 0 rgba(0,0,0,.08); padding:16px 18px 14px; animation:rise .35s var(--ease)}
.st-hd{display:flex; justify-content:space-between; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); border-bottom:1px dashed var(--soft); padding-bottom:6px}
.st-hd #stNum{color:var(--accent)}
#stTitle{font-size:19px; font-weight:700; line-height:1.25; margin:12px 0 8px; letter-spacing:-.01em}
#stLead{font-size:13px; line-height:1.6; margin:0 0 10px}
#stPoints{margin:0 0 10px; padding:0; list-style:none; border-top:1px solid var(--ink)}
#stPoints li{padding:6px 0 6px 18px; border-bottom:1px dotted var(--soft); position:relative; font-size:12px; line-height:1.5}
#stPoints li::before{content:"→"; position:absolute; left:0; color:var(--accent)}
#stop code{background:var(--hair); padding:0 3px}
#stFiles{font-size:11px; color:var(--muted); margin-bottom:10px}
#stFiles b{display:block; color:var(--muted); font-weight:500; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px}
#stFiles .chips{display:flex; flex-wrap:wrap; gap:4px; max-height:112px; overflow:auto}
#stFiles a{color:var(--ink); border:1px solid var(--soft); padding:1px 6px; cursor:pointer; white-space:nowrap; text-decoration:none}
#stFiles a:hover{border-color:var(--ink)}
.st-ft{display:flex; gap:8px; align-items:center; border-top:1px solid var(--ink); padding-top:10px}
.st-ft .sp{flex:1}
.st-ft .go{background:var(--ink); color:var(--bg); padding:7px 16px}
.st-ft .go:hover{background:var(--accent); border-color:var(--accent)}
#stopsBtn.on{background:var(--ink); color:var(--bg)}
@keyframes rise{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
#openVault{border-left:none}

/* narrow screens: stack, page scrolls */
@media (max-width:1100px){
  #grid{grid-template-columns:220px minmax(0,1fr)}
  #colR{grid-column:1 / -1; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:auto}
}
@media (max-width:760px){
  body{height:auto; overflow:auto; padding:10px 16px}
  #hd{grid-template-columns:30px minmax(0,1fr)}
  .modes,.clock{grid-column:1 / -1}
  .clock{align-items:flex-start}
  #grid{grid-template-columns:minmax(0,1fr)}
  #colC{order:-1; min-height:62vh}
  #colR{grid-template-columns:minmax(0,1fr)}
  #colL{max-height:none} #tree{max-height:260px}
  #phases{grid-template-columns:repeat(5,minmax(0,1fr)) !important}
  .ph{border-left:1px solid var(--ink)}
  #tl{position:sticky; bottom:0; background:var(--bg); padding-bottom:8px; grid-template-columns:minmax(0,1fr)}
  #preview{top:10px; bottom:10px; left:16px; right:16px; width:auto}
}

#legend span{cursor:pointer; user-select:none}
#legend span.off{opacity:.3; text-decoration:line-through}
.node.off,.link.off{display:none}
#graph.dense .node text{font-size:8px}
#graph.dense .L-code text,#graph.dense .L-ghost text{display:none}
#graph.dense .link.wiki{stroke:#e2e2e2}
#graph.dense .link.plan{stroke:#ececec}
@media (max-width:760px){
  #pvWrap{flex-direction:column}
  #pvEditor{border-right:none; border-bottom:1px solid var(--ink); min-height:38vh}
  #preview.editing{width:auto}
}
.pagelink{border:1px solid var(--ink); border-left:none; padding:5px 10px; text-decoration:none; color:var(--ink); letter-spacing:.04em}
.pagelink:hover{background:var(--ink); color:var(--bg)}
.modes{display:flex; flex-wrap:wrap}

/* v4: header groups, folder bar, legend row, search, intro, selection, full preview */
#hd{grid-template-columns:34px minmax(0,1fr) auto auto}
.navs{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.navs nav{display:flex}
.navs .pagelink:first-child{border-left:1px solid var(--ink)}
button.search{border-color:var(--soft); color:var(--muted); display:flex; gap:8px; align-items:center}
button.search:hover{border-color:var(--ink); background:var(--bg); color:var(--ink)}
kbd{font:inherit; font-size:10px; border:1px solid var(--soft); padding:0 4px; color:var(--muted); background:var(--paper)}
#folderBar{border:1px solid var(--ink); padding:6px 8px; margin:0 0 8px; font-size:10.5px; display:grid; gap:3px}
.fb-path{color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fb-git{color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fb-git a{color:var(--ink); border-bottom:1px solid var(--accent); text-decoration:none}
.fb-act{display:flex; margin-top:3px}
.fb-act button{padding:2px 7px; font-size:10.5px}
.fb-act button + button{border-left:none}
.gh{flex-direction:column; align-items:stretch; gap:4px}
.gh h2{border-bottom:none; margin-bottom:0; padding-bottom:0}
#legend{justify-content:flex-start; gap:3px 12px; padding-bottom:7px}
.node.sel path{stroke:var(--accent) !important; stroke-width:3}
.node.sel text{fill:var(--accent); font-weight:700}
.file.sel{background:var(--ink); color:var(--bg)}
.file.sel .g{color:var(--bg)}
#preview.full{top:12px; left:12px; right:12px; bottom:12px; width:auto; z-index:8}
#pvFull{margin-right:6px !important; border-color:var(--ink) !important}
#search{position:fixed; inset:0; z-index:10; background:rgba(255,255,255,.7); backdrop-filter:blur(2px); display:grid; justify-items:center; align-items:start; padding-top:12vh}
#search[hidden]{display:none}
#search .box{width:min(640px,calc(100vw - 32px)); background:var(--bg); border:1px solid var(--ink); box-shadow:10px 10px 0 rgba(0,0,0,.08); padding:10px 12px}
#q{width:100%; font:inherit; font-size:15px; border:none; border-bottom:1px solid var(--ink); padding:6px 2px 8px; outline:none}
#qres{list-style:none; margin:6px 0; padding:0; max-height:52vh; overflow:auto}
#qres li{display:grid; grid-template-columns:18px minmax(0,1fr) auto; gap:8px; padding:5px 6px; cursor:pointer; border-bottom:1px dotted var(--hair); align-items:baseline}
#qres li.on{background:var(--ink); color:var(--bg)}
#qres li small{color:var(--muted); font-size:10px}
#qres li.on small{color:#bbb}
#qres li .hit{grid-column:2 / -1; font-size:10.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#qres li.on .hit{color:#ccc}
#intro{position:fixed; inset:0; z-index:11; display:grid; place-items:center; background:rgba(255,255,255,.86); backdrop-filter:blur(3px)}
#intro[hidden]{display:none}
#intro h3{font-size:24px; font-weight:800; line-height:1.15; letter-spacing:-.02em; margin:14px 0 10px}
#intro p{font-size:13px; line-height:1.6; margin:0 0 10px}
#intro ul{margin:0 0 12px; padding:0; list-style:none; border-top:1px solid var(--ink)}
#intro li{padding:6px 0 6px 18px; border-bottom:1px dotted var(--soft); position:relative; font-size:12px}
#intro li::before{content:"→"; position:absolute; left:0; color:var(--accent)}
.pagelink2{border:1px solid var(--ink); padding:5px 10px; text-decoration:none; color:var(--ink)}
.pagelink2:hover{background:var(--ink); color:var(--bg)}
.ph:hover{background:var(--hair)}
.ph.now:hover{background:var(--ink)}
@media (max-width:760px){ .navs{grid-column:1 / -1; justify-content:flex-start} }
body:not(.live) #folderBar{display:none}
code,kbd,pre,textarea{font-family:inherit}
#legend .lg-all{display:inline-flex; margin-left:auto; font-weight:400}
#legend .lg-all button{padding:0 6px; font-size:10px; border-color:var(--soft); color:var(--muted)}
#legend .lg-all button + button{border-left:none}
#legend .lg-all button:hover{border-color:var(--ink); color:var(--ink); background:var(--bg)}
body.team .localonly{display:none !important}
/* v6: connect card, browser folder, console explanation */
body.team .srvonly,body.team .editonly,body.team .fsaonly{display:none !important}
body.fsa .srvonly{display:none !important}
body:not(.fsa) .fsaonly{display:none !important}
body:not(.live) .editonly,body:not(.live) .srvonly{display:none}
#connect{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(640px,calc(100% - 32px)); max-height:calc(100% - 24px); overflow:auto; border:1px solid var(--ink); background:var(--bg); box-shadow:10px 10px 0 rgba(0,0,0,.08); padding:12px 14px; z-index:3}
#connect[hidden]{display:none}
.cn-hd{display:flex; justify-content:space-between; align-items:baseline; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); border-bottom:1px dashed var(--soft); padding-bottom:6px; margin-bottom:6px}
.cn-hd .cap{letter-spacing:.02em; text-transform:none; color:var(--muted); margin:0}
.cn-opt{padding:8px 0; border-bottom:1px dotted var(--soft)}
.cn-opt:last-child{border-bottom:none}
.cn-opt b{display:block; font-size:12.5px; margin-bottom:4px}
.cn-opt p{margin:0 0 6px; font-size:11.5px; line-height:1.55}
.cn-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.cn-row .go{background:var(--ink); color:var(--bg)}
.cn-row .go:hover{background:var(--accent); border-color:var(--accent)}
.cmd{display:grid; grid-template-columns:minmax(0,1fr) auto; border:1px solid var(--ink); margin:0 0 6px}
.cmd code{padding:6px 8px; font-size:11px; overflow-wrap:anywhere; background:var(--paper)}
.cmd button{border:none; border-left:1px solid var(--ink); font-size:10.5px}
.cmd button.done{background:var(--ink); color:var(--bg)}
#stage.drop{outline:2px dashed var(--accent); outline-offset:-8px}
#newFile{display:flex; margin-top:4px}
#newFile input{flex:1; min-width:0; font:inherit; font-size:10.5px; border:1px solid var(--ink); padding:2px 6px}
#newFile button{padding:2px 7px; font-size:10.5px; border-left:none}
.fb-act button{padding:2px 7px; font-size:10.5px}
#consoleOff{font-size:11px; line-height:1.55}
#consoleOff b{display:block; margin:6px 0 2px}
#consoleOff table{border-collapse:collapse; width:100%; font-size:10.5px; margin:4px 0 8px}
#consoleOff td{border-bottom:1px dotted var(--soft); padding:3px 4px; vertical-align:top}
#consoleOff td:first-child{white-space:nowrap; font-weight:500}
.trow .sub{grid-column:2 / -1; font-size:10px; color:var(--muted)}
.trow .sub a{color:var(--ink); border-bottom:1px solid var(--soft); cursor:pointer; margin-right:6px}
.trow .set{color:var(--ink); border-bottom:1px solid var(--accent); cursor:pointer; white-space:nowrap}
mark{background:none; color:var(--accent); font-weight:700}
#qres li.on mark{color:#ff8a80}
#consoleForm[hidden],#runs[hidden],#newFile[hidden],#consoleOff[hidden]{display:none !important}
.fb-git a[data-copyval]{cursor:pointer; border-bottom:1px solid var(--soft); color:var(--ink)}
body.nosrc #folderBar{display:none !important}
.fb-act{flex-wrap:wrap}
.fb-act button{white-space:nowrap; border-left:1px solid var(--ink) !important; margin:0 -1px -1px 0}
#tools .trow{grid-template-columns:12px minmax(0,1fr); align-items:start; padding:6px 0}
#tools .trow i{margin-top:3px}
#tools .trow span,#tools .trow .sub{grid-column:2}
#tools .trow span{white-space:normal; font-size:10.5px}
#connect a,#consoleOff a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--accent)}
.btnlink{border:1px solid var(--ink); padding:4px 10px; text-decoration:none; color:var(--ink) !important; border-bottom:1px solid var(--ink) !important}
.btnlink:hover{background:var(--ink); color:var(--bg) !important}
/* one header geometry on every page */
#hd{min-height:58px}
.brand p{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand{min-width:0}
.clock{width:250px; min-width:250px}
.navs button,.navs a{line-height:1.45; font-size:12px; padding:5px 10px}
#pvBar .pvlink{border:1px solid var(--soft); border-left:none; padding:2px 7px; font-size:10.5px; text-decoration:none; color:var(--ink)}
#pvBar .pvlink:hover{background:var(--ink); color:var(--bg)}
#pvBar .pvlink[hidden]{display:none}

/* v7: tester fixes */
.file.sel .g{color:var(--accent)}
.clock span{max-width:100%}
body.team .fb-git,body.live .fb-git{white-space:normal; overflow-wrap:anywhere}
.fb-git code{background:var(--hair); padding:0 3px; color:var(--ink)}
.fb-git .cap{display:inline; margin:0}
#pvNote{white-space:pre-wrap}
#pvNote.warn{color:var(--accent)}
@media (max-width:760px){
  #connect{position:relative; left:auto; top:auto; transform:none; width:auto; max-height:none; margin:8px 16px 16px}
  body.nosrc #colC{min-height:0}
  body.nosrc #stage{min-height:0}
  body.nosrc #graph{display:none}
}

/* v7: roles panel, sessions, commit card, history, properties */
.lrow{display:flex; gap:4px; align-items:center; min-width:0}
.lrow .tgt{flex:1; min-width:0; color:var(--ink); text-decoration:none}
.lrow .tgt.open{cursor:pointer; border-bottom:1px dotted var(--soft)}
.lrow .tgt.open:hover{border-bottom-color:var(--ink)}
.lrow .tgt.miss{color:var(--accent)}
.lrow button{padding:0 6px; font-size:10.5px; line-height:1.5; border-color:var(--soft)}
.lrow button + button{margin-left:-5px}
.lrow button[data-role]:hover{background:var(--accent); border-color:var(--accent); color:#fff}
.lane{grid-template-columns:14px 94px minmax(0,1fr)}
#lanes .cap{padding-top:4px}
.srow{display:grid; grid-template-columns:10px 40px minmax(0,1fr); gap:2px 6px; align-items:baseline; padding:4px 2px; border-bottom:1px dotted var(--hair); cursor:pointer; font-size:11px}
.srow:hover{background:var(--hair)}
.srow i{width:8px; height:8px; border:1.3px solid var(--ink); border-radius:50%; align-self:center}
.srow.running i{background:var(--accent); border-color:var(--accent); animation:blink 1s steps(2) infinite}
.srow.done i{background:var(--ink)}
.srow.failed i,.srow.stopped i,.srow.lost i{border-color:var(--accent)}
.srow b{font-weight:500}
.srow span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.srow small{grid-column:3; color:var(--muted); font-size:10px}
#commits li.click{cursor:pointer}
#commits li.click:hover{background:var(--hair)}
#commits li.ag span::before{content:"● "; color:var(--accent)}
#preview.kind-doc .fileonly{display:none !important}
#pvPath span:not(:first-child)::before{content:" · "; color:var(--soft)}
#pvLinks > div{display:flex; flex-wrap:wrap; gap:2px 10px; align-items:baseline}
#pvLinks > div > b{color:var(--ink); font-weight:500; min-width:34px}
#pvLinks .lg{display:inline-flex; flex-wrap:wrap; gap:0 6px; align-items:baseline}
#pvLinks .lg i{font-style:normal; color:var(--muted)}
#pvLinks .lg a{margin-right:0}
#pvLinks .lg em{font-style:normal; color:var(--muted)}
#pvLinks a.miss{border-bottom:1px dashed var(--soft); color:var(--muted); cursor:default}
.md .props{display:grid; grid-template-columns:minmax(80px,max-content) minmax(0,1fr); gap:0; margin:0 0 12px; border:1px solid var(--soft); font-size:11px}
.md .props dt,.md .props dd{margin:0; padding:3px 7px; border-bottom:1px dotted var(--hair)}
.md .props dt{color:var(--muted)}
.md .props dd{overflow-wrap:anywhere}
.md .props .ph{border-bottom:1px solid var(--soft); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); background:var(--paper)}
.md .props dd.ph{text-align:right; letter-spacing:.04em}
.chip,.person{display:inline-block; border:1px solid var(--soft); padding:0 5px; margin:1px 2px 1px 0; font-size:10.5px}
.person::before{content:"◉ "; color:var(--muted)}
.badge{display:inline-block; border:1px solid var(--ink); padding:0 6px; font-size:10.5px; text-transform:lowercase}
.badge.st-approved,.badge.st-published,.card.st-done .badge{background:var(--ink); color:var(--bg)}
.badge.st-draft{border-style:dashed}
.card.st-running .badge,.card.st-failed .badge,.card.st-stopped .badge{border-color:var(--accent); color:var(--accent)}
.md .tw{overflow-x:auto; margin:0 0 10px; max-width:100%}
.md .tw table{margin:0}
.md li.task{list-style:none; margin-left:-16px}
.md li.task.did{color:var(--muted); text-decoration:line-through}
.md .callout{border:1px solid var(--soft); border-left:3px solid var(--ink); padding:6px 9px; margin:0 0 10px; background:var(--paper)}
.md .callout > b{display:block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:3px}
.md pre[data-lang]::before{content:attr(data-lang); display:block; color:var(--muted); font-size:10px; margin-bottom:3px}
.md .toc{display:flex; flex-wrap:wrap; gap:2px 10px; font-size:10.5px; color:var(--muted); border-bottom:1px dashed var(--soft); padding:0 0 6px; margin:0 0 10px}
.md .toc a{color:var(--ink); cursor:pointer; border-bottom:1px solid var(--soft)}
.md .card{border:1px solid var(--soft); border-left:3px solid var(--ink); padding:7px 9px; margin:0 0 10px; background:var(--bg)}
.md .card.st-running,.md .card.st-failed,.md .card.st-stopped,.md .card.st-lost{border-left-color:var(--accent)}
.md .card.st-running{animation:none}
.md .card .kv{display:flex; flex-wrap:wrap; gap:2px 10px; font-size:11px; margin-bottom:3px}
.md .card .msg{font-weight:700; margin:0 0 4px}
.acts{display:flex; flex-wrap:wrap; gap:0; margin:6px 0 2px; align-items:center}
.acts button{padding:2px 8px; font-size:10.5px; margin:0 -1px -1px 0}
.acts button.on{background:var(--ink); color:var(--bg)}
button.danger{border-color:var(--ink)}
button.danger:hover,.confirm .yes{background:var(--accent); border-color:var(--accent); color:#fff}
.confirm{display:inline-flex; align-items:center; gap:0; border:1px solid var(--accent); padding-left:7px; font-size:10.5px; margin:0 6px 0 0}
.confirm > span{color:var(--accent); margin-right:6px}
.confirm button{border:none; border-left:1px solid var(--accent); padding:2px 9px; font-size:10.5px}
.md .gate{color:var(--accent); border-color:var(--accent)}
.md .task{margin:0 0 6px}
.md .chips{display:flex; flex-wrap:wrap; gap:4px; margin:0 0 8px}
.md .chips a{border:1px solid var(--soft); padding:1px 6px; cursor:pointer; color:var(--ink); text-decoration:none; font-size:10.5px}
.md .chips a:hover{border-color:var(--ink)}
.md .chips a.gone{color:var(--muted); border-style:dashed; cursor:default}
.md .steps{list-style:none; padding:0; margin:0 0 10px; font-size:10.5px; border-top:1px solid var(--hair)}
.md .steps li{display:grid; grid-template-columns:58px minmax(0,1fr); gap:6px; padding:2px 0; border-bottom:1px dotted var(--hair)}
.md .steps time{color:var(--muted)}
.md .steps li span{white-space:pre-wrap; overflow-wrap:anywhere}
.md .steps li.k-text span{color:var(--ink)}
.md .steps li.k-file b,.md .steps li.k-err span{color:var(--accent)}
.md .steps li.k-sys,.md .steps li.k-out,.md .steps li.k-think{color:var(--muted)}
.md .steps li.k-text span{max-height:9em; overflow:auto; display:block}
.md .flist{list-style:none; padding:0; margin:0 0 10px; font-size:11px}
.md .flist li{display:grid; grid-template-columns:16px minmax(0,1fr); gap:4px; padding:1px 0; border-bottom:1px dotted var(--hair)}
.md .flist a{color:var(--ink); cursor:pointer; overflow-wrap:anywhere}
.md .flist .st-A{color:var(--ink)} .md .flist .st-D{color:var(--accent)}
.md .dl{font-size:10.5px; line-height:1.45; white-space:pre; overflow:auto; padding:0}
.md .dl span{display:block; padding:0 6px; min-height:1.45em}
.md .dl .add{background:var(--grid); box-shadow:inset 2px 0 0 var(--ink)}
.md .dl .rem{color:var(--accent); background:#fff6f5; box-shadow:inset 2px 0 0 var(--accent)}
.md .dl .hunk{color:var(--muted); background:var(--paper)}
.md .dl .meta{color:var(--muted); font-weight:700}
.md .hist{list-style:none; padding:0; margin:8px 0 12px; font-size:11px}
.md .hist li{display:grid; grid-template-columns:62px minmax(0,1fr); gap:0 6px; padding:3px 4px; border-bottom:1px dotted var(--hair); cursor:pointer}
.md .hist li:hover{background:var(--hair)}
.md .hist li.on{background:var(--ink); color:var(--bg)}
.md .hist li.on small{color:#bbb}
.md .hist li b{font-weight:500; color:var(--accent)}
.md .hist li.on b{color:#ff8a80}
.md .hist small{grid-column:2; color:var(--muted); font-size:10px}
.forkf{display:flex; flex-wrap:wrap; gap:0; margin:4px 0 2px; width:100%}
.forkf input:not([type]){flex:1; min-width:140px; font:inherit; font-size:10.5px; border:1px solid var(--ink); padding:2px 6px}
.forkf label{display:flex; gap:4px; align-items:center; padding:0 8px; font-size:10.5px; border:1px solid var(--ink); border-left:none}
.forkf button{padding:2px 8px; font-size:10.5px; border-left:none; background:var(--ink); color:var(--bg)}
#forkBox{margin-top:4px}
#forkBox .cap,#forkBox p{margin:3px 0 0; font-size:10px}
.okmsg code,.warn code{background:var(--hair); padding:0 3px}
.warn{color:var(--accent)}
#consoleOff ul.plain{margin:4px 0 6px; padding-left:14px}
#consoleOff ul.plain li{margin:2px 0}
#cMsg:empty{display:none}
#preview{width:min(540px,calc(100vw - 24px))}
#pvLinks{max-height:112px; overflow:auto}
.md .dl{white-space:pre-wrap; overflow-wrap:anywhere}
.md .propsd{margin:0 0 10px}
.md .propsd summary{cursor:pointer; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.md .propsd[open] summary{margin-bottom:6px}

/* full file names: wrap instead of cutting (01.10) */
.file{white-space:normal; align-items:baseline; line-height:1.35; padding:2px 4px}
.file span:last-child{overflow:visible; text-overflow:clip; overflow-wrap:anywhere}
#qres li > span:nth-child(2){overflow-wrap:anywhere}

/* folding panels */
.fold-h{cursor:pointer; user-select:none}
.fold-h span::after{content:' ▾'; color:var(--muted); letter-spacing:0}
.fold-h.folded span::after{content:' ▸'}
.fold-h:hover span{color:var(--ink)}
body.fold-tree #tree, body.fold-tree #folderBar{display:none !important}
body.fold-tree #commits{max-height:none; flex:1 1 auto}
body.fold-commits #commits{display:none}
body.fold-qa #qa, body.fold-lanes #lanes, body.fold-tabBody #tabBody{display:none}
#tabs .fold-t{margin-left:auto; border-right:none; border-left:1px solid var(--ink); padding:7px 10px; letter-spacing:0}
#tabs .fold-t.folded{background:var(--bg); color:var(--ink)}
body.fold-tabBody #tabs .fold-t::after{content:''}
body.fold-tabBody #tabs{margin-bottom:0}
body.fold-tabBody #colR{grid-template-rows:auto auto auto}

/* file toolbar: second row "открыть" (01.10) */
#pvBar{row-gap:6px; align-items:center}
#pvBar .pvbr{flex-basis:100%; height:0}
#pvBar .pvlab{font-size:10px; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; margin-right:8px}
#pvBar .pvbr[hidden], #pvBar .pvlab[hidden]{display:none}

/* commits: author and time under the message, message up to 3 lines (01.10) */
#commits li .cm{font-style:normal; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
#commits li .cw{display:block; color:var(--muted); font-size:10px; margin-top:1px}
#tabs{overflow:hidden}
#tabs button{white-space:nowrap; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; padding:7px 8px; letter-spacing:.06em}
#tabs .fold-t{flex:0 0 auto; padding:7px 8px}

[hidden]{display:none!important}
.flow-visual{width:100%;height:auto;max-height:100px}.resource-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin:12px 0;font-size:12px}.resource-links a{color:inherit;text-underline-offset:3px}

/* SLP harness · v3, 09.10: минимально, мельче, один красный акцент */
:root{--accent:#d92027; --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
body{font-family:var(--sans); font-size:12.5px; line-height:1.45; padding:10px 14px; gap:8px; letter-spacing:0}
code,kbd,pre,textarea,#tree,#commits,.clock,.cmd,.cap{font-family:var(--mono)}
button{letter-spacing:.01em}

/* шапка в одну строку */
#hd{grid-template-columns:30px minmax(180px,1fr) auto auto; gap:8px 16px; padding-bottom:8px}
#hd .logo{width:30px; height:30px}
.brand h1{font-size:17px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand p{font-size:11px; letter-spacing:.02em; text-transform:none; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.navs{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.modes{display:flex}
.modes button{font-size:12px; padding:5px 11px}
.modes button + button{border-left:none}
.modes button.on{background:var(--ink); color:#fff}
.pagelink{font-size:12px; padding:5px 11px; border:1px solid var(--ink); color:var(--ink); text-decoration:none; background:var(--bg)}
.pagelink:hover{background:var(--ink); color:#fff}
.pagelink.go{background:var(--ink); border-color:var(--ink); color:#fff}
.pagelink.go:hover{background:var(--accent); border-color:var(--accent)}
button.pagelink{cursor:pointer; font-family:var(--sans)}
.search{font-size:12px; padding:5px 10px}
.clock{min-width:170px}
.clock b{font-size:12px; font-family:var(--sans); font-weight:600}
.clock span{font-size:10.5px}

/* сетка и панели */
#grid{grid-template-columns:250px minmax(0,1fr) 340px; gap:8px}
.panel{padding:9px 10px}
.panel h2{font-family:var(--mono); font-size:10px; letter-spacing:.16em}
.fold{font-size:11px; margin:7px 0 2px}
.file{font-size:11.5px; padding:1px 4px}
#commits li{font-size:11px}
#commits li b{color:var(--muted)}
#legend{font-size:10.5px; gap:3px 10px; color:#666}
#legend svg{width:12px; height:12px}

/* граф: подписи только у главного, у нового и у того, что под курсором */
.node text{font-size:9.5px; font-family:var(--sans); font-weight:500}
.node.L-hub text,.node.L-section text{font-size:10.5px; font-weight:700}
#graph.dense .node text{display:none}
#graph.dense .node.L-hub text,#graph.dense .node.L-section text,#graph.dense .node.sel text,body:not(.live) #graph.dense .node.fresh text,#graph.dense.hovering .node:not(.dim) text{display:block}
#graph.dense .node.L-context path{opacity:.85}

/* строка «сейчас» */
#narr{grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; gap:5px 10px; padding:9px 10px; min-height:54px}
#narrTag{font-size:10px; padding:3px 7px; align-self:start}
#narrText{font-size:14px; font-weight:600; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
#narrFile{grid-column:1 / -1; display:grid; grid-template-columns:16px minmax(0,1fr); grid-template-rows:auto auto; row-gap:1px; column-gap:8px; align-items:baseline; text-align:left; border:none; border-left:2px solid var(--accent); background:var(--paper); padding:6px 9px; font-size:11.5px; animation:rise .35s var(--ease)}
#narrFile:hover{background:var(--hair); color:var(--ink)}
#narrFile .g{grid-row:1 / 3}
#narrFile b{font-weight:600; font-family:var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#narrFile .nd{grid-column:2; color:#444; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* правая колонка: шаг, анкета, агенты, срез */
#colR{grid-template-rows:minmax(0,1fr) auto auto auto}
#askP{overflow:auto; min-height:0}
#ask{display:grid; gap:10px; align-content:start}
.stp{display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px; align-items:baseline}
.stp i{font-style:normal; font-family:var(--mono); font-size:10.5px; color:#fff; background:var(--ink); padding:1px 5px}
.stp b{font-size:15px; font-weight:700; letter-spacing:-.01em; line-height:1.25}
dl.how{display:grid; grid-template-columns:52px minmax(0,1fr); gap:3px 10px; margin:0; font-size:12px; line-height:1.4}
dl.how dt{font-family:var(--mono); font-size:10px; color:var(--muted); padding-top:2px}
dl.how dd{margin:0}
.ak .cap,.secb>.cap{display:block; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:4px}
.ak-q{margin:0; font-size:12.5px; line-height:1.45; border-left:2px solid var(--ink); padding:5px 9px; background:var(--paper)}
.ak-q::before{content:"› "; color:var(--accent); font-weight:700}
.secb{border-top:1px dashed var(--soft); padding-top:8px}
.sc{display:grid; grid-template-columns:22px minmax(0,1fr); gap:8px; align-items:start; animation:rise .35s var(--ease)}
.sc-g{font-size:15px; line-height:1.2; text-align:center}
.sc b{font-size:13.5px; font-weight:700; margin-right:6px}
.sc code{font-size:10.5px; color:var(--muted)}
.sc p{margin:2px 0 0; font-size:12px; color:#333; line-height:1.4}
.rq{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:4px}
.rq li{display:grid; grid-template-columns:52px minmax(0,1fr); gap:8px; padding:5px 8px; background:var(--paper); border-left:2px solid var(--soft); font-size:12px; line-height:1.38; opacity:0; animation:rqin .45s var(--ease) forwards}
.rq li:nth-child(2){border-left-color:#888}
.rq li:nth-child(3){border-left-color:var(--ink)}
.rq li i{font-style:normal; font-family:var(--mono); font-size:10px; color:var(--muted); padding-top:2px}
@keyframes rqin{from{opacity:0; transform:translateX(-6px)} to{opacity:1; transform:none}}
#anketaP.compact #qa{display:none}
#anketaP.compact{padding-bottom:4px}
#qa dt{font-size:10.5px}
#qa dd{font-size:12px}
body.nolanes #lanesP{display:none}
.lane b{font-size:12.5px}
.lane small{font-size:10.5px}
.lane .tgt{font-size:11.5px}
.m b{font-size:18px}
.m span{font-size:10.5px}
body.live #anketaP{display:none}

/* шаги внизу: номер и название целиком, превью при наведении */
#tl{gap:6px 10px}
#ctrl button{font-size:12px; padding:4px 8px}
.ph{display:grid; grid-template-columns:auto minmax(0,1fr); gap:5px; align-items:start; padding:5px 6px; font-size:11px; line-height:1.25; white-space:normal; overflow:hidden; text-overflow:clip; min-height:38px}
.ph i{font-style:normal; font-family:var(--mono); font-size:10px; color:var(--muted); padding-top:1px}
.ph span{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ph.done{color:#555}
.ph.done::before{content:none}
.ph.done i::before{content:"✓ "}
.ph.now{background:var(--ink); color:#fff}
.ph.now i{color:#bbb}
.ph:hover{background:var(--hair)}
.ph.now:hover{background:var(--ink)}
body.live #phases .ph{cursor:pointer}
body.live #phases .ph:hover{background:var(--hair)}
#bar{cursor:ew-resize; height:8px; touch-action:none}
#bar i::after{content:""; position:absolute; right:-5px; top:-4px; width:10px; height:16px; background:var(--accent)}
#phPrev{position:fixed; z-index:20; width:300px; background:var(--bg); border:1px solid var(--ink); box-shadow:8px 8px 0 rgba(0,0,0,.07); padding:10px 12px; pointer-events:none; animation:rise .18s var(--ease)}
#phPrev .pp-h{display:grid; gap:2px; margin-bottom:5px}
#phPrev .pp-h i{font-style:normal; font-family:var(--mono); font-size:10px; color:var(--accent); letter-spacing:.1em; text-transform:uppercase}
#phPrev .pp-h b{font-size:14px; font-weight:700; line-height:1.25}
#phPrev p{margin:0 0 7px; font-size:12px; line-height:1.42; color:#333}
#phPrev dl.how{grid-template-columns:44px minmax(0,1fr); font-size:11.5px; border-top:1px dashed var(--soft); padding-top:6px}
#phPrev .pp-f{font-family:var(--mono); font-size:10.5px; margin-top:6px; color:#333}
#phPrev .pp-f b{color:var(--accent)}
#phPrev .pp-k{font-family:var(--mono); font-size:10px; color:var(--muted); margin-top:6px}

/* карточки поверх */
#stop .card{width:min(940px,calc(100vw - 32px))}
#intro .card{width:min(680px,calc(100vw - 32px))}
#stop h3,#intro h3{font-size:24px; font-weight:800; letter-spacing:-.015em; line-height:1.15}
#stLead,#intro p{font-size:14px; line-height:1.5}
#stPoints li,#inPoints li{font-size:13px; line-height:1.5}
.st-cols{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:18px}
#stHow{display:grid; grid-template-columns:56px minmax(0,1fr); gap:3px 12px; margin:12px 0 0; padding:10px 0 0; border-top:1px dashed var(--soft); font-size:13px; line-height:1.45}
#stHow dt{font-family:var(--mono); font-size:10.5px; color:var(--muted); padding-top:2px}
#stHow dd{margin:0}
#stTree{border-left:1px solid var(--ink); padding-left:14px; max-height:60vh; overflow:auto; font-size:11.5px}
#stTree .tt-h{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
#stTree .tt-f{margin:6px 0 1px; color:var(--muted)}
#stTree .tt-i{display:block; padding:1px 2px; color:var(--ink); text-decoration:none; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#stTree .tt-i:hover{background:var(--hair)}
#stTree .tt-i.new{color:var(--accent); font-weight:600}
#stTree .g{display:inline-block; width:16px}
#stAsk,#stHalt{margin:12px 0; padding:9px 11px}
#stAsk{background:var(--paper); border-left:2px solid var(--ink)}
#stAsk b,#stHalt b{display:block; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
#stAsk p{margin:0; font-size:13px; line-height:1.45}
#stFiles{font-size:12px}
#search .box input{font-size:16px}
#qres li{font-size:12.5px}
#preview{width:min(560px,calc(100vw - 24px))}
#pvBody,.md{font-size:13px}
button:focus,a:focus,input:focus{outline:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
#stop,#search,#intro{background:rgba(10,10,10,.32); backdrop-filter:none}

/* своя папка: две папки и два способа */
.cn-hd{color:var(--ink)}
.cn-two{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:4px 0 6px}
.cn-f{border:1px solid var(--soft); padding:8px 10px; display:grid; gap:3px}
.cn-f b{font-size:13px}
.cn-f small{font-size:11px; color:#555; line-height:1.4}
.cn-f code{font-size:10.5px; color:var(--muted); word-break:break-all}
#connect a,#consoleOff a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--accent)}

/* свой бизнес */
#setup{position:fixed; inset:0; z-index:12; background:rgba(10,10,10,.42); display:grid; place-items:center; padding:20px}
#setup>.box{width:min(1180px,100%); max-height:calc(100vh - 40px); overflow:auto; background:var(--bg); border:1px solid var(--ink); padding:14px 16px; animation:rise .3s var(--ease)}
#setup .st-hd button{border:none; font-size:20px; padding:0 6px}
.su{display:grid; grid-template-columns:minmax(0,400px) minmax(0,1fr); gap:18px}
.su h3{font-size:22px; font-weight:800; margin:6px 0 10px}
.su .chips{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:10px}
.su .chip{padding:4px 9px; font-size:11.5px}
#suForm label{display:grid; gap:3px; margin-bottom:8px}
#suForm span{font-size:10.5px; color:var(--muted)}
#suForm input{border:1px solid var(--ink); padding:6px 8px; font-family:var(--sans); font-size:13px; background:var(--bg); color:var(--ink)}
#suForm input:focus{outline:2px solid var(--accent); outline-offset:-1px}
.su-act{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.su-act .go{background:var(--ink); border-color:var(--ink); color:#fff}
.su-act .go:hover{background:var(--accent); border-color:var(--accent)}
.su-r{border-left:1px solid var(--ink); padding-left:16px; max-height:70vh; overflow:auto}
.su-sec{display:grid; grid-template-columns:26px minmax(0,1fr); gap:8px; padding:7px 0; border-bottom:1px dotted var(--soft)}
.su-n{font-family:var(--mono); font-size:10.5px; color:var(--muted); padding-top:2px}
.su-sec b{font-size:14px}
.su-sec code{font-size:10.5px; color:var(--muted)}
.su-sec small{display:block; color:#555; font-size:11.5px; margin:1px 0 3px}
.su-sec ol{list-style:none; margin:0; padding:0}
.su-sec li{font-size:12px; line-height:1.38; display:grid; grid-template-columns:16px 1fr}
.su-sec li i{font-style:normal; font-family:var(--mono); color:var(--muted)}
.md .mdimg{display:block; max-width:100%; border:1px solid var(--ink); margin:0 0 10px}

@media (max-width:1100px){
  #grid{grid-template-columns:220px minmax(0,1fr)}
  #colR{grid-column:1 / -1; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto}
  .st-cols{grid-template-columns:1fr} #stTree{border-left:none; border-top:1px solid var(--ink); padding:10px 0 0; max-height:30vh}
}
@media (max-width:760px){
  body{height:auto; overflow:auto; padding:10px 16px}
  #hd{grid-template-columns:30px minmax(0,1fr)}
  .navs{grid-column:1 / -1; justify-content:flex-start}
  .clock{grid-column:1 / -1; align-items:flex-start; min-width:0}
  #grid{grid-template-columns:minmax(0,1fr)}
  #colC{order:-1; min-height:62vh}
  #colR{grid-template-columns:minmax(0,1fr)}
  #phases{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
  .ph{border-left:1px solid var(--ink)}
  #phPrev{display:none}
}
@media (max-width:900px){ .su{grid-template-columns:1fr} .su-r{border-left:none; padding-left:0} .cn-two{grid-template-columns:1fr} }

/* agents are files: the instruction file stands out, the agent links to it with a thin red line */
.node.agentfile path{stroke:var(--accent); stroke-width:2.2px}
.node.agentfile text{fill:var(--accent); font-weight:600}
.link.instr{stroke:var(--accent); stroke-width:1.1px; stroke-dasharray:2 3; opacity:.8}
.lane a.an{color:inherit; text-decoration:none; cursor:pointer; display:block}
.lane a.an:hover b{color:var(--accent)}
.lane a.an small{color:var(--accent)}
#commits li .cb{display:block; color:var(--muted); font-size:10px; font-family:var(--mono, ui-monospace, monospace)}
/* the agent's session on a step: who, read, created, journal, branch, commit */
.sess{margin-top:10px; padding:8px 10px; border:1px solid var(--hair); border-left:2px solid var(--accent); font-size:12px}
.sess .cap{display:block; margin-bottom:4px}
.sess .se{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; align-items:baseline; padding:2px 0}
.sess a{cursor:pointer; text-decoration:none}
.sess .se-a{color:var(--accent); font-weight:600}
.sess .se-n{color:var(--muted)}
.sess .se-j{color:var(--ink); border-bottom:1px solid var(--accent)}
.sess .se-w{color:var(--muted); font-size:11px}
.sess .se-c{margin-top:4px; font-family:var(--mono, ui-monospace, monospace); font-size:11px; color:var(--ink); overflow-wrap:anywhere}
.sess .se-c i{color:var(--muted); font-style:normal}
#stSess{margin-top:12px}

/* зачем этот шаг: без этого · с этим · цифра с источником · у себя */
dl.why{display:grid; grid-template-columns:72px minmax(0,1fr); gap:4px 12px; margin:6px 0 0; font-size:13px; line-height:1.45}
dl.why dt{font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--muted); padding-top:2px}
dl.why dd{margin:0}
dl.why dd.f{border-left:2px solid var(--accent); padding-left:8px; font-weight:600}
dl.why a.src{font-family:var(--mono); font-size:10.5px; font-weight:400; color:var(--muted); overflow-wrap:anywhere; text-decoration:none; border-bottom:1px dotted var(--muted)}
dl.why a.src:hover{color:var(--accent); border-color:var(--accent)}
dl.why code{background:var(--hair); padding:0 3px; font-size:12px}
#stWhy{margin:12px 0 4px; padding:10px 12px; background:var(--paper); border-left:2px solid var(--accent)}
#stWhy>b{display:block; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:2px}
.whyb{margin:10px 0; padding:8px 0 2px; border-top:1px dashed var(--soft)}
.whyb dl.why{grid-template-columns:62px minmax(0,1fr); font-size:12px}
#phPrev .pp-w{font-size:12px; line-height:1.4; margin:6px 0 0}
#phPrev .pp-w i{font-style:normal; font-family:var(--mono); font-size:10px; color:var(--accent); margin-right:4px}
/* with the why block the three points stay as one compact line */
#stWhy:not([hidden]) + #stPoints{display:flex; flex-wrap:wrap; gap:4px 16px; border-top:none; margin:8px 0 6px}
#stWhy:not([hidden]) + #stPoints li{border-bottom:none; padding:2px 0 2px 16px; font-size:12px; color:var(--muted)}
#stop .st-ft{position:sticky; bottom:-14px; background:var(--bg); padding-bottom:4px; z-index:1}
#setup .su-w{margin:4px 0 6px; font-size:12px; line-height:1.45}
#setup .su-w i{font-style:normal; font-family:var(--mono); font-size:10px; color:var(--accent); margin-right:6px}

/* 14.10 · граф читается целиком: подписи легче, мелкие узлы серее, главное заметнее */
.node text{font-weight:400; fill:#333}
.node.L-context text,.node.L-competitor text,.node.L-channel text,.node.L-segment text,.node.L-session text,.node.L-output text,.node.L-eval text,.node.L-automation text,.node.L-dashboard text,.node.L-code text{fill:#8a8a8a; font-size:9px}
.node.L-hub text,.node.L-section text,.node.main text{font-size:11px; font-weight:600; fill:var(--ink)}
.node.L-role text,.node.L-agentrole text{font-weight:500; fill:var(--ink)}
.node.main path{stroke-width:2.2px}
#graph.dense .node.L-raw text,#graph.dense .node.L-skill text,#graph.dense .node.L-role text,#graph.dense .node.L-agentrole text,#graph.dense .node.agent text,#graph.dense .node.main text{display:block}
.node.agent text{font-weight:600}
/* своя папка: без полосы шагов и строки «сейчас» */
body.nosteps #tl,body.nosteps #narr,body.nosteps #phPrev{display:none !important}
/* папки в дереве сворачиваются */
#tree .fold{cursor:pointer; user-select:none; display:flex; gap:6px; align-items:baseline}
#tree .fold::before{content:'▾'; color:var(--muted); width:10px; display:inline-block}
#tree .fold.shut::before{content:'▸'}
#tree .fold:hover b{color:var(--accent)}
#tree .fold i{font-style:normal; color:var(--accent)}
/* шаг 02: сырое имя зачёркнуто, под ним имя по правилу */
.file.ren{align-items:start}
.file .rn{display:grid; gap:1px}
.file .rn s{position:relative; text-decoration:none; color:var(--muted); font-size:10.5px; justify-self:start}
.file .rn s::after{content:''; position:absolute; left:0; right:0; top:55%; height:1.5px; background:var(--accent); transform-origin:left; animation:strike .6s var(--ease) both; animation-delay:calc(var(--d) + .2s)}
.file .rn em{font-style:normal; color:var(--ink); animation:renin .5s var(--ease) both; animation-delay:calc(var(--d) + .8s)}
.file .rn em::before{content:'→ '; color:var(--accent)}
@keyframes strike{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes renin{from{opacity:0; transform:translateX(-6px)} to{opacity:1; transform:none}}

/* роли: человек и агент */
.rolecard{border:1px solid var(--ink); padding:9px 11px; margin:0 0 12px; display:grid; gap:7px; background:var(--paper)}
.pvphoto{display:block; width:112px; height:112px; object-fit:cover; border:1px solid var(--ink); margin:0 0 12px}
.rolecard.agent{border-left:3px solid var(--accent)}
.rc-h{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.rc-h .rc-g{font-size:16px; line-height:1}
.rolecard.agent .rc-g{color:var(--accent)}
.rc-h b{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase}
.rc-h i{font-style:normal; font-size:12px; color:var(--accent); border:1px dashed var(--accent); padding:0 6px}
.rc-s{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; font-size:12px}
.rc-s .cap{margin:0}
.rc-s a{cursor:pointer; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--soft)}
.rc-s a:hover{border-color:var(--accent)}
.rc-s em{font-style:normal; font-family:var(--mono); font-size:10px; color:var(--muted)}
.rc-l a{font-size:12px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--accent)}
.rc-l .cap{margin:0}
.rolecard + .props{font-size:10.5px}
.people{display:flex; flex-wrap:wrap; gap:4px 6px; padding:7px 0 2px; border-top:1px dashed var(--soft); margin-top:4px}
.people .cap{flex-basis:100%; margin:0 0 2px; letter-spacing:.12em; text-transform:uppercase; font-size:9.5px}
.people a.pp{cursor:pointer; text-decoration:none; color:var(--ink); border:1px solid var(--soft); padding:2px 7px; font-size:12px; display:inline-flex; gap:6px; align-items:baseline}
.people a.pp:hover{border-color:var(--ink)}
.people a.pp.empty{border-style:dashed; color:#555}
.people a.pp small{font-size:10px; color:var(--accent)}
/* сессия шага: кто запустил */
.sess .se{display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline}
.sess .se-by{color:var(--ink); font-weight:600; border:1px solid var(--ink); padding:0 5px}
.sess .se-j{margin-left:auto}

/* карточки шагов: одна мысль на блок, крупнее */
#stop h3{font-size:30px; line-height:1.12}
#stLead{font-size:17px; line-height:1.5; margin:8px 0 4px}
#stWhy{margin:12px 0 8px; padding:10px 14px}
#stWhy dl.why{font-size:15px; grid-template-columns:84px minmax(0,1fr); gap:8px 14px}
#stWhy dl.why dt{font-size:10.5px; padding-top:4px}
#stWhy dl.why a.src{font-size:11px}
#stHow{display:block; margin:8px 0 0; padding:0; border:none}
.howl{display:flex; flex-wrap:wrap; gap:4px; margin:0; font-size:13px; line-height:1.35}
.howl span{background:var(--hair); padding:3px 8px}
.howl span:first-child{background:var(--ink); color:#fff}
#stAsk p{font-size:15px; line-height:1.5}
#stSess .sess{font-size:13px}
#stFiles{font-size:13px; margin-top:8px}
#stFiles>b{display:block; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:8px 0 4px}
.renl{list-style:none; margin:0; padding:0; display:grid; gap:3px}
.renl li{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:10px; align-items:baseline; font-size:13px}
.renl s{color:var(--muted); text-decoration-color:var(--accent); text-decoration-thickness:1.5px}
.renl a{cursor:pointer; color:var(--ink); font-family:var(--mono); font-size:12px}
.renl a::before{content:'→ '; color:var(--accent)}
#stTree .tt-i.ren s{color:var(--muted); text-decoration-color:var(--accent); margin-right:4px}
/* правая колонка: шаг крупнее */
.stp b{font-size:17px}
.whyb dl.why{font-size:13px; grid-template-columns:62px minmax(0,1fr)}
#ask .howl{font-size:12px}
.ak-q{font-size:13.5px}
/* подписи не мельчают, когда граф вписан целиком; планы без подписи, пока на них не навели */
#graph .node text{font-size:calc(9.5px * var(--inv, 1))}
#graph.dense .node text{font-size:calc(8.5px * var(--inv, 1))}
#graph .node.L-context text,#graph .node.L-competitor text,#graph .node.L-channel text,#graph .node.L-segment text,#graph .node.L-session text,#graph .node.L-output text,#graph .node.L-eval text,#graph .node.L-automation text,#graph .node.L-dashboard text,#graph .node.L-code text{font-size:calc(8.5px * var(--inv, 1))}
#graph .node.L-hub text,#graph .node.L-section text,#graph .node.main text{font-size:calc(11px * var(--inv, 1))}
#graph .node.ghost text{display:none}
#graph.hovering .node.ghost:not(.dim) text{display:block}
@media (max-width:760px){
  #stop h3{font-size:25px}
  #stLead{font-size:15.5px}
  #stWhy dl.why{grid-template-columns:minmax(0,1fr); gap:2px 0; font-size:14px}
  #stWhy dl.why dd{margin-bottom:6px}
  .renl li{grid-template-columns:minmax(0,1fr)}
}
/* фильтр графа */
.gh h2{display:flex; align-items:center; gap:10px}
#gFilter{font:inherit; font-family:var(--mono); font-size:11px; letter-spacing:0; text-transform:none; color:var(--ink); border:1px solid var(--soft); padding:3px 7px; width:min(300px,40vw); background:var(--bg)}
#gFilter:focus{border-color:var(--ink); outline:none}
#graph .node.faded{opacity:.1}
#graph .link.faded{opacity:.06}
#graph.filtering .node:not(.faded) text{display:block}
/* запрос агенту в панели агентов */
#askAgent{display:grid; grid-template-columns:minmax(0,1fr) auto; margin-top:8px}
#askAgent[hidden]{display:none}
#aaQ{font:inherit; font-size:12.5px; border:1px solid var(--ink); border-right:none; padding:5px 8px; min-width:0}
#aaQ:focus{outline:2px solid var(--accent); outline-offset:-1px}
#aaOut{margin-top:6px; max-height:260px; overflow:auto; border-left:2px solid var(--accent); padding:4px 8px; font-size:12px}
.aa-h{display:flex; gap:8px; align-items:baseline; font-size:11px}
.aa-h span{color:var(--muted)}
.aa-h a{margin-left:auto; cursor:pointer; border-bottom:1px solid var(--accent)}
.aa-q{margin:4px 0; color:#444}
.aa-q::before{content:'› '; color:var(--accent); font-weight:700}
/* labels by rank: one that hits a stronger label shows on hover or when zoomed in; ghosts stay pale and silent */
#graph .node.lx text{visibility:hidden}
#graph.hovering .node.lx:not(.dim) text,#graph .node.lx.sel text{visibility:visible}
#graph .node.ghost{opacity:.55}
/* a light label on every node, the important ones dark; with a filter every hit is labelled dark */
#graph .node text{fill:#9d9d9d; font-weight:400}
#graph.dense .node text{display:block; font-size:calc(7.5px * var(--inv, 1))}
#graph .node.L-role text,#graph .node.L-agentrole text,#graph .node.agent text,#graph .node.L-skill text,#graph .node.L-raw text{fill:#1f1f1f; font-size:calc(8.5px * var(--inv, 1))}
#graph .node.L-hub text,#graph .node.L-section text,#graph .node.main text{fill:#0a0a0a; font-size:calc(11px * var(--inv, 1))}
#graph .node.sel text,body:not(.live) #graph .node.fresh text{fill:#0a0a0a}
#graph .node.ghost text{display:none}
#graph.hovering .node:not(.dim) text{fill:#0a0a0a}
#graph.filtering .node:not(.faded) text{display:block; visibility:visible; fill:#0a0a0a}
#graph.filtering .node.faded text{display:none}
/* thin light lines at any zoom */
#graph .link{stroke-width:.7; vector-effect:non-scaling-stroke}
#graph .link.wiki{stroke:#dadada}
#graph.dense .link.wiki{stroke:#e6e6e6}
#graph .link.agent{stroke-width:1}
#graph .link.hot{stroke:var(--ink); stroke-width:1.1}
/* the owner's questionnaire: folded to its title after step 01, opens on click */
#anketaP.compact.open #qa{display:grid}
#qaWhy{margin:0 0 6px}
#anketaP.compact:not(.open) #qaWhy,body.fold-qa #qaWhy{display:none}
/* people grouped by role: a folded group per role, its card one click away */
.people.grouped{display:block}
.people .pg{border-top:1px solid var(--hair); padding:3px 0}
.people .pg summary{cursor:pointer; font-size:12px; display:flex; gap:6px; align-items:baseline; list-style:none}
.people .pg summary::before{content:'▸'; color:var(--muted); font-size:10px}
.people .pg[open] summary::before{content:'▾'}
.people .pg summary em{font-style:normal; color:var(--muted); font-size:11px}
.people .pg summary a.pr{margin-left:auto; font-size:10.5px; color:var(--muted); text-decoration:none; cursor:pointer}
.people .pg summary a.pr:hover{color:var(--ink)}
.people .pgl{display:flex; flex-wrap:wrap; gap:4px 6px; padding:4px 0 2px}
.people .pgl.lone .cap{flex-basis:100%}
#graph .node.person text{fill:#9d9d9d; font-size:calc(7.5px * var(--inv, 1))}
#graph .node.person path{opacity:.8}
.md a.wl.miss.fut{cursor:pointer; color:var(--ink)}

/* ход: each step as a short conversation – the human asks on the left, the agent answers on the right */
#hod{display:flex; flex-direction:column; gap:10px; padding:6px 2px 10px}
#hod .hd-step{display:flex; flex-direction:column; gap:5px; opacity:.62}
#hod .hd-step.now,#hod .hd-step:last-child{opacity:1}
#hod .hd-h{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); border-bottom:1px dashed var(--soft); padding-bottom:3px}
#hod .hd-step.now .hd-h{color:var(--accent)}
#hod .bub{max-width:88%; border:1px solid var(--soft); padding:5px 8px; font-size:11.5px; line-height:1.45; background:var(--bg)}
#hod .bub b{display:block; font-size:10px; font-weight:500; letter-spacing:.06em; color:var(--muted); margin-bottom:2px}
#hod .bub p{margin:0}
#hod .bub p+p{margin-top:4px}
#hod .bub.hum{align-self:flex-start; border-color:var(--ink)}
#hod .bub.ag{align-self:flex-end; background:var(--paper)}
#hod .hd-step.now .bub.hum{border-left:3px solid var(--accent)}
#hod .chips{display:flex; flex-wrap:wrap; gap:3px; margin-top:2px}
#hod .chips a,#hod .hd-dash a{border:1px solid var(--soft); padding:0 5px; font-size:10.5px; cursor:pointer; color:var(--ink); text-decoration:none; background:var(--bg)}
#hod .chips a:hover,#hod .hd-dash a:hover{border-color:var(--ink)}
#hod .chips .more{font-size:10.5px; color:var(--muted); padding:0 3px}
#hod .hd-q{color:var(--ink); font-weight:500}
#hod code{font-size:10.5px; background:var(--hair); padding:0 3px}

/* срезы: the step each dashboard appeared on and an icon by kind */
#tree .stp,#tree .fold .stp{font-style:normal; font-size:9.5px; color:var(--muted); border:1px solid var(--soft); padding:0 4px; margin-left:6px; white-space:nowrap}
#tree .file.dash .g{color:var(--ink); font-weight:700}
#stFiles .dashl{list-style:none; margin:2px 0 8px; padding:0; font-size:12px; line-height:1.5}
#stFiles .dashl a{cursor:pointer; border-bottom:1px solid var(--accent); color:var(--ink); text-decoration:none}
#dashList{margin-top:8px}
#dashList .dl-h{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); border-bottom:1px dashed var(--soft); padding-bottom:3px; margin-bottom:2px}
#dashList .dl-r{display:grid; grid-template-columns:18px 50px minmax(0,1fr); column-gap:6px; padding:4px 0; border-bottom:1px dashed var(--hair); font-size:11px; line-height:1.4; cursor:pointer}
#dashList .dl-r:hover b{text-decoration:underline}
#dashList .dl-r.off{opacity:.45; cursor:default}
#dashList .dl-r i{font-style:normal; font-weight:700; grid-row:span 2}
#dashList .dl-r em{font-style:normal; color:var(--muted); font-size:10px; grid-row:span 2}
#dashList .dl-r span{grid-column:3; color:var(--muted)}
#dashList .dl-r u{text-decoration:none; color:var(--ink)}

/* как это устроено: one big card over the page */
#howto{position:fixed; inset:0; z-index:13; background:rgba(10,10,10,.42); display:grid; place-items:center; padding:20px}
#howto[hidden]{display:none}
#howto>.box{width:min(1180px,100%); max-height:calc(100vh - 40px); overflow:auto; background:var(--bg); border:1px solid var(--ink); box-shadow:10px 10px 0 rgba(0,0,0,.08); padding:14px 18px 18px; animation:rise .3s var(--ease)}
#howto .st-hd button{border:none; font-size:20px; padding:0 6px}
#howto h3{font-size:24px; font-weight:800; letter-spacing:-.03em; margin:8px 0 12px}
#howto .hw{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 22px}
#howto section{border-top:1px solid var(--ink); padding-top:6px; font-size:12.5px; line-height:1.5}
#howto section.wide{grid-column:1 / -1}
#howto h4{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; margin:0 0 6px}
#howto p{margin:0 0 6px}
#howto ul{list-style:none; margin:0 0 6px; padding:0}
#howto li{padding:2px 0 2px 14px; position:relative; border-bottom:1px dashed var(--hair)}
#howto li::before{content:'→'; position:absolute; left:0; color:var(--accent)}
#howto pre{background:var(--paper); border:1px solid var(--soft); padding:6px 8px; font-size:11px; white-space:pre-wrap; margin:0 0 6px}
#howto code{background:var(--hair); padding:0 3px; font-size:11.5px}
#howto table{border-collapse:collapse; width:100%; font-size:11px; margin:0 0 6px}
#howto th,#howto td{border:1px solid var(--soft); padding:3px 5px; text-align:left; vertical-align:top}
#howto th{font-weight:500; color:var(--muted)}
#howto td:first-child{color:var(--muted); text-decoration:line-through}
#howto dl{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px; margin:0}
#howto dl>dt{font-weight:700}
#howto dl{grid-template-columns:120px minmax(0,1fr) 120px minmax(0,1fr)}
#howto dd{margin:0; padding-bottom:4px; border-bottom:1px dashed var(--hair)}
#howto dt{border-bottom:1px dashed var(--hair); padding-bottom:4px}
@media (max-width:900px){ #howto .hw{grid-template-columns:minmax(0,1fr)} #howto dl{grid-template-columns:110px minmax(0,1fr)} }
#howto .hw-steps{margin:0 0 8px; padding:0; list-style:none; counter-reset:hs; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0 14px}
#howto .hw-steps li{counter-increment:hs; padding:4px 0 4px 22px; border-bottom:none; border-left:1px solid var(--hair); padding-left:26px}
#howto .hw-steps li::before{content:counter(hs); color:var(--accent); font-weight:800; left:8px}
#howto #howCopy{font-size:11.5px; padding:4px 10px}
#howto .faq{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px}
#howto .faq p{margin:0; padding:4px 0; border-bottom:1px dashed var(--hair)}
#howto .faq b{display:block}
@media (max-width:900px){ #howto .hw-steps,#howto .faq{grid-template-columns:minmax(0,1fr)} }