/* IP sec2 blocks — internal sizing via --scale-ratio */

.ip-block {
    container-type: inline-size;
    box-sizing: border-box;
    width: 100%;
    background: #fff;
    border-radius: calc(10 * var(--ip-rpx, 1px));
    box-shadow: 0 calc(5 * var(--ip-rpx, 1px)) calc(15 * var(--ip-rpx, 1px)) rgba(0, 12, 36, 0.1);
    overflow: visible;
}

/* scale-ratio 在子元素上用 cqi 查父级块宽，避免容器自引用落到视口宽 */
.ip-block__scale {
    --scale-ratio: calc(100cqi / (var(--design-w) * 1px));
    box-sizing: border-box;
    width: 100%;
    height: calc(var(--design-h) * 1px * var(--scale-ratio));
    overflow: visible;
}

.ip-block .block-tags {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ip-block .block-tags > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ip-block p,
.ip-block ul,
.ip-block li {
    margin: 0;
    padding: 0;
}

.ip-block ul {
    list-style: none;
}

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

.ip-block--render,
.ip-block--data2d {
    --design-w: 480;
    --design-h: 400;
}

.ip-block--gpu {
    --design-w: 620;
    --design-h: 400;
}

.ip-block--software,
.ip-block--compute,
.ip-block--matrix,
.ip-block--cache {
    --design-w: 393;
    --design-h: 440;
}

.ip-block--feature .ip-block__scale {
    position: relative;
    padding: calc(20px * var(--scale-ratio));
}

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

.ip-block--feature .block-desc {
    margin: calc(8px * var(--scale-ratio)) 0 0;
    font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
    line-height: 1.5;
    color: #666;
}

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

/* tall blocks — shared */

.ip-block--software .ip-block__scale,
.ip-block--compute .ip-block__scale,
.ip-block--matrix .ip-block__scale,
.ip-block--cache .ip-block__scale {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: calc(20px * var(--scale-ratio));
}

/* Pixso check_layout：防止固定高度 flex 容器挤压子项间距 */
.ip-block--software .ip-block__scale > *,
.ip-block--compute .ip-block__scale > *,
.ip-block--matrix .ip-block__scale > *,
.ip-block--cache .ip-block__scale > * {
    flex-shrink: 0;
}

.ip-block--software .block-title,
.ip-block--compute .block-title,
.ip-block--matrix .block-title,
.ip-block--cache .block-title {
    margin: 0;
    font-size: calc(24px * var(--type-scale, var(--scale-ratio)));
    font-weight: 600;
    line-height: 1.3;
    color: #000;
}

.ip-block--software .block-desc,
.ip-block--compute .block-desc,
.ip-block--matrix .block-desc,
.ip-block--cache .block-desc {
    margin: calc(10px * var(--scale-ratio)) 0 0;
    font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
    line-height: calc(20px * var(--type-scale, var(--scale-ratio)));
    color: #666;
}

.block-section {
    margin-top: 0;
}

.ip-block .block-section-head,
.ip-block .block-section-title {
    margin: 0 0 calc(10px * var(--scale-ratio));
    font-size: calc(16px * var(--type-scale, var(--scale-ratio)));
    font-weight: 600;
    line-height: calc(24px * var(--type-scale, var(--scale-ratio)));
    color: #333;
}

.ip-block .block-section-head .block-section-title {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

.ip-block .block-section-head .block-section-note {
    margin-left: calc(4px * var(--scale-ratio));
}

/* 标题与紧邻下一元素间距统一由 margin-bottom 承担，避免子元素 margin-top 叠加/缺失 */
.ip-block .block-section-head + *,
.ip-block .block-section-title + * {
    margin-top: 0;
}

.block-section-note {
    font-size: calc(10px * var(--type-scale, var(--scale-ratio)));
    font-weight: 400;
    color: #999;
}

.block-tag.is-red {
    background: #FFF3F4;
    color: var(--brand-red);
    box-shadow: inset 0 0 0 1px rgba(223, 6, 21, 0.1);
}

.block-tag.is-blue {
    background: rgba(59, 114, 214, 0.05);
    color: #3B72D6;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.block-divider {
    height: 1px;
    margin: 0;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.1);
}

.block-tags {
    display: flex;
    flex-wrap: wrap;
    gap: calc(8px * var(--scale-ratio));
}

.block-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(110px * var(--scale-ratio));
    height: calc(30px * var(--scale-ratio));
    padding: 0 calc(10px * var(--scale-ratio));
    background: #FAFCFD;
    border-radius: calc(2.5px * var(--scale-ratio));
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    font-size: calc(12px * var(--type-scale, var(--scale-ratio)));
    line-height: 1;
    color: #333;
    white-space: nowrap;
    box-sizing: border-box;
}

