/* app-demo.css — the Codelux dashboard, scoped for the home hero. Generated from the app's own stylesheet
   (source/app-codelux/ui/index.html): every selector is prefixed .cx-demo, classes and ids are prefixed cxd-.
   Hand-written additions (frame, stage, phone layout) are at the bottom. */
.cx-demo{color-scheme:dark;
  --bg:#0d1117;--surf:#161b22;--card:#1c2128;--pn:#11161d;
  --border:#30363d;--text:#e6edf3;--muted:#8b949e;--faint:#4a535e;
  --accent:#58a6ff;--green:#3fb950;--yellow:#d29922;--red:#f85149;--purple:#bc8cff;
  --accent-rgb:88,166,255;--green-rgb:63,185,80;--yellow-rgb:210,153,34;--red-rgb:248,81,73;--purple-rgb:188,140,255;
  --gray-rgb:139,148,158;--ink-rgb:255,255,255;--border-rgb:48,54,61;
  --on-accent:#0d1117;--red-text:#ffb4b0;
  --code-bg:#080b0f;--code-fg:#7ee787;
  --c-orange:#ffa657;--c-red2:#f78166;--c-blue2:#79c0ff;--c-gold:#e3b341;--c-purple2:#d2a8ff;--c-green2:#56d364;--c-blue3:#63b3ed;
  --overlay:rgba(0,0,0,.65);--shadow-c:rgba(0,0,0,.6);
  --hover:rgba(var(--ink-rgb),.05);--sb-thumb:rgba(255,255,255,.18);
  --fg:var(--text);--bg2:var(--surf);--ok:var(--green);--panel:var(--surf);
  --line:var(--border);--panel2:var(--card);--orange:var(--yellow);--accent-ink:var(--on-accent);--pop:0 12px 30px var(--shadow-c);--hdr-h:54px;--ftr-h:30px; 
  --accent-bg:rgba(var(--accent-rgb),.14);--green-bg:rgba(var(--green-rgb),.15);--purple-bg:rgba(var(--purple-rgb),.15);--orange-bg:rgba(var(--yellow-rgb),.15);
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'SF Mono','Cascadia Code',Consolas,monospace;}
:root[data-theme="light"] .cx-demo{color-scheme:light;
  --bg:#f6f8fa;--surf:#ffffff;--card:#f3f5f8;--pn:#ffffff;
  --border:#d8dee4;--text:#1f2328;--muted:#656d76;--faint:#8c959f;
  --accent:#0969da;--green:#1a7f37;--yellow:#9a6700;--red:#cf222e;--purple:#8250df;
  --accent-rgb:9,105,218;--green-rgb:26,127,55;--yellow-rgb:154,103,0;--red-rgb:207,34,46;--purple-rgb:130,80,223;
  --gray-rgb:101,109,118;--ink-rgb:31,35,40;--border-rgb:216,222,228;
  --on-accent:#ffffff;--red-text:#82071e;
  --code-bg:#f6f8fa;--code-fg:#1a7f37;
  --c-orange:#bc4c00;--c-red2:#cf222e;--c-blue2:#0969da;--c-gold:#7d4e00;--c-purple2:#8250df;--c-green2:#1a7f37;--c-blue3:#0a7ea4;
  --overlay:rgba(31,35,40,.45);--shadow-c:rgba(31,35,40,.22);
  --sb-thumb:rgba(31,35,40,.22);}
