/* Human-Centric Physical AI Framework — native rebuild of the Qian Group diagram
   Vertical rhythm is calibrated to 正确展示.png: every padding / row height below
   is the reference value expressed as a fraction of the 2163px diagram width,
   re-scaled to the 1512px content width of .wrap.wide at a 1800px viewport. */
.wrap.wide{max-width:1640px}
.hcf-sec .sub{margin-top:18px;font-size:clamp(16px,1.4vw,20px);color:var(--ink-2)}

/* two-column stage grid — L1 + L2 on the first row, the L2 OUTPUT strip across,
   then L3 + L4 on the last row. Mirrors the layering of the source diagram.
   Reference split: col1 29.0% · gap 1.3% · col2 69.7% */
.fx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:20px;align-items:stretch}
.fx-c1{grid-column:1}
.fx-c2{grid-column:2}
.fx-out{grid-column:1 / -1}
.fx-c3{grid-column:1}
.fx-c4{grid-column:2}
.fx-col{border:1px solid var(--line-2);background:var(--paper);padding:28px 24px 26px;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.fx-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:20px}
.fx-h i{font-style:normal;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--paper);display:grid;place-items:center;font-family:var(--f-display);font-size:17px;flex:none}
.fx-h b{font-size:clamp(22px,2vw,30px);font-weight:500;line-height:1.25}
.fx-h small{flex-basis:100%;font-size:15px;color:var(--ink-3);padding-left:40px;line-height:1.5}
.fx-note{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3);margin:-4px 0 16px;text-transform:uppercase}
.fx-c2{background:color-mix(in oklab,var(--accent) 7%,var(--paper));border-color:color-mix(in oklab,var(--accent) 45%,transparent)}
.fx-c2 .fx-h{margin-bottom:34px}
.fx-c4{border-color:color-mix(in oklab,var(--accent-2) 45%,transparent);padding-bottom:16px}
.fx-c4 .fx-h i{background:var(--accent-2)}

.fx-mods{display:flex;flex-direction:column;gap:12px;flex:1}
.fx-mod{all:unset;box-sizing:border-box;cursor:pointer;flex:1;display:grid;grid-template-columns:68px 1fr auto;align-items:center;gap:14px;padding:12px 16px;border:1px solid var(--line-2);background:var(--bg);font-size:18px;transition:all .25s}
.fx-mod .ic{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--accent);border:1px solid color-mix(in oklab,var(--accent) 50%,transparent);text-align:center;padding:8px 0}
.fx-mod em{font-style:normal;font-family:var(--f-mono);font-size:16px;color:var(--accent)}
.fx-mod:not(.on){opacity:.4;background:transparent;border-style:dashed}
.fx-mod:not(.on) em{color:var(--accent-2)}
.fx-mod:hover{border-color:var(--accent)}