.block-tag--compact {
    width: calc(46px * var(--scale-ratio));
    height: calc(30px * var(--scale-ratio));
    padding: 0 calc(8px * var(--scale-ratio));
    border-radius: calc(2.5px * var(--scale-ratio));
    font-size: calc(11px * var(--type-scale, var(--scale-ratio)));
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.block-tags--compact {
    gap: calc(6px * var(--scale-ratio));
}

/* software — Pixso 98:493 */

.ip-block--software .block-section:first-of-type {
    margin-top: calc(42px * var(--scale-ratio));
}

.ip-block--software .block-divider {
    margin: calc(30px * var(--scale-ratio)) 0 calc(25px * var(--scale-ratio));
}

.ip-block--software .block-tags {
    display: grid;
    grid-template-columns: repeat(3, calc(110px * var(--scale-ratio)));
    row-gap: calc(10px * var(--scale-ratio));
    column-gap: calc(10px * var(--scale-ratio));
}

/* compute core */

.compute-scale {
    margin-top: 0;
}

.compute-scale-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(16px * var(--scale-ratio));
}

.compute-scale-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(0, 0, 0, 0.12);
    transform: translateY(-50%);
}

.compute-scale-dot {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: calc(6px * var(--scale-ratio));
    height: calc(6px * var(--scale-ratio));
    border-radius: 50%;
    background: #D0D4DC;
}

.compute-scale-dot.is-active {
    width: calc(8px * var(--scale-ratio));
    height: calc(8px * var(--scale-ratio));
    background: var(--brand-red);
}

.compute-scale-labels {
    display: flex;
    justify-content: space-between;
    margin-top: calc(6px * var(--scale-ratio));
    font-size: calc(10px * var(--type-scale, var(--scale-ratio)));
    line-height: 1.2;
    color: #888;
}

.compute-scale-labels span {
    flex: 1;
    text-align: center;
}

.compute-scale--labels-above .compute-scale-labels {
    margin-top: 0;
    margin-bottom: calc(6px * var(--scale-ratio));
}

.compute-scale--labels-above {
    display: flex;
    flex-direction: column;
}

.compute-scale-labels--split {
    display: flex;
    flex-direction: column;
    gap: calc(2px * var(--scale-ratio));
}

.compute-scale-labels-row {
    display: flex;
    justify-content: space-between;
}

.compute-scale-labels-row--bottom {
    justify-content: flex-end;
    gap: 0;
}

.compute-scale-labels-row--bottom span {
    flex: 0 0 calc(33.333% - calc(4px * var(--scale-ratio)));
    text-align: center;
}

.compute-scale-labels--compact {
    font-size: calc(9px * var(--type-scale, var(--scale-ratio)));
}

.compute-note {
    margin: calc(6px * var(--scale-ratio)) 0 0;
    font-size: calc(10px * var(--type-scale, var(--scale-ratio)));
    line-height: 1.3;
    color: #999;
}

.compute-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc(6px * var(--scale-ratio));
    height: calc(70px * var(--scale-ratio));
    padding: 0 calc(6px * var(--scale-ratio));
}

.compute-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 calc(30px * var(--scale-ratio));
    width: calc(30px * var(--scale-ratio));
}

.compute-bar-label {
    margin-bottom: calc(4px * var(--scale-ratio));
    font-size: calc(10px * var(--type-scale, var(--scale-ratio)));
    line-height: 1.2;
    color: #666;
    white-space: nowrap;
}

.compute-fp32-chart {
    height: calc(98px * var(--scale-ratio));
}

.compute-bars-wrap {
    position: relative;
}

.compute-bars-line {
    position: absolute;
    left: calc(6px * var(--scale-ratio));
    right: calc(6px * var(--scale-ratio));
    bottom: 0;
    height: 0;
    border-top: 1px dashed rgba(223, 6, 21, 0.55);
}