.cx-demo *{box-sizing:border-box;margin:0;padding:0}
.cx-demo *{scrollbar-width:thin;scrollbar-color:transparent transparent}
.cx-demo *:hover{scrollbar-color:var(--sb-thumb) transparent}
.cx-demo *::-webkit-scrollbar{width:9px;height:9px}
.cx-demo *::-webkit-scrollbar-track{background:transparent}
.cx-demo *::-webkit-scrollbar-thumb{background:transparent;border-radius:6px;border:2px solid transparent;background-clip:content-box}
.cx-demo *:hover::-webkit-scrollbar-thumb{background:var(--sb-thumb);background-clip:content-box}
.cx-demo *::-webkit-scrollbar-thumb:hover{background:rgba(var(--ink-rgb),.34);background-clip:content-box}
.cx-demo *::-webkit-scrollbar-corner{background:transparent}
.cx-demo #cxd-sidebar{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.cx-demo #cxd-hdr{height:54px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--border);background:var(--pn);flex:none;position:relative;z-index:30}
.cx-demo #cxd-hdr .cxd-brandx{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;white-space:nowrap}
.cx-demo #cxd-hdr .cxd-brandx i{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--purple));display:inline-block}
.cx-demo .cxd-hpath{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto;overflow:hidden}
.cx-demo .cxd-hpath .cxd-hp-sep{color:var(--muted)}
.cx-demo .cxd-icb{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;background:var(--surf);color:var(--text);position:relative;cursor:pointer;flex:none;padding:0}
.cx-demo .cxd-icb:hover{border-color:var(--accent);color:var(--accent)}
.cx-demo .cxd-icb .cxd-pip{position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--red);display:none}
.cx-demo #cxd-hdr .cxd-srch{margin-left:auto;display:flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:9px;padding:6px 10px;color:var(--muted);min-width:260px;background:var(--surf);cursor:pointer;font:inherit;font-size:13px;flex:none}
.cx-demo #cxd-hdr .cxd-srch:hover{border-color:var(--accent)}
.cx-demo #cxd-hdr .cxd-srch .cxd-kb{margin-left:auto}
.cx-demo kbd{text-transform:none;font:11px ui-monospace,monospace;border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:1px 5px;color:var(--muted)}
.cx-demo #cxd-hdr #cxd-hdr-menu{display:none}
.cx-demo #cxd-hdr .cxd-av.cxd-prof{width:32px;height:32px;border:0;cursor:pointer;color:#fff;font-size:12px}
.cx-demo .cxd-av{border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.cx-demo .cxd-notif-wrap{position:relative;display:flex;align-items:center;gap:inherit;flex:none}
.cx-demo #cxd-hdr #cxd-help-btn{font-size:15px;font-weight:700;line-height:1}
.cx-demo .cxd-badge{font-size:10px;font-weight:700;letter-spacing:.04em;padding:2px 6px;border-radius:5px;line-height:1.3;white-space:nowrap;text-transform:uppercase}
.cx-demo .cxd-b-p{background:rgba(var(--gray-rgb),.16);color:var(--muted)}
.cx-demo #cxd-proj-badges{display:flex;gap:6px;flex:none}
.cx-demo #cxd-mid{flex:1;display:flex;min-height:0;min-width:0}
.cx-demo #cxd-rail{width:64px;background:var(--surf);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:stretch;padding:10px 12px;gap:8px;flex:none;position:relative;z-index:6;transition:width .18s ease;overflow-x:hidden;overflow-y:auto}
.cx-demo #cxd-rail .cxd-hx{align-self:flex-start;width:40px;height:26px;border:1px solid var(--border);background:var(--pn);border-radius:7px;color:var(--muted);cursor:pointer;margin-bottom:4px;flex:none}
.cx-demo #cxd-rail .cxd-hx:hover{color:var(--accent);border-color:var(--accent)}
.cx-demo #cxd-rail-list{display:flex;flex-direction:column;gap:8px}
.cx-demo #cxd-rail .cxd-pjr{display:flex;align-items:center;gap:10px;border-radius:12px;cursor:pointer;position:relative;padding:0;flex:none;min-width:0}
.cx-demo #cxd-rail .cxd-pj{position:relative;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff;flex:none;transition:border-radius .15s,transform .15s}
.cx-demo #cxd-rail .cxd-pjr:hover .cxd-pj{border-radius:10px;transform:scale(1.05)}
.cx-demo #cxd-rail .cxd-pjr.cxd-on .cxd-pj{border-radius:10px}
.cx-demo #cxd-rail .cxd-pjr.cxd-on::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--text)}
.cx-demo #cxd-rail .cxd-pj .cxd-nc{position:absolute;right:-5px;top:-5px;min-width:16px;height:16px;border-radius:8px;background:var(--yellow);color:var(--on-accent);font-size:10px;font-weight:800;display:none;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--surf)}
.cx-demo #cxd-rail .cxd-pjr .cxd-pnm{display:none;white-space:nowrap}
.cx-demo #cxd-rail .cxd-pjr .cxd-pnm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
.cx-demo #cxd-rail .cxd-rsep{width:28px;height:1px;background:var(--border);margin:4px auto;flex:none}
.cx-demo #cxd-rail .cxd-pjr.cxd-add .cxd-pj{border:1px dashed var(--border);color:var(--muted);background:transparent;font-size:18px;font-weight:400}
.cx-demo #cxd-rail.cxd-wide{width:236px}
.cx-demo #cxd-rail.cxd-wide .cxd-pjr{padding:2px 6px 2px 0}
.cx-demo #cxd-rail.cxd-wide .cxd-pjr:hover{background:var(--hover)}
.cx-demo #cxd-rail.cxd-wide .cxd-pjr.cxd-on{background:var(--accent-bg)}
.cx-demo #cxd-rail.cxd-wide .cxd-pjr .cxd-pnm{display:block}
.cx-demo #cxd-rail.cxd-wide .cxd-hx{width:100%}
.cx-demo #cxd-rail.cxd-wide .cxd-rsep{width:100%}
.cx-demo #cxd-fnav{width:236px;background:var(--pn);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:auto;flex:none;z-index:5}
.cx-demo #cxd-fnav .cxd-phd{padding:14px 14px 10px;border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cx-demo #cxd-fnav .cxd-phd b{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.cx-demo #cxd-fnav .cxd-phd .cxd-t{flex-basis:100%;font-size:12px;color:var(--muted);margin-top:-3px}
.cx-demo #cxd-fnav .cxd-phd .cxd-t:empty{display:none}
.cx-demo #cxd-fnav .cxd-phd #cxd-sb-help{margin-left:auto}
.cx-demo #cxd-fn-nav{display:flex;flex-direction:column;padding-bottom:6px;flex:none}
.cx-demo #cxd-fn-nav .cxd-grp{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:14px 10px 6px}
.cx-demo #cxd-fn-nav .cxd-tab{display:flex;align-items:center;gap:10px;padding:7px 10px;margin:1px 6px;border-radius:7px;color:var(--text);cursor:pointer;background:transparent;border:0;font:inherit;font-size:13px;font-weight:400;letter-spacing:0;text-align:left;width:auto}
.cx-demo #cxd-fn-nav .cxd-tab:hover{background:var(--hover);color:var(--text)}
.cx-demo #cxd-fn-nav .cxd-tab .cxd-ic{width:16px;height:16px;flex:none;opacity:.85}
.cx-demo #cxd-fn-nav .cxd-tab .cxd-cnt{margin-left:auto;font-size:11px;color:var(--muted)}
.cx-demo #cxd-fnav .cxd-tab.cxd-active,.cx-demo #cxd-fnav .cxd-tab.cxd-active.cxd-journal,.cx-demo #cxd-fnav .cxd-tab.cxd-active.cxd-tasks,.cx-demo #cxd-fnav .cxd-tab.cxd-active.cxd-usage,.cx-demo #cxd-fnav .cxd-tab.cxd-active.cxd-timeline{background:var(--accent-bg);color:var(--accent);font-weight:600}
.cx-demo #cxd-fnav .cxd-tab.cxd-active .cxd-ic{opacity:1}
.cx-demo #cxd-fnav #cxd-free-proj{margin-top:auto}
.cx-demo #cxd-fnav-scrim{display:none}
.cx-demo #cxd-ftr{height:30px;display:flex;align-items:center;gap:16px;padding:0 14px;border-top:1px solid var(--border);background:var(--pn);font-size:12px;color:var(--muted);flex:none;white-space:nowrap;overflow:hidden}
.cx-demo #cxd-ftr .cxd-st{display:flex;align-items:center;gap:6px}
.cx-demo #cxd-ftr .cxd-st .cxd-dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block}
.cx-demo #cxd-ftr .cxd-st.cxd-local .cxd-dot{background:var(--muted)}
.cx-demo #cxd-ftr .cxd-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.cx-demo #cxd-ftr #cxd-ftr-agents:empty,.cx-demo #cxd-ftr #cxd-ftr-files:empty,.cx-demo #cxd-ftr #cxd-ftr-server:empty{display:none}
.cx-demo .cxd-proj-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--muted)}
.cx-demo #cxd-proj-gear{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:0 2px;
  flex-shrink:0;line-height:1;align-self:center}
.cx-demo #cxd-proj-gear:hover{color:var(--accent)}
.cx-demo #cxd-free-proj{display:none;flex-direction:column;gap:8px;padding:14px 12px;border-bottom:1px solid var(--border)}
.cx-demo #cxd-free-proj .cxd-fp-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.cx-demo #cxd-free-proj .cxd-fp-path{font-size:11px;font-family:var(--mono);color:var(--text);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;line-height:1.4}
.cx-demo #cxd-free-proj .cxd-fp-btn{width:100%;padding:7px;border:1px solid var(--border);border-radius:7px;background:transparent;
  color:var(--accent);cursor:pointer;font-size:12px;text-align:center}
.cx-demo #cxd-free-proj .cxd-fp-btn:disabled{opacity:.45;cursor:not-allowed}
.cx-demo #cxd-free-proj .cxd-fp-quota{font-size:10px;color:var(--muted);line-height:1.4}
.cx-demo #cxd-free-proj .cxd-fp-upsell{font-size:10px;color:var(--muted);line-height:1.4}
.cx-demo #cxd-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.cx-demo #cxd-proj-title{font-size:14.5px;font-weight:700;color:var(--text);
  min-width:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-demo #cxd-proj-path{font-size:12px;color:var(--muted);font-family:var(--mono);
  min-width:0;flex-shrink:2;max-width:380px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-demo #cxd-proj-mode{display:flex;align-items:center;gap:6px;flex-shrink:0;font-size:9.5px;color:var(--muted);white-space:nowrap}