/* reference split: Stage A 1fr · gap 1.2% · Stage B 1.25fr */
.fx-ab{display:grid;grid-template-columns:1fr 1.25fr;gap:18px;flex:1}
.fx-a,.fx-b{position:relative;border:1px solid var(--line-2);background:var(--paper);padding:43px 18px 14px;display:flex;flex-direction:column}
.fx-stage{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--paper);font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;padding:5px 14px;white-space:nowrap}
.fx-a h4,.fx-b h4{font-size:20px;font-weight:600;text-align:center}
.fx-a h4{margin-bottom:18px}
.fx-b h4{margin-bottom:55px}
.fx-fms{display:flex;flex-direction:column;gap:11px;flex:1}
.fx-fm{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border:1px solid var(--line-2);background:var(--bg);font-size:16px;transition:all .3s;position:relative}
.fx-fm i{width:14px;height:14px;border-radius:50%;border:1px solid var(--accent);position:relative;flex:none}
.fx-fm i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent);animation:fxBlink 1.6s infinite}
.fx-fm:not(.on){opacity:.35}
.fx-fm:not(.on) i::after{animation:none;background:transparent}
.fx-fm::after{content:"";position:absolute;right:-13px;top:50%;width:12px;height:1px;background:var(--accent)}
@keyframes fxBlink{50%{opacity:.25}}
.fx-foot{font-size:13px;color:var(--ink-3);text-align:center;margin-top:8px;line-height:1.5}
.fx-cube{position:relative;height:103px}
.fx-cube canvas{position:absolute;inset:0;width:100%;height:100%}
.fx-ops{text-align:center;font-weight:600;font-size:18px;color:var(--accent);margin:55px 0 18px;letter-spacing:.04em}
.fx-sub2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:auto}
.fx-sub2 > div{border:1px solid var(--line);padding:17px;background:var(--bg)}
.fx-sub2 b{display:block;font-size:14px;font-weight:600;margin-bottom:11px}
.fx-sub2 small{display:block;font-family:var(--f-mono);font-size:10px;color:var(--ink-3);margin-top:11px}
.fx-mask{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fx-mask span{display:flex;flex-direction:column;align-items:center;padding:10px 0;border:1px solid var(--line-2);font-family:var(--f-mono);font-size:10px;color:var(--ink-3);background:var(--paper);transition:all .25s}
.fx-mask span b{font-size:16px;margin:4px 0 0;color:var(--accent)}
.fx-mask span.off b{color:var(--accent-2)}
.fx-mask span.off{border-style:dashed}
.fx-rel{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:13px;color:var(--ink-2)}
.fx-rel li{display:flex;align-items:center;gap:6px}
.fx-rel i{display:inline-block;width:18px;height:0;border-top:1.5px solid var(--ink)}
.fx-rel i.d{border-top-style:dashed}
.fx-rel i.t{border-top:1.5px dotted var(--accent)}

.fx-out{display:flex;flex-direction:row;align-items:center;gap:18px;text-align:left;padding:0 2px}
.fx-arrow{flex:1 1 34%;min-width:56px;height:2px;background:var(--accent);position:relative;margin:0 6px}
.fx-arrow::after{content:"";position:absolute;right:-2px;top:-5px;border-left:10px solid var(--accent);border-top:6px solid transparent;border-bottom:6px solid transparent}
.fx-arrow::before{content:"";position:absolute;left:0;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--accent);animation:fxRun 2s linear infinite}
@keyframes fxRun{from{left:0}to{left:calc(100% - 6px)}}
.fx-rep{flex:0 1 auto;background:var(--ink);color:var(--paper);padding:26px 24px}
.fx-rep b{font-size:20px;font-weight:600;line-height:1.4}
.fx-out p{flex:0 1 420px;font-family:var(--f-serif);font-style:italic;font-size:14px;color:var(--ink-3);line-height:1.55}

.fx-states{display:flex;flex-direction:column;gap:10px}
.fx-states div{padding:13px 18px;border:1px solid var(--line-2);background:var(--bg);font-size:18px;transition:all .3s}
.fx-states div.hl{background:var(--accent-soft);border-color:var(--accent)}
.fx-mini{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--accent);margin:10px 0 12px;text-transform:uppercase}
.fx-ctx{display:flex;flex-wrap:wrap;gap:6px}
.fx-ctx span{font-size:14px;padding:8px 12px;border:1px dashed var(--line-2);color:var(--ink-2)}

.fx-c4 .fx-mini{color:var(--accent-2);margin-top:0}
.fx-blk{border:1px solid var(--line);padding:15px;margin-bottom:10px;background:var(--bg)}
.fx-blk.hot{background:color-mix(in oklab,var(--accent-2) 8%,var(--paper));border-color:color-mix(in oklab,var(--accent-2) 40%,transparent)}
.fx-grid{display:grid;gap:6px}
.fx-grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fx-grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fx-grid span{min-width:0;overflow-wrap:anywhere;word-break:break-word;hyphens:auto;font-size:15px;line-height:1.3;padding:11px 8px;text-align:center;border:1px solid var(--line);background:var(--paper)}