.compute-bar {
    flex: 0 0 auto;
    width: calc(30px * var(--scale-ratio));
    height: calc(var(--bar-h) * 1px * var(--scale-ratio));
    border-radius: calc(2px * var(--scale-ratio)) calc(2px * var(--scale-ratio)) 0 0;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.55) 0%, rgba(223, 6, 21, 0.35) 100%);
}

.ip-block--compute .compute-bar--1 { background: linear-gradient(0deg, rgba(255, 255, 255, 0.6) 0%, rgba(223, 6, 21, 0.22) 100%); }
.ip-block--compute .compute-bar--2 { background: linear-gradient(0deg, rgba(255, 255, 255, 0.55) 0%, rgba(223, 6, 21, 0.32) 100%); }
.ip-block--compute .compute-bar--3 { background: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(223, 6, 21, 0.42) 100%); }
.ip-block--compute .compute-bar--4 { background: linear-gradient(0deg, rgba(255, 255, 255, 0.45) 0%, rgba(223, 6, 21, 0.52) 100%); }
.ip-block--compute .compute-bar--5 { background: linear-gradient(0deg, rgba(255, 255, 255, 0.35) 0%, rgba(223, 6, 21, 0.65) 100%); }
.ip-block--compute .compute-bar--6 { background: linear-gradient(0deg, rgba(255, 255, 255, 0.25) 0%, rgba(223, 6, 21, 0.82) 100%); }
.ip-block--compute .compute-bar--7 { background: linear-gradient(0deg, rgba(255, 255, 255, 0.15) 0%, rgb(223, 6, 21) 100%); }

.ip-block--compute .compute-scale-line {
    height: 0;
    background: none;
    border-top: 1px dashed rgba(223, 6, 21, 0.55);
}

.ip-block--compute .compute-scale-dot {
    width: calc(8px * var(--scale-ratio));
    height: calc(8px * var(--scale-ratio));
    background: var(--brand-red);
}

.ip-block--compute .compute-scale-dot.is-active {
    width: calc(8px * var(--scale-ratio));
    height: calc(8px * var(--scale-ratio));
    background: var(--brand-red);
}

.ip-block--compute .compute-fp32 {
    margin-top: calc(22px * var(--scale-ratio));
}

.ip-block--compute .compute-rop .compute-scale-labels {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    margin-bottom: calc(9px * var(--scale-ratio));
    padding-left: calc(10px * var(--scale-ratio));
    padding-right: calc(10px * var(--scale-ratio));
    box-sizing: border-box;
}

.ip-block--compute .compute-rop .compute-scale-labels span {
    flex: unset;
    text-align: center;
}

.ip-block--compute .compute-rop .compute-scale-track {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    padding-left: calc(10px * var(--scale-ratio));
    padding-right: calc(10px * var(--scale-ratio));
    box-sizing: border-box;
}

.ip-block--compute .compute-rop .compute-scale-track .compute-scale-line {
    grid-column: 1 / -1;
    grid-row: 1;
    left: calc(100% / 16);
    right: calc(100% / 16);
}

.ip-block--compute .compute-rop .compute-scale-track .compute-scale-dot {
    grid-row: 1;
    justify-self: center;
    align-self: center;
}

.ip-block--compute .compute-rop .compute-scale-track .compute-scale-dot:nth-child(2) { grid-column: 1; }
.ip-block--compute .compute-rop .compute-scale-track .compute-scale-dot:nth-child(3) { grid-column: 2; }
.ip-block--compute .compute-rop .compute-scale-track .compute-scale-dot:nth-child(4) { grid-column: 3; }
.ip-block--compute .compute-rop .compute-scale-track .compute-scale-dot:nth-child(5) { grid-column: 4; }
.ip-block--compute .compute-rop .compute-scale-track .compute-scale-dot:nth-child(6) { grid-column: 5; }
.ip-block--compute .compute-rop .compute-scale-track .compute-scale-dot:nth-child(7) { grid-column: 6; }
.ip-block--compute .compute-rop .compute-scale-track .compute-scale-dot:nth-child(8) { grid-column: 7; }
.ip-block--compute .compute-rop .compute-scale-track .compute-scale-dot:nth-child(9) { grid-column: 8; }

.ip-block--compute .compute-rop {
    margin-top: 0;
}