.cx-demo #cxd-fn-nav .cxd-setgrp{margin-top:10px;padding-top:8px;border-top:1px solid var(--border)}
.cx-demo #cxd-fn-nav .cxd-tab .cxd-chev{width:12px;height:12px;margin-left:auto;flex:none;opacity:.55;transition:transform .15s}
.cx-demo #cxd-fn-nav .cxd-setgrp.cxd-open .cxd-sethd .cxd-chev{transform:rotate(90deg)}
.cx-demo #cxd-fn-nav .cxd-setsub{display:none;flex-direction:column;margin:2px 0 4px}
.cx-demo #cxd-fn-nav .cxd-setgrp.cxd-open .cxd-setsub{display:flex}
.cx-demo #cxd-fn-nav .cxd-setsub .cxd-tab{padding:6px 10px 6px 26px;font-size:12.5px}
.cx-demo #cxd-fn-nav .cxd-setsub .cxd-tab .cxd-ic{width:14px;height:14px}
.cx-demo .cxd-pg{max-width:1040px;margin:0 auto;padding:2px 0 24px;width:100%}
.cx-demo .cxd-pg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.cx-demo .cxd-pg-title{font-size:19px;font-weight:700;margin:0;display:flex;align-items:center;gap:8px;color:var(--text)}
.cx-demo .cxd-pg-desc{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:4px;max-width:640px}
.cx-demo .cxd-pg-head>div:first-child{flex:1 1 320px;min-width:0}
.cx-demo .cxd-pg-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;flex:none}
.cx-demo .cxd-pg-btn{font-size:11px;font-weight:600;padding:4px 11px;border-radius:6px;border:1px solid var(--border);background:var(--card);color:var(--accent);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.cx-demo .cxd-pg-btn:hover{border-color:var(--accent)}
.cx-demo .cxd-pg-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px 20px;margin-bottom:18px}
.cx-demo .cxd-pg-sec{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:22px 0 8px}
.cx-demo .cxd-pg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:12px;margin-bottom:18px}
.cx-demo .cxd-pg-grid .cxd-card{min-width:0}
.cx-demo .cxd-pg-grid .cxd-card .cxd-val{font-size:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-demo .cxd-pg-grid .cxd-card .cxd-sub{overflow:hidden;text-overflow:ellipsis}
.cx-demo .cxd-pg-grid .cxd-card .cxd-sub.cxd-wrap{white-space:normal;word-break:break-word}
.cx-demo .cxd-pg-grid .cxd-card a.cxd-more{display:inline-block;margin-top:8px;font-size:11px;color:var(--accent);text-decoration:none;font-weight:600;cursor:pointer}
.cx-demo .cxd-pg-list{display:flex;flex-direction:column}
.cx-demo .cxd-pg-list .cxd-row{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid rgba(var(--border-rgb),.5);font-size:12px;min-width:0}
.cx-demo .cxd-pg-list .cxd-row:last-child{border-bottom:0}
.cx-demo .cxd-pg-list .cxd-row .cxd-t{color:var(--muted);font-family:var(--mono);font-size:11px;flex:none;min-width:60px}
.cx-demo .cxd-pg-list .cxd-row .cxd-k{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);flex:none;min-width:64px}
.cx-demo .cxd-pg-list .cxd-row .cxd-s{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.cx-demo .cxd-pg-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:10px}
.cx-demo .cxd-pg-links a{display:flex;flex-direction:column;gap:3px;padding:11px 14px;border:1px solid var(--border);border-radius:9px;background:var(--bg);text-decoration:none;color:var(--text);cursor:pointer}
.cx-demo .cxd-pg-links a:hover{border-color:var(--accent)}
.cx-demo .cxd-pg-links a b{font-size:12.5px;color:var(--accent)}
.cx-demo .cxd-pg-links a span{font-size:11px;color:var(--muted);line-height:1.45}
.cx-demo .cxd-pg-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden}
.cx-demo .cxd-pg-bar i{display:block;height:100%;background:var(--accent);border-radius:2px;transition:width .3s}
.cx-demo #cxd-plan-badge{font-size:10px;font-weight:800;letter-spacing:.08em;padding:3px 12px;border-radius:20px;
  border:1px solid var(--border);color:var(--muted);text-transform:uppercase;cursor:pointer}
.cx-demo #cxd-help-link{font-size:10px;font-weight:800;letter-spacing:.08em;padding:3px 10px;border-radius:20px;
  border:1px solid var(--border);color:var(--muted);text-transform:uppercase;text-decoration:none;
  white-space:nowrap;margin-right:6px}
.cx-demo #cxd-help-link:hover{color:var(--accent);border-color:var(--accent)}
.cx-demo #cxd-new-release-badge{display:none;align-items:center;gap:4px;
  font-size:10px;font-weight:800;letter-spacing:.06em;
  padding:3px 10px;border-radius:20px;cursor:pointer;
  background:rgba(var(--green-rgb),.15);color:var(--green);
  border:1px solid rgba(var(--green-rgb),.35);
  animation:cxd-release-pulse 2.5s ease-in-out infinite;
  text-decoration:none;}
.cx-demo #cxd-plan-badge.cxd-multi{background:rgba(var(--purple-rgb),.12);color:var(--purple);border-color:rgba(var(--purple-rgb),.3)}
.cx-demo .cxd-badge{display:inline-flex;align-items:center;gap:5px;
  background:rgba(var(--green-rgb),.1);color:var(--green);
  border:1px solid rgba(var(--green-rgb),.25);border-radius:20px;
  padding:3px 10px;font-size:11px;font-weight:600}
.cx-demo #cxd-content{flex:1;min-width:0;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:18px}
.cx-demo #cxd-main-body{flex:1;display:flex;min-width:0;min-height:0;overflow:hidden}
.cx-demo #cxd-team-sync-banner{display:none;flex-shrink:0;align-items:center;gap:10px;
  padding:8px 16px;font-size:12px;line-height:1.4;background:rgba(var(--red-rgb),.14);
  color:var(--red-text);border-bottom:1px solid rgba(var(--red-rgb),.35)}
.cx-demo #cxd-team-sync-banner .cxd-ts-dot{width:7px;height:7px;border-radius:50%;background:var(--red);
  flex-shrink:0;animation:cxd-tsPulse 1.6s ease-in-out infinite}
.cx-demo #cxd-team-sync-banner b{color:#fff}
.cx-demo #cxd-kit-banner{display:none;flex-shrink:0;align-items:center;gap:10px;padding:8px 16px;font-size:12px;
  line-height:1.4;background:rgba(var(--yellow-rgb),.12);color:var(--yellow);border-bottom:1px solid rgba(var(--yellow-rgb),.35)}
