/* Impeccable animate: движение сохраняет карточку и показывает причину изменения статуса. */
.demos-pair { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:64px; }
.demo { min-width:0; --move:cubic-bezier(.16,1,.3,1); }
.demo > figcaption { margin-bottom:24px; }
.demos-pair .demo > figcaption { min-height:106px; }
.demo > figcaption p { margin-top:10px; color:var(--muted); max-width:65ch; }
.demo-screen { overflow:hidden; border:1px solid var(--border-strong); border-radius:12px; background:var(--bg); font-size:13px; line-height:1.4; }
.demo-screen svg { width:16px; height:16px; flex:0 0 16px; }
.demo-screen .faint { opacity:.4; }
.live-chrome { display:flex; justify-content:space-between; padding:13px 18px; border-bottom:1px solid var(--border); font-weight:600; background:var(--raised); }
.live-chrome > span:last-child { color:var(--muted); font-size:11px; font-weight:400; }
.live-canvas { position:relative; height:340px; overflow:hidden; }
.live-key { color:var(--muted); font-size:10px; letter-spacing:.02em; }
.live-status { display:inline-flex; align-items:center; gap:6px; font-size:11px; white-space:nowrap; }
.live-avatar { display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; flex:0 0 19px; border-radius:50%; background:var(--solid); color:var(--on-solid); font-size:10px; font-weight:600; }
.live-card { padding:12px; background:var(--raised); border:1px solid var(--border-strong); border-radius:8px; }
.live-card > strong { display:block; margin-top:6px; font-size:13px; line-height:1.35; font-weight:550; }
.live-card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:14px; color:var(--muted); font-size:10px; }
.live-card-foot .live-status { font-size:10px; }
.live-board { position:absolute; inset:18px; display:grid; grid-template-columns:1fr 1fr; gap:16px; transition:opacity .18s ease; }
.live-lane-title { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:10px; gap:8px; }
.live-lane-title .live-status { font-size:10px; }
.live-seed,.live-new-card { position:absolute; top:42px; width:calc(50% - 8px); min-height:102px; transition:transform .26s var(--move),opacity .18s ease,border-color .2s ease; }
.live-seed-todo { left:0; }
.live-seed-progress { left:calc(50% + 8px); }
.live-new-card { left:0; opacity:0; transform:translateY(8px); border-color:var(--accent); z-index:2; }
.demo-create[data-stage="4"] .live-new-card { opacity:1; transform:translateY(0); }
.demo-create[data-stage="4"] .live-seed-todo { transform:translateY(122px); }
.demo-create[data-stage="5"] .live-new-card { opacity:1; transform:translateX(calc(100% + 16px)); border-color:var(--started); }
.demo-create[data-stage="5"] .live-seed-progress { transform:translateY(122px); }
.live-compose { position:absolute; z-index:3; top:50px; left:24px; right:24px; background:var(--raised); border:1px solid var(--border-strong); border-radius:10px; padding:18px; box-shadow:0 10px 26px rgba(28,26,26,.14); transition:opacity .18s ease,transform .24s var(--move); }
.demo-create:not([data-stage="4"]):not([data-stage="5"]) .live-board { opacity:.38; }
.demo-create[data-stage="4"] .live-compose,.demo-create[data-stage="5"] .live-compose { opacity:0; transform:translateY(12px) scale(.98); pointer-events:none; }
.live-compose-head { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; }
.live-compose-head > span { margin-left:auto; font-size:10px; }
.live-typed { min-height:66px; padding-top:16px; font-size:19px; font-weight:550; letter-spacing:-.02em; }
.live-typed i { display:inline-block; width:1px; height:19px; background:var(--accent); margin-left:2px; vertical-align:-2px; }
.demo-create:not([data-stage="0"]) .live-typed i { display:none; }
.live-fields { display:flex; gap:10px; margin-top:10px; }
.live-fields > div { display:flex; align-items:center; gap:6px; padding:6px 9px; border:1px solid var(--border-strong); border-radius:6px; font-size:11px; transition:border-color .2s ease,background .2s ease; }
.live-fields .live-placeholder { display:none; color:var(--muted); }
.demo-create[data-stage="0"] .live-owner > :not(.live-placeholder),.demo-create[data-stage="0"] .live-priority > :not(.live-placeholder),.demo-create[data-stage="1"] .live-priority > :not(.live-placeholder) { display:none; }
.demo-create[data-stage="0"] .live-owner .live-placeholder,.demo-create[data-stage="0"] .live-priority .live-placeholder,.demo-create[data-stage="1"] .live-priority .live-placeholder { display:inline; }
.demo-create[data-stage="1"] .live-owner,.demo-create[data-stage="2"] .live-priority { border-color:var(--accent); background:var(--sunken); }
.live-picker { position:absolute; top:158px; z-index:4; min-width:160px; padding:8px; background:var(--raised); border:1px solid var(--border-strong); border-radius:7px; box-shadow:0 6px 18px rgba(28,26,26,.14); opacity:0; transform:translateY(-5px); transition:opacity .18s ease,transform .22s var(--move); }
.live-owner-picker { left:18px; }
.live-priority-picker { left:126px; }
.live-picker > span { font-size:10px; color:var(--muted); display:block; padding:3px 7px 7px; }
.live-picker strong { display:flex; align-items:center; gap:8px; padding:7px; background:var(--sunken); border-radius:4px; font-size:12px; font-weight:500; }
.live-picker strong > svg:last-child { margin-left:auto; color:var(--ok); }
.demo-create[data-stage="1"] .live-owner-picker,.demo-create[data-stage="2"] .live-priority-picker { opacity:1; transform:translateY(0); }
.live-compose-footer { display:flex; align-items:center; justify-content:space-between; margin-top:25px; color:var(--muted); font-size:11px; }
.live-compose-footer strong { padding:7px 10px; border-radius:6px; background:var(--solid); color:var(--on-solid); font-weight:500; transition:transform .15s ease; }
.demo-create[data-stage="3"] .live-compose-footer strong { transform:scale(.96); }
/* Связи между тремя настоящими карточками задачи: линии соединяют границы карточек. */
.demo-screen .live-wires { position:absolute; inset:0; width:100%; height:100%; }
.live-wires path { fill:none; stroke:var(--border-strong); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:260; stroke-dashoffset:0; transition:stroke-dashoffset .28s ease,stroke .22s ease; }
.demo-depend[data-stage="0"] .live-wire-a,.demo-depend[data-stage="0"] .live-wire-b { stroke-dashoffset:260; }
.demo-depend[data-stage="0"][data-playing="true"] .live-wire-a { stroke-dashoffset:0; }
.demo-depend[data-stage="2"] .live-wire-a,.demo-depend[data-stage="3"] .live-wire-a,.demo-depend[data-stage="4"] .live-wire-a,.demo-depend[data-stage="5"] .live-wire-a { stroke:var(--ok); }
.live-node { position:absolute; width:44%; height:84px; padding:10px 12px; transition:transform .25s var(--move),border-color .2s ease; }
.live-node .live-status { margin-top:7px; font-size:10px; gap:5px; }
.live-node .live-status svg { width:12px; height:12px; flex-basis:12px; }
.live-node-a { left:3.2%; top:18px; }
.live-node-b { left:52.8%; top:130px; }
.live-node-c { left:3.2%; top:246px; }
.live-node-a .live-before-done { color:var(--started); }
.live-after-done,.live-node-ready,.live-node-working { display:none; }
.demo-depend:is([data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"]) .live-before-done { display:none; }
.demo-depend:is([data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"]) .live-after-done { display:inline-flex; color:var(--ok); }
.demo-depend[data-stage="1"] .live-node-b { border-color:var(--accent); }
.demo-depend:is([data-stage="3"],[data-stage="4"],[data-stage="5"]) .live-node-wait { display:none; }
.demo-depend[data-stage="3"] .live-node-ready { display:block; color:var(--ok); }
.demo-depend[data-stage="3"] .live-node-b { border-color:var(--ok); }
.demo-depend:is([data-stage="4"],[data-stage="5"]) .live-node-working { display:block; color:var(--started); }
.demo-depend:is([data-stage="4"],[data-stage="5"]) .live-node-b { transform:translateX(-20px); border-color:var(--started); }
.live-node-c .live-status,.live-node-wait { color:var(--muted); }
.live-link-label { position:absolute; color:var(--muted); font-size:9px; background:var(--bg); padding:2px 4px; }
.live-link-label-a { left:50%; top:95px; transform:translateX(-50%); }
.live-link-label-b { left:65%; top:249px; }
/* Сессия: работа видна в чек-листе, результатах, запросе человека и карточке памяти. */
.demo-session { margin-top:48px; }
.demo-session .live-canvas { display:grid; grid-template-columns:1fr 1.15fr; height:350px; }
.live-issue { padding:22px; border-right:1px solid var(--border); }
.live-issue h4 { font-size:23px; font-weight:550; line-height:1.25; letter-spacing:-.02em; margin:8px 0 14px; }
.live-issue-status { display:flex; align-items:center; gap:14px; }
.live-session-progress { color:var(--started); }
.live-session-review,.live-session-done { display:none; }
.demo-session:is([data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"]) .live-session-progress { display:none; }
.demo-session:is([data-stage="2"],[data-stage="3"],[data-stage="4"]) .live-session-review { display:inline-flex; color:var(--accent-text); }
.demo-session[data-stage="5"] .live-session-done { display:inline-flex; color:var(--ok); }
.live-checklist { margin-top:24px; }
.live-check { display:flex; align-items:center; gap:9px; margin-top:12px; color:var(--muted); font-size:13px; }
.live-check > span { width:16px; height:16px; border:1px solid var(--border-strong); border-radius:4px; }
.live-check svg { display:none; }
.live-check.is-checked { color:var(--text); }
.live-check.is-checked > span { border-color:transparent; }
.live-check.is-checked svg { display:block; color:var(--ok); }
.live-stream { padding:20px 22px; }
.live-stream-title { font-size:11px; font-weight:600; margin-bottom:8px; }
.live-event { display:flex; gap:12px; margin-top:10px; align-items:baseline; }
.live-event > span { min-width:62px; color:var(--muted); font-size:10px; }
.live-event p { font-size:12px; margin:0; }
.live-request { display:flex; gap:9px; padding:10px 12px; margin-top:14px; border:1px solid var(--border-strong); border-radius:7px; background:var(--sunken); }
.live-request span:not(.live-avatar) { color:var(--muted); font-size:10px; }
.live-request p { font-size:12px; margin:3px 0 0; }
.live-memory { margin-top:12px; border:1px solid var(--border-strong); border-radius:7px; padding:12px 14px; background:var(--raised); }
.live-memory > span { font-size:10px; color:var(--ok); }
.live-memory > strong { display:block; margin-top:5px; font-size:14px; font-weight:550; }
.live-memory > p { color:var(--muted); font-size:11px; margin:5px 0 0; }
.live-accept { display:flex; align-items:center; gap:8px; color:var(--ok); font-size:13px; margin-top:23px; }
.demo[data-playing] [data-reveal] { opacity:0; transform:translateY(7px); visibility:hidden; transition:opacity .18s ease,transform .24s var(--move); }
.demo[data-playing] [data-reveal].is-shown { opacity:1; transform:translateY(0); visibility:visible; }
/* Условный указатель отмечает только действие. Позиции всегда внутри сцены. */
.live-cursor { position:absolute; z-index:6; left:0; top:0; width:100%; height:100%; transform:translate(var(--cx,38%),var(--cy,90px)); pointer-events:none; transition:transform .25s var(--move); }
.demo-screen .live-cursor svg { width:22px; height:26px; display:block; overflow:visible; filter:drop-shadow(0 1px 2px rgba(28,26,26,.18)); }
.live-cursor path { fill:var(--text); stroke:var(--raised); stroke-width:1.5; stroke-linejoin:round; }
.live-cursor i { position:absolute; width:28px; height:28px; left:-12px; top:-12px; border:2px solid var(--accent); border-radius:50%; opacity:0; }
.demo-captionbar { display:flex; justify-content:space-between; align-items:baseline; gap:14px; font-size:13px; min-height:30px; margin-top:17px; }
.demo-captionbar [data-position] { white-space:nowrap; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.demo-toolbar { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.demo-steps { display:flex; gap:0; list-style:none; padding:0; margin:0; }
.demo-steps button { width:44px; height:44px; padding:0; border:0; background:transparent; color:var(--muted); font-size:11px; border-radius:6px; position:relative; }
.demo-steps button:hover { background:var(--sunken); }
.demo-steps button[aria-current] { color:var(--accent-text); background:var(--sunken); }
.demo-steps button[aria-current]::after { content:''; position:absolute; bottom:5px; left:14px; right:14px; height:2px; background:var(--accent); }
.demo-steps button:disabled { cursor:default; }
.demo-controls { display:flex; gap:4px; }
.demo-controls button { min-width:68px; min-height:44px; border:0; border-radius:6px; background:transparent; color:var(--muted); font-size:11px; padding:8px; }
.demo-controls button:hover { background:var(--sunken); color:var(--text); }
.demo-progress-track { display:block; height:2px; background:var(--border); margin-top:8px; overflow:hidden; }
.demo-progress-fill { display:block; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; }
.demo[data-reduced="true"] .live-cursor, .demo:not([data-playing]) .live-cursor { display:none; }
.demo[data-reduced="true"] .live-typed i { display:none; }
@media (max-width:900px) {
 .demos-pair { gap:24px; }
 .live-compose { left:15px; right:15px; padding:15px; }
 .live-node > strong { font-size:12px; }
 .live-node { height:88px; padding:9px; }
 .live-event { display:block; }
 .live-event p { margin-top:2px; }
 .demo-session .live-canvas { height:380px; }
}
@media (max-width:600px) {
 .demos-pair { grid-template-columns:1fr; gap:44px; margin-top:44px; }
 .demos-pair .demo > figcaption { min-height:0; }
 .live-card > strong { font-size:12px; }
 .live-board { inset:15px; gap:12px; }
 .live-seed,.live-new-card { width:calc(50% - 6px); padding:10px; }
 .live-seed-progress { left:calc(50% + 6px); }
 .demo-create[data-stage="5"] .live-new-card { transform:translateX(calc(100% + 12px)); }
 .live-typed { font-size:17px; }
 .live-compose { top:52px; }
 .live-priority-picker { left:110px; min-width:150px; }
 .live-node .live-status { white-space:normal; font-size:9px; line-height:1.2; }
 .live-node-c .live-status { margin-top:5px; }
 .demo-toolbar { gap:0; }
 .demo-steps { flex:1; }
 .demo-controls { margin-left:auto; }
 .demo-captionbar { font-size:12px; }
 .demo-session .live-canvas { display:block; height:480px; }
 .live-issue { padding:16px 18px; border-right:0; border-bottom:1px solid var(--border); }
 .live-issue h4 { font-size:18px; margin-top:4px; margin-bottom:9px; }
 .live-checklist { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:14px; }
 .live-check { font-size:10px; margin:0; gap:5px; }
 .live-check > span,.live-check svg { width:12px; height:12px; }
 .live-accept { position:absolute; right:18px; top:70px; margin:0; font-size:10px; }
 .live-accept svg { width:12px; height:12px; }
 .live-stream { padding:14px 18px; }
 .live-event { display:flex; margin-top:7px; }
 .live-event p { font-size:11px; }
 .live-request { margin-top:11px; padding:8px 10px; }
 .live-memory { padding:10px 12px; margin-top:9px; }
}
@media (prefers-reduced-motion:reduce) {
 .demo *, .demo *::before,.demo *::after { transition:none !important; animation:none !important; }
}

/* Роудмап: реальные размеры, поля и ручки карточек приложения, общая схема и плавные связи. */
.roadmap-section { margin-top:88px; }
.demo-roadmap > figcaption { max-width:790px; }
.demo-roadmap .demo-screen { container:roadmap / inline-size; }
.roadmap-guide { display:inline-block; margin-top:18px; }
.demo-roadmap .live-canvas { height:390px; --node-w:clamp(194px,25%,272px); }
.rm-mapbar { position:absolute; inset:0 0 auto; height:42px; z-index:3; display:flex; align-items:center; gap:18px; padding:0 16px; border-bottom:1px solid var(--border); background:var(--bg); color:var(--muted); font-size:12px; }
.rm-scale { display:flex; align-items:center; gap:9px; font-variant-numeric:tabular-nums; }
.rm-scale svg { stroke:currentColor; fill:none; stroke-width:1.5; }
.rm-tools-right { margin-left:auto; }
.demo-screen .rm-grid,.demo-screen .rm-wires { position:absolute; inset:0; width:100%; height:100%; }
.rm-edge-b,.rm-edge-label-b { transition:opacity .2s ease; }
.rm-wires > path { fill:none; stroke:var(--accent); stroke-width:1.5; }
.rm-node { position:absolute; z-index:2; width:var(--node-w); height:164px; padding:12px 14px; border:1px solid var(--border-strong); border-radius:9px; background:var(--raised); }
.rm-a { left:3%; top:74px; }
.rm-b { left:calc(50% - var(--node-w)/2); top:166px; }
.rm-c { right:3%; top:88px; transition:opacity .2s ease,visibility .2s; }
.demo-roadmap:not([data-playing]) .rm-b { transform:translate(14px,-92px); }
.demo-roadmap:not([data-playing]) .rm-edge-label { display:none; }
.rm-meta { display:flex; gap:8px; align-items:center; color:var(--muted); }
.rm-meta .live-key { font-size:12px; letter-spacing:0; font-variant-numeric:tabular-nums; }
.rm-meta .live-avatar { margin-left:auto; }
.rm-meta > svg { width:16px; fill:currentColor; }
.rm-title { display:block; margin:8px 0 10px; min-height:40px; font-size:14px; line-height:1.4; font-weight:500; }
.rm-status { display:flex; align-items:center; gap:12px; color:var(--muted); }
.rm-status .live-status { font-size:12px; }
.rm-deps { display:flex; gap:6px; flex-wrap:wrap; margin:7px -3px -3px; font-size:11px; }
.rm-deps span { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.rm-deps svg { width:13px; height:13px; flex-basis:13px; }
.rm-blocks { color:var(--accent-text); }
.rm-blocked { color:var(--accent-text); }
.rm-handle { position:absolute; top:50%; width:7px; height:7px; margin-top:-3.5px; border:1px solid var(--bg); border-radius:50%; background:var(--muted); }
.rm-target { left:-4px; }.rm-source { right:-4px; }
.rm-edge-label { position:absolute; z-index:1; padding:1px 5px; background:var(--bg); color:var(--accent-text); font-size:11px; line-height:18px; transform:translate(-50%,-50%); white-space:nowrap; }
.rm-footer { position:absolute; inset:auto 0 0; z-index:3; min-height:30px; padding:6px 16px; border-top:1px solid var(--border); background:var(--bg); color:var(--muted); display:flex; justify-content:space-between; gap:8px; font-size:11px; }
.rm-save { color:var(--ok); }
.rm-a-done,.rm-b-progress,.rm-saving,.rm-saved { display:none; }
.rm-a-progress { color:var(--started); }
.demo-roadmap[data-stage="0"] .rm-c,.demo-roadmap:is([data-stage="0"],[data-stage="1"]) :is(.rm-edge-b,.rm-edge-label-b,.rm-b-blocks,.rm-c .rm-blocked) { opacity:0; visibility:hidden; }
.demo-roadmap[data-stage="3"] .rm-b { border-color:var(--accent); outline:1px solid var(--accent); }
.demo-roadmap:is([data-stage="2"],[data-stage="3"]) .live-cursor { transition:none; }
.demo-roadmap[data-playing][data-linked="false"] :is(.rm-b-blocks,.rm-c .rm-blocked) { opacity:0; visibility:hidden; }
.demo-roadmap[data-stage="3"] .rm-saving { display:inline; }
.demo-roadmap:is([data-stage="4"],[data-stage="5"]) :is(.rm-a-progress,.rm-b .rm-blocked) { display:none; }
.demo-roadmap:is([data-stage="4"],[data-stage="5"]) .rm-a-done { display:inline-flex; color:var(--ok); }
.demo-roadmap:is([data-stage="4"],[data-stage="5"]) .rm-saved { display:inline; }
.demo-roadmap[data-stage="4"] .rm-b { border-color:var(--ok); }
.demo-roadmap[data-stage="5"] .rm-b-todo { display:none; }
.demo-roadmap[data-stage="5"] .rm-b-progress { display:inline-flex; color:var(--started); }
@container roadmap (max-width:650px) {
  .demo-roadmap .live-canvas { height:680px; --node-w:min(240px,calc(100% - 80px)); }
  .rm-a,.rm-b,.rm-c { left:calc(50% - var(--node-w)/2); right:auto; }
  .rm-a { top:66px; }.rm-b { top:270px; }.rm-c { top:466px; }
  .demo-roadmap:not([data-playing]) .rm-b { transform:translate(20px,-12px); }
  .rm-tools-right { display:none; }
  .rm-mapbar { gap:14px; padding:0 12px; }
  .rm-footer { padding:6px 12px; }
}
@media (prefers-reduced-motion:reduce) {
  .demo-roadmap *, .demo-roadmap .live-cursor { transition:none!important; animation:none!important; }
}