.matrix-v2-compat-diagram {
    display: grid;
    gap: var(--matrix-v2-space-medium, 16px);
    margin: var(--matrix-v2-space-medium-large, 22px) 0;
    color: inherit;
    --matrix-v2-radius: var(--global-border-radius, var(--global-button-border-radius, var(--wp--custom--border-radius, 4px)));
    --matrix-v2-card-radius: var(--global-card-border-radius, var(--matrix-v2-radius));
    --matrix-v2-form-radius: var(--global-form-border-radius, var(--global-input-border-radius, var(--matrix-v2-radius)));
}

.matrix-v2-compat-diagram__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--matrix-v2-space-medium, 16px);
}

.matrix-v2-compat-diagram__heading {
    margin: 0;
}

.matrix-v2-compat-diagram__select-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: min(425px, 100%);
    max-width: 425px;
    min-width: min(320px, 100%);
    flex: 0 1 425px;
}

.matrix-v2-compat-diagram__select-icon {
    flex: 0 0 auto;
    font-size: 19px;
    line-height: 1;
}

.matrix-v2-compat-diagram__select {
    width: 100%;
    min-width: 0;
    max-width: 425px;
    min-height: 38px;
    border: 1px solid #cbd5e1;
    border-radius: var(--matrix-v2-form-radius);
    padding: 6px 34px 6px 10px;
    font: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.matrix-v2-compat-diagram__select option {
    max-width: 425px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.matrix-v2-compat-diagram__frame {
    border: 1px solid #d4d4d8;
    border-radius: var(--matrix-v2-card-radius);
    padding: var(--matrix-v2-space-medium, 16px) var(--matrix-v2-space-medium-large, 22px) var(--matrix-v2-space-medium-large, 22px);
    background: #ffffff;
}

.matrix-v2-compat-diagram__layout {
    display: grid;
    grid-template-columns: minmax(520px, 1fr) minmax(300px, 420px);
    gap: var(--matrix-v2-space-large, 28px);
    align-items: start;
}

.matrix-v2-compat-diagram__main,
.matrix-v2-compat-diagram__partners,
.matrix-v2-compat-diagram__partner {
    display: grid;
    gap: var(--matrix-v2-space-medium, 16px);
    min-width: 0;
}

.matrix-v2-compat-diagram__partners {
    gap: var(--matrix-v2-space-large, 28px);
}

.matrix-v2-compat-diagram__canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    margin: 0 auto;
}

.matrix-v2-compat-diagram__canvas--pair {
    position: relative;
    width: 100%;
    max-width: 780px;
    aspect-ratio: 1;
    margin: 0 auto;
}

.matrix-v2-compat-diagram__canvas--mini {
    max-width: 340px;
}

.matrix-v2-compat-diagram__image,
.matrix-v2-compat-diagram__fallback-image {
    display: block;
    width: 100%;
    height: 100%;
}

.matrix-v2-compat-diagram__image {
    object-fit: contain;
}

.matrix-v2-compat-diagram__fallback-image {
    border: 1px solid #d9e2ec;
    border-radius: 8px;
    background:
        linear-gradient(45deg, transparent 49.6%, #d9e2ec 50%, transparent 50.4%),
        linear-gradient(-45deg, transparent 49.6%, #d9e2ec 50%, transparent 50.4%),
        linear-gradient(90deg, transparent 49.6%, #d9e2ec 50%, transparent 50.4%),
        linear-gradient(0deg, transparent 49.6%, #d9e2ec 50%, transparent 50.4%),
        #ffffff;
}

.matrix-v2-compat-diagram__point,
.matrix-v2-compat-diagram__outer-dot,
.matrix-v2-compat-diagram__outer-value {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #bdbdbd;
    border-radius: 50%;
    background: #ffffff;
    color: #222831;
    line-height: 1;
}

.matrix-v2-compat-diagram__point {
    z-index: 4;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.matrix-v2-compat-diagram__point:hover,
.matrix-v2-compat-diagram__point:focus {
    box-shadow: 0 4px 10px rgba(16, 42, 67, 0.28);
    outline: 0;
}

.matrix-v2-compat-diagram__point.is-highlighted,
.matrix-v2-compat-diagram__outer-value.is-highlighted {
    border: 2px solid #222831;
    box-shadow: 0 0 0 3px rgba(21, 111, 143, 0.18);
    font-weight: 700;
    z-index: 20;
}

.matrix-v2-compat-diagram__point.is-muted,
.matrix-v2-compat-diagram__outer-value.is-muted {
    border-color: #cfd8e3;
    background: #e5e7eb;
    color: #9ca3af;
    box-shadow: none;
    z-index: 2;
}

.matrix-v2-compat-diagram__point--lg {
    width: 10.5%;
    height: 10.5%;
    font-size: 22px;
}

.matrix-v2-compat-diagram__point--md {
    width: 8.5%;
    height: 8.5%;
    font-size: 18px;
}

.matrix-v2-compat-diagram__point--sm {
    width: 6%;
    height: 6%;
    font-size: 16px;
}

.matrix-v2-compat-diagram__canvas--mini .matrix-v2-compat-diagram__point--lg {
    font-size: 13px;
}

.matrix-v2-compat-diagram__canvas--mini .matrix-v2-compat-diagram__point--md {
    font-size: 11px;
}

.matrix-v2-compat-diagram__canvas--mini .matrix-v2-compat-diagram__point--sm {
    font-size: 9px;
}

.matrix-v2-compat-diagram__point--purple {
    background: #cb65ff;
    border-color: #bb33ff;
}

.matrix-v2-compat-diagram__point--blue {
    background: #3399ff;
    border-color: #0080ff;
}

.matrix-v2-compat-diagram__point--cyan {
    background: #99cbff;
    border-color: #66b0ff;
}

.matrix-v2-compat-diagram__point--green {
    background: #65ff65;
    border-color: #44d944;
}

.matrix-v2-compat-diagram__point--yellow {
    background: #f7efb7;
}

.matrix-v2-compat-diagram__point--orange {
    background: #ffcb99;
    border-color: #ffb066;
}

.matrix-v2-compat-diagram__point--red {
    background: #ff6565;
    border-color: #ff3333;
}

.matrix-v2-compat-diagram__point--white {
    background: #ffffff;
}

.matrix-v2-compat-diagram__outer-dot {
    z-index: 2;
    width: 2%;
    height: 2%;
    border-color: #d4d4d8;
    background: #ffffff;
}

.matrix-v2-compat-diagram__outer-value {
    z-index: 3;
    width: 4.5%;
    height: 4.5%;
    font-size: 9px;
    font-weight: 600;
}

.matrix-v2-compat-diagram__destiny {
    display: grid;
    gap: 7px;
    margin-top: 28px;
}

.matrix-v2-compat-diagram__chains {
    display: grid;
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    gap: 16px;
}

.matrix-v2-compat-diagram__chain {
    display: grid;
    grid-template-columns: minmax(96px, 1.25fr) minmax(28px, 0.42fr) 12px minmax(28px, 0.42fr) 12px minmax(28px, 0.42fr);
    column-gap: 7px;
    align-items: center;
    min-height: 46px;
    border: 0;
    border-radius: 20px 0 0 20px;
    padding: 0 12px;
    background: linear-gradient(90deg, #d6d5d5 0%, rgba(214, 213, 213, 0) 100%);
    color: #1f2933;
    font: inherit;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.matrix-v2-compat-diagram__chain strong {
    justify-self: start;
    font-weight: 500;
}

.matrix-v2-compat-diagram__chain span {
    color: #1f2933;
}

.matrix-v2-compat-diagram__chain em {
    color: #0ba5e9;
    font-style: normal;
}

.matrix-v2-compat-diagram__chain.is-highlighted {
    box-shadow:
        inset 2px 0 0 #222831,
        inset 0 2px 0 #222831,
        inset 0 -2px 0 #222831;
}

.matrix-v2-compat-diagram__chain.is-muted {
    background: linear-gradient(90deg, #ececec 0%, rgba(236, 236, 236, 0) 100%);
    color: #9ca3af;
    box-shadow: none;
}

.matrix-v2-compat-diagram__chain.is-muted span {
    color: #9ca3af;
}

.matrix-v2-compat-diagram__chain.is-muted em {
    color: #9ca3af;
}

.matrix-v2-compat-diagram__position-a {
    top: 50%;
    left: -0.9%;
    transform: translate(0, -50%);
}

.matrix-v2-compat-diagram__position-a1 {
    top: 50%;
    left: 9.58%;
    transform: translate(0, -50%);
}

.matrix-v2-compat-diagram__position-a2 {
    top: 50%;
    left: 18%;
    transform: translate(0, -50%);
}

.matrix-v2-compat-diagram__position-a3 {
    top: 50%;
    left: 31.5%;
    transform: translate(0, -50%);
}

.matrix-v2-compat-diagram__position-b {
    top: -0.4%;
    left: 50%;
    transform: translate(-50%, 0);
}

.matrix-v2-compat-diagram__position-b1 {
    top: 10%;
    left: 50%;
    transform: translate(-50%, 0);
}

.matrix-v2-compat-diagram__position-b2 {
    top: 18.5%;
    left: 50%;
    transform: translate(-50%, 0);
}

.matrix-v2-compat-diagram__position-b3 {
    top: 32%;
    left: 50%;
    transform: translate(-50%, 0);
}

.matrix-v2-compat-diagram__position-c {
    top: 50%;
    right: -0.4%;
    transform: translate(0, -50%);
}

.matrix-v2-compat-diagram__position-c1 {
    top: 50%;
    right: 10%;
    transform: translate(0, -50%);
}

.matrix-v2-compat-diagram__position-c2 {
    top: 50.1%;
    right: 18.5%;
    transform: translate(0, -50%);
}

.matrix-v2-compat-diagram__position-d {
    bottom: -0.4%;
    left: 50%;
    transform: translate(-50%, 0);
}

.matrix-v2-compat-diagram__position-d1 {
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, 0);
}

.matrix-v2-compat-diagram__position-d2 {
    bottom: 18.5%;
    left: 50%;
    transform: translate(-50%, 0);
}

.matrix-v2-compat-diagram__position-i1 {
    top: 50%;
    left: 49.9%;
    transform: translate(-50%, -50%);
}

.matrix-v2-compat-diagram__position-i2 {
    top: 50%;
    right: 36.5%;
    transform: translate(0, -50%);
}

.matrix-v2-compat-diagram__position-i3 {
    top: 50%;
    right: 30.6%;
    transform: translate(0, -50%);
}

.matrix-v2-compat-diagram__position-ab {
    top: 12.6%;
    left: 12.6%;
}

.matrix-v2-compat-diagram__position-ab1 {
    top: 20.25%;
    left: 20.25%;
}

.matrix-v2-compat-diagram__position-ab2 {
    top: 26.5%;
    left: 26.5%;
}

.matrix-v2-compat-diagram__position-bc {
    top: 12.6%;
    right: 12.6%;
}

.matrix-v2-compat-diagram__position-bc1 {
    top: 20.25%;
    right: 20.25%;
}

.matrix-v2-compat-diagram__position-bc2 {
    top: 26.5%;
    right: 26.5%;
}

.matrix-v2-compat-diagram__position-cd {
    bottom: 12.6%;
    right: 12.6%;
}

.matrix-v2-compat-diagram__position-cd1 {
    bottom: 20.25%;
    right: 20.25%;
}

.matrix-v2-compat-diagram__position-cd2 {
    bottom: 26.5%;
    right: 26.5%;
}

.matrix-v2-compat-diagram__position-da {
    bottom: 12.6%;
    left: 12.6%;
}

.matrix-v2-compat-diagram__position-da1 {
    bottom: 20.25%;
    left: 20.25%;
}

.matrix-v2-compat-diagram__position-da2 {
    bottom: 26.5%;
    left: 26.5%;
}

.matrix-v2-compat-diagram__position-dc {
    bottom: 32.7%;
    right: 32.7%;
}

.matrix-v2-compat-diagram__position-dc1 {
    bottom: 25.5%;
    right: 40%;
}

.matrix-v2-compat-diagram__position-dc2 {
    bottom: 39.5%;
    right: 25.5%;
}

.matrix-v2-compat-diagram__position-for13 {
    top: 5.2%;
    right: 42.1%;
}

.matrix-v2-compat-diagram__position-for14 {
    top: 5.7%;
    right: 39.3%;
}

.matrix-v2-compat-diagram__position-for15 {
    top: 6.5%;
    right: 36.7%;
}

.matrix-v2-compat-diagram__position-bc_1 {
    top: 6.75%;
    right: 30.75%;
}

.matrix-v2-compat-diagram__position-for16 {
    top: 10.3%;
    right: 27.7%;
}

.matrix-v2-compat-diagram__position-for17 {
    top: 11.7%;
    right: 25.4%;
}

.matrix-v2-compat-diagram__position-for18 {
    top: 13.1%;
    right: 23.2%;
}

.matrix-v2-compat-diagram__position-for19 {
    top: 23.3%;
    right: 12.9%;
}

.matrix-v2-compat-diagram__position-for20 {
    top: 25.6%;
    right: 11.4%;
}

.matrix-v2-compat-diagram__position-for21 {
    top: 27.9%;
    right: 10%;
}

.matrix-v2-compat-diagram__position-bc_2 {
    top: 30.75%;
    right: 6.752%;
}

.matrix-v2-compat-diagram__position-for22 {
    top: 36.9%;
    right: 6.4%;
}

.matrix-v2-compat-diagram__position-for23 {
    top: 39.6%;
    right: 5.7%;
}

.matrix-v2-compat-diagram__position-for24 {
    top: 42.2%;
    right: 5.1%;
}

.matrix-v2-compat-diagram__position-for25 {
    bottom: 41.9%;
    right: 5.2%;
}

.matrix-v2-compat-diagram__position-for26 {
    bottom: 39.3%;
    right: 5.7%;
}

.matrix-v2-compat-diagram__position-for27 {
    bottom: 36.7%;
    right: 6.4%;
}

.matrix-v2-compat-diagram__position-cd_1 {
    bottom: 30.75%;
    right: 6.75%;
}

.matrix-v2-compat-diagram__position-for28 {
    bottom: 27.7%;
    right: 10.2%;
}

.matrix-v2-compat-diagram__position-for29 {
    bottom: 25.4%;
    right: 11.6%;
}

.matrix-v2-compat-diagram__position-for30 {
    bottom: 23.1%;
    right: 13.1%;
}

.matrix-v2-compat-diagram__position-for31 {
    bottom: 13%;
    right: 23.5%;
}

.matrix-v2-compat-diagram__position-for32 {
    bottom: 11.5%;
    right: 25.6%;
}

.matrix-v2-compat-diagram__position-for33 {
    bottom: 10.1%;
    right: 28%;
}

.matrix-v2-compat-diagram__position-cd_2 {
    bottom: 6.75%;
    right: 30.75%;
}

.matrix-v2-compat-diagram__position-for34 {
    bottom: 6.4%;
    right: 37%;
}

.matrix-v2-compat-diagram__position-for35 {
    bottom: 5.7%;
    right: 39.6%;
}

.matrix-v2-compat-diagram__position-for36 {
    bottom: 5.2%;
    right: 42.4%;
}

.matrix-v2-compat-diagram__position-for37 {
    bottom: 5.3%;
    left: 41.9%;
}

.matrix-v2-compat-diagram__position-for38 {
    bottom: 5.7%;
    left: 39.3%;
}

.matrix-v2-compat-diagram__position-for39 {
    bottom: 6.6%;
    left: 36.5%;
}

.matrix-v2-compat-diagram__position-da_1 {
    bottom: 6.75%;
    left: 30.75%;
}

.matrix-v2-compat-diagram__position-for40 {
    bottom: 10.2%;
    left: 27.7%;
}

.matrix-v2-compat-diagram__position-for41 {
    bottom: 11.6%;
    left: 25.4%;
}

.matrix-v2-compat-diagram__position-for42 {
    bottom: 13.2%;
    left: 23.1%;
}

.matrix-v2-compat-diagram__position-for43 {
    bottom: 23.2%;
    left: 12.9%;
}

.matrix-v2-compat-diagram__position-for44 {
    bottom: 25.5%;
    left: 11.4%;
}

.matrix-v2-compat-diagram__position-for45 {
    bottom: 27.9%;
    left: 10%;
}

.matrix-v2-compat-diagram__position-da_2 {
    bottom: 30%;
    left: 6%;
}

.matrix-v2-compat-diagram__position-for46 {
    bottom: 36.7%;
    left: 6.3%;
}

.matrix-v2-compat-diagram__position-for47 {
    bottom: 39.5%;
    left: 5.5%;
}

.matrix-v2-compat-diagram__position-for48 {
    bottom: 42.2%;
    left: 5%;
}

.matrix-v2-compat-diagram__position-for1 {
    top: 42.1%;
    left: 5%;
}

.matrix-v2-compat-diagram__position-for2 {
    top: 39.3%;
    left: 5.6%;
}

.matrix-v2-compat-diagram__position-for3 {
    top: 36.6%;
    left: 6.3%;
}

.matrix-v2-compat-diagram__position-ab_1 {
    top: 30.75%;
    left: 6.75%;
}

.matrix-v2-compat-diagram__position-for4 {
    top: 27.7%;
    left: 9.9%;
}

.matrix-v2-compat-diagram__position-for5 {
    top: 25.2%;
    left: 11.4%;
}

.matrix-v2-compat-diagram__position-for6 {
    top: 22.9%;
    left: 12.9%;
}

.matrix-v2-compat-diagram__position-for7 {
    top: 12.9%;
    left: 23.2%;
}

.matrix-v2-compat-diagram__position-for8 {
    top: 11.3%;
    left: 25.5%;
}

.matrix-v2-compat-diagram__position-for9 {
    top: 10%;
    left: 27.9%;
}

.matrix-v2-compat-diagram__position-ab_2 {
    top: 6.75%;
    left: 30.75%;
}

.matrix-v2-compat-diagram__position-for10 {
    top: 6.3%;
    left: 36.8%;
}

.matrix-v2-compat-diagram__position-for11 {
    top: 5.6%;
    left: 39.5%;
}

.matrix-v2-compat-diagram__position-for12 {
    top: 5.1%;
    left: 42.2%;
}

@media (max-width: 980px) {
    .matrix-v2-compat-diagram__layout {
        grid-template-columns: 1fr;
    }

    .matrix-v2-compat-diagram__partners {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
        gap: var(--matrix-v2-space-medium, 16px);
    }

    .matrix-v2-compat-diagram__canvas--pair {
        max-width: 680px;
    }
}

@media (max-width: 760px) {
    .matrix-v2-compat-diagram__toolbar {
        display: grid;
        align-items: start;
    }

    .matrix-v2-compat-diagram__select-label {
        width: 100%;
        max-width: 425px;
    }

    .matrix-v2-compat-diagram__chains {
        grid-template-columns: 1fr;
    }

    .matrix-v2-compat-diagram__partners {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .matrix-v2-compat-diagram__point--lg {
        font-size: 13px;
    }

    .matrix-v2-compat-diagram__point--md {
        font-size: 11px;
    }

    .matrix-v2-compat-diagram__point--sm,
    .matrix-v2-compat-diagram__outer-value {
        font-size: 8px;
    }

    .matrix-v2-compat-diagram__chain {
        grid-template-columns: minmax(92px, 1fr) 28px 12px 28px 12px 28px;
        column-gap: 6px;
        min-height: 42px;
        padding: 0 10px;
        font-size: 13px;
    }
}