/* ============ 演示组件库：全部用原生元素重绘，不含任何原图 ============ */
.demo{flex:0 1 560px;display:flex;flex-direction:column;gap:11px;justify-content:center;min-width:0}
.demo.w7{flex-basis:700px}.demo.w9{flex-basis:900px}.demo.wf{flex:1 1 auto}
.dcap{font-size:12px;color:var(--muted);line-height:1.6;letter-spacing:.01em}
.dtag{font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--acc)}

/* 海报画布（3:4）—— 多数演示的底座；内部字号用 cqw 随画布自动缩放 */
.pz{position:relative;background:#fff;border:1px solid var(--rule);box-shadow:0 18px 40px -26px rgba(0,0,0,.32);
  overflow:hidden;container-type:inline-size;flex:0 0 auto}
.pz.h6{height:600px;width:450px}
.pz.h5{height:490px;width:368px}
.pz.h4{height:400px;width:300px}
.pz.h3{height:330px;width:248px}
.pz.hf{height:100%;width:100%}
.pz .pad{position:absolute;inset:8%}
.blk{position:absolute}
.b1{font-size:9cqw;font-weight:800;line-height:.98;letter-spacing:-.035em}
.b2{font-size:4.4cqw;font-weight:700;line-height:1.2}
.b3{font-size:2.6cqw;font-weight:400;line-height:1.65;color:var(--ink2)}
.b4{font-size:1.9cqw;font-weight:600;color:var(--muted);letter-spacing:.08em}
.gh{background:#EAE8E4;color:#B7B2AA}
.mut{color:#C3BFB8}

/* 参考线：与文字同在 .pad 坐标系内，靠负 inset 出血到画布边缘（由 .pz 裁切） */
.mx{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .7s var(--ease) .5s}
.mx.on{opacity:1}
.vl{position:absolute;top:-500px;bottom:-500px;width:1px;background:var(--acc)}
.hl{position:absolute;left:-500px;right:-500px;height:1px;background:var(--acc)}
/* 粗栏线：2px 黑；细列线用 --blue 单像素，两种精度必须在图面上就能分辨 */
.vl.ink{width:2px;background:var(--ink)}
.hl.ink{height:2px;background:var(--ink)}
.lbl{position:absolute;font-size:2.2cqw;font-weight:800;color:var(--acc);letter-spacing:.03em;font-variant-numeric:tabular-nums}
.rule1{position:absolute;background:var(--ink)}

/* 线绑在文字上：底部即基线轨道，"坐在线上"由构造保证
   注意：类名不可用 .row —— .ratio/.modulus 已用 .row 作比例条行 */
.rail{position:absolute;display:inline-block;line-height:1.12;padding-bottom:.04em;
  border-bottom:1px solid var(--acc);white-space:nowrap}
.rail.ink{border-bottom-color:var(--ink)}
.rail.blk{display:block;white-space:normal}
/* 从元素自身左右缘拉通高竖线 */
.edge{position:absolute;display:inline-block;white-space:nowrap}
.edge::before,.edge::after{content:"";position:absolute;top:-500px;bottom:-500px;width:1px;background:var(--acc)}
.edge::before{left:0}
.edge::after{right:0}
/* 基线 vs 字框底 对照 */
.bl{position:relative;display:inline-block;line-height:1.2}
.bl .ln{position:absolute;left:-14%;right:-14%;height:1px;background:var(--acc)}
.bl .ln.box{bottom:0}
.bl .ln.base{bottom:.31em}
.bl .gap{position:absolute;right:-30%;bottom:0;height:.31em;width:1px;background:var(--muted)}

/* 小件 */
.dot{display:inline-grid;place-items:center;border-radius:50%;background:var(--acc);color:#fff;font-weight:800;
  width:7cqw;height:7cqw;font-size:2.4cqw}
.pill{display:inline-block;padding:.7cqw 2.2cqw;border-radius:99px;background:var(--ink);color:#fff;font-weight:700;font-size:2.4cqw}
.bar-code{display:flex;gap:1.5px;align-items:flex-end}
.bar-code i{display:block;width:2px;background:var(--ink)}

/* 网格线逐条画入 */
.slide.active .draw .vl{animation:drawline .5s var(--ease) backwards;transform-origin:top}
.slide.active .draw .hl{animation:drawlineX .5s var(--ease) backwards;transform-origin:left}
@keyframes drawline{from{transform:scaleY(0);opacity:0}to{transform:none;opacity:1}}
@keyframes drawlineX{from{transform:scaleX(0);opacity:0}to{transform:none;opacity:1}}

/* 撤线检验 */
.stripline{display:flex;flex-direction:column;gap:10px;align-items:center}
.stripline .sw{display:flex;border:1px solid var(--ink);font-size:11px;font-weight:800;align-self:flex-start}
.stripline .sw b{padding:5px 12px;cursor:pointer;color:var(--ink2);transition:background .25s var(--ease),color .25s var(--ease)}
.stripline .sw b.on{background:var(--ink);color:#fff}
.stripline .pz .mx{opacity:1;transition:opacity .55s var(--ease)}
.stripline.off .pz .mx{opacity:0}

/* 对照排布 */
.cmp,.band{display:flex;gap:18px;align-items:center;justify-content:center;flex:1;min-height:0}
.cmp>div,.band>figure{display:flex;flex-direction:column;gap:9px;align-items:center;min-width:0;margin:0;text-align:left;width:auto}
.band>figure>*,.cmp>div>*{max-width:100%}
.cmp .dcap,.band .dcap{font-size:11.5px;color:var(--muted);line-height:1.55;max-width:368px}
.cmp .dtag,.band .dtag{align-self:flex-start}

/* 字号阶梯 */
.ladder{display:flex;flex-direction:column;justify-content:center;flex:1;gap:0;padding:0 26px;width:100%}
.ladder .r{display:flex;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--rule)}
.ladder .r:last-child{border-bottom:0}
.ladder .k{flex:0 0 70px;font-size:11px;font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums}
.ladder .rt{flex:0 0 58px;font-size:10px;color:var(--muted)}
.ladder .v{font-weight:800;line-height:1;letter-spacing:-.03em;white-space:nowrap}

/* 比例条 */
.ratio{display:flex;flex-direction:column;gap:16px;justify-content:center;flex:1;padding:0 4px;width:100%}
.ratio .row{display:flex;align-items:center;gap:12px}
.ratio .nm{flex:0 0 104px;font-size:12px;font-weight:700;color:var(--ink2)}
.ratio .track{flex:1;display:flex;height:36px;border:1px solid var(--rule)}
.ratio .a{background:var(--ink);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:800;min-width:0}
.ratio .b{background:#DDD9D3;color:var(--ink2);display:grid;place-items:center;font-size:10px;font-weight:800;min-width:0}
.ratio .val{flex:0 0 66px;font-size:11px;font-weight:800;color:var(--acc);text-align:right;font-variant-numeric:tabular-nums}

/* 单位推导 */
.units{display:flex;flex-direction:column;justify-content:center;gap:22px;flex:1;padding:0 20px;width:100%}
.units .st{display:flex;align-items:center;gap:16px}
.units .n{flex:0 0 30px;height:30px;display:grid;place-items:center;border:1.5px solid var(--ink);border-radius:50%;font-size:13px;font-weight:800}
.units .txt{font-size:14px;line-height:1.55;color:var(--ink2)}
.units .txt b{display:block;font-size:17px;color:var(--ink);margin-bottom:3px}
.slide.active .units .st{animation:pop .5s var(--ease) backwards}
.units .st:nth-child(2){animation-delay:.16s}.units .st:nth-child(3){animation-delay:.32s}.units .st:nth-child(4){animation-delay:.48s}
@keyframes pop{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

/* 符号库 */
.syms{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);width:100%}
.syms>div{background:#fff;padding:16px 18px;display:flex;flex-direction:column;gap:7px;justify-content:center;min-height:96px}
.syms .s{font-size:20px;font-weight:800;line-height:1.15}
.syms .t{font-size:11px;color:var(--muted);line-height:1.5}

/* 模数几何 */
.geo{position:relative;background:#fff;border:1px solid var(--rule);overflow:hidden;height:520px;width:520px}
.geo svg{position:absolute;inset:0;width:100%;height:100%}
.slide.active .geo .anim{stroke-dasharray:1400;stroke-dashoffset:1400;animation:dash 1.6s var(--ease) .4s forwards}
@keyframes dash{to{stroke-dashoffset:0}}
.geo .cap1{position:absolute;left:8%;top:6%;font-size:15px;font-weight:800}
.geo .cap2{position:absolute;right:8%;bottom:7%;font-size:11px;color:var(--muted);text-align:right;line-height:1.5}

/* 图片占位（色块模拟"上虚下实"） */
.ph{position:absolute;inset:0;overflow:hidden}
.ph .sky{position:absolute;top:0;left:0;right:0;height:66%;background:linear-gradient(#B9D3E8,#DEEBF3)}
.ph .sub{position:absolute;bottom:0;left:0;right:0;height:34%;background:linear-gradient(#5E6D7A,#3B4650)}
.ph .eye{position:absolute;left:56%;bottom:9%;width:9cqw;height:9cqw;border-radius:50%;background:#EFEAE3}

/* 页眉页脚演示条 */
.bars{display:flex;flex-direction:column;gap:12px;justify-content:center;flex:1;width:100%}
.bars .b{border:1px solid var(--rule);background:#fff;padding:11px 14px;display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700}
.bars .b .mid{flex:1;text-align:center;color:var(--ink2);font-weight:600;font-size:10px;letter-spacing:.1em}
.bars .b .rt{margin-left:auto;text-align:right}
.bars .b .big{font-size:22px;font-weight:800;letter-spacing:-.02em}
.bars .b .micro{font-size:8px;letter-spacing:.06em;color:var(--muted);font-weight:500;line-height:1.35}

/* 竖排 */
.vtext{writing-mode:vertical-rl;text-orientation:upright;font-family:var(--serif)}

/* 检查表 */
.chkl{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;flex:1;align-content:center;width:100%}
.chkg{padding:14px 0;border-bottom:1px solid var(--rule)}
.chkg .h{font-size:17px;font-weight:800;margin-bottom:8px}
.chkg .h i{font-style:normal;color:var(--acc);margin-right:9px}
.chkg li{list-style:none;font-size:13.5px;line-height:1.85;color:var(--ink2);padding-left:22px;position:relative}
.chkg li:before{content:"";position:absolute;left:0;top:11px;width:10px;height:10px;border:1.5px solid var(--ink2)}
.slide.active .chkg li{animation:pop .4s var(--ease) backwards}
.chkg li:nth-child(1){animation-delay:.05s}.chkg li:nth-child(2){animation-delay:.1s}.chkg li:nth-child(3){animation-delay:.15s}
.chkg li:nth-child(4){animation-delay:.2s}.chkg li:nth-child(5){animation-delay:.25s}.chkg li:nth-child(6){animation-delay:.3s}

/* ============ 鹰角通行证复刻（纯原生元素，不含任何图片） ============ */
.hg{position:relative;container-type:inline-size;background:#0E0E0E;color:#fff;overflow:hidden;
  border-radius:1.6cqw;width:300px;height:478px;flex:0 0 auto;box-shadow:0 20px 44px -26px rgba(0,0,0,.6)}
.hg.h400{width:250px;height:398px}
.hg .hairL{position:absolute;left:0;top:0;bottom:0;width:15.5%;border-right:1px solid rgba(255,255,255,.45);
  display:flex;align-items:center;justify-content:center}
.hg .hairL b{writing-mode:vertical-rl;transform:rotate(180deg);font-size:5.2cqw;font-weight:800;letter-spacing:.06em;white-space:nowrap}
.hg .strip{position:absolute;right:0;top:0;bottom:0;width:8%;border-left:1px solid rgba(255,255,255,.28);
  display:flex;align-items:center;justify-content:center}
.hg .strip i{writing-mode:vertical-rl;font-size:1.5cqw;font-style:normal;letter-spacing:.14em;color:rgba(255,255,255,.5);white-space:nowrap}
.hg .art{position:absolute;left:15.5%;right:8%;top:5%;height:56%;overflow:hidden;
  background:linear-gradient(158deg,#9CBECD 0%,#5E7E93 34%,#2F3F4B 68%,#14191E 100%)}
.hg .art::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 2px,transparent 2px 9px)}
.hg .art .ph{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);font-size:2.4cqw;letter-spacing:.2em;
  color:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.4);padding:.5em .9em;white-space:nowrap}
.hg .serial{position:absolute;left:17.5%;top:6.5%;font-size:1.7cqw;letter-spacing:.1em;color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.45);padding:.25em .5em}
.hg .band{position:absolute;left:15.5%;right:8%;top:62%;bottom:4%;
  display:flex;flex-direction:column;gap:1.4cqw}
.hg .nmrow{display:flex;align-items:baseline;gap:.55em;white-space:nowrap;width:100%}
.hg .nm{font-size:5.2cqw;font-weight:800;letter-spacing:-.01em;line-height:1}
.hg .nm2{font-size:2cqw;font-weight:700;color:#8FD3E6;letter-spacing:.05em}
.hg .clause{font-size:1.3cqw;line-height:1.8;letter-spacing:.08em;color:rgba(255,255,255,.55);width:100%}
.hg .bar{height:7cqw;width:46%;flex:0 0 auto;
  background:repeating-linear-gradient(90deg,#fff 0 1px,#0000 1px 3px,#fff 3px 5px,#0000 5px 6px,#fff 6px 7px,#0000 7px 10px)}
.hg .barlbl{font-size:1.2cqw;letter-spacing:.2em;color:rgba(255,255,255,.6);margin-right:11cqw}
.hg .ibox{position:absolute;right:0;bottom:0;width:9cqw;height:9cqw;border:1px solid rgba(255,255,255,.6);
  display:grid;place-items:center;font-size:4cqw;font-weight:700}
.hg .mark{position:absolute;right:0;top:0;font-size:2.2cqw;font-weight:800;letter-spacing:.02em;color:#fff;text-align:right;line-height:1.15}
.hg .mark small{display:block;font-size:1.3cqw;font-weight:500;letter-spacing:.16em;color:#8FD3E6}

/* 音律联觉式：巨型手写背景字被卡边裁切 */
.hg.fest{background:linear-gradient(170deg,#243039,#0F1418)}
.hg.fest .script{position:absolute;left:-14%;top:2%;width:128%;font-family:var(--serif);font-style:italic;
  font-size:26cqw;font-weight:800;line-height:.82;color:#E8DE2C;letter-spacing:-.03em;white-space:nowrap;opacity:.92}
.hg.fest .script.s2{top:26%;font-size:15cqw;opacity:.5}
.hg.fest .dots{position:absolute;inset:0}
.hg.fest .dots i{position:absolute;border-radius:50%;background:#E8DE2C}
.hg.fest .logo{position:absolute;left:6%;top:4%;font-size:2.6cqw;font-weight:800;letter-spacing:.04em}
.hg.fest .micro{position:absolute;left:6%;top:9.5%;font-size:1.25cqw;line-height:1.6;letter-spacing:.16em;color:rgba(255,255,255,.72)}
.hg.fest .fig{position:absolute;left:20%;top:14%;width:60%;height:52%;border-radius:1.5cqw;overflow:hidden;
  background:linear-gradient(160deg,#C9D8DE 0%,#7E93A2 40%,#33414C 78%,#171D23 100%)}
.hg.fest .fig::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 2px,transparent 2px 9px)}
.hg.fest .fig .ph{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:2.2cqw;letter-spacing:.2em;
  color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.45);padding:.45em .8em;white-space:nowrap;z-index:2}
.hg.fest .info{position:absolute;left:6%;bottom:15%;width:70%}
.hg.fest .yr{font-size:6cqw;font-weight:800;line-height:1}
.hg.fest .yrsub{font-size:1.25cqw;letter-spacing:.18em;line-height:1.5;color:rgba(255,255,255,.65)}
.hg.fest .op{font-size:7cqw;font-weight:800;line-height:1.05;margin-top:.8cqw;letter-spacing:-.01em}
.hg.fest .sn{font-size:1.5cqw;letter-spacing:.14em;color:rgba(255,255,255,.72);margin-top:.4cqw}
.hg.fest .role{font-size:1.7cqw;font-weight:800;letter-spacing:.2em;margin-top:.5cqw}
.hg.fest .icons{position:absolute;left:6%;bottom:6%;display:flex;gap:1.4cqw}
.hg.fest .icons i{width:5cqw;height:5cqw;border:1px solid rgba(255,255,255,.65);display:grid;place-items:center;
  font-style:normal;font-size:2.2cqw}
.hg.fest .pill{position:absolute;right:5%;bottom:17%;font-size:1.5cqw;font-weight:800;letter-spacing:.06em;
  border:1px solid rgba(255,255,255,.7);border-radius:99px;padding:.5em 1em;background:rgba(0,0,0,.35)}
.hg.fest .foot{position:absolute;left:0;right:0;bottom:0;height:3.4cqw;
  background:linear-gradient(90deg,#3FBF6A,#37A9D8);display:flex;align-items:center;padding:0 2cqw}
.hg.fest .foot span{font-size:1.05cqw;letter-spacing:.1em;color:rgba(0,0,0,.66);font-weight:700}

/* 编号标注点 */
.mk{position:absolute;width:4.4cqw;height:4.4cqw;min-width:17px;min-height:17px;border-radius:50%;background:#0B7C74;
  color:#fff;font-size:2cqw;font-weight:800;display:grid;place-items:center;z-index:4;box-shadow:0 0 0 2px rgba(255,255,255,.85)}

/* ============ 字体搭配 / 拆标 / 构件 等新增演示 ============ */
.f-song{font-family:var(--serif)}
.f-hei{font-family:var(--sans);font-weight:800}
.f-black{font-family:var(--sans);font-weight:900}
.f-kai{font-family:"Kaiti SC","STKaiti",KaiTi,var(--serif)}
.f-round{font-family:"Yuanti SC","PingFang SC",var(--sans);font-weight:700}
.f-sans{font-family:var(--sans)}
.f-slab{font-family:Georgia,"Times New Roman",serif}
.f-mono{font-family:"SF Mono",Consolas,"Courier New",monospace}
.f-thin{font-weight:200}.f-lt{font-weight:300}.f-rg{font-weight:400}.f-bd{font-weight:700}.f-xb{font-weight:900}

/* 配对卡 */
.pcard{background:var(--card);border:1px solid var(--rule);padding:20px 22px;width:100%;display:flex;flex-direction:column;gap:6px}
.pcard .zh{font-size:30px;line-height:1.1;letter-spacing:.02em}
.pcard .en{font-size:26px;line-height:1.1}
.pcard .meta{font-size:11px;color:var(--muted);letter-spacing:.04em;margin-top:6px;line-height:1.5}
.pcard .meta b{color:var(--acc);font-weight:800}
.pcard.no{border-top:3px solid var(--muted)}
.pcard.yes{border-top:3px solid var(--acc)}
.verdict{font-size:12px;font-weight:800;letter-spacing:.08em}
.verdict.ok{color:var(--acc)}.verdict.bad{color:#B0413E}

/* 构件网格 */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);width:100%}
.cgrid>div{background:#fff;padding:14px;display:flex;flex-direction:column;gap:9px;justify-content:space-between;min-height:132px}
.cgrid .cn{font-size:11px;font-weight:800;letter-spacing:.04em}
.cgrid .cd{font-size:10px;color:var(--muted);line-height:1.5}
.cbox{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px}
/* 构件本体 */
.k-linebundle{width:100%;display:flex;flex-direction:column;gap:3px}
.k-linebundle i{display:block;height:1px;background:var(--ink)}
.k-dots{display:flex;gap:6px}
.k-dots i{width:5px;height:5px;border-radius:50%;background:var(--ink)}
.k-cross{position:relative;width:76%;height:26px;border:1px solid var(--ink)}
.k-cross i{position:absolute}
.k-cross i:before,.k-cross i:after{content:"";position:absolute;background:var(--acc)}
.k-cross i:before{left:-4px;top:-7px;width:1px;height:15px}
.k-cross i:after{top:-4px;left:-7px;height:1px;width:15px}
.k-cross i:nth-child(1){left:0;top:0}
.k-cross i:nth-child(2){right:0;top:0}
.k-cross i:nth-child(3){left:0;bottom:0}
.k-cross i:nth-child(4){right:0;bottom:0}
.k-xframe{position:relative;width:76%;height:34px;border:1px solid var(--ink);overflow:hidden}
.k-xframe:before,.k-xframe:after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--rule)}
.k-xframe:before{transform:rotate(28deg);transform-origin:center}
.k-xframe:after{transform:rotate(-28deg);transform-origin:center}
.k-pillrow{display:flex;gap:5px;align-items:center}
.k-pillrow i{padding:2px 8px;border-radius:99px;background:var(--ink);color:#fff;font-size:9px;font-style:normal}
.k-stack{display:flex;flex-direction:column;gap:2px;width:100%}
.k-stack i{display:block;height:2px;background:var(--ink)}
.k-stack i:nth-child(2){width:78%}.k-stack i:nth-child(3){width:88%}.k-stack i:nth-child(4){width:64%}

/* 轴线配重 */
.axl{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--acc)}
.axl:after{content:"轴线";position:absolute;top:2%;left:3px;font-size:2.2cqw;color:var(--acc);font-weight:800}

/* 拆标条 */
.frac{display:flex;flex-direction:column;gap:9px;justify-content:center;flex:1;width:100%}
.frac .r{display:flex;align-items:center;gap:12px}
.frac .lb{flex:0 0 74px;font-size:12px;font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums}
.frac .tr{flex:1;height:20px;position:relative;background:#EAE8E4}
.frac .tr i{position:absolute;left:0;top:0;bottom:0;background:var(--ink)}
.frac .tr i.over{background:var(--acc)}
.frac .sx{flex:0 0 118px;font-size:11px;color:var(--ink2);font-weight:600}
.frac .tiny{color:#B0413E;font-weight:800}

/* ============ 瑞士式对齐：出处卡 + 左缘轴示范 ============ */
.swiss{display:flex;flex-direction:column;gap:16px;flex:1;min-height:0;align-items:stretch}
.bk{background:var(--paper);border:1px solid var(--rule);padding:16px 22px 15px;
    display:flex;flex-direction:column;gap:15px}
.bk-f{font-size:16px;font-weight:600;line-height:1.15;color:var(--ink)}
.bk-n{font-size:38px;font-weight:800;line-height:.96;letter-spacing:-.024em;color:var(--ink)}
.bk-d{font-size:11px;letter-spacing:.05em;color:var(--muted);margin-top:7px}
.bk-b{display:flex;justify-content:space-between;align-items:baseline;gap:24px}
.bk-t{font-size:15px;font-weight:700;line-height:1.45;color:var(--ink)}
.bk-y{font-size:22px;font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums}
.pz.hw{height:300px;width:430px}
.bk-s{font-family:var(--serif);font-size:3.05cqw;font-weight:400;line-height:1.62;color:var(--ink)}
.rag{border-left:2px solid var(--acc);padding-left:3.2cqw}