.cx-demo #cxd-kit-banner .cxd-cm-btn{border-color:var(--yellow);color:var(--yellow);margin-left:auto;flex-shrink:0}
.cx-demo .cxd-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:15px}
.cx-demo .cxd-card .cxd-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}
.cx-demo .cxd-card .cxd-val{font-size:26px;font-weight:700;font-family:var(--mono);color:var(--text);line-height:1}
.cx-demo .cxd-card .cxd-sub{font-size:11px;color:var(--muted);margin-top:5px}
.cx-demo .cxd-section-title{font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.cx-demo table{width:100%;border-collapse:collapse;font-size:11.5px}
.cx-demo th{padding:8px 10px;text-align:left;color:var(--muted);font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;background:var(--surf)}
.cx-demo td{padding:7px 10px;border-bottom:1px solid rgba(var(--border-rgb),.5);font-family:var(--mono)}
.cx-demo tr:last-child td{border-bottom:none}
.cx-demo tr:hover td{background:rgba(var(--ink-rgb),.015)}
.cx-demo{--k-memory:#bc8cff;  --k-memory-bg:rgba(188,140,255,.16);
  --k-journal:#8b9cff; --k-journal-bg:rgba(139,156,255,.16);
  --k-note:#39c5bb;    --k-note-bg:rgba(57,197,187,.15);
  --k-todo:#e3b341;    --k-todo-bg:rgba(227,179,65,.16);
  --k-fact:#56d4f5;    --k-fact-bg:rgba(86,212,245,.14);
  --k-decision:#f778ba;--k-decision-bg:rgba(247,120,186,.15);
  --k-codemap:#3fb950; --k-codemap-bg:rgba(63,185,80,.15);
  --k-file:#9fb3c8;    --k-file-bg:rgba(159,179,200,.14);
  --k-git:#f0883e;     --k-git-bg:rgba(240,136,62,.16);
  --k-lock:#8b949e;    --k-lock-bg:rgba(139,148,158,.16);
  --k-refused:#f85149; --k-refused-bg:rgba(248,81,73,.15);
  --k-message:#58c4ff; --k-message-bg:rgba(88,196,255,.14);
  --k-team:#8b949e;    --k-team-bg:rgba(139,148,158,.14);
  --k-project:#d2a8ff; --k-project-bg:rgba(210,168,255,.14);
  --k-audit:#d29922;   --k-audit-bg:rgba(210,153,34,.15);}
:root[data-theme="light"] .cx-demo{--k-memory:#8250df;  --k-memory-bg:rgba(130,80,223,.12);
  --k-journal:#4c5fd5; --k-journal-bg:rgba(76,95,213,.12);
  --k-note:#0f7b73;    --k-note-bg:rgba(15,123,115,.12);
  --k-todo:#9a6700;    --k-todo-bg:rgba(154,103,0,.12);
  --k-fact:#0a7ea4;    --k-fact-bg:rgba(10,126,164,.12);
  --k-decision:#bf3989;--k-decision-bg:rgba(191,57,137,.12);
  --k-codemap:#1a7f37; --k-codemap-bg:rgba(26,127,55,.12);
  --k-file:#57606a;    --k-file-bg:rgba(87,96,106,.12);
  --k-git:#bc4c00;     --k-git-bg:rgba(188,76,0,.12);
  --k-lock:#6e7781;    --k-lock-bg:rgba(110,119,129,.12);
  --k-refused:#cf222e; --k-refused-bg:rgba(207,34,46,.12);
  --k-message:#0969da; --k-message-bg:rgba(9,105,218,.12);
  --k-team:#6e7781;    --k-team-bg:rgba(110,119,129,.12);
  --k-project:#6639ba; --k-project-bg:rgba(102,57,186,.12);
  --k-audit:#9a6700;   --k-audit-bg:rgba(154,103,0,.12);}
.cx-demo .cxd-k-all{--kc:var(--accent);--kb:rgba(var(--accent-rgb),.15)}
.cx-demo .cxd-k-memory{--kc:var(--k-memory);--kb:var(--k-memory-bg)}
.cx-demo .cxd-k-journal{--kc:var(--k-journal);--kb:var(--k-journal-bg)}
.cx-demo .cxd-k-note{--kc:var(--k-note);--kb:var(--k-note-bg)}
.cx-demo .cxd-k-todo{--kc:var(--k-todo);--kb:var(--k-todo-bg)}
.cx-demo .cxd-k-fact{--kc:var(--k-fact);--kb:var(--k-fact-bg)}
.cx-demo .cxd-k-decision{--kc:var(--k-decision);--kb:var(--k-decision-bg)}
.cx-demo .cxd-k-codemap{--kc:var(--k-codemap);--kb:var(--k-codemap-bg)}
.cx-demo .cxd-k-file{--kc:var(--k-file);--kb:var(--k-file-bg)}
.cx-demo .cxd-k-git{--kc:var(--k-git);--kb:var(--k-git-bg)}
.cx-demo .cxd-k-lock{--kc:var(--k-lock);--kb:var(--k-lock-bg)}
.cx-demo .cxd-k-lock-refused{--kc:var(--k-refused);--kb:var(--k-refused-bg)}
.cx-demo .cxd-k-message{--kc:var(--k-message);--kb:var(--k-message-bg)}
.cx-demo .cxd-k-team{--kc:var(--k-team);--kb:var(--k-team-bg)}
.cx-demo .cxd-k-project{--kc:var(--k-project);--kb:var(--k-project-bg)}
.cx-demo .cxd-k-audit{--kc:var(--k-audit);--kb:var(--k-audit-bg)}
.cx-demo{--k-task:#58a6ff;--k-task-bg:rgba(88,166,255,.14)}
:root[data-theme="light"] .cx-demo{--k-task:#0969da;--k-task-bg:rgba(9,105,218,.12)}
.cx-demo .cxd-k-task{--kc:var(--k-task);--kb:var(--k-task-bg)}
.cx-demo .cxd-mg-wrap{display:flex;flex-direction:column;gap:12px;min-width:0}
.cx-demo .cxd-mg-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cx-demo .cxd-mg-title{display:flex;align-items:baseline;gap:8px;margin-right:6px}
.cx-demo .cxd-mg-sub{font-size:11px;color:var(--muted)}
.cx-demo .cxd-mg-seg{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;flex-wrap:wrap}
.cx-demo .cxd-mg-seg button{background:none;border:0;color:var(--muted);padding:6px 12px;cursor:pointer;font:inherit;font-size:12px}
.cx-demo .cxd-mg-seg button:hover{color:var(--text)}
.cx-demo .cxd-mg-seg button.cxd-on{background:var(--card);color:var(--text);font-weight:600}
.cx-demo .cxd-mg-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px}
.cx-demo .cxd-mg-small{font-size:11px;color:var(--muted)}
.cx-demo .cxd-mg-pill{font-size:10.5px;padding:1px 8px;border-radius:10px;display:inline-block;background:rgba(var(--gray-rgb),.14);color:var(--muted);white-space:nowrap}
.cx-demo .cxd-mg-pill.cxd-ok{background:rgba(var(--green-rgb),.14);color:var(--green)}
.cx-demo .cxd-mg-pill.cxd-warn{background:rgba(var(--yellow-rgb),.15);color:var(--yellow)}
.cx-demo .cxd-mg-pill.cxd-acc{background:rgba(var(--accent-rgb),.15);color:var(--accent)}
.cx-demo .cxd-mg-key{font-family:var(--mono);font-size:11px;color:var(--accent);white-space:nowrap}
.cx-demo .cxd-mg-av{width:26px;height:26px;border-radius:50%;background:rgba(var(--accent-rgb),.16);color:var(--accent);display:inline-flex;
  align-items:center;justify-content:center;font-size:10.5px;font-weight:700;flex:none}
.cx-demo .cxd-mg-table{width:100%;border-collapse:collapse}
.cx-demo .cxd-mg-table th,.cx-demo .cxd-mg-table td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--border);font-size:12px;vertical-align:middle}
.cx-demo .cxd-mg-table th{color:var(--muted);font-weight:500;font-size:11px;white-space:nowrap;text-transform:none;letter-spacing:0;font-family:var(--font)}
.cx-demo .cxd-mg-table td{font-family:var(--font)}
.cx-demo .cxd-mg-table tr.cxd-mg-click{cursor:pointer}
.cx-demo .cxd-mg-table tr.cxd-mg-click:hover td{background:rgba(var(--ink-rgb),.03)}
.cx-demo .cxd-mg-scroll{overflow-x:auto}
.cx-demo .cxd-mg-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cx-demo .cxd-mg-col{background:var(--surf);border:1px solid var(--border);border-radius:10px;padding:10px;min-height:120px}
.cx-demo .cxd-mg-col h4{margin:0 0 8px;font-size:11.5px;color:var(--muted);font-weight:600}
.cx-demo .cxd-mg-tk{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:9px 10px;margin-bottom:8px;cursor:pointer;font-size:12px}
.cx-demo .cxd-mg-tk:hover{border-color:var(--accent)}
.cx-demo .cxd-mg-tk[draggable="true"]{cursor:grab}
.cx-demo .cxd-mg-tk .cxd-t{color:var(--text);margin:2px 0}
.cx-demo .cxd-mg-prog{height:5px;background:var(--border);border-radius:3px;margin-top:7px;overflow:hidden;position:relative}
.cx-demo .cxd-mg-prog b{display:block;height:100%;background:var(--green)}
.cx-demo .cxd-mg-prog i{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--text);opacity:.55}
.cx-demo .cxd-mg-g{display:grid;grid-template-columns:160px minmax(0,1fr);border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surf)}
.cx-demo .cxd-mg-g .cxd-h{background:var(--card);padding:7px 10px;font-size:11px;color:var(--muted);border-bottom:1px solid var(--border)}
.cx-demo .cxd-mg-days{display:grid;padding:7px 0 !important}
.cx-demo .cxd-mg-days div{text-align:center;font-size:10px;border-left:1px solid var(--border);white-space:nowrap;overflow:hidden}
.cx-demo .cxd-mg-days div.cxd-we{color:var(--muted);opacity:.6}
.cx-demo .cxd-mg-who{padding:10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;font-size:12px;min-width:0}
.cx-demo .cxd-mg-who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-demo .cxd-mg-lane{position:relative;border-bottom:1px solid var(--border);min-height:52px}
.cx-demo .cxd-mg-bar-t{position:absolute;height:24px;border-radius:6px;padding:0 7px;display:flex;align-items:center;gap:6px;font-size:11px;
  white-space:nowrap;overflow:hidden;color:var(--on-accent);font-weight:600;cursor:pointer;box-sizing:border-box}