.fx-steps{display:grid;grid-template-columns:1fr 40px 1.4fr 40px 1fr;align-items:stretch;margin-top:28px}
.fx-steps > div{border:1px solid var(--line-2);background:var(--paper);padding:20px 22px}
.fx-steps > div.mid{background:var(--ink);color:var(--paper);border-color:var(--ink);text-align:center;--ink-2:rgba(250,246,238,.7)}
.fx-steps > div.mid .mono{color:var(--gold)}
.fx-steps b{display:block;font-size:19px;font-weight:600;margin:8px 0 6px}
.fx-steps p{font-size:14px;color:var(--ink-2)}
.fx-steps p.ops{font-size:18px;color:var(--gold);font-weight:600;margin-bottom:4px}
.fx-steps > i{font-style:normal;display:grid;place-items:center;color:var(--accent);font-size:22px}

.fx-photo{display:grid;grid-template-columns:1.6fr 1fr;gap:0;margin-top:28px;border:1px solid var(--line-2);background:var(--paper)}
.fx-photo .ph{aspect-ratio:16/8}
.fx-photo .cap{padding:32px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.fx-photo .cap p{font-size:16px;color:var(--ink-2)}
.fx-photo .btn{align-self:flex-start}
.fx-lightbox{position:fixed;inset:0;z-index:2000;background:rgba(34,26,19,.86);display:none;place-items:center;padding:4vw}
.fx-lightbox.show{display:grid}
.fx-lightbox img{max-width:100%;max-height:90vh;box-shadow:0 30px 80px rgba(0,0,0,.4);background:#fff}
.fx-lightbox button{all:unset;cursor:pointer;position:absolute;top:20px;right:28px;color:#fff;font-size:34px}

@media (max-width:1400px){
  .fx{grid-template-columns:minmax(0,1fr) minmax(0,2.4fr)}
  .fx-out p{flex-basis:300px}
}
@media (max-width:1000px){
  .fx{grid-template-columns:1fr}
  .fx-c1,.fx-c2,.fx-c3,.fx-c4{grid-column:auto}
  .fx-out{flex-direction:column;align-items:stretch;text-align:center;gap:12px}
  .fx-out .fx-arrow{flex:none;width:100%}
  .fx-out p{flex:none}
}
@media (max-width:900px){
  .fx-col{padding:22px 16px 20px}
  .fx-h{margin-bottom:16px}
  .fx-c2 .fx-h{margin-bottom:18px}
  .fx-note,.fx-sub2 small,.fx-mask span{font-size:11px}
  .fx-ab{grid-template-columns:1fr;gap:14px}
  /* the reference-calibrated whitespace around the cube is a desktop proportion */
  .fx-a,.fx-b{padding:20px 16px 16px}
  .fx-a h4,.fx-b h4{margin-bottom:14px}
  .fx-cube{height:92px}
  .fx-ops{margin:16px 0 14px}
  .fx-foot{margin-top:14px}
  .fx-mods{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .fx-mod{padding:11px 12px;grid-template-columns:52px 1fr auto;gap:10px;font-size:16px}
  .fx-fm::after{display:none}
  .fx-grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-grid span{padding:12px 8px;font-size:14px}
  .fx-blk{padding:13px;margin-bottom:10px}
  .fx-states div{padding:14px 16px;font-size:17px}
  .fx-rep{padding:20px 18px}
  .fx-steps{grid-template-columns:1fr}
  .fx-steps > i{transform:rotate(90deg);height:36px}
  .fx-photo{grid-template-columns:1fr}
}
@media (max-width:560px){
  /* at ~150px per cell the two-up modality list wrapped every label */
  .fx-mods{grid-template-columns:1fr}
  .fx-mod{grid-template-columns:48px 1fr auto;gap:9px}
  .fx-sub2{grid-template-columns:1fr}
  .fx-c4 .fx-h b{min-width:0;font-size:clamp(18px,5.5vw,24px);line-height:1.25}
  html[data-lang="zh"] .fx-c4 .fx-h b .zh{display:inline-block;white-space:nowrap}
  .fx-c4 .fx-grid.g4,.fx-c4 .fx-grid.g2{grid-template-columns:1fr}
}