/* VPU & VPP IP sec2 blocks */

.ip-block--vpu-feature {
    --design-w: 393;
    --design-h: 200;
}

/* 设计稿 frame 坐标系（与 DPU 一致）
 * - scale 无 padding，原点在卡片左上角
 * - --vpu-inset = 设计稿 left:20
 * - 流式内容用 margin-left/right；全宽绝对定位块仍用设计稿 left 坐标
 * - overflow:hidden 防止块间重叠 */

.ip-block--vpu-feature .ip-block__scale,
.ip-block--vpu-decode .ip-block__scale,
.ip-block--vpu-encode .ip-block__scale,
.ip-block--vpu-rdo .ip-block__scale,
.ip-block--vpu-latency .ip-block__scale,
.ip-block--vpu-core .ip-block__scale,
.ip-block--vpu-vpp .ip-block__scale,
.ip-block--vpu-synergy .ip-block__scale {
    --vpu-inset: calc(20px * var(--scale-ratio));
    --vpu-content-w480: calc(440px * var(--scale-ratio));
    position: relative;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.ip-block--vpu-decode {
    --design-w: 320;
    --design-h: 230;
    --mobile-tile-flex: 320;
    --mobile-tile-row-sum: 610;
}

.ip-block--vpu-encode {
    --design-w: 290;
    --design-h: 230;
    --mobile-tile-flex: 290;
    --mobile-tile-row-sum: 610;
}

.ip-block--vpu-rdo,
.ip-block--vpu-latency {
    --design-w: 480;
    --design-h: 430;
}

.ip-block--vpu-core {
    --design-w: 620;
    --design-h: 190;
}

.ip-block--vpu-vpp {
    --design-w: 1600;
    --design-h: 200;
}

.ip-block--vpu-synergy {
    --design-w: 1600;
    --design-h: 120;
}

.block-note {
    margin: 0;
    font-size: calc(12px * var(--type-scale, var(--scale-ratio)));
    line-height: calc(20px * var(--type-scale, var(--scale-ratio)));
    color: #666;
    white-space: nowrap;
}

.vpu-block-head {
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: calc(8px * var(--scale-ratio));
    margin: calc(27px * var(--scale-ratio)) var(--vpu-inset) 0;
}

.vpu-block-head .block-title {
    flex-shrink: 0;
    margin: 0;
    font-size: calc(24px * var(--type-scale, var(--scale-ratio)));
    font-weight: 600;
    line-height: calc(34px * var(--type-scale, var(--scale-ratio)));
    color: #333;
}

.vpu-block-head .block-note {
    flex-shrink: 0;
    padding-bottom: calc(3px * var(--scale-ratio));
}

/* shared pill / parallel bar (inset stroke, 1:1 设计稿尺寸) */

.vpu-pill-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vpu-pill-row--core {
    gap: calc(5px * var(--scale-ratio));
}

.vpu-pill-row--vpp {
    gap: calc(10px * var(--scale-ratio));
}

.vpu-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 calc(30px * var(--scale-ratio));
    width: calc(30px * var(--scale-ratio));
    height: calc(30px * var(--scale-ratio));
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
    border-radius: calc(2.5px * var(--scale-ratio));
    background: #fff;
    box-shadow: inset 0 0 0 1px #3B72D6;
    font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
    font-weight: 400;
    line-height: 1;
    color: #3B72D6;
    white-space: nowrap;
}

.vpu-parallel-bars {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: calc(4px * var(--scale-ratio));
    vertical-align: top;
}

.vpu-parallel-bars i {
    display: block;
    flex: 0 0 calc(6px * var(--scale-ratio));
    width: calc(6px * var(--scale-ratio));
    height: calc(20px * var(--scale-ratio));
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
    border-radius: calc(1px * var(--scale-ratio));
    background: #fff;
    box-shadow: inset 0 0 0 1px #3B72D6;
}

.vpu-parallel-group {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(54px * var(--scale-ratio));
    height: calc(45px * var(--scale-ratio));
}

.vpu-parallel-group .vpu-parallel-bars {
    position: static;
    flex: 0 0 auto;
}

.vpu-parallel-group .vpu-parallel-label {
    position: static;
    margin: calc(5px * var(--scale-ratio)) 0 0;
    text-align: center;
}

.vpu-parallel-group--inline {
    flex-direction: row;
    align-items: flex-start;
    gap: calc(10px * var(--scale-ratio));
    width: auto;
    height: auto;
}

.vpu-parallel-group--inline .vpu-parallel-label {
    margin: 0;
    line-height: calc(20px * var(--type-scale, var(--scale-ratio)));
    white-space: nowrap;
}

.vpu-parallel-label {
    font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
    line-height: calc(20px * var(--type-scale, var(--scale-ratio)));
    color: #333;
    white-space: nowrap;
}

.vpu-parallel-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.vpu-parallel-row--core {
    position: absolute;
    left: calc(25px * var(--scale-ratio));
    top: calc(41px * var(--scale-ratio));
    gap: calc(30px * var(--scale-ratio));
}

.vpu-parallel-row--vpp {
    margin-top: calc(22px * var(--scale-ratio));
    gap: calc(40px * var(--scale-ratio));
}

/* feature row */

.ip-block--vpu-feature .ip-block__scale {
    padding: 0;
}