.ip-block--compute .block-divider {
    margin: calc(30px * var(--scale-ratio)) 0 calc(25px * var(--scale-ratio));
}

/* matrix ai */

.matrix-row {
    display: flex;
    align-items: stretch;
    gap: calc(10px * var(--scale-ratio));
    margin-top: calc(22px * var(--scale-ratio));
}

.matrix-col--array {
    flex: 0 0 calc(115px * var(--scale-ratio));
    width: calc(115px * var(--scale-ratio));
}

.matrix-col--perf {
    flex: 0 0 calc(226px * var(--scale-ratio));
    width: calc(226px * var(--scale-ratio));
}

.matrix-col-divider {
    flex-shrink: 0;
    width: 1px;
    background: rgba(0, 0, 0, 0.1);
}

.matrix-col--array .matrix-visual-wrap {
    margin-top: 0;
}

.matrix-types {
    margin-top: calc(15px * var(--scale-ratio));
}

.ip-block--matrix .block-divider {
    margin: calc(20px * var(--scale-ratio)) 0 calc(20px * var(--scale-ratio));
}

.matrix-fabric-row {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--scale-ratio));
    margin-top: 0;
}

.ip-block--matrix .compute-scale-line {
    height: 0;
    background: none;
    border-top: 1px dashed rgba(223, 7, 22, 0.85);
}

.ip-block--matrix .matrix-perf-axis {
    box-sizing: border-box;
    width: 100%;
    padding-left: calc(18px * var(--scale-ratio));
    padding-right: calc(14px * var(--scale-ratio));
}

.ip-block--matrix .compute-scale-label-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, auto);
    row-gap: calc(2px * var(--scale-ratio));
    margin-bottom: calc(6px * var(--scale-ratio));
    font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
    line-height: calc(21px * var(--type-scale, var(--scale-ratio)));
    color: #333;
}

.ip-block--matrix .compute-scale-label {
    text-align: center;
    color: #333;
}

.ip-block--matrix .compute-scale-label.is-empty {
    visibility: hidden;
}

.ip-block--matrix .compute-scale-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    position: relative;
    height: calc(16px * var(--scale-ratio));
    padding: 0;
    box-sizing: border-box;
}

.ip-block--matrix .compute-scale-track .compute-scale-line {
    grid-column: 1 / -1;
    grid-row: 1;
    position: absolute;
    left: calc(100% / 10);
    right: calc(100% / 10);
    top: 50%;
    transform: translateY(-50%);
}

.ip-block--matrix .compute-scale-track .compute-scale-dot {
    grid-row: 1;
    justify-self: center;
    align-self: center;
    position: relative;
    z-index: 1;
}

.ip-block--matrix .compute-scale-dot {
    width: calc(8px * var(--scale-ratio));
    height: calc(8px * var(--scale-ratio));
    background: rgb(223, 6, 21);
}

.ip-block--matrix .block-tags--compact {
    flex-wrap: nowrap;
    overflow: hidden;
}

.ip-block--matrix .block-tag--compact {
    flex: 0 0 auto;
    width: calc(45px * var(--scale-ratio));
    padding: 0 calc(6px * var(--scale-ratio));
}

.matrix-fabric-copy {
    flex: 0 0 auto;
    width: calc(293px * var(--scale-ratio));
}

.matrix-fabric-copy p {
    margin: 0;
    font-size: calc(12px * var(--type-scale, var(--scale-ratio)));
    line-height: 1.5;
    color: #666;
}

.matrix-fabric-copy p + p {
    margin-top: calc(4px * var(--scale-ratio));
}

.matrix-visual-wrap {
    position: relative;
    height: calc(70px * var(--scale-ratio));
}

.matrix-visual-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

.matrix-visual-grid {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: calc(2px * var(--scale-ratio));
    width: calc(240px * var(--scale-ratio));
    height: calc(60px * var(--scale-ratio));
}

