/* A white wireframe cube: stable HTML labels and resolution-independent SVG edges. */
#commercial-loop { height:auto; min-height:100svh; overflow:visible; }
#commercial-loop .canvas-card {
  display:grid; grid-template-rows:auto auto minmax(0,1fr) auto;
  width:100%; height:auto; min-height:100svh;
  padding:clamp(24px,3.7vh,40px) 5vw clamp(22px,3vh,32px);
  overflow:visible; background:var(--paper,#fafaf8); color:var(--ink,#0a0a0a);
}
#commercial-loop .chrome-min { margin-bottom:clamp(16px,2.4vh,26px); }
#commercial-loop .loop-heading { display:flex; flex-direction:column; gap:8px; }
#commercial-loop .loop-case-name { color:var(--accent,#002fa8); font-size:13px; font-weight:650; line-height:1.4; letter-spacing:.15em; }
#commercial-loop .loop-title { margin:0; font-family:var(--sans),var(--sans-zh); font-size:clamp(36px,4.25vw,66px); font-weight:300; line-height:1.12; letter-spacing:-.035em; text-wrap:balance; }
#commercial-loop .loop-diagram { display:grid; grid-template-columns:minmax(260px,3.1fr) minmax(0,6.9fr); align-items:center; gap:clamp(24px,3vw,46px); min-width:0; min-height:0; margin-top:clamp(24px,3vh,36px); }
#commercial-loop button { font-family:var(--sans),var(--sans-zh); -webkit-tap-highlight-color:transparent; }
#commercial-loop .loop-steps { display:flex; flex-direction:column; min-width:0; }
#commercial-loop .loop-step { position:relative; display:grid; grid-template-columns:35px minmax(0,1fr) 14px; align-items:start; gap:12px; width:100%; padding:clamp(16px,2.2vh,24px) 5px clamp(16px,2.2vh,24px) 0; border:0; border-top:1px solid #d9d9d6; border-radius:0; background:transparent; color:var(--ink,#0a0a0a); text-align:left; cursor:pointer; transition:color .3s ease; }
#commercial-loop .loop-step:last-child { border-bottom:1px solid #d9d9d6; }
#commercial-loop .loop-step::before { position:absolute; top:-1px; left:0; width:100%; height:2px; background:var(--accent,#002fa8); content:""; transform:scaleX(0); transform-origin:left; transition:transform .4s ease; }
#commercial-loop .loop-step-number { padding-top:6px; color:#85857e; font-size:14px; line-height:1.5; letter-spacing:.07em; font-variant-numeric:tabular-nums; }
#commercial-loop .loop-step-copy { display:flex; flex-direction:column; gap:8px; }
#commercial-loop .loop-step-title { font-size:clamp(24px,1.95vw,28px); font-weight:600; line-height:1.3; letter-spacing:-.02em; }
#commercial-loop .loop-step-detail { color:#6e6e68; font-size:clamp(16px,1.27vw,18px); font-weight:400; line-height:1.55; }
#commercial-loop .loop-step-arrow { padding-top:6px; color:var(--accent,#002fa8); font-size:18px; opacity:0; transition:opacity .3s ease; }
#commercial-loop .loop-step[aria-pressed="true"]::before { transform:scaleX(1); }
#commercial-loop .loop-step[aria-pressed="true"] .loop-step-number,
#commercial-loop .loop-step[aria-pressed="true"] .loop-step-title { color:var(--accent,#002fa8); }
#commercial-loop .loop-step[aria-pressed="true"] .loop-step-arrow,
#commercial-loop .loop-step:hover .loop-step-arrow { opacity:1; }