.ip-block--vpu-feature .block-title {
    margin: calc(27px * var(--scale-ratio)) 0 0 var(--vpu-inset);
    font-size: calc(24px * var(--type-scale, var(--scale-ratio)));
    font-weight: 600;
    line-height: calc(34px * var(--type-scale, var(--scale-ratio)));
    color: #333;
}

.ip-block--vpu-feature .block-desc {
    position: absolute;
    left: var(--vpu-inset);
    top: calc(71px * var(--scale-ratio));
    margin: 0;
    font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
    line-height: calc(20px * var(--type-scale, var(--scale-ratio)));
    color: #666;
}

.ip-block--vpu-feature .block-desc p {
    margin: 0;
}

.ip-block--vpu-feature .block-icon {
    position: absolute;
    right: calc(29px * var(--scale-ratio));
    bottom: calc(29px * var(--scale-ratio));
    width: calc(70.334px * var(--scale-ratio));
    height: calc(70.334px * var(--scale-ratio));
    object-fit: contain;
    pointer-events: none;
}

/* decode / encode tags
 * .ip-block ul { margin:0 } 会盖掉列表边距，须提高选择器优先级 */

.ip-block--vpu-decode .vpu-fmt-tags {
    display: grid;
    grid-template-columns: repeat(3, calc(90px * var(--scale-ratio)));
    column-gap: calc(5px * var(--scale-ratio));
    row-gap: calc(5px * var(--scale-ratio));
    margin: calc(13px * var(--scale-ratio)) var(--vpu-inset) 0;
    padding: 0;
    list-style: none;
}

.ip-block--vpu-encode .ip-block__scale {
    display: flex;
    flex-direction: column;
    padding: calc(27px * var(--scale-ratio)) var(--vpu-inset) 0;
    box-sizing: border-box;
}

.ip-block--vpu-encode .vpu-block-head {
    margin: 0;
}

.ip-block--vpu-encode .vpu-fmt-tags {
    display: flex;
    flex-wrap: wrap;
    gap: calc(10px * var(--scale-ratio));
    margin: calc(13px * var(--scale-ratio)) 0 0;
    padding: 0;
    list-style: none;
}

.ip-block--vpu-encode .vpu-fmt-tags--encode-rate {
    flex-wrap: nowrap;
    gap: calc(5px * var(--scale-ratio));
    margin-top: calc(9px * var(--scale-ratio));
    max-width: calc(250px * var(--scale-ratio));
}

.vpu-fmt-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: calc(30px * var(--scale-ratio));
    margin: 0;
    padding: 0 calc(8px * var(--scale-ratio));
    border: none;
    border-radius: calc(2.5px * var(--scale-ratio));
    background: #FAFCFD;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
    font-weight: 400;
    line-height: 1;
    color: #333;
    white-space: nowrap;
}

.vpu-fmt-tags--decode .vpu-fmt-tag {
    width: 100%;
    max-width: calc(90px * var(--scale-ratio));
}

.vpu-fmt-tags--decode .vpu-fmt-tag--solo-line {
    grid-column: 1;
    grid-row: 4;
}

.vpu-fmt-tags--encode-codec .vpu-fmt-tag {
    flex: 0 0 calc(76px * var(--scale-ratio));
    width: calc(76px * var(--scale-ratio));
}

.vpu-fmt-tags--encode-rate .vpu-fmt-tag {
    flex: 0 0 calc(46px * var(--scale-ratio));
    width: calc(46px * var(--scale-ratio));
    padding: 0;
    font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
}

.vpu-encode-section-title {
    margin: calc(17px * var(--scale-ratio)) 0 0;
    font-size: calc(16px * var(--type-scale, var(--scale-ratio)));
    font-weight: 600;
    line-height: calc(20px * var(--type-scale, var(--scale-ratio)));
    color: #333;
}

.vpu-encode-section-note {
    margin: calc(12px * var(--scale-ratio)) 0 0;
    font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
    font-weight: 400;
    line-height: calc(20px * var(--type-scale, var(--scale-ratio)));
    color: #333;
    white-space: nowrap;
}

/* .ip-block p { margin:0 } 会盖掉 encode 段落间距 */
.ip-block--vpu-encode .vpu-encode-section-title {
    margin-top: calc(17px * var(--scale-ratio));
}

.ip-block--vpu-encode .vpu-encode-section-note {
    margin-top: calc(12px * var(--scale-ratio));
}

/* RDO */

.ip-block--vpu-rdo .block-title {
    margin: calc(27px * var(--scale-ratio)) 0 0 var(--vpu-inset);
    font-size: calc(24px * var(--type-scale, var(--scale-ratio)));
    font-weight: 600;
    line-height: calc(34px * var(--type-scale, var(--scale-ratio)));
    color: #333;
}

.vpu-rdo-diagram {
    position: absolute;
    left: calc(32px * var(--scale-ratio));
    top: calc(92px * var(--scale-ratio));
    width: calc(414.583px * var(--scale-ratio));
    height: calc(283px * var(--scale-ratio));
    object-fit: contain;
    object-position: left top;
    pointer-events: none;
}

/* latency — 2×2 grid，正文区流式排列 */