.matrix-cell {
    display: block;
    border-radius: calc(1px * var(--scale-ratio));
    background: linear-gradient(135deg, #E8ECF2 0%, #D0D6E0 100%);
}

.matrix-cell:nth-child(4n+1),
.matrix-cell:nth-child(4n+2) {
    background: linear-gradient(135deg, #FFD4D8 0%, #F5A0A8 100%);
}

.matrix-perf {
    margin-top: calc(10px * var(--scale-ratio));
}

.matrix-fabric {
    margin-top: 0;
}

.matrix-fabric-img {
    display: block;
    flex-shrink: 0;
    width: calc(48px * var(--scale-ratio));
    height: calc(48px * var(--scale-ratio));
    object-fit: contain;
    object-position: left center;
}

/* cache & vgpu */

.cache-capacity {
    display: flex;
    align-items: center;
    gap: calc(16px * var(--scale-ratio));
    margin-top: calc(22px * var(--scale-ratio));
}

.ip-block--cache .block-divider {
    margin: calc(37px * var(--scale-ratio)) 0 calc(26px * var(--scale-ratio));
}

.cache-capacity-copy {
    flex: 0 0 auto;
    width: calc(260px * var(--scale-ratio));
}

.block-tags--inline {
    flex-wrap: nowrap;
}

.ip-block--cache .block-tags--inline .block-tag {
    width: calc(60px * var(--scale-ratio));
    flex: 0 0 auto;
    padding: 0 calc(12px * var(--scale-ratio));
}

.cache-visual {
    display: none;
}

.cache-icon {
    display: block;
    flex-shrink: 0;
    width: calc(77px * var(--scale-ratio));
    height: calc(77px * var(--scale-ratio));
    object-fit: contain;
}

.cache-vgpu {
    margin-top: 0;
}

.vgpu-icons {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc(4px * var(--scale-ratio));
}

.vgpu-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc(4px * var(--scale-ratio));
    margin-top: 0;
}

.vgpu-diagram {
    display: none;
}

.vgpu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(4px * var(--scale-ratio));
    flex: 0 0 calc(51px * var(--scale-ratio));
    width: calc(51px * var(--scale-ratio));
}

.vgpu-item.is-ellipsis {
    flex: 0 0 calc(16px * var(--scale-ratio));
    width: calc(16px * var(--scale-ratio));
    justify-content: flex-end;
    padding-bottom: calc(18px * var(--scale-ratio));
}

.vgpu-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(3px * var(--scale-ratio));
    height: calc(50px * var(--scale-ratio));
}

.vgpu-ellipsis i {
    display: block;
    width: calc(4px * var(--scale-ratio));
    height: calc(4px * var(--scale-ratio));
    border-radius: 50%;
    background: #C8CED8;
}

.vgpu-icon {
    display: block;
    width: calc(40px * var(--scale-ratio));
    height: calc(50px * var(--scale-ratio));
    object-fit: contain;
}

.vgpu-item.is-highlight .vgpu-icon {
    filter: none;
}

.vgpu-item.is-highlight .vgpu-label {
    color: var(--brand-red);
    font-weight: 600;
}

.vgpu-label {
    font-size: calc(10px * var(--type-scale, var(--scale-ratio)));
    line-height: 1;
    color: #888;
}

/* render engine */

.ip-block--render .ip-block__scale {
    padding: calc(24px * var(--scale-ratio)) calc(20px * var(--scale-ratio)) calc(20px * var(--scale-ratio));
}

.ip-block--render .block-title {
    margin: 0;
    font-size: calc(24px * var(--type-scale, var(--scale-ratio)));
    font-weight: 600;
    line-height: calc(36 / 24);
    color: var(--text-primary);
}

.ip-block--render .block-desc {
    margin: calc(8px * var(--scale-ratio)) 0 0;
    max-width: calc((var(--design-w) - 40) * var(--scale-ratio));
    font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
    font-weight: 400;
    line-height: calc(21 / 14);
    color: #666666;
}

.render-pipeline-wrap {
    margin-top: calc(38px * var(--scale-ratio));
    margin-left: calc(37px * var(--scale-ratio));
    width: calc(366px * var(--scale-ratio));
    height: calc(147px * var(--scale-ratio));
}

.render-pipeline-visual {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.render-pipeline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0;
    height: calc(96px * var(--scale-ratio));
    padding: calc(4px * var(--scale-ratio)) 0 0;
}

.render-path {
    --pipeline-item-w: calc(96px * var(--scale-ratio));
    --path-anchor-x: calc(var(--pipeline-item-w) / 2);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: calc(-4px * var(--scale-ratio));
    padding-bottom: calc(8px * var(--scale-ratio));
}