#commercial-loop .loop-model { width:100%; min-width:0; margin:0; }
#commercial-loop .loop-viewport { position:relative; width:100%; height:clamp(470px,58svh,650px); background:transparent; color:#262e3b; isolation:isolate; }
#commercial-loop .loop-linework,
#commercial-loop .loop-joints,
#commercial-loop .loop-model-labels { position:absolute; inset:0; width:100%; height:100%; }
#commercial-loop .loop-linework { display:block; overflow:visible; pointer-events:none; }
#commercial-loop .loop-linework path { fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
#commercial-loop .loop-edge { stroke:#657286; stroke-width:1.3; stroke-dasharray:1; stroke-dashoffset:0; opacity:1; }
#commercial-loop .loop-construction { stroke:#a6b3c5; stroke-width:.9; stroke-dasharray:3 5; opacity:.6; }
#commercial-loop .loop-flow { stroke-width:2.3; stroke-dasharray:24 100; stroke-dashoffset:24; opacity:0; }
#commercial-loop .loop-joints,
#commercial-loop .loop-model-labels { pointer-events:none; }
#commercial-loop .loop-joint { position:absolute; width:0; height:0; }
#commercial-loop .loop-halo { position:absolute; top:-15px; left:-15px; width:30px; height:30px; border:1px solid rgba(86,133,204,.34); border-radius:50%; background:rgba(137,178,236,.1); transform:scale(.85); transition:transform .45s ease,background .45s ease,border-color .45s ease; }
#commercial-loop .loop-dot { position:absolute; top:-4px; left:-4px; width:8px; height:8px; border-radius:50%; background:#6b99d9; transition:background .4s ease; }
#commercial-loop .loop-joint.is-active .loop-halo { transform:scale(1.12); background:rgba(108,159,231,.12); border-color:#3f75c2; }
#commercial-loop .loop-joint.is-active .loop-dot { background:#002fa8; }
#commercial-loop .loop-node-label { position:absolute; display:flex; flex-direction:column; gap:7px; width:148px; padding:7px 0; border:0; background:none; color:#202833; text-align:center; transform:translate(-50%,-50%); cursor:pointer; pointer-events:auto; transition:color .3s ease; }
#commercial-loop .loop-node-label[data-loop-step="0"] { left:50%; top:9.5%; }
#commercial-loop .loop-node-label[data-loop-step="1"] { left:87.5%; top:50%; }
#commercial-loop .loop-node-label[data-loop-step="2"] { left:50%; top:90.5%; }
#commercial-loop .loop-node-label[data-loop-step="3"] { left:12.5%; top:50%; }
#commercial-loop .loop-node-kicker { display:flex; justify-content:center; align-items:center; gap:9px; color:#748093; font-size:11px; line-height:1.3; font-weight:500; letter-spacing:.09em; }
#commercial-loop .loop-node-number { color:#5a76a0; font-variant-numeric:tabular-nums; }
#commercial-loop .loop-node-title { font-size:clamp(19px,1.6vw,25px); font-weight:500; line-height:1.35; letter-spacing:.01em; }
#commercial-loop .loop-node-label[aria-pressed="true"],
#commercial-loop .loop-node-label:hover { color:#002fa8; }
#commercial-loop .loop-node-label[aria-pressed="true"] .loop-node-kicker { color:#5a76a0; }
#commercial-loop .loop-model-core { position:absolute; left:43.4%; top:57.3%; z-index:1; display:flex; flex-direction:column; gap:9px; align-items:center; justify-content:center; width:calc(var(--loop-face,220px) * .82); padding:14px 0; color:#002fa8; text-align:center; pointer-events:none; transform:translate(-50%,-50%); }
#commercial-loop .loop-model-core::before { content:""; position:absolute; inset:-12px -16px; z-index:-1; background:radial-gradient(ellipse,var(--paper,#fafaf8) 44%,transparent 74%); }
#commercial-loop .loop-core-name { font-size:clamp(18px,calc(var(--loop-face,220px) * .14),42px); line-height:1.25; font-weight:500; letter-spacing:.04em; }
#commercial-loop .loop-core-caption { color:#7a8799; font-size:clamp(8px,calc(var(--loop-face,220px) * .045),12px); letter-spacing:.18em; line-height:1.4; }
#commercial-loop .loop-source { margin-top:clamp(18px,2.5vh,26px); color:#767670; font-size:clamp(13px,1.05vw,15px); font-weight:500; line-height:1.55; letter-spacing:.035em; }
#commercial-loop .is-static .loop-flow { opacity:0!important; }
html[lang="en"] #commercial-loop .loop-node-english { display:none; }
html[lang="en"] #commercial-loop .loop-node-title { font-size:18px; }
html[lang="en"] #commercial-loop .loop-core-name { font-size:clamp(11px,calc(var(--loop-face,220px) * .085),23px); letter-spacing:.02em; }
#commercial-loop .loop-step:focus-visible { outline:2px solid var(--accent,#002fa8); outline-offset:4px; }
#commercial-loop .loop-node-label:focus-visible,
#commercial-loop .loop-viewport:focus-visible { outline:2px solid #9fc3ff; outline-offset:4px; }
#commercial-loop .loop-viewport:focus-visible { outline-offset:-5px; }

