/* =========================================================================
   ZMJ 原型评审面板（需求说明 / 页面导航 / 页内标注 / 演示开关）—— 样式
   ------------------------------------------------------------------------
   原型脚手架，不是产品界面：这里的深色取值与标注色只在面板内成立，不属于任何一端的 Token。
   必须以外链 <link> 引入（demo.js 同理），不要内联进页面——check-design-assertions 会按
   产品 Token 扫页面 HTML 本身（含内联 <style> 与 <script>），把面板配色全部判成越界。
   真机 / 联调删掉 demo.css + demo.js 两行引用即为生产态。
   ========================================================================= */
#demoWrap{display:contents;--demo-pri:#1890FF;--demo-pri-hover:#40A9FF}
html[data-zmj-target="web"] #demoWrap{--demo-pri:#1677FF;--demo-pri-hover:#4096FF}

/* 隔离产品页面的全局样式：页面里的 td{color} p{margin} button{height} 之类不许渗进面板。
   面板里的元素先回到浏览器默认（:where 不加权重，整条只有一个类的权重），再由下面的面板规则逐项设定——这两条必须放在最前 */
.demo-wrap :where(div,span,p,a,b,i,em,code,pre,ul,ol,li,table,thead,tbody,tr,th,td,h1,h2,h3,h4,blockquote,hr,img,details,summary,button,select,option,label,aside,nav,section){all:revert}
.demo-wrap :where(*),.demo-wrap :where(*)::before,.demo-wrap :where(*)::after{box-sizing:border-box}

/* 悬浮图标组：面板收起时的唯一入口（axhub 边缘工具栏样式）——顶部拖动条 + 需求说明 / 页面导航 / 页内标注 / 演示开关。
   白底实色 + 描边 + 阴影，深色桌面底与白色 Web 页上都看得清；不做半透明细条，会被当成「面板没渲染」。
   贴边一侧不画边框、外侧两角圆；拖动中四角圆、浮起。left / right / top 由 demo.js 按停靠位置写 */
.demo-fab{position:fixed;top:45%;right:0;z-index:2002;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:2px 4px 6px;border:1px solid rgba(39,39,42,.16);border-right:0;border-radius:12px 0 0 12px;background:#FFFFFF;
  box-shadow:0 6px 16px rgba(15,23,42,.12),0 1px 3px rgba(15,23,42,.08);touch-action:none;user-select:none;-webkit-user-select:none;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  transition:transform .18s ease,opacity .15s ease}
.demo-fab:empty{display:none}
.demo-fab[data-side="left"]{border-right:1px solid rgba(39,39,42,.16);border-left:0;border-radius:0 12px 12px 0}
.demo-fab.demo-drag{border:1px solid rgba(39,39,42,.16);border-radius:12px;cursor:grabbing;transition:none;
  box-shadow:0 14px 32px rgba(15,23,42,.24),0 3px 8px rgba(15,23,42,.12)}