.render-path::before,
.render-path::after {
    content: "";
    position: absolute;
    top: 0;
    z-index: 1;
    width: calc(8px * var(--scale-ratio));
    height: calc(8px * var(--scale-ratio));
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 8'%3E%3Cpath d='M0 8L4 4L8 8' stroke='%23DF0716' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}

.render-path::before {
    left: var(--path-anchor-x);
    transform: translateX(-50%);
}

.render-path::after {
    right: var(--path-anchor-x);
    transform: translateX(50%);
}

.render-path-arc {
    display: block;
    box-sizing: border-box;
    width: calc(100% - 2 * var(--path-anchor-x));
    height: calc(47px * var(--scale-ratio));
    margin: calc(6px * var(--scale-ratio)) var(--path-anchor-x) 0;
    border-right: 1px dashed rgb(223, 7, 22);
    border-bottom: 1px dashed rgb(223, 7, 22);
    border-left: 1px dashed rgb(223, 7, 22);
    border-radius: 0 0 calc(4px * var(--scale-ratio)) calc(4px * var(--scale-ratio));
    pointer-events: none;
}

.render-path-pill {
    position: absolute;
    left: 50%;
    top: calc(53px * var(--scale-ratio));
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(28px * var(--scale-ratio));
    margin-top: 0;
    padding: 0 calc(14px * var(--scale-ratio));
    border-radius: calc(300px * var(--scale-ratio));
    background: #FFF3F4;
    box-shadow: inset 0 0 0 1px rgba(223, 6, 21, 0.1);
    font-size: calc(11px * var(--type-scale, var(--scale-ratio)));
    line-height: 1.2;
    color: #DF0615;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}

.render-pipeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 calc(96px * var(--scale-ratio));
    width: calc(96px * var(--scale-ratio));
}

.render-pipeline-icon {
    display: block;
    width: calc(52px * var(--scale-ratio));
    height: calc(50px * var(--scale-ratio));
    object-fit: contain;
}

.render-pipeline-label {
    margin-top: calc(8px * var(--scale-ratio));
    font-size: calc(11px * var(--type-scale, var(--scale-ratio)));
    line-height: calc(15 / 11);
    color: #666666;
    text-align: center;
    white-space: nowrap;
}

.render-pipeline-arrow {
    flex-shrink: 0;
    align-self: flex-start;
    width: calc(15px * var(--scale-ratio));
    height: calc(8px * var(--scale-ratio));
    margin-top: calc(21px * var(--scale-ratio));
    object-fit: contain;
}

.ip-block--render .block-tag.is-red {
    background: #FFF3F4;
    color: var(--brand-red);
    box-shadow: inset 0 0 0 1px rgba(223, 6, 21, 0.1);
}

.ip-block--render .block-tag.is-blue {
    background: rgba(59, 114, 214, 0.05);
    color: #3B72D6;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.ip-block--render .block-tags {
    display: grid;
    grid-template-columns: repeat(4, calc(102.5px * var(--scale-ratio)));
    gap: calc(10px * var(--scale-ratio));
    width: 100%;
    margin: calc(33px * var(--scale-ratio)) 0 0;
    padding: 0;
    box-sizing: border-box;
}

.ip-block--render .block-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(102.5px * var(--scale-ratio));
    height: calc(30px * var(--scale-ratio));
    padding: 0 calc(4px * var(--scale-ratio));
    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(12px * var(--type-scale, var(--scale-ratio)));
    font-weight: 400;
    line-height: calc(18 / 12);
    color: var(--text-primary);
    white-space: nowrap;
    box-sizing: border-box;
}

/* gpu diagram */

.ip-block--card-visual .ip-block__scale,
.ip-block--gpu .ip-block__scale {
    padding: 0;
}

.ip-block-card-visual {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: calc(10px * var(--scale-ratio));
}

/* Pixso 组合图：标题/描述保留 DOM，组合图按设计稿坐标绝对定位 */

.ip-block--has-group-visual .ip-block__scale {
    position: relative;
    display: block;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
}