.cx-demo .cxd-mg-bar-t i{font-style:normal;font-weight:400;opacity:.8}
.cx-demo .cxd-mg-bar-t.cxd-todo{background:#6e7781;color:#fff}
.cx-demo .cxd-mg-bar-t.cxd-doing{background:var(--accent)}
.cx-demo .cxd-mg-bar-t.cxd-review{background:var(--purple)}
.cx-demo .cxd-mg-bar-t.cxd-done{background:var(--green)}
.cx-demo .cxd-mg-flag{position:absolute;font-size:10px;color:var(--muted);white-space:nowrap}
.cx-demo .cxd-mg-today{position:absolute;top:0;bottom:0;width:2px;background:var(--red);opacity:.8;z-index:1}
.cx-demo .cxd-mg-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.cx-demo .cxd-mg-in{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:6px 9px;color:var(--text);font-size:12px;outline:none;font-family:inherit;color-scheme:dark}
.cx-demo .cxd-mg-in:focus{border-color:var(--accent)}
.cx-demo{--k-usage:#3fb950;--k-usage-bg:rgba(63,185,80,.14)}
:root[data-theme="light"] .cx-demo{--k-usage:#1a7f37;--k-usage-bg:rgba(26,127,55,.12)}
.cx-demo .cxd-k-usage{--kc:var(--k-usage);--kb:var(--k-usage-bg)}
.cx-demo .cxd-us-main-line{margin-top:14px;padding:8px 12px;background:var(--card);border:1px solid var(--border);border-radius:8px}
.cx-demo .cxd-us-main-line a{color:var(--accent);text-decoration:none;font-weight:600;margin-left:6px}
.cx-demo .cxd-us-table tr.cxd-us-tool td{border-top:1px solid var(--border)}
.cx-demo .cxd-us-table tr.cxd-us-model td{color:var(--muted)}
.cx-demo .cxd-us-table tr.cxd-us-model td.cxd-n{color:var(--text)}
.cx-demo .cxd-us-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cx-demo .cxd-us-head-r{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-weight:400;text-transform:none;letter-spacing:0}
.cx-demo .cxd-us-card{display:flex;flex-direction:column;gap:10px}
.cx-demo .cxd-us-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.cx-demo .cxd-us-kpi .cxd-val{font-size:22px}
.cx-demo .cxd-us-kpi.cxd-vol .cxd-val{color:var(--muted)}
.cx-demo .cxd-us-kpi.cxd-warn{border-color:rgba(var(--yellow-rgb),.55)}
.cx-demo .cxd-us-note{line-height:1.5}
.cx-demo .cxd-us-bars{display:flex;align-items:flex-end;gap:2px;height:90px;padding-top:6px;border-bottom:1px solid var(--border)}
.cx-demo .cxd-us-bar{flex:1;height:100%;display:flex;align-items:flex-end;min-width:2px}
.cx-demo .cxd-us-bar b{display:block;width:100%;background:var(--accent);border-radius:3px 3px 0 0;opacity:.8}
.cx-demo .cxd-us-bar:hover b{opacity:1}
.cx-demo .cxd-us-bar.cxd-hit b{background:var(--yellow)}
.cx-demo .cxd-us-bars-x{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:3px}
.cx-demo .cxd-us-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.cx-demo .cxd-us-sub{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:10px 0 6px}
.cx-demo .cxd-us-table td.cxd-n,.cx-demo .cxd-us-table th.cxd-n{text-align:right;font-family:var(--mono);white-space:nowrap}
.cx-demo .cxd-us-table td.cxd-vol{color:var(--muted)}
.cx-demo .cxd-us-table td.cxd-mono{font-family:var(--mono);font-size:11px}
.cx-demo .cxd-us-fits{display:flex;flex-direction:column;gap:8px}
.cx-demo .cxd-us-fit{display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.45}
.cx-demo .cxd-us-more summary{cursor:pointer;font-size:12px;color:var(--muted)}
.cx-demo .cxd-us-tools{display:flex;flex-direction:column;gap:4px;font-size:12px;margin-top:6px}
.cx-demo .cxd-us-privacy{border-top:1px dashed var(--border);padding-top:10px;font-size:12px;display:flex;flex-direction:column;gap:4px;line-height:1.5}
.cx-demo #cxd-tl-wrap{display:grid;grid-template-columns:200px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:18px;flex:1 1 auto;min-height:0}
.cx-demo #cxd-tl-side{display:flex;flex-direction:column;gap:4px;min-height:0;overflow-y:auto}
.cx-demo #cxd-tl-main{display:flex;flex-direction:column;min-height:0;min-width:0}
.cx-demo #cxd-tl-list{flex:1 1 auto;min-height:0;overflow-y:auto;position:relative;padding-right:4px}
.cx-demo .cxd-tl-input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:6px;
  padding:6px 9px;color:var(--text);font-size:12px;outline:none;color-scheme:dark}
.cx-demo .cxd-tl-input:focus{border-color:var(--accent)}
.cx-demo select.cxd-tl-input{cursor:pointer}
.cx-demo .cxd-tl-start{display:flex;gap:6px;align-items:center}
.cx-demo .cxd-tl-lab{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:10px 0 5px}
.cx-demo .cxd-tl-chips{display:flex;flex-wrap:wrap;gap:4px}
.cx-demo .cxd-tl-chip{display:inline-flex;align-items:center;gap:5px;font-size:10px;padding:3px 9px;border-radius:12px;cursor:pointer;
  border:1px solid var(--border);background:transparent;color:var(--muted);transition:border-color .12s,color .12s,background .12s}
.cx-demo .cxd-tl-chip:hover{border-color:var(--kc,var(--accent));color:var(--text)}
.cx-demo .cxd-tl-chip.cxd-active{background:var(--kb);color:var(--kc);border-color:var(--kc)}
.cx-demo .cxd-tl-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--kc)}
.cx-demo .cxd-tl-tree{display:flex;flex-direction:column;max-height:220px;overflow-y:auto}
.cx-demo .cxd-tl-tree .cxd-jr-topic{padding:4px 8px}
.cx-demo .cxd-tl-who{display:flex;flex-direction:column;max-height:160px;overflow-y:auto}
.cx-demo .cxd-tl-who .cxd-jr-topic{font-family:var(--font)}
.cx-demo #cxd-tl-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex:none}
.cx-demo #cxd-tl-count,.cx-demo #cxd-tl-range{font-size:11px;color:var(--muted);font-family:var(--mono)}
.cx-demo #cxd-tl-note{background:rgba(var(--yellow-rgb),.1);border:1px solid rgba(var(--yellow-rgb),.35);color:var(--yellow);
  border-radius:6px;padding:7px 10px;font-size:11.5px;margin-bottom:8px;flex:none}