body.demo-open .demo-fab{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility 0s linear .15s}
html.demo-dragging,html.demo-dragging *{cursor:grabbing!important;user-select:none!important;-webkit-user-select:none!important}
.demo-grip{position:relative;display:flex;align-items:center;justify-content:center;width:30px;height:14px;padding:0;border:0;
  border-radius:4px;background:transparent;color:#A1A1AA;cursor:grab}
.demo-grip svg{width:14px;height:14px}
.demo-grip:hover{color:#52525B}
.demo-fb{position:relative;display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;
  border-radius:8px;background:transparent;color:#3F3F46;cursor:pointer;transition:background .15s,color .15s}
.demo-fb svg{width:16px;height:16px}
.demo-fb:hover,.demo-fb[data-fab="set"][aria-expanded="true"]{background:rgba(0,0,0,.06);color:#18181B}
.demo-fb[aria-pressed="true"]{background:rgba(24,144,255,.12);color:var(--demo-pri)}
html[data-zmj-target="web"] .demo-fb[aria-pressed="true"]{background:rgba(22,119,255,.1)}
.demo-fab :focus-visible{outline:2px solid var(--demo-pri);outline-offset:1px}
/* 文字提示：悬停 / 键盘聚焦时出在图标组外侧（停右边朝左、停左边朝右）；拖动中、浮层打开时不出 */
.demo-fab [data-tip]::after{content:attr(data-tip);position:absolute;top:50%;right:calc(100% + 10px);padding:5px 8px;border-radius:6px;
  background:rgba(0,0,0,.85);color:#FFFFFF;font-size:12px;font-weight:400;line-height:1.4;white-space:nowrap;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 6px 16px rgba(0,0,0,.16);
  transform:translateY(-50%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s}
.demo-fab[data-side="left"] [data-tip]::after{right:auto;left:calc(100% + 10px)}
@media (hover:hover){.demo-fab [data-tip]:hover::after{opacity:1;visibility:visible;transition-delay:.2s}}
.demo-fab [data-tip]:focus-visible::after{opacity:1;visibility:visible}
.demo-fab.demo-drag [data-tip]::after,.demo-fab [aria-expanded="true"]::after{display:none}

/* 人像图标打开的「角色切换 / 演示开关」浮层：白底卡片，贴在图标组外侧；与面板底部是同一组开关 */
.demo-fly{position:fixed;top:0;left:0;z-index:2003;display:flex;flex-direction:column;gap:8px;width:240px;max-height:calc(100vh - 16px);
  overflow-y:auto;padding:10px 12px 12px;border:1px solid rgba(39,39,42,.12);border-radius:10px;background:#FFFFFF;color:#3F3F46;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;font-size:12px;line-height:1.5;
  box-shadow:0 6px 16px rgba(15,23,42,.12),0 3px 6px -4px rgba(15,23,42,.16),0 9px 28px 8px rgba(15,23,42,.05)}
.demo-fly[hidden],body.demo-open .demo-fly{display:none}
.demo-fly :focus-visible{outline:2px solid var(--demo-pri);outline-offset:1px}

/* 主题只作用于评审面板，产品页面、业务状态与身份色保持独立。 */
.demo-rail{--demo-bg:#0A1F33;--demo-text:#D9E4F0;--demo-sub:#C3D2E0;--demo-muted:#A7B9CC;--demo-dim:#9BAFC4;
  --demo-heading:#FFFFFF;--demo-accent:#69C0FF;--demo-rule:#627F9E;--demo-line:rgba(255,255,255,.16);--demo-line-strong:rgba(255,255,255,.36);
  --demo-hover:rgba(255,255,255,.07);--demo-active:rgba(24,144,255,.16);--demo-active-border:rgba(24,144,255,.4);
  --demo-pre:rgba(0,0,0,.3);--demo-error:#FFA39E;--demo-error-title:#FF7875;color-scheme:dark}
#demoWrap[data-theme="light"] .demo-rail{--demo-bg:#FFFFFF;--demo-text:#21364B;--demo-sub:#3E5267;--demo-muted:#52667C;--demo-dim:#5F7287;
  --demo-heading:#142C43;--demo-accent:#1459A6;--demo-rule:#A5B6C7;--demo-line:#D4DDE6;--demo-line-strong:#91A6BC;
  --demo-hover:#F2F6FA;--demo-active:#E9F2FC;--demo-active-border:#8AB8E9;--demo-pre:#F2F6FA;
  --demo-error:#A52121;--demo-error-title:#A52121;color-scheme:light}

.demo-rail{position:fixed;top:0;right:0;bottom:0;z-index:2001;display:flex;flex-direction:column;width:340px;
  max-width:88vw;background:var(--demo-bg);border-left:1px solid var(--demo-line);color:var(--demo-text);line-height:1.5;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  transform:translateX(100%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}
body.demo-open .demo-rail{transform:none;visibility:visible;transition:transform .2s ease;
  box-shadow:-8px 0 28px rgba(6,20,34,.28)}
/* 点编号定位到被面板盖住的元素时，面板临时让开约 2 秒 */
body.demo-open.demo-peek .demo-rail{transform:translateX(100%);box-shadow:none}
.demo-rail button,.demo-rail select{font-family:inherit}
.demo-rail :focus-visible{outline:2px solid var(--demo-accent);outline-offset:1px}

/* App：屏宽够时把面板并排放在手机框右侧，两者互不遮挡（手机框由 body 居中）。
   Web：面板始终覆盖在页面上，不推开正文——台账宽度不能因评审面板而变。 */
@media (min-width:1180px){
  html:not([data-zmj-target="web"]) body.demo-open{padding-right:340px}
  html:not([data-zmj-target="web"]) body.demo-open.demo-wide{padding-right:560px}
}
/* 加宽：读 PRD、表格类文档时用 */
body.demo-wide .demo-rail{width:560px}

.demo-hd{position:relative;flex:none;display:flex;align-items:center;gap:4px;padding:8px 132px 8px 10px;
  border-bottom:1px solid var(--demo-line)}
.demo-t{min-height:28px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--demo-dim);
  font-size:13px;font-weight:600;cursor:pointer}
.demo-t:hover{color:var(--demo-sub)}
.demo-t.on{background:var(--demo-active);color:var(--demo-accent)}
.demo-ic{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:28px;
  height:28px;border:0;border-radius:6px;background:transparent;color:var(--demo-dim);cursor:pointer}
.demo-ic:hover{background:var(--demo-hover);color:var(--demo-heading)}
.demo-ic svg{width:16px;height:16px}
.demo-w{right:40px}
.demo-w svg{width:14px;height:14px}

.demo-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 12px 16px}
.demo-sp-t{padding:12px 0 2px;font-size:15px;font-weight:700;line-height:1.35;color:var(--demo-heading)}
.demo-sp-s{padding-bottom:2px;font-size:12px;color:var(--demo-dim)}
.demo-g{padding:14px 0 5px;font-size:11px;font-weight:600;letter-spacing:.4px;color:var(--demo-dim)}
.demo-p{margin:0;font-size:12px;line-height:1.65;color:var(--demo-muted)}
/* 配置有误 / 渲染失败：红框写在正文顶部，其余照常可用 */
.demo-err{margin:12px 0 4px;padding:8px 10px;border:1px solid rgba(255,120,117,.45);border-radius:8px;
  background:rgba(255,77,79,.1);color:var(--demo-error);font-size:12px;line-height:1.6}
.demo-err b{display:block;color:var(--demo-error-title);font-weight:700}
.demo-err ul{margin:4px 0;padding-left:16px}
.demo-err span{display:block;color:var(--demo-muted)}
.demo-ul{margin:0;padding:0;list-style:none}
.demo-ul li{position:relative;padding:0 0 6px 12px;font-size:12px;line-height:1.65;color:var(--demo-sub)}
.demo-ul li::before{content:"";position:absolute;top:8px;left:2px;width:4px;height:4px;border-radius:50%;
  background:var(--demo-rule)}
.demo-d{padding:6px 0 7px;border-bottom:1px solid var(--demo-hover)}
.demo-d:last-child{border-bottom:0}
.demo-d b{display:block;font-size:12px;font-weight:700;color:var(--demo-accent)}
.demo-d span{display:block;margin-top:2px;font-size:12px;line-height:1.65;color:var(--demo-sub)}
.demo-d .demo-ul{margin-top:4px}

/* 附加分组的折叠项（如按分区列「字段取值来源」：340px 宽塞不下整张对照表） */
.demo-fold{border-bottom:1px solid var(--demo-hover)}
.demo-fold:last-child{border-bottom:0}
.demo-fold>summary{display:flex;align-items:center;gap:6px;padding:7px 0;list-style:none;font-size:12px;
  font-weight:600;color:var(--demo-sub);cursor:pointer}
.demo-fold>summary::-webkit-details-marker{display:none}
.demo-fold>summary::before{content:"›";display:inline-block;width:10px;color:var(--demo-dim);transition:transform .15s}
.demo-fold[open]>summary{color:var(--demo-accent)}
.demo-fold[open]>summary::before{transform:rotate(90deg)}
.demo-fold-b{padding:0 0 8px 16px}

.demo-i{display:block;width:100%;padding:7px 10px;border:1px solid transparent;border-radius:8px;background:transparent;
  color:var(--demo-text);text-align:left;text-decoration:none;cursor:pointer}
.demo-i b em{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding:0 5px;border-radius:4px;
  background:var(--demo-hover);color:var(--demo-muted);font-size:10px;font-style:normal;font-weight:500;vertical-align:1px}
.demo-i b em svg{width:10px;height:10px}
.demo-i-na{cursor:default}
.demo-i-na:hover{background:transparent}
.demo-i-na b{color:var(--demo-muted)}
.demo-lone{margin-top:8px}
.demo-i b{display:block;font-size:13px;font-weight:600;line-height:1.4}
.demo-i span{display:block;margin-top:1px;font-size:11px;line-height:1.4;color:var(--demo-dim)}
.demo-i:hover{background:var(--demo-hover)}
.demo-i.on{background:var(--demo-active);border-color:var(--demo-active-border)}
.demo-i.on b{color:var(--demo-accent)}

.demo-ft{flex:none;display:flex;flex-direction:column;gap:8px;
  padding:10px 12px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--demo-line)}
.demo-ft:empty{display:none}
.demo-ft .demo-g{padding:0}
.demo-sw{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:30px;
  padding:0;border:0;background:transparent;color:var(--demo-text);font-size:12px;text-align:left;cursor:pointer}
.demo-sw .knob{position:relative;flex:none;width:34px;height:20px;border-radius:10px;
  background:var(--demo-line);transition:background .18s}
.demo-sw .knob::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#FFFFFF;transition:transform .18s}
.demo-sw[aria-pressed="true"] .knob{background:var(--demo-pri)}
.demo-sw[aria-pressed="true"] .knob::after{transform:translateX(14px)}
.demo-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--demo-muted)}
.demo-row>label{flex:none;min-width:64px}
.demo-row select{flex:1;height:28px;padding:0 6px;border:1px solid var(--demo-line);border-radius:6px;
  background:var(--demo-hover);color:var(--demo-text);font-size:12px}
.demo-row select option{color:#203046}
/* 同一组开关放进白底浮层时换浅色取值 */
.demo-fly .demo-g{padding:0;color:#71717A}
.demo-fly .demo-sw{color:#27272A}
.demo-fly .demo-sw .knob{background:rgba(0,0,0,.25)}
.demo-fly .demo-sw[aria-pressed="true"] .knob{background:var(--demo-pri)}
.demo-fly .demo-row{color:#52525B}
.demo-fly .demo-row select{border-color:#D4D4D8;background:var(--demo-heading);color:#27272A}
/* 浮层里的角色：选项平铺成一列，点一下即切，当前项主色 + 勾 */
.demo-roles{display:flex;flex-direction:column;gap:2px;margin:-4px -6px 2px}
.demo-roles button{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;padding:0 8px;border:0;
  border-radius:6px;background:transparent;color:#27272A;font-family:inherit;font-size:13px;text-align:left;cursor:pointer}
.demo-roles button:hover{background:rgba(0,0,0,.05)}
.demo-roles button[aria-pressed="true"]{background:rgba(24,144,255,.1);color:var(--demo-pri);font-weight:600}
html[data-zmj-target="web"] .demo-roles button[aria-pressed="true"]{background:rgba(22,119,255,.08)}
.demo-roles button[aria-pressed="true"]::after{content:"✓";font-weight:700}

/* 页面导航：可折叠 / 嵌套分组、文档阅读 */
.demo-grp>summary{display:flex;align-items:center;gap:6px;padding:12px 0 5px;list-style:none;font-size:11px;
  font-weight:600;letter-spacing:.4px;color:var(--demo-dim);cursor:pointer}
.demo-grp>summary::-webkit-details-marker{display:none}
.demo-grp>summary::before{content:"›";display:inline-block;width:8px;font-size:13px;transition:transform .15s}
.demo-grp[open]>summary::before{transform:rotate(90deg)}
.demo-grp>summary:hover{color:var(--demo-muted)}
.demo-cnt{margin-left:auto;font-weight:400;letter-spacing:0}
.demo-grp .demo-grp{margin-left:10px}
.demo-back{display:inline-flex;align-items:center;gap:2px;margin:10px 0 0 -4px;padding:2px 6px 2px 2px;border:0;border-radius:6px;
  background:transparent;color:var(--demo-accent);font-size:12px;cursor:pointer}
.demo-back:hover{background:var(--demo-hover)}
.demo-back svg{width:14px;height:14px}
.demo-doc{padding-top:6px}

/* 需求说明：类别锚点 + 条目编号（「显示页内标注」开关在面板底部演示开关里） */
.demo-kinds{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
.demo-kd{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border:1px solid var(--demo-line);
  border-radius:11px;background:transparent;color:var(--demo-sub);font-family:inherit;font-size:11px;cursor:pointer}
.demo-kd i{width:8px;height:8px;border-radius:50%;background:var(--k)}
.demo-kd em{color:var(--demo-dim);font-style:normal}
.demo-kd:hover{border-color:var(--demo-line-strong)}
.demo-no{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-right:6px;padding:0 4px;
  border:0;border-radius:9px;background:var(--k);color:#FFFFFF;font-family:inherit;font-size:11px;font-weight:700;line-height:1;
  vertical-align:1px;cursor:pointer}
.demo-no:hover{box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.demo-ul li.demo-n{padding-left:0}
.demo-ul li.demo-n::before{display:none}
.demo-rail [data-row]{border-radius:6px;transition:background .3s}
.demo-rail [data-row].demo-hit{background:var(--demo-active)}
.demo-rail [data-row].demo-miss{background:rgba(255,77,79,.14)}
.demo-rail [data-row].demo-miss::after{content:"当前状态下该元素未渲染";display:block;margin-top:2px;font-size:11px;color:var(--demo-error-title)}
.demo-seg{display:flex;flex-wrap:wrap;width:max-content;max-width:100%;margin-top:6px;border:1px solid var(--demo-line);
  border-radius:6px;overflow:hidden}
.demo-seg button{min-height:24px;padding:0 9px;border:0;border-left:1px solid var(--demo-line);background:transparent;
  color:var(--demo-sub);font-family:inherit;font-size:12px;cursor:pointer}
.demo-seg button:first-child{border-left:0}
.demo-seg button:hover{background:var(--demo-hover)}
.demo-seg button[aria-pressed="true"]{background:var(--demo-pri);color:#FFFFFF}
.demo-go{display:inline-block;margin-top:4px;font-size:12px;color:var(--demo-accent);text-decoration:none}
.demo-go:hover{text-decoration:underline}
.demo-imgs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.demo-imgs img{display:block;width:96px;height:64px;object-fit:cover;border:1px solid var(--demo-line);border-radius:4px}

/* Markdown 正文（条目 { md } 与导航文档） */
.demo-md{font-size:12px;line-height:1.7;color:var(--demo-sub);word-break:break-word}
.demo-d .demo-md{margin-top:2px}
.demo-d .demo-md b{display:inline;font-size:inherit;color:var(--demo-heading)}
.demo-md h1,.demo-md h2,.demo-md h3,.demo-md h4{margin:12px 0 4px;color:var(--demo-heading);font-weight:700;line-height:1.4}
.demo-md h1{font-size:15px}.demo-md h2{font-size:14px}.demo-md h3{font-size:13px}.demo-md h4{font-size:12px}
.demo-md>:first-child{margin-top:0}
.demo-md p{margin:0 0 6px}
.demo-md ul,.demo-md ol{margin:0 0 6px;padding-left:18px}
.demo-md li{margin:0 0 2px}
.demo-md b{color:var(--demo-heading)}
.demo-md a{color:var(--demo-accent)}
.demo-md code{padding:0 4px;border-radius:3px;background:var(--demo-line);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px}
.demo-md pre{margin:0 0 8px;padding:8px;border-radius:6px;background:var(--demo-pre);overflow:auto}
.demo-md pre code{padding:0;background:none}
.demo-md blockquote{margin:0 0 6px;padding:2px 0 2px 10px;border-left:3px solid var(--demo-rule);color:var(--demo-muted)}
.demo-md hr{margin:10px 0;border:0;border-top:1px solid var(--demo-line)}
.demo-md img{max-width:100%;border-radius:4px}
.demo-tbl{margin:0 0 8px;overflow-x:auto}
.demo-md table{min-width:100%;border-collapse:collapse}
.demo-md th,.demo-md td{padding:4px 8px;border:1px solid var(--demo-line);text-align:left;vertical-align:top}
.demo-md th{background:var(--demo-hover);color:var(--demo-heading);font-weight:600;white-space:nowrap}

/* 页内标注：marker 层压在面板与悬浮图标组之下，不接收指针，只有 marker 本身可点 */
.demo-mks{position:fixed;inset:0;z-index:2000;overflow:hidden;pointer-events:none}
.demo-mk{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 5px;border:2px solid #FFFFFF;border-radius:10px;background:var(--k);color:#FFFFFF;
  font:700 11px/1 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:pointer;pointer-events:auto}
.demo-mk[hidden]{display:none}
.demo-mk:hover,.demo-mk.on{box-shadow:0 0 0 3px rgba(255,255,255,.7),0 2px 8px rgba(0,0,0,.4)}
.demo-mk:focus-visible{outline:2px solid #69C0FF;outline-offset:2px}
.demo-hl{position:absolute;top:0;left:0;border:2px solid var(--k);border-radius:6px;pointer-events:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.demo-hl[hidden]{display:none}
.demo-hl.flash{animation:demo-pulse .6s ease-in-out 3}
@keyframes demo-pulse{50%{opacity:.2}}

/* 飞书胶囊占位（§22.4a）的显隐由面板开关控制；兼容 data-feishu-capsule 与旧的 .fs-capsule 写法 */
body.demo-no-capsule [data-feishu-capsule],body.demo-no-capsule .fs-capsule{display:none!important}

@media (prefers-reduced-motion:reduce){.demo-rail,.demo-fab,.demo-fb,.demo-fab [data-tip]::after,.demo-sw .knob,.demo-sw .knob::after,.demo-rail [data-row]{transition:none}.demo-hl.flash{animation:none}}

/* 面板目录锚点：只滚动面板，不筛掉正文或页面上的标注。 */
.demo-theme{right:72px;width:48px;font-size:12px;font-weight:600}
.demo-kinds{position:sticky;top:-4px;z-index:2;margin:0 -12px;padding:10px 12px;background:var(--demo-bg);border-bottom:1px solid var(--demo-line)}
.demo-kd{min-height:28px;height:auto;border-radius:6px;text-decoration:none;white-space:nowrap}
.demo-kd:hover,.demo-kd[aria-current="location"]{background:var(--demo-active);border-color:var(--demo-active-border);color:var(--demo-accent)}
.demo-kind-section{padding-top:14px;outline:none}
.demo-kind-title{display:flex;align-items:center;gap:8px;margin:0 0 3px;font-size:13px;font-weight:700;line-height:1.6;color:var(--demo-heading)}
.demo-kind-title span{font-size:11px;font-weight:400;color:var(--demo-dim)}
.demo-kind-section .demo-g{padding-top:8px;font-size:11px;letter-spacing:0}
.demo-plan{margin-top:16px;padding-top:12px;border-top:1px solid var(--demo-line);outline:none}
.demo-plan>summary{display:flex;align-items:center;gap:8px;min-height:32px;list-style:none;font-size:13px;font-weight:700;color:var(--demo-heading);cursor:pointer}
.demo-plan>summary::-webkit-details-marker{display:none}
.demo-plan>summary::before{content:"›";font-size:16px;transition:transform .15s}
.demo-plan[open]>summary::before{transform:rotate(90deg)}
.demo-plan .demo-doc{padding-top:10px}
.demo-tree-list{list-style:none;margin:0;padding:0}
.demo-tree-list>li{position:relative;margin:0;padding:0}
.demo-tree .demo-grp>summary{min-height:36px;padding:8px 0;letter-spacing:0;font-size:12px;color:var(--demo-text)}
.demo-tree .demo-grp .demo-grp{margin-left:0}
.demo-tree .demo-grp-b{margin-left:4px;padding-left:12px;border-left:1px solid var(--demo-line)}
.demo-tree .demo-i{position:relative;padding:7px 8px;margin:1px 0}
.demo-tree .demo-i::before{content:"";position:absolute;left:-13px;top:17px;width:10px;border-top:1px solid var(--demo-line)}
.demo-tree>.demo-tree-list>li>.demo-i::before{display:none}
.demo-here-note{flex:none;margin-left:2px;padding:0 4px;border-radius:3px;background:var(--demo-active);color:var(--demo-accent);font-size:10px;font-weight:500}
.demo-here-note[hidden]{display:none}
.demo-tree .demo-grp-here>summary{color:var(--demo-accent)}
#demoWrap[data-theme="light"] .demo-no:hover{box-shadow:0 0 0 2px rgba(20,89,166,.24)}
@media(prefers-reduced-motion:reduce){.demo-plan>summary::before{transition:none}}

@media print{#demoWrap{display:none}}