.ip-block--has-group-visual .block-title {
    position: absolute;
    top: calc(27px * var(--scale-ratio));
    left: calc(20px * var(--scale-ratio));
    z-index: 2;
    margin: 0;
    max-width: calc((var(--design-w) - 40) * var(--scale-ratio));
    font-size: calc(24px * var(--type-scale, var(--scale-ratio)));
    font-weight: 600;
    line-height: calc(34 / 24);
    color: var(--text-primary, #333);
}

.ip-block--has-group-visual .block-desc {
    position: absolute;
    top: calc(71px * var(--scale-ratio));
    left: calc(20px * var(--scale-ratio));
    z-index: 2;
    margin: 0;
    max-width: calc((var(--design-w) - 40) * var(--scale-ratio));
    font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
    font-weight: 400;
    line-height: calc(20 / 14);
    color: #666;
}

.ip-block--has-group-visual .ip-block-diagram {
    position: absolute;
    z-index: 1;
    margin: 0;
}

.ip-block--has-group-visual .ip-block-diagram__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ip-block--data2d.ip-block--has-group-visual .ip-block-diagram {
    top: calc(150px * var(--scale-ratio));
    left: calc(80px * var(--scale-ratio));
    width: calc(320px * var(--scale-ratio));
    height: calc(202px * var(--scale-ratio));
}

.ip-block--software.ip-block--has-group-visual .ip-block-diagram {
    top: calc(133px * var(--scale-ratio));
    left: calc(19px * var(--scale-ratio));
    width: calc(354px * var(--scale-ratio));
    height: calc(277px * var(--scale-ratio));
}

.ip-block--compute.ip-block--has-group-visual .ip-block-diagram {
    top: calc(133px * var(--scale-ratio));
    left: calc(19px * var(--scale-ratio));
    width: calc(360px * var(--scale-ratio));
    height: calc(274px * var(--scale-ratio));
}

.ip-block--matrix.ip-block--has-group-visual .ip-block-diagram {
    top: calc(133px * var(--scale-ratio));
    left: calc(19px * var(--scale-ratio));
    width: calc(358px * var(--scale-ratio));
    height: calc(284px * var(--scale-ratio));
}

.ip-block--cache.ip-block--has-group-visual .ip-block-diagram {
    top: calc(133px * var(--scale-ratio));
    left: calc(19px * var(--scale-ratio));
    width: calc(354px * var(--scale-ratio));
    height: calc(252px * var(--scale-ratio));
}

.gpu-visual {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: calc(10px * var(--scale-ratio));
}

.gpu-bg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: calc(10px * var(--scale-ratio));
}

/* data 2d */

.ip-block--data2d .ip-block__scale {
    padding: calc(24px * var(--scale-ratio)) calc(20px * var(--scale-ratio)) calc(20px * var(--scale-ratio));
}

.ip-block--data2d .block-title {
    margin: 0;
    font-size: calc(24px * var(--type-scale, var(--scale-ratio)));
    font-weight: 600;
    line-height: calc(36 / 24);
    color: var(--text-primary);
}

.ip-block--data2d .block-desc {
    margin: calc(8px * var(--scale-ratio)) 0 0;
    font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
    font-weight: 400;
    line-height: calc(21 / 14);
    color: #666666;
}

.data2d-engines {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: calc(40px * var(--scale-ratio));
    margin-top: calc(41px * var(--scale-ratio));
}

.data2d-engine {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(140px * var(--scale-ratio));
}

.data2d-engine-box {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(10px * var(--scale-ratio));
    width: calc(140px * var(--scale-ratio));
    height: calc(120px * var(--scale-ratio));
    border-radius: calc(6px * var(--scale-ratio));
    padding: calc(8px * var(--scale-ratio));
}

.data2d-engine--2d {
    background: #FFF3F4;
}

.data2d-engine--dma {
    background: #FAFCFD;
}

.data2d-engine-icon {
    display: block;
    flex-shrink: 0;
    width: calc(84px * var(--scale-ratio));
    height: calc(50px * var(--scale-ratio));
    object-fit: contain;
}

.data2d-engine-icon--merge {
    width: calc(84px * var(--scale-ratio));
    height: calc(50px * var(--scale-ratio));
}

.data2d-engine-label {
    margin: 0;
    width: 100%;
    font-size: calc(14px * var(--type-scale, var(--scale-ratio)));
    font-weight: 500;
    line-height: calc(21 / 14);
    color: var(--text-primary);
    text-align: center;
}

.data2d-merge {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0;
    padding-top: 0;
}