@media (min-width:1001px) and (max-height:800px) {
  #commercial-loop .canvas-card { padding-top:22px; padding-bottom:20px; }
  #commercial-loop .chrome-min { margin-bottom:14px; }
  #commercial-loop .loop-heading { gap:6px; }
  #commercial-loop .loop-title { font-size:clamp(36px,3.5vw,48px); }
  #commercial-loop .loop-case-name { font-size:12px; }
  #commercial-loop .loop-diagram { margin-top:24px; }
  #commercial-loop .loop-step { padding-top:15px; padding-bottom:15px; }
  #commercial-loop .loop-source { margin-top:18px; }
}
@media (min-width:1001px) and (max-width:1100px) {
  #commercial-loop .loop-diagram { grid-template-columns:minmax(250px,3.4fr) minmax(0,6.6fr); gap:20px; }
  #commercial-loop .loop-step { grid-template-columns:27px minmax(0,1fr) 10px; gap:8px; }
  #commercial-loop .loop-node-label { width:100px; }
  #commercial-loop .loop-node-title { font-size:18px; }
  #commercial-loop .loop-node-kicker { font-size:10px; gap:5px; letter-spacing:0; }
}
@media (max-width:1000px) {
  #commercial-loop .canvas-card { display:block; min-height:100svh; padding:34px 6vw 30px; }
  #commercial-loop .chrome-min { margin-bottom:27px; padding-right:0; }
  #commercial-loop .loop-heading { gap:9px; }
  #commercial-loop .loop-title { max-width:14em; font-size:clamp(31px,7.4vw,48px); line-height:1.18; }
  #commercial-loop .loop-case-name { font-size:12px; }
  #commercial-loop .loop-diagram { display:flex; flex-direction:column; align-items:stretch; gap:24px; margin-top:24px; }
  #commercial-loop .loop-model { order:-1; }
  #commercial-loop .loop-viewport { height:420px; }
  #commercial-loop .loop-node-label { width:104px; gap:7px; }
  #commercial-loop .loop-node-label[data-loop-step="0"] { left:25%; top:11%; }
  #commercial-loop .loop-node-label[data-loop-step="1"] { left:75%; top:11%; }
  #commercial-loop .loop-node-label[data-loop-step="2"] { left:75%; top:89%; }
  #commercial-loop .loop-node-label[data-loop-step="3"] { left:25%; top:89%; }
  #commercial-loop .loop-node-kicker { font-size:10px; gap:7px; letter-spacing:.04em; }
  #commercial-loop .loop-node-title { font-size:18px; }
  #commercial-loop .loop-model-core { gap:7px; }
  #commercial-loop .loop-core-caption { letter-spacing:.13em; }
  html[lang="en"] #commercial-loop .loop-node-title { font-size:15px; }
  #commercial-loop .loop-step { grid-template-columns:36px minmax(0,1fr) 14px; gap:12px; padding:19px 4px 19px 0; }
  #commercial-loop .loop-step-title { font-size:20px; }
  #commercial-loop .loop-step-detail { font-size:15px; }
  #commercial-loop .loop-source { margin-top:25px; font-size:12px; }
}
@media (prefers-reduced-motion:reduce) {
  #commercial-loop *, #commercial-loop *::before, #commercial-loop *::after { transition:none!important; }
}