.cx-demo .cxd-tl-day-h{position:sticky;top:0;z-index:3;display:flex;justify-content:center;padding:6px 0 4px;pointer-events:none}
.cx-demo .cxd-tl-day-h span{font-size:10.5px;font-weight:600;letter-spacing:.03em;color:var(--text);background:var(--surf);
  border:1px solid var(--border);border-radius:12px;padding:2px 12px;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.cx-demo .cxd-tl-row{display:flex;gap:12px;padding:9px 8px 9px 9px;border-bottom:1px solid rgba(var(--border-rgb),.6);cursor:pointer;
  border-left:3px solid var(--kc,var(--border));border-radius:4px;transition:background .12s;outline:none}
.cx-demo .cxd-tl-row:hover{background:rgba(var(--ink-rgb),.04)}
.cx-demo .cxd-tl-row.cxd-open{background:var(--kb)}
.cx-demo .cxd-tl-who-ic{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;letter-spacing:.02em}
.cx-demo .cxd-tl-who-ic.cxd-agent{background:rgba(var(--purple-rgb),.14);color:var(--purple)}
.cx-demo .cxd-tl-who-ic.cxd-system{background:rgba(var(--gray-rgb),.16);color:var(--muted)}
.cx-demo .cxd-tl-body{flex:1;min-width:0}
.cx-demo .cxd-tl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:10.5px;color:var(--muted)}
.cx-demo .cxd-tl-kpill{display:inline-block;font-size:10px;font-weight:600;padding:1px 8px;border-radius:10px;background:var(--kb);color:var(--kc)}
.cx-demo .cxd-tl-act{color:var(--muted)}
.cx-demo .cxd-tl-actor{color:var(--text);font-weight:500}
.cx-demo .cxd-tl-actor.cxd-agent{color:var(--purple)}
.cx-demo .cxd-tl-time{font-family:var(--mono);margin-left:auto}
.cx-demo .cxd-tl-title{font-size:12.5px;color:var(--text);font-weight:500;margin:2px 0 1px;word-break:break-word}
.cx-demo .cxd-tl-detail{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono)}
.cx-demo .cxd-tl-pill{display:inline-block;font-size:10px;padding:1px 8px;border-radius:10px;margin:4px 4px 0 0;
  background:rgba(var(--gray-rgb),.14);color:var(--muted);border:1px solid transparent}
.cx-demo .cxd-tl-pill.cxd-bad{background:rgba(var(--red-rgb),.12);color:var(--red);border-color:rgba(var(--red-rgb),.3)}
.cx-demo .cxd-tl-more{margin:12px auto 4px;display:block}
.cx-demo .cxd-tl-panel{margin:2px 0 10px 42px;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--kc,var(--border));
  border-radius:8px;padding:10px 12px;cursor:default;font-size:12px;min-width:0}
.cx-demo .cxd-tl-p-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px}
.cx-demo .cxd-tl-p-who{font-size:10.5px;color:var(--muted)}
.cx-demo .cxd-tl-open-btn{font-size:10.5px;padding:4px 10px;border-color:var(--kc,var(--accent));color:var(--kc,var(--accent))}
.cx-demo .cxd-tl-p-title{font-size:13px;font-weight:600;color:var(--text);margin:2px 0 4px;word-break:break-word}
.cx-demo .cxd-tl-p-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px;font-size:11px}
.cx-demo .cxd-tl-p-meta .cxd-tl-pill{margin:0}
.cx-demo .cxd-tl-p-text{color:var(--text);line-height:1.55;white-space:pre-wrap;word-break:break-word;margin:4px 0}
.cx-demo .cxd-tl-refused{color:var(--k-refused);font-weight:500}
.cx-demo .cxd-tl-sec{margin:8px 0}
.cx-demo .cxd-tl-sec-t{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:4px}
.cx-demo .cxd-tl-kv{display:flex;gap:10px;padding:2px 0;line-height:1.5}
.cx-demo .cxd-tl-k{flex:0 0 130px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.cx-demo .cxd-tl-v{flex:1;min-width:0;color:var(--text);word-break:break-word;white-space:pre-wrap}
.cx-demo .cxd-tl-muted{color:var(--muted)}
.cx-demo .cxd-tl-ok{color:var(--green)}
.cx-demo .cxd-tl-bad{color:var(--red)}
.cx-demo .cxd-tl-topic{font-family:var(--mono);color:var(--purple)}
.cx-demo .cxd-tl-link{color:var(--accent);cursor:pointer;font-family:var(--mono);font-size:11px;text-decoration:underline dotted}
.cx-demo .cxd-tl-link:hover{text-decoration:underline}
.cx-demo .cxd-tl-diff{max-height:380px;overflow:auto;border:1px solid var(--border);border-radius:6px;background:var(--surf);margin-top:4px}
.cx-demo .cxd-tl-tree-node{font-family:var(--mono);font-size:11.5px;line-height:1.55;padding-left:14px}
.cx-demo .cxd-tl-tree-node.cxd-root{padding-left:0}
.cx-demo .cxd-tl-tree-k{color:var(--purple);cursor:pointer;user-select:none}
.cx-demo .cxd-tl-tree-k.cxd-leaf{cursor:default}
.cx-demo .cxd-tl-tree-k .cxd-car{display:inline-block;width:10px;color:var(--muted);font-size:9px}
.cx-demo .cxd-tl-tree-v{color:var(--text);white-space:pre-wrap;word-break:break-word}
.cx-demo .cxd-tl-tree-v.cxd-str{color:var(--green)}
.cx-demo .cxd-tl-tree-v.cxd-nil{color:var(--muted);font-style:italic}
.cx-demo .cxd-tl-tree-v.cxd-file{color:var(--accent);cursor:pointer;text-decoration:underline dotted}
.cx-demo .cxd-cm-btn{background:none;border:1px solid var(--border);color:var(--muted);border-radius:4px;
  padding:3px 8px;font-size:11px;cursor:pointer;transition:all .12s;white-space:nowrap}
.cx-demo .cxd-cm-btn:hover{border-color:var(--accent);color:var(--accent)}
.cx-demo .cxd-cm-btn.cxd-del:hover{border-color:var(--red);color:var(--red)}
.cx-demo .cxd-nt-render{font-size:13px;color:var(--text);line-height:1.6;word-break:break-word}
.cx-demo ::-webkit-scrollbar{width:6px;height:6px}
.cx-demo ::-webkit-scrollbar-track{background:transparent}
.cx-demo ::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.cx-demo #cxd-jr-wrap{display:flex;gap:16px;align-items:flex-start;height:100%;min-height:0}
.cx-demo #cxd-jr-side{width:230px;min-width:230px;background:var(--card);border:1px solid var(--border);border-radius:8px;
  display:flex;flex-direction:column;overflow:hidden;max-height:100%}
.cx-demo #cxd-jr-side-head{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.cx-demo #cxd-jr-topic-tree{flex:1;overflow-y:auto;padding:6px}
.cx-demo .cxd-jr-topic{padding:5px 8px;border-radius:6px;cursor:pointer;color:var(--muted);font-size:12px;
  font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .12s,color .12s}