.data2d-guide-icon {
    display: block;
    width: calc(180px * var(--scale-ratio));
    height: calc(52px * var(--scale-ratio));
    object-fit: contain;
    object-position: center top;
}

.data2d-merge-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(240px * var(--scale-ratio));
    height: calc(28px * var(--scale-ratio));
    margin-top: calc(2px * var(--scale-ratio));
    padding: 0 calc(14px * var(--scale-ratio));
    border-radius: calc(300px * var(--scale-ratio));
    background: #FFF3F4;
    box-shadow: inset 0 0 0 1px rgba(223, 6, 21, 0.1);
    font-size: calc(12px * var(--type-scale, var(--scale-ratio)));
    line-height: 1.2;
    color: #DF0615;
    white-space: nowrap;
}

.data2d-merge-text {
    margin: calc(8px * var(--scale-ratio)) 0 0;
    font-size: calc(12px * var(--type-scale, var(--scale-ratio)));
    font-weight: 400;
    line-height: calc(18 / 12);
    color: #666666;
    text-align: center;
}

/* ===== @828 mobile ===== */
@media (max-width: 828px) {
    .ip-sec2 .block-media {
        overflow: hidden;
        border-radius: inherit;
    }

    .ip-block--feature .ip-block__scale {
        min-height: 0;
    }

    .ip-block--software .ip-block__scale,
    .ip-block--compute .ip-block__scale,
    .ip-block--matrix .ip-block__scale,
    .ip-block--cache .ip-block__scale {
        min-height: 0;
    }

    .ip-block--render .ip-block__scale,
    .ip-block--data2d .ip-block__scale {
        min-height: 0;
    }

    .ip-block--render .render-pipeline {
        flex-wrap: wrap;
        justify-content: center;
        align-content: flex-start;
        height: auto;
        row-gap: calc(8px * var(--scale-ratio));
    }

    .ip-block--render .render-pipeline-item {
        flex: 0 0 calc(96px * var(--scale-ratio));
    }

    .ip-block--render .render-pipeline-arrow {
        flex: 0 0 calc(15px * var(--scale-ratio));
    }

    .ip-block--render .render-path {
        position: relative;
        margin-top: calc(12px * var(--scale-ratio));
    }

    .ip-block--render .block-tags {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: calc(8px * var(--scale-ratio));
    }

    .ip-block--render .block-tag {
        width: 100%;
        max-width: none;
    }

    .data2d-engines {
        flex-direction: column;
        align-items: center;
        gap: calc(24px * var(--scale-ratio));
        margin-top: calc(24px * var(--scale-ratio));
    }

    .data2d-engine {
        width: calc(180px * var(--scale-ratio));
    }

    .data2d-engine-box {
        width: calc(180px * var(--scale-ratio));
    }

    .data2d-guide-icon {
        width: calc(200px * var(--scale-ratio));
    }

    .data2d-merge-pill {
        width: calc(260px * var(--scale-ratio));
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }

    .matrix-row {
        flex-direction: column;
    }

    .matrix-col-divider {
        width: 100%;
        height: calc(1 * var(--rpx));
    }

}

/* 组合图 block：覆盖 tall/data2d 旧 padding / flex 规则 */
.ip-block--has-group-visual.ip-block--data2d .ip-block__scale,
.ip-block--has-group-visual.ip-block--software .ip-block__scale,
.ip-block--has-group-visual.ip-block--compute .ip-block__scale,
.ip-block--has-group-visual.ip-block--matrix .ip-block__scale,
.ip-block--has-group-visual.ip-block--cache .ip-block__scale {
    display: block;
    padding: 0;
}

.ip-block--has-group-visual.ip-block--data2d .block-title,
.ip-block--has-group-visual.ip-block--software .block-title,
.ip-block--has-group-visual.ip-block--compute .block-title,
.ip-block--has-group-visual.ip-block--matrix .block-title,
.ip-block--has-group-visual.ip-block--cache .block-title,
.ip-block--has-group-visual.ip-block--data2d .block-desc,
.ip-block--has-group-visual.ip-block--software .block-desc,
.ip-block--has-group-visual.ip-block--compute .block-desc,
.ip-block--has-group-visual.ip-block--matrix .block-desc,
.ip-block--has-group-visual.ip-block--cache .block-desc {
    position: absolute;
}