.vpu-latency-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: calc(149px * var(--scale-ratio)) calc(132px * var(--scale-ratio));
    width: var(--vpu-content-w480);
    margin: calc(39px * var(--scale-ratio)) 0 0 var(--vpu-inset);
    box-sizing: border-box;
}

.vpu-latency-cell {
    position: relative;
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    padding: 0 calc(14px * var(--scale-ratio)) calc(14px * var(--scale-ratio)) 0;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.vpu-latency-cell:nth-child(2n) {
    padding-left: calc(10px * var(--scale-ratio));
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.vpu-latency-cell:nth-child(n+3) {
    padding-top: calc(19px * var(--scale-ratio));
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
}

.vpu-latency-cell:nth-child(4) {
    box-shadow: none;
}

.vpu-latency-copy {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    max-width: calc(100% - 48px * var(--scale-ratio));
    min-width: 0;
}

.vpu-latency-label {
    margin: 0;
    font-size: calc(16px * var(--type-scale, var(--scale-ratio)));
    font-weight: 600;
    line-height: calc(20px * var(--type-scale, var(--scale-ratio)));
    color: #333;
}

.vpu-latency-body {
    display: flex;
    flex-direction: column;
    gap: calc(2px * var(--scale-ratio));
    margin-top: calc(10px * var(--scale-ratio));
}

/* .ip-block p { margin:0 } 会盖掉 label margin-bottom */
.ip-block--vpu-latency .vpu-latency-label {
    margin: 0;
}

.ip-block--vpu-latency .vpu-latency-body {
    margin-top: calc(10px * var(--scale-ratio));
}

.ip-block--vpu-latency .vpu-latency-body p {
    margin: 0;
    font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
    font-weight: 400;
    line-height: calc(20px * var(--type-scale, var(--scale-ratio)));
    color: #666;
    white-space: nowrap;
}

.ip-block--vpu-latency .vpu-latency-sub {
    font-size: calc(12px * var(--type-scale, var(--scale-ratio)));
    line-height: calc(20px * var(--type-scale, var(--scale-ratio)));
    white-space: normal;
}

.vpu-latency-icon {
    position: absolute;
    object-fit: contain;
    pointer-events: none;
    right: calc(14px * var(--scale-ratio));
    bottom: calc(14px * var(--scale-ratio));
}

.vpu-latency-icon--power {
    width: calc(44.5px * var(--scale-ratio));
    height: calc(45px * var(--scale-ratio));
}

.vpu-latency-icon--frame,
.vpu-latency-icon--rate {
    width: calc(41px * var(--scale-ratio));
    height: calc(41px * var(--scale-ratio));
}

.vpu-latency-icon--gdr {
    width: calc(57.059px * var(--scale-ratio));
    height: calc(45px * var(--scale-ratio));
}

/* core config — 三列固定宽，禁止换行 */

.vpu-core-panels {
    position: relative;
    height: calc(100px * var(--scale-ratio));
    margin: calc(9px * var(--scale-ratio)) 0 0;
}

.vpu-core-panel {
    position: absolute;
    top: 0;
    width: calc(190px * var(--scale-ratio));
    height: calc(100px * var(--scale-ratio));
    box-sizing: border-box;
    border: none;
    border-radius: calc(5px * var(--scale-ratio));
    background: linear-gradient(180deg, #FAFCFD 0%, rgba(250, 252, 253, 0) 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.vpu-core-panel--big {
    left: var(--vpu-inset);
}

.vpu-core-panel--small {
    left: calc(215px * var(--scale-ratio));
}

.vpu-core-panel--parallel {
    left: calc(410px * var(--scale-ratio));
}

.vpu-core-panel-kicker {
    position: absolute;
    left: calc(10px * var(--scale-ratio));
    top: calc(28px * var(--scale-ratio));
    margin: 0;
    font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
    line-height: calc(20px * var(--type-scale, var(--scale-ratio)));
    color: #666;
    white-space: nowrap;
}

.vpu-core-panel-title {
    position: absolute;
    left: calc(10px * var(--scale-ratio));
    top: calc(7px * var(--scale-ratio));
    margin: 0;
    font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
    font-weight: 600;
    line-height: calc(20px * var(--type-scale, var(--scale-ratio)));
    color: #333;
    white-space: nowrap;
}

.vpu-core-panel-head {
    position: absolute;
    left: calc(10px * var(--scale-ratio));
    top: calc(7px * var(--scale-ratio));
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: calc(8px * var(--scale-ratio));
    max-width: calc(170px * var(--scale-ratio));
}

.vpu-core-panel-head .vpu-core-panel-title {
    position: static;
}

.vpu-core-panel-head .vpu-core-panel-note {
    position: static;
    margin: 0;
}

.vpu-core-panel-note {
    position: absolute;
    margin: 0;
    font-size: calc(12px * var(--type-scale, var(--scale-ratio)));
    line-height: calc(20px * var(--type-scale, var(--scale-ratio)));
    color: #666;
    white-space: nowrap;
}

.vpu-core-panel--big .vpu-core-panel-note {
    left: calc(76px * var(--scale-ratio));
    top: calc(30px * var(--scale-ratio));
}

.vpu-core-panel--small .vpu-core-panel-note {
    left: calc(75px * var(--scale-ratio));
    top: calc(30px * var(--scale-ratio));
}

.vpu-core-panel--big .vpu-pill-row,
.vpu-core-panel--small .vpu-pill-row {
    position: absolute;
    left: calc(10px * var(--scale-ratio));
    top: calc(60px * var(--scale-ratio));
}

/* VPP strip — 3 列 + 竖向分隔线（设计 left:533 / 1226, top:70, h:110） */

.ip-block--vpu-vpp .block-title {
    margin: calc(27px * var(--scale-ratio)) 0 0 var(--vpu-inset);
    font-size: calc(24px * var(--type-scale, var(--scale-ratio)));
    font-weight: 600;
    line-height: calc(34px * var(--type-scale, var(--scale-ratio)));
    color: #333;
}

.vpu-vpp-cols {
    display: flex;
    align-items: stretch;
    margin-top: calc(9px * var(--scale-ratio));
    min-height: calc(110px * var(--scale-ratio));
}

.vpu-vpp-col {
    box-sizing: border-box;
    min-width: 0;
}

.vpu-vpp-col--lead {
    flex: 0 0 calc(513px * var(--scale-ratio));
    padding-left: var(--vpu-inset);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
}

.vpu-vpp-col--image {
    flex: 0 0 calc(693px * var(--scale-ratio));
    padding-left: calc(31px * var(--scale-ratio));
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
}

.vpu-vpp-col--ai {
    flex: 1 1 auto;
    padding-left: calc(31px * var(--scale-ratio));
    padding-right: var(--vpu-inset);
    min-width: 0;
}

.vpu-vpp-desc {
    margin: calc(1px * var(--scale-ratio)) 0 0;
    max-width: none;
    font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
    font-weight: 400;
    line-height: calc(20px * var(--type-scale, var(--scale-ratio)));
    color: #666;
    white-space: nowrap;
}

.vpu-vpp-config {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: calc(61px * var(--scale-ratio));
    margin-top: calc(17px * var(--scale-ratio));
}

.vpu-vpp-config-col {
    flex: 0 0 auto;
    white-space: nowrap;
}

.vpu-vpp-config-head,
.vpu-vpp-section-head {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: calc(4px * var(--scale-ratio));
}

.vpu-vpp-config-label,
.vpu-vpp-section-title {
    margin: 0;
    font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
    font-weight: 600;
    line-height: calc(20px * var(--type-scale, var(--scale-ratio)));
    color: #333;
    white-space: nowrap;
}

.vpu-vpp-config-col .vpu-pill-row {
    margin-top: calc(17px * var(--scale-ratio));
}

.vpu-vpp-config-note,
.vpu-vpp-section-note {
    margin: 0;
    font-size: calc(12px * var(--type-scale, var(--scale-ratio)));
    line-height: calc(20px * var(--type-scale, var(--scale-ratio)));
    color: #666;
    white-space: nowrap;
}

.vpu-vpp-col--image .vpu-vpp-img-row,
.vpu-vpp-col--ai .vpu-vpp-img-row {
    margin-top: calc(7px * var(--scale-ratio));
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
}

.vpu-vpp-col--image .vpu-vpp-img-row {
    gap: calc(28px * var(--scale-ratio));
}

.vpu-vpp-col--ai .vpu-vpp-img-row {
    margin-top: calc(9px * var(--scale-ratio));
    gap: calc(42px * var(--scale-ratio));
}

.vpu-vpp-img-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 calc(66px * var(--scale-ratio));
    width: calc(66px * var(--scale-ratio));
    text-align: center;
}

.vpu-vpp-img-icon {
    width: calc(36px * var(--scale-ratio));
    height: calc(36px * var(--scale-ratio));
    object-fit: contain;
}

.vpu-vpp-img-en,
.vpu-vpp-img-zh {
    margin: 0;
    font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
    font-weight: 400;
    line-height: calc(20px * var(--type-scale, var(--scale-ratio)));
    color: #333;
    white-space: nowrap;
}

.vpu-vpp-img-en {
    margin-top: calc(6px * var(--scale-ratio));
}

.vpu-vpp-col--ai .vpu-vpp-section-title {
    margin-top: 0;
}

/* synergy — 5 段内容 + 4 条分隔线（设计 gap:90；分隔线到两侧内容等距） */

.vpu-synergy-inner {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    height: 100%;
    padding: 0 calc(40px * var(--scale-ratio));
    gap: calc(72px * var(--scale-ratio));
}

.vpu-synergy-segment {
    flex: 0 1 auto;
    box-sizing: border-box;
    min-width: 0;
}

.vpu-synergy-divider {
    flex: 0 0 1px;
    align-self: center;
    width: 1px;
    height: calc(70px * var(--scale-ratio));
    margin: 0;
    background: rgba(0, 0, 0, 0.1);
}

.vpu-synergy-head {
    display: flex;
    align-items: center;
    flex: 0 1 calc(210px * var(--scale-ratio));
    gap: calc(12px * var(--scale-ratio));
    min-width: calc(196px * var(--scale-ratio));
    max-width: calc(210px * var(--scale-ratio));
}

.vpu-synergy-segment--link {
    flex: 0 1 calc(220px * var(--scale-ratio));
    min-width: calc(130px * var(--scale-ratio));
    max-width: calc(220px * var(--scale-ratio));
    text-align: center;
}

.ip-block--vpu-synergy .block-title {
    margin: 0;
    font-size: calc(24px * var(--type-scale, var(--scale-ratio)));
    font-weight: 600;
    line-height: calc(34px * var(--type-scale, var(--scale-ratio)));
    color: #3B72D6;
}

.vpu-synergy-icon {
    flex-shrink: 0;
    width: calc(70.949px * var(--scale-ratio));
    height: calc(70.949px * var(--scale-ratio));
    object-fit: contain;
}

.vpu-synergy-link-title {
    margin: 0;
    font-size: calc(16px * var(--type-scale, var(--scale-ratio)));
    font-weight: 600;
    line-height: calc(20px * var(--type-scale, var(--scale-ratio)));
    color: #333;
    text-align: center;
}

.vpu-synergy-link-desc {
    margin: calc(4px * var(--scale-ratio)) 0 0;
    font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
    font-weight: 600;
    line-height: calc(20px * var(--type-scale, var(--scale-ratio)));
    color: #333;
    text-align: center;
    white-space: nowrap;
}

.vpu-synergy-scenes {
    display: flex;
    align-items: center;
    flex: 0 1 calc(360px * var(--scale-ratio));
    min-width: calc(280px * var(--scale-ratio));
    max-width: calc(360px * var(--scale-ratio));
    gap: calc(16px * var(--scale-ratio));
}

.vpu-synergy-scenes-text {
    flex: 0 1 auto;
    min-width: 0;
    font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
    font-weight: 600;
    line-height: calc(21px * var(--type-scale, var(--scale-ratio)));
    color: #333;
}

.vpu-synergy-scenes-text p {
    margin: 0;
    white-space: nowrap;
}

.vpu-synergy-cloud {
    flex-shrink: 0;
    width: calc(54px * var(--scale-ratio));
    height: calc(54px * var(--scale-ratio));
    object-fit: contain;
}

/* ===== @828 mobile — VPU 大小核 / VPP 特色 ===== */
@media (max-width: 828px) {
    .ip-block--vpu-core .ip-block__scale,
    .ip-block--vpu-vpp .ip-block__scale,
    .ip-block--vpu-latency .ip-block__scale {
        min-height: 0 !important;
        height: auto !important;
        overflow: visible;
        padding-bottom: calc(20px * var(--scale-ratio));
    }

    .ip-block--vpu-core .vpu-block-head,
    .ip-block--vpu-latency .vpu-block-head {
        margin: calc(27px * var(--scale-ratio)) var(--vpu-inset) 0;
        align-items: baseline;
        flex-wrap: wrap;
        gap: calc(8px * var(--scale-ratio));
    }

    .ip-block--vpu-core .vpu-block-head .block-title,
    .ip-block--vpu-latency .vpu-block-head .block-title {
        font-size: calc(24px * var(--type-scale, var(--scale-ratio)));
        line-height: calc(34 / 24);
    }

    .ip-block--vpu-core .vpu-block-head .block-note,
    .ip-block--vpu-latency .vpu-block-head .block-note {
        font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
        padding-bottom: 0;
        white-space: normal;
    }

    /* ---------- 大小核配置 ---------- */
    .ip-block--vpu-core .vpu-core-panels {
        position: static;
        display: flex;
        flex-direction: column;
        gap: calc(12px * var(--scale-ratio));
        height: auto;
        margin: calc(16px * var(--scale-ratio)) var(--vpu-inset) 0;
        padding: 0;
    }

    .ip-block--vpu-core .vpu-core-panel {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: calc(14px * var(--scale-ratio));
        border-radius: calc(5px * var(--scale-ratio));
        box-sizing: border-box;
    }

    .ip-block--vpu-core .vpu-core-panel-kicker,
    .ip-block--vpu-core .vpu-core-panel-title,
    .ip-block--vpu-core .vpu-core-panel-note,
    .ip-block--vpu-core .vpu-core-panel-head,
    .ip-block--vpu-core .vpu-core-panel--big .vpu-pill-row,
    .ip-block--vpu-core .vpu-core-panel--small .vpu-pill-row,
    .ip-block--vpu-core .vpu-parallel-row--core {
        position: static;
        left: auto;
        top: auto;
        margin: 0;
    }

    .ip-block--vpu-core .vpu-core-panel--big,
    .ip-block--vpu-core .vpu-core-panel--small {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "title note"
            "kicker kicker"
            "pills pills";
        align-items: center;
        column-gap: calc(8px * var(--scale-ratio));
        row-gap: calc(8px * var(--scale-ratio));
    }

    .ip-block--vpu-core .vpu-core-panel--big .vpu-core-panel-title,
    .ip-block--vpu-core .vpu-core-panel--small .vpu-core-panel-title {
        grid-area: title;
        font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
        font-weight: 600;
        line-height: calc(20 / 14);
        white-space: normal;
    }

    .ip-block--vpu-core .vpu-core-panel--big .vpu-core-panel-note,
    .ip-block--vpu-core .vpu-core-panel--small .vpu-core-panel-note {
        grid-area: note;
        justify-self: end;
        font-size: calc(12px * var(--type-scale, var(--scale-ratio)));
        line-height: calc(20 / 12);
        white-space: nowrap;
    }

    .ip-block--vpu-core .vpu-core-panel--big .vpu-core-panel-kicker,
    .ip-block--vpu-core .vpu-core-panel--small .vpu-core-panel-kicker {
        grid-area: kicker;
        font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
        line-height: calc(20 / 14);
        color: #666;
        white-space: normal;
    }

    .ip-block--vpu-core .vpu-core-panel--big .vpu-pill-row,
    .ip-block--vpu-core .vpu-core-panel--small .vpu-pill-row {
        grid-area: pills;
        margin-top: calc(4px * var(--scale-ratio));
    }

    .ip-block--vpu-core .vpu-core-panel--parallel {
        display: flex;
        flex-direction: column;
        gap: calc(12px * var(--scale-ratio));
    }

    .ip-block--vpu-core .vpu-core-panel--parallel .vpu-core-panel-head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: calc(6px * var(--scale-ratio));
        max-width: none;
    }

    .ip-block--vpu-core .vpu-core-panel--parallel .vpu-core-panel-title {
        font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
        font-weight: 600;
        line-height: calc(20 / 14);
        white-space: normal;
    }

    .ip-block--vpu-core .vpu-core-panel--parallel .vpu-core-panel-note {
        font-size: calc(12px * var(--type-scale, var(--scale-ratio)));
        line-height: calc(20 / 12);
        white-space: normal;
    }

    .ip-block--vpu-core .vpu-parallel-row--core {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: calc(20px * var(--scale-ratio)) calc(28px * var(--scale-ratio));
        padding-top: calc(2px * var(--scale-ratio));
    }

    .ip-block--vpu-core .vpu-pill-row--core {
        gap: calc(5px * var(--scale-ratio));
        flex-wrap: wrap;
    }

    .ip-block--vpu-core .vpu-pill {
        flex: 0 0 calc(30px * var(--scale-ratio));
        width: calc(30px * var(--scale-ratio));
        height: calc(30px * var(--scale-ratio));
        border-radius: calc(2.5px * var(--scale-ratio));
        font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
        line-height: 1;
    }

    .ip-block--vpu-core .vpu-parallel-group {
        width: auto;
        height: auto;
    }

    .ip-block--vpu-core .vpu-parallel-bars {
        gap: calc(4px * var(--scale-ratio));
    }

    .ip-block--vpu-core .vpu-parallel-bars i {
        flex: 0 0 calc(7px * var(--scale-ratio));
        width: calc(7px * var(--scale-ratio));
        height: calc(22px * var(--scale-ratio));
        border-radius: calc(2px * var(--scale-ratio));
    }

    .ip-block--vpu-core .vpu-parallel-group .vpu-parallel-label {
        margin-top: calc(6px * var(--scale-ratio));
        font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
        line-height: calc(20 / 14);
        white-space: nowrap;
    }

    .ip-block--vpu-core .vpu-parallel-group--inline {
        flex-direction: column;
        align-items: center;
        gap: calc(6px * var(--scale-ratio));
    }

    /* ---------- VPP IP 主要特色（--design-w:1600 导致 scale-ratio 过小，手机端用 620 基准） ---------- */
    .ip-block--vpu-vpp .ip-block__scale {
        --vpp-ui: calc(100cqi / (620 * 1px));
        --vpp-inset: calc(20px * var(--vpp-ui));
    }

    .ip-block--vpu-vpp .block-title {
        margin: calc(27px * var(--vpp-ui)) var(--vpp-inset) 0;
        font-size: calc(24px * var(--type-scale, var(--vpp-ui)));
        line-height: calc(34 / 24);
    }

    .ip-block--vpu-vpp .vpu-vpp-cols {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        min-height: 0;
        margin-top: calc(12px * var(--vpp-ui));
    }

    .ip-block--vpu-vpp .vpu-vpp-col {
        flex: none;
        width: 100%;
        padding: calc(16px * var(--vpp-ui)) var(--vpp-inset);
        box-shadow: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        box-sizing: border-box;
    }

    .ip-block--vpu-vpp .vpu-vpp-col:last-child {
        border-bottom: none;
        padding-bottom: calc(8px * var(--vpp-ui));
    }

    .ip-block--vpu-vpp .vpu-vpp-col--lead {
        padding-top: calc(8px * var(--vpp-ui));
    }

    .ip-block--vpu-vpp .vpu-vpp-desc {
        margin: 0;
        font-size: calc(14px * var(--type-scale, var(--vpp-ui)));
        line-height: calc(20 / 14);
        color: #666;
        white-space: normal;
    }

    .ip-block--vpu-vpp .vpu-vpp-config {
        display: flex;
        flex-direction: column;
        gap: calc(12px * var(--vpp-ui));
        margin-top: calc(16px * var(--vpp-ui));
    }

    /* 与大小核 vpu-core-panel 同款容器 */
    .ip-block--vpu-vpp .vpu-vpp-config-col {
        position: relative;
        width: 100%;
        padding: calc(14px * var(--vpp-ui));
        border-radius: calc(5px * var(--vpp-ui));
        background: linear-gradient(180deg, #FAFCFD 0%, rgba(250, 252, 253, 0) 100%);
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        white-space: normal;
    }

    .ip-block--vpu-vpp .vpu-vpp-config-label,
    .ip-block--vpu-vpp .vpu-vpp-section-title {
        margin: 0;
        font-size: calc(14px * var(--type-scale, var(--vpp-ui)));
        font-weight: 600;
        line-height: calc(20 / 14);
        white-space: normal;
    }

    .ip-block--vpu-vpp .vpu-vpp-config-note,
    .ip-block--vpu-vpp .vpu-vpp-section-note {
        margin: 0;
        font-size: calc(12px * var(--type-scale, var(--vpp-ui)));
        line-height: calc(20 / 12);
        white-space: normal;
    }

    /* 核心数目 — 同大核/小核 panel 网格 */
    .ip-block--vpu-vpp .vpu-vpp-config-col:first-child {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "title note"
            "pills pills";
        align-items: center;
        column-gap: calc(8px * var(--vpp-ui));
        row-gap: calc(8px * var(--vpp-ui));
    }

    .ip-block--vpu-vpp .vpu-vpp-config-col:first-child .vpu-vpp-config-head {
        display: contents;
    }

    .ip-block--vpu-vpp .vpu-vpp-config-col:first-child .vpu-vpp-config-label {
        grid-area: title;
    }

    .ip-block--vpu-vpp .vpu-vpp-config-col:first-child .vpu-vpp-config-note {
        grid-area: note;
        justify-self: end;
        white-space: nowrap;
    }

    .ip-block--vpu-vpp .vpu-vpp-config-col:first-child .vpu-pill-row {
        grid-area: pills;
        margin-top: calc(4px * var(--vpp-ui));
    }

    /* 多核并行 — 同 vpu-core-panel--parallel */
    .ip-block--vpu-vpp .vpu-vpp-config-col:last-child {
        display: flex;
        flex-direction: column;
        gap: calc(12px * var(--vpp-ui));
    }

    .ip-block--vpu-vpp .vpu-vpp-config-col:last-child .vpu-vpp-config-head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: calc(6px * var(--vpp-ui));
    }

    .ip-block--vpu-vpp .vpu-vpp-config-col .vpu-pill-row {
        margin-top: 0;
    }

    .ip-block--vpu-vpp .vpu-pill-row--vpp {
        gap: calc(5px * var(--vpp-ui));
        flex-wrap: wrap;
    }

    .ip-block--vpu-vpp .vpu-pill {
        flex: 0 0 calc(30px * var(--vpp-ui));
        width: calc(30px * var(--vpp-ui));
        height: calc(30px * var(--vpp-ui));
        border-radius: calc(2.5px * var(--vpp-ui));
        font-size: calc(14px * var(--type-scale, var(--vpp-ui)));
        line-height: 1;
    }

    .ip-block--vpu-vpp .vpu-parallel-row--vpp {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: calc(20px * var(--vpp-ui)) calc(28px * var(--vpp-ui));
        margin-top: 0;
        padding-top: calc(2px * var(--vpp-ui));
    }

    .ip-block--vpu-vpp .vpu-parallel-group,
    .ip-block--vpu-vpp .vpu-parallel-group--inline {
        flex-direction: column;
        align-items: center;
        gap: calc(6px * var(--vpp-ui));
        width: auto;
        height: auto;
    }

    .ip-block--vpu-vpp .vpu-parallel-bars {
        gap: calc(4px * var(--vpp-ui));
    }

    .ip-block--vpu-vpp .vpu-parallel-bars i {
        flex: 0 0 calc(7px * var(--vpp-ui));
        width: calc(7px * var(--vpp-ui));
        height: calc(22px * var(--vpp-ui));
        border-radius: calc(2px * var(--vpp-ui));
    }

    .ip-block--vpu-vpp .vpu-parallel-label {
        margin-top: calc(6px * var(--vpp-ui));
        font-size: calc(14px * var(--type-scale, var(--vpp-ui)));
        line-height: calc(20 / 14);
        white-space: nowrap;
    }

    .ip-block--vpu-vpp .vpu-vpp-section-head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: flex-start;
        gap: calc(4px * var(--vpp-ui)) calc(6px * var(--vpp-ui));
    }

    .ip-block--vpu-vpp .vpu-vpp-col--ai .vpu-vpp-section-title {
        margin: 0;
        text-align: left;
        white-space: normal;
    }

    /* 图像 / AI：2 列，icon 用 vpp-ui 放大 */
    .ip-block--vpu-vpp .vpu-vpp-col--image .vpu-vpp-img-row,
    .ip-block--vpu-vpp .vpu-vpp-col--ai .vpu-vpp-img-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: calc(16px * var(--vpp-ui)) calc(12px * var(--vpp-ui));
        margin-top: calc(12px * var(--vpp-ui));
        align-items: start;
        flex-wrap: unset;
    }

    .ip-block--vpu-vpp .vpu-vpp-img-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        min-width: 0;
        max-width: none;
        text-align: center;
    }

    .ip-block--vpu-vpp .vpu-vpp-img-icon {
        width: calc(52px * var(--vpp-ui));
        height: calc(52px * var(--vpp-ui));
        object-fit: contain;
    }

    .ip-block--vpu-vpp .vpu-vpp-img-en,
    .ip-block--vpu-vpp .vpu-vpp-img-zh {
        font-size: calc(14px * var(--type-scale, var(--vpp-ui)));
        line-height: calc(20 / 14);
        white-space: normal;
        word-break: break-word;
        text-align: center;
    }

    .ip-block--vpu-vpp .vpu-vpp-img-en {
        margin-top: calc(6px * var(--vpp-ui));
    }

    /* ---------- 低延迟优化 & 特色功能 — 单列 + 横线分隔 ---------- */
    .ip-block--vpu-latency .vpu-latency-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
        width: auto;
        height: auto;
        margin: calc(16px * var(--scale-ratio)) var(--vpu-inset) 0;
    }

    .ip-block--vpu-latency .vpu-latency-cell {
        --vpu-latency-icon-zone: calc(68px * var(--scale-ratio));
        position: relative;
        min-height: 0;
        padding: calc(20px * var(--scale-ratio)) 0 var(--vpu-latency-icon-zone);
        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    }

    .ip-block--vpu-latency .vpu-latency-cell:last-child {
        box-shadow: none;
    }

    .ip-block--vpu-latency .vpu-latency-copy {
        max-width: 100%;
    }

    .ip-block--vpu-latency .vpu-latency-label {
        font-size: calc(16px * var(--type-scale, var(--scale-ratio)));
        line-height: calc(22 / 16);
    }

    .ip-block--vpu-latency .vpu-latency-body {
        margin-top: calc(8px * var(--scale-ratio));
        gap: calc(4px * var(--scale-ratio));
    }

    .ip-block--vpu-latency .vpu-latency-body p {
        font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
        line-height: calc(20 / 14);
        white-space: normal;
        word-break: break-word;
    }

    .ip-block--vpu-latency .vpu-latency-sub {
        font-size: calc(12px * var(--type-scale, var(--scale-ratio)));
        line-height: calc(20 / 12);
    }

    .ip-block--vpu-latency .vpu-latency-icon {
        position: absolute;
        right: calc(14px * var(--scale-ratio));
        bottom: calc(24px * var(--scale-ratio));
    }

    .ip-block--vpu-latency .vpu-latency-icon--power {
        width: calc(44.5px * var(--scale-ratio));
        height: calc(45px * var(--scale-ratio));
    }

    .ip-block--vpu-latency .vpu-latency-icon--frame,
    .ip-block--vpu-latency .vpu-latency-icon--rate {
        width: calc(41px * var(--scale-ratio));
        height: calc(41px * var(--scale-ratio));
    }

    .ip-block--vpu-latency .vpu-latency-icon--gdr {
        width: calc(57.059px * var(--scale-ratio));
        height: calc(45px * var(--scale-ratio));
    }

    /* synergy — 手机居中 + 横向分隔；子项全部 auto 高度，避免桌面 flex-basis 挤压 */
    .ip-block--vpu-synergy .ip-block__scale {
        min-height: 0 !important;
        height: auto !important;
        overflow: visible;
        padding-bottom: calc(20 * var(--rpx));
    }

    .ip-block--vpu-synergy .vpu-synergy-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        height: auto;
        min-height: 0;
        padding: calc(24 * var(--rpx)) calc(20 * var(--rpx));
        gap: 0;
    }

    .ip-block--vpu-synergy .vpu-synergy-segment,
    .ip-block--vpu-synergy .vpu-synergy-head,
    .ip-block--vpu-synergy .vpu-synergy-segment--link,
    .ip-block--vpu-synergy .vpu-synergy-scenes,
    .ip-block--vpu-synergy .vpu-synergy-scenes-text {
        flex: none;
        flex-basis: auto;
        width: 100%;
        height: auto;
        min-height: 0;
        max-width: none;
        min-width: 0;
    }

    .ip-block--vpu-synergy .vpu-synergy-segment {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        box-sizing: border-box;
    }

    .ip-block--vpu-synergy .vpu-synergy-head {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: calc(12 * var(--rpx));
    }

    .ip-block--vpu-synergy .vpu-synergy-icon {
        width: calc(80 * var(--rpx));
        height: calc(80 * var(--rpx));
    }

    .ip-block--vpu-synergy .block-title {
        font-size: calc(24 * var(--fpx));
        line-height: calc(32 / 24);
        text-align: center;
    }

    .ip-block--vpu-synergy .vpu-synergy-divider {
        flex: none;
        align-self: stretch;
        width: 100%;
        height: 1px;
        margin: calc(36 * var(--rpx)) 0;
        background: rgba(0, 0, 0, 0.1);
    }

    .ip-block--vpu-synergy .vpu-synergy-segment--link {
        padding: 0;
    }

    .ip-block--vpu-synergy .vpu-synergy-link-title {
        font-size: calc(18 * var(--fpx));
        line-height: calc(26 / 18);
        text-align: center;
    }

    .ip-block--vpu-synergy .vpu-synergy-link-desc {
        font-size: calc(16 * var(--fpx));
        line-height: calc(24 / 16);
        text-align: center;
        white-space: normal;
    }

    .ip-block--vpu-synergy .vpu-synergy-scenes {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: calc(12 * var(--rpx));
    }

    .ip-block--vpu-synergy .vpu-synergy-cloud {
        width: calc(80 * var(--rpx));
        height: calc(80 * var(--rpx));
    }

    .ip-block--vpu-synergy .vpu-synergy-scenes-text {
        text-align: center;
        font-size: calc(16 * var(--fpx));
        line-height: calc(24 / 16);
    }

    .ip-block--vpu-synergy .vpu-synergy-scenes-text p {
        white-space: normal;
    }
}