.cx-demo .cxd-jr-topic:hover{background:rgba(var(--ink-rgb),.04);color:var(--text)}
.cx-demo .cxd-jr-topic.cxd-active{background:rgba(var(--purple-rgb),.12);color:var(--purple);font-weight:600}
.cx-demo #cxd-jr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px;overflow-y:auto;max-height:100%;padding-bottom:20px}
.cx-demo #cxd-jr-top{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:14px;align-items:start}
.cx-demo .cxd-jr-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:14px 16px}
.cx-demo .cxd-jr-cp{border-color:rgba(var(--purple-rgb),.4)}
.cx-demo .cxd-jr-cp-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cx-demo .cxd-jr-cp-badge{font-size:10px;font-weight:800;letter-spacing:.08em;padding:2px 10px;border-radius:20px;
  background:rgba(var(--purple-rgb),.15);color:var(--purple);border:1px solid rgba(var(--purple-rgb),.35);text-transform:uppercase}
.cx-demo .cxd-jr-cp-meta{font-size:11px;color:var(--muted);font-family:var(--mono)}
.cx-demo .cxd-jr-sec{margin-top:10px}
.cx-demo .cxd-jr-sec-t{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:4px}
.cx-demo .cxd-jr-sec-t.cxd-trap{color:var(--red)}
.cx-demo .cxd-jr-sec p{font-size:12.5px;line-height:1.5;white-space:pre-wrap}
.cx-demo .cxd-jr-sec ul{margin:0;padding-left:18px}
.cx-demo .cxd-jr-sec li{font-size:12.5px;line-height:1.55}
.cx-demo .cxd-jr-sec li.cxd-trap{color:var(--red)}
.cx-demo .cxd-jr-next{background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.25);border-radius:6px;padding:8px 10px;font-size:12.5px}
.cx-demo .cxd-jr-delta-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cx-demo .cxd-jr-delta-ok{font-size:11px;color:var(--green)}
.cx-demo .cxd-jr-dove-row{display:flex;gap:8px;align-items:baseline;padding:5px 0;border-bottom:1px solid rgba(var(--ink-rgb),.05)}
.cx-demo .cxd-jr-dove-row:last-child{border-bottom:none}
.cx-demo .cxd-jr-dove-loc{font-family:var(--mono);font-size:11.5px;color:var(--accent);white-space:nowrap}
.cx-demo a.cxd-jr-dove-loc{cursor:pointer;text-decoration:none}
.cx-demo a.cxd-jr-dove-loc:hover{text-decoration:underline}
.cx-demo .cxd-jr-dove-sym{font-family:var(--mono);font-size:11px;color:var(--purple)}
.cx-demo .cxd-jr-dove-why{font-size:11px;color:var(--muted);flex:1}
.cx-demo #cxd-jr-tl{position:relative;padding-left:26px}
.cx-demo #cxd-jr-tl:before{content:'';position:absolute;left:9px;top:4px;bottom:4px;width:2px;background:var(--border)}
.cx-demo .cxd-jr-ev{position:relative;padding:6px 10px;margin-bottom:2px;border-radius:6px;cursor:pointer;transition:background .12s}
.cx-demo .cxd-jr-ev:hover{background:rgba(var(--ink-rgb),.04)}
.cx-demo .cxd-jr-ev-dot{position:absolute;left:-23px;top:10px;width:10px;height:10px;border-radius:50%;
  background:var(--muted);border:2px solid var(--bg)}
.cx-demo .cxd-jr-ev.cxd-checkpoint .cxd-jr-ev-dot{background:var(--purple);width:13px;height:13px;left:-24px;top:8px;box-shadow:0 0 0 3px rgba(var(--purple-rgb),.25)}
.cx-demo .cxd-jr-ev.cxd-decision .cxd-jr-ev-dot{background:var(--accent)}
.cx-demo .cxd-jr-ev.cxd-fact .cxd-jr-ev-dot{background:var(--green)}
.cx-demo .cxd-jr-ev.cxd-todo .cxd-jr-ev-dot{background:var(--yellow)}
.cx-demo .cxd-jr-ev-title{font-size:12.5px;color:var(--text)}
.cx-demo .cxd-jr-ev.cxd-checkpoint .cxd-jr-ev-title{font-weight:700;color:var(--purple)}
.cx-demo .cxd-jr-ev-meta{font-size:10.5px;color:var(--muted);font-family:var(--mono);margin-top:1px}
.cx-demo .cxd-jr-ev-type{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.05em;padding:0 6px;border-radius:9px;
  border:1px solid var(--border);color:var(--muted);text-transform:uppercase;margin-right:6px;vertical-align:1px}
.cx-demo .cxd-tm-author-badge{font-size:9.5px;color:var(--muted);background:rgba(var(--gray-rgb),.12);
  border-radius:10px;padding:1px 7px;font-family:var(--mono)}
.cx-demo .cxd-sec-help{background:none;border:1px solid var(--border);color:var(--muted);border-radius:50%;
  width:16px;height:16px;line-height:1;font-size:10px;font-weight:700;cursor:pointer;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;padding:0}
.cx-demo .cxd-sec-help:hover{border-color:var(--accent);color:var(--accent)}

/* narrow-screen rules of the app, applied when the demo frame is phone-sized */
.cx-demo.cxd-compact .cxd-pg-title{font-size:17px}
.cx-demo.cxd-compact .cxd-pg-card{padding:14px}
.cx-demo.cxd-compact .cxd-mg-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.cx-demo.cxd-compact .cxd-mg-g{grid-template-columns:96px minmax(0,1fr)}
.cx-demo.cxd-compact #cxd-tl-wrap{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
.cx-demo.cxd-compact #cxd-tl-side{overflow:visible}
.cx-demo.cxd-compact #cxd-tl-list{max-height:70vh}
.cx-demo.cxd-compact #cxd-jr-top{grid-template-columns:1fr}
.cx-demo.cxd-compact #cxd-hdr #cxd-hdr-menu{display:flex}
.cx-demo.cxd-compact #cxd-fnav{position:absolute;left:64px;top:54px;bottom:30px;width:260px;max-width:calc(100vw - 80px);z-index:40;
    transform:translateX(calc(-100% - 64px));transition:transform .18s ease;box-shadow:none}
.cx-demo.cxd-compact #cxd-fnav-scrim{position:absolute;left:0;right:0;top:54px;bottom:30px;background:var(--overlay);z-index:35}
.cx-demo.cxd-compact #cxd-rail.cxd-wide{width:64px}
.cx-demo.cxd-compact #cxd-rail.cxd-wide .cxd-pjr .cxd-pnm{display:none}
.cx-demo.cxd-compact #cxd-rail.cxd-wide .cxd-pjr{padding:0}
.cx-demo.cxd-compact #cxd-rail.cxd-wide .cxd-pjr:hover,.cx-demo.cxd-compact #cxd-rail.cxd-wide .cxd-pjr.cxd-on{background:transparent}
.cx-demo.cxd-compact #cxd-rail .cxd-hx{display:none}
.cx-demo.cxd-compact #cxd-hdr .cxd-srch{min-width:0}
.cx-demo.cxd-compact #cxd-hdr{gap:8px;padding:0 10px}
.cx-demo.cxd-compact #cxd-hdr .cxd-brandx span{display:none}
.cx-demo.cxd-compact #cxd-proj-path,.cx-demo.cxd-compact #cxd-hdr .cxd-hp-sep{display:none}
.cx-demo.cxd-compact #cxd-hdr .cxd-srch{min-width:0;padding:6px 8px;margin-left:auto}
.cx-demo.cxd-compact #cxd-hdr .cxd-srch span{display:none}
.cx-demo.cxd-compact #cxd-proj-gear,.cx-demo.cxd-compact #cxd-proj-mode{display:none}
.cx-demo.cxd-compact #cxd-ftr{gap:10px;padding:0 10px}
.cx-demo.cxd-compact #cxd-ftr #cxd-ftr-agents,.cx-demo.cxd-compact #cxd-ftr #cxd-ftr-files,.cx-demo.cxd-compact #cxd-ftr #cxd-ftr-server{display:none}
.cx-demo.cxd-compact #cxd-content{padding:14px 12px;gap:14px}
.cx-demo.cxd-compact #cxd-main-body{flex-direction:column}
.cx-demo.cxd-compact #cxd-jr-wrap{flex-direction:column;height:auto;min-height:0}
.cx-demo.cxd-compact #cxd-jr-side{width:auto;min-width:0;flex:none;max-height:32vh}
.cx-demo.cxd-compact #cxd-jr-main{max-height:none;overflow:visible}
.cx-demo.cxd-compact #cxd-proj-path{display:none}
.cx-demo.cxd-compact #cxd-proj-badges{display:none}
.cx-demo.cxd-compact #cxd-content{padding:12px 8px;gap:12px}
.cx-demo.cxd-compact .cxd-card{padding:12px}
.cx-demo.cxd-compact .cxd-card .cxd-val{font-size:20px}

@keyframes cxd-release-pulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--green-rgb),.4)}50%{box-shadow:0 0 0 4px rgba(var(--green-rgb),0)}}
@keyframes cxd-tsPulse{0%,100%{opacity:.4}50%{opacity:1}}
/* ═══════════════════════════════════════════════════════════════════════════
   Frame, stage and the pieces the demo adds. Everything above this line is the
   app's own CSS; everything below is only what the demo needs around it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Site rules that would otherwise leak in (element selectors in theme.css). */
.cx-demo h1,.cx-demo h2,.cx-demo h3,.cx-demo h4,.cx-demo h5,.cx-demo h6{letter-spacing:normal;line-height:normal;text-wrap:wrap;text-transform:none;color:inherit}
.cx-demo p{margin:0}
.cx-demo a,.cx-demo a:hover{text-decoration:none}
.cx-demo svg{max-width:none}
.cx-demo code,.cx-demo pre{background:none;border:0;padding:0;border-radius:0;font:inherit;color:inherit}
.cx-demo button{border:0;font-family:inherit}
.cx-demo [hidden]{display:none !important}
.cx-demo .cxd-view,.cx-demo .cxd-pane{display:contents}
.cx-demo :focus{outline:0}
.cx-demo :focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}
.cx-demo #cxd-fn-nav .cxd-tab:focus-visible{outline-offset:-2px}

/* Frame: keeps the app's aspect ratio; the stage inside is scaled to fit it. */
.cx-demo{
  position:relative;display:block;width:100%;max-width:1040px;margin-left:auto;margin-right:auto;
  aspect-ratio:1040/680;overflow:hidden;border-radius:12px;isolation:isolate;
  background:var(--bg);color:var(--text);
  box-shadow:0 0 0 1px var(--border),0 24px 60px rgba(0,0,0,.35);
  text-align:left;font-family:var(--font);font-size:13px;line-height:normal;letter-spacing:normal;
  -webkit-text-size-adjust:100%;
}
:root[data-theme="light"] .cx-demo{box-shadow:0 0 0 1px var(--border),0 18px 44px rgba(31,35,40,.16)}
.cx-demo .cxd-stage{
  all:initial;
  position:absolute;left:0;top:0;width:1040px;height:680px;
  transform-origin:0 0;transform:scale(var(--cxd-s,.5));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px;line-height:normal;
  text-align:left;font-weight:400;letter-spacing:normal;
}
.cx-demo #cxd-content{overscroll-behavior:contain}

/* Phone-sized frame: no scaling, no project rail, the sidebar is a drawer (the app's own
   narrow layout, only simplified: the rail is dropped and the drawer starts at the edge). */
.cx-demo.cxd-compact{aspect-ratio:auto;height:560px;max-height:calc(100vh - 80px);min-height:420px}
.cx-demo.cxd-compact .cxd-stage{width:100%;height:100%;transform:none}
.cx-demo.cxd-compact #cxd-rail{display:none}
.cx-demo.cxd-compact #cxd-fnav{position:absolute;left:0;top:54px;bottom:30px;width:250px;max-width:86%;z-index:40;transform:translateX(-102%);transition:transform .18s ease;box-shadow:none}
.cx-demo.cxd-compact.cxd-fnav-open #cxd-fnav{transform:none;box-shadow:0 14px 34px var(--shadow-c)}
.cx-demo.cxd-compact #cxd-fnav-scrim{position:absolute;left:0;right:0;top:54px;bottom:30px;background:var(--overlay);z-index:35}
.cx-demo.cxd-compact.cxd-fnav-open #cxd-fnav-scrim{display:block}
.cx-demo.cxd-compact #cxd-hdr #cxd-help-btn,.cx-demo.cxd-compact #cxd-hdr #cxd-notif-btn,.cx-demo.cxd-compact #cxd-hdr .cxd-notif-wrap{display:none}
.cx-demo.cxd-compact #cxd-hdr .cxd-srch{margin-left:auto}
.cx-demo.cxd-compact #cxd-hdr .cxd-hpath{flex:1 1 auto}
.cx-demo.cxd-compact #cxd-ftr .cxd-r{margin-left:auto}
.cx-demo.cxd-compact #cxd-help-link{display:none}
.cx-demo.cxd-compact #cxd-tl-side{display:none}
.cx-demo.cxd-compact #cxd-tl-kinds .cxd-tl-chip:nth-child(n+8){display:none}

/* Sidebar entries that exist in the app but not in the demo still look and behave like the real ones. */
.cx-demo #cxd-fn-nav .cxd-tab{cursor:pointer}
.cx-demo [data-cxd-go-link],.cx-demo .cxd-more,.cx-demo .cxd-pg-links a,.cx-demo .cxd-pg-btn,.cx-demo .cxd-us-main-line a{cursor:pointer}
.cx-demo .cxd-pg-links a{text-decoration:none}

/* Page for the parts of the app the demo does not include. */
.cx-demo .cxd-soon-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px 22px}
.cx-demo .cxd-soon-card p{font-size:12.5px;line-height:1.55;color:var(--muted);max-width:520px}
.cx-demo .cxd-soon-card .cxd-pg-btn{padding:6px 14px;font-size:12px;border-color:var(--accent);color:var(--accent)}
.cx-demo .cxd-soon-card .cxd-pg-btn:hover{background:var(--accent-bg)}

/* The theme button shows the theme you switch TO (sun in dark, moon in light), like the app. */
.cx-demo #cxd-thm-btn .cxd-i-moon{display:none}
:root[data-theme="light"] .cx-demo #cxd-thm-btn .cxd-i-sun{display:none}
:root[data-theme="light"] .cx-demo #cxd-thm-btn .cxd-i-moon{display:block}

@media (prefers-reduced-motion:reduce){
  .cx-demo *,.cx-demo *::before,.cx-demo *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}
@media print{.cx-demo{box-shadow:none;border:1px solid #999}}

/* Demo-only: the Overview cards fit three to a row at the demo's width (the app's own minimum is 230px). */
.cx-demo .cxd-pg-grid{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}

/* Demo-only: the app stacks the Journal's checkpoint and delta cards below 1100px, and the demo window is 1040px. */
.cx-demo #cxd-jr-top{grid-template-columns:1fr}
/* The Timeline's filter column scrolls in a window this short instead of squeezing its lists. */
.cx-demo #cxd-tl-side>*{flex-shrink:0}