.twinx-visual {
    min-height: 432px;
    position: relative;
    isolation: isolate;
    flex-direction: column;
    gap: 0;
}

.twinx-visual svg {
    max-width: 572px;
    display: block;
}

@media (min-width: 901px) {
    .twinx-visual {
        width: clamp(320px, 42%, 504px);
    }
}

@media (max-width: 900px) {
    .twinx-card .twinx-visual {
        width: min(100%, 380px);
    }
}

.twinx-visual svg .twinx-label-svg,
.twinx-visual svg .twinx-note-svg,
.drawer-twinx-svg .twinx-label-svg,
.drawer-twinx-svg .twinx-note-svg {
    font-family: 'Manrope', sans-serif;
    font-size: 10.6px;
    font-weight: 700;
    letter-spacing: 2.35px;
    text-transform: uppercase;
    dominant-baseline: middle;
}

.drawer-twinx-svg .twinx-label-svg {
    font-size: 9.4px;
    letter-spacing: 2.05px;
}

.drawer-twinx-svg .twinx-note-svg {
    font-size: 12px;
    letter-spacing: 2.05px;
}

.twinx-visual svg .twinx-core-label,
.drawer-twinx-svg .twinx-core-label {
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    letter-spacing: 1.65px;
    font-weight: 500;
    dominant-baseline: middle;
}

.twinx-visual svg .twinx-micro-label {
    font-family: 'Manrope', sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.55px;
    text-transform: uppercase;
    dominant-baseline: middle;
}

.drawer-twinx-svg .twinx-mid-label {
    font-family: 'Manrope', sans-serif;
    font-size: 12.2px;
    font-weight: 700;
    letter-spacing: 1.7px;
    text-transform: uppercase;
    dominant-baseline: middle;
}

.twinx-visual svg .twinx-chip-group,
.drawer-twinx-svg .twinx-chip-group {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 260ms ease;
}

.twinx-visual svg .twinx-chip-group:hover,
.drawer-twinx-svg .twinx-chip-group:hover {
    transform: scale(1.06);
}

.twinx-visual svg .twinx-part-group,
.twinx-visual svg .twinx-hit-area,
.twinx-visual svg .twinx-hit-ring,
.twinx-visual svg .twinx-hit-path {
    cursor: pointer;
}

.twinx-visual svg [tabindex],
.twinx-visual svg [tabindex]:focus,
.twinx-visual svg [tabindex]:focus-visible {
    outline: none !important;
}

.twinx-visual svg .twinx-chip-group .diagram-chip,
.twinx-visual svg .twinx-chip-group .twinx-label-svg,
.twinx-visual svg .twinx-chip-group .twinx-note-svg,
.drawer-twinx-svg .twinx-chip-group .diagram-chip,
.drawer-twinx-svg .twinx-chip-group .twinx-label-svg,
.drawer-twinx-svg .twinx-chip-group .twinx-note-svg {
    transition: fill 220ms ease, stroke 220ms ease, opacity 220ms ease;
}

.twinx-visual svg .twinx-chip-group:hover .diagram-chip,
.drawer-twinx-svg .twinx-chip-group:hover .diagram-chip {
    fill: var(--diagram-chip-hover-fill);
    stroke: var(--brand-blue);
    opacity: 1;
}

.twinx-visual svg .twinx-chip-group:hover .twinx-label-svg,
.twinx-visual svg .twinx-chip-group:hover .twinx-note-svg,
.drawer-twinx-svg .twinx-chip-group:hover .twinx-label-svg,
.drawer-twinx-svg .twinx-chip-group:hover .twinx-note-svg {
    fill: var(--brand-blue);
    opacity: 1;
}

.twinx-visual svg .twinx-chip-group.is-accent .diagram-chip,
.drawer-twinx-svg .twinx-chip-group.is-accent .diagram-chip {
    fill: var(--diagram-chip-accent-fill);
    stroke: var(--brand-blue);
    opacity: 1;
}

.twinx-visual svg .twinx-chip-group.is-accent .twinx-label-svg,
.twinx-visual svg .twinx-chip-group.is-accent .twinx-note-svg,
.drawer-twinx-svg .twinx-chip-group.is-accent .twinx-label-svg,
.drawer-twinx-svg .twinx-chip-group.is-accent .twinx-note-svg {
    fill: var(--brand-blue);
    opacity: 1;
}

/* TwinX + field + contact + architecture circular “core” nodes */
svg circle.diagram-core {
    fill: var(--diagram-twinx-core-fill);
    stroke: var(--diagram-twinx-core-stroke);
    stroke-opacity: 0.42;
}

.twinx-visual svg .diagram-core,
.drawer-twinx-svg .diagram-core {
    filter: var(--diagram-core-drop-shadow);
}

.twinx-visual svg .twinx-part-group.is-hovered .diagram-node {
    fill: var(--brand-blue);
    opacity: 1;
    transform: scale(1.16);
}

.twinx-visual svg .twinx-part-group.is-hovered .diagram-label-group {
    transform: scale(1.07);
}

.twinx-visual svg .twinx-part-group.is-hovered .diagram-link {
    stroke: var(--brand-blue);
    opacity: 1;
}

.twinx-visual svg .twinx-part-group.is-hovered .diagram-chip {
    fill: var(--diagram-chip-hover-fill);
    stroke: var(--brand-blue);
    opacity: 1;
}

.twinx-visual svg .twinx-part-group.is-hovered .twinx-label-svg,
.twinx-visual svg .twinx-part-group.is-hovered .twinx-note-svg,
.twinx-visual svg .twinx-part-group.is-hovered .twinx-core-label {
    fill: var(--brand-blue);
    opacity: 1;
}

.twinx-visual svg .twinx-part-group.is-hovered .twinx-part-ring {
    stroke: var(--brand-blue);
    opacity: 1;
}

.twinx-visual svg .twinx-hit-area { pointer-events: all; }
.twinx-visual svg .twinx-hit-ring { pointer-events: stroke; }
.twinx-visual svg .twinx-hit-path { pointer-events: stroke; }

.twinx-diagram-tooltip {
    position: absolute;
    z-index: 4;
    width: min(calc(240px * var(--ui-scale, 1)), calc(100% - 24px));
    margin: 0;
    padding: calc(10px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1));
    border: 1px solid var(--diagram-tooltip-border, var(--accent-border));
    border-radius: calc(18px * var(--ui-scale, 1));
    background: var(--diagram-tooltip-bg, var(--card-bg));
    box-shadow: var(--diagram-tooltip-shadow, var(--card-shadow));
    backdrop-filter: blur(12px);
    pointer-events: none;
    opacity: 0;
    transform: translateY(calc(8px * var(--ui-scale, 1))) scale(0.98);
    transition: opacity 180ms ease, transform 180ms ease;
}

.twinx-diagram-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.twinx-diagram-tooltip-title {
    font-size: calc(13px * var(--ui-scale, 1)) !important;
    font-weight: 700;
    letter-spacing: calc(1.7px * var(--ui-scale, 1));
    text-transform: uppercase;
    color: var(--brand-blue);
    margin-bottom: calc(6px * var(--ui-scale, 1));
}

.twinx-diagram-tooltip-body {
    margin: 0;
    /* Content text: 1.2× base (11px) before --ui-scale — 20% smaller than prior 1.5× */
    font-size: calc(11px * 1.2 * var(--ui-scale, 1)) !important;
    line-height: 1.5 !important;
    color: var(--text-main);
}

.twinx-diagram-hint {
    margin-top: calc(-18px * var(--ui-scale, 1));
    text-align: center;
    font-size: calc(7.8px * var(--ui-scale, 1));
    font-weight: 600;
    letter-spacing: calc(1.45px * var(--ui-scale, 1));
    font-style: italic;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.62;
    user-select: none;
    align-self: center;
    width: max-content;
}

.drawer-twinx-figure {
    position: relative;
    margin: 50px 0 24px;
    padding-bottom: 6px;
}

.twinx-drawer-hint {
    margin: 6px auto 0;
    font-size: calc(7.4px * var(--ui-scale, 1));
    letter-spacing: calc(1.35px * var(--ui-scale, 1));
    opacity: 0.58;
}

.twinx-drawer-hint-split {
    margin-top: -26px !important;
}

.twinx-drawer-hint-yield {
    margin-top: -2px;
}

.twinx-drawer-hint-integrity {
    margin-top: 0;
}

.drawer-twinx-figure + p {
    margin-top: 0;
}

.drawer-twinx-svg {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    overflow: visible;
}

.drawer-twinx-svg * {
    transition: fill 0.3s ease, stroke 0.3s ease, opacity 0.3s ease;
}

.drawer-twinx-svg .diagram-chip {
    fill: var(--diagram-chip-fill, var(--card-bg));
    opacity: 1;
}

.twinx-visual svg .diagram-chip {
    fill: var(--diagram-chip-fill, var(--card-bg));
}

.drawer-twinx-svg .diagram-warning-chip .diagram-chip {
    fill: var(--diagram-warning-chip-fill);
    stroke: var(--diagram-warning-chip-stroke);
    stroke-width: 1.1;
}

.drawer-twinx-svg .diagram-warning-chip .twinx-note-svg {
    fill: var(--diagram-warning-text);
}

/* Override generic is-accent blue on the bug “Conflicting roles” warning chip */
.drawer-twinx-svg .twinx-chip-group.is-accent.diagram-warning-chip .twinx-note-svg {
    fill: var(--diagram-warning-text);
}

.drawer-twinx-svg .twinx-chip-group.is-accent.diagram-warning-chip .diagram-chip {
    fill: var(--diagram-warning-chip-fill);
    stroke: var(--diagram-warning-chip-stroke);
}

.drawer-twinx-svg .twinx-split-part,
.drawer-twinx-svg .twinx-split-part .twinx-hit-area {
    cursor: pointer;
}

.drawer-twinx-svg .twinx-bug-part,
.drawer-twinx-svg .twinx-bug-part .twinx-hit-area {
    cursor: pointer;
}

.drawer-twinx-svg .twinx-yield-part,
.drawer-twinx-svg .twinx-yield-part .twinx-hit-area {
    cursor: pointer;
}

.drawer-twinx-svg .twinx-integrity-part,
.drawer-twinx-svg .twinx-integrity-part .twinx-hit-area {
    cursor: pointer;
}

.drawer-twinx-svg .twinx-split-part[tabindex],
.drawer-twinx-svg .twinx-split-part[tabindex]:focus,
.drawer-twinx-svg .twinx-split-part[tabindex]:focus-visible,
.drawer-twinx-svg .twinx-bug-part[tabindex],
.drawer-twinx-svg .twinx-bug-part[tabindex]:focus,
.drawer-twinx-svg .twinx-bug-part[tabindex]:focus-visible,
.drawer-twinx-svg .twinx-yield-part[tabindex],
.drawer-twinx-svg .twinx-yield-part[tabindex]:focus,
.drawer-twinx-svg .twinx-yield-part[tabindex]:focus-visible,
.drawer-twinx-svg .twinx-integrity-part[tabindex],
.drawer-twinx-svg .twinx-integrity-part[tabindex]:focus,
.drawer-twinx-svg .twinx-integrity-part[tabindex]:focus-visible {
    outline: none !important;
}

.drawer-twinx-svg .twinx-split-part.is-hovered .diagram-chip {
    fill: var(--diagram-chip-hover-fill);
    stroke: var(--brand-blue);
    opacity: 1;
}

.drawer-twinx-svg .twinx-split-part.is-hovered .twinx-label-svg,
.drawer-twinx-svg .twinx-split-part.is-hovered .twinx-note-svg,
.drawer-twinx-svg .twinx-split-part.is-hovered .diagram-node,
.drawer-twinx-svg .twinx-split-part.is-hovered .diagram-link {
    fill: var(--brand-blue);
    stroke: var(--brand-blue);
    opacity: 1;
}

.drawer-twinx-svg .twinx-split-part.is-hovered .diagram-node {
    transform: scale(1.12);
}

.drawer-twinx-svg .twinx-bug-part.is-hovered .diagram-chip {
    fill: var(--diagram-chip-hover-fill);
    stroke: var(--brand-blue);
    opacity: 1;
}

.drawer-twinx-svg .twinx-bug-part.is-hovered .twinx-label-svg,
.drawer-twinx-svg .twinx-bug-part.is-hovered .twinx-note-svg,
.drawer-twinx-svg .twinx-bug-part.is-hovered .diagram-node,
.drawer-twinx-svg .twinx-bug-part.is-hovered .diagram-link {
    fill: var(--brand-blue);
    stroke: var(--brand-blue);
    opacity: 1;
}

.drawer-twinx-svg .twinx-bug-part.is-hovered .diagram-warning-chip .diagram-chip {
    fill: var(--diagram-warning-chip-fill);
    stroke: var(--diagram-warning-chip-stroke);
    opacity: 1;
}

.drawer-twinx-svg .twinx-bug-part.is-hovered .diagram-warning-chip .twinx-note-svg {
    fill: var(--diagram-warning-text);
    stroke: none;
    opacity: 1;
}

.drawer-twinx-svg .twinx-bug-part.is-hovered .diagram-node {
    transform: scale(1.12);
}

.drawer-twinx-svg .twinx-yield-part.is-hovered .diagram-chip {
    fill: var(--diagram-chip-hover-fill);
    stroke: var(--brand-blue);
    opacity: 1;
}

.drawer-twinx-svg .twinx-yield-part.is-hovered .twinx-label-svg,
.drawer-twinx-svg .twinx-yield-part.is-hovered .twinx-note-svg,
.drawer-twinx-svg .twinx-yield-part.is-hovered .twinx-micro-label,
.drawer-twinx-svg .twinx-yield-part.is-hovered .diagram-node,
.drawer-twinx-svg .twinx-yield-part.is-hovered .diagram-link {
    fill: var(--brand-blue);
    stroke: var(--brand-blue);
    opacity: 1;
}

.drawer-twinx-svg .twinx-yield-part.is-hovered .diagram-node {
    transform: scale(1.12);
}

.drawer-twinx-svg .twinx-integrity-part.is-hovered .diagram-chip {
    fill: var(--diagram-chip-hover-fill);
    stroke: var(--brand-blue);
    opacity: 1;
}

.drawer-twinx-svg .twinx-integrity-part.is-hovered .twinx-label-svg,
.drawer-twinx-svg .twinx-integrity-part.is-hovered .twinx-note-svg,
.drawer-twinx-svg .twinx-integrity-part.is-hovered .diagram-node,
.drawer-twinx-svg .twinx-integrity-part.is-hovered .diagram-link,
.drawer-twinx-svg .twinx-integrity-part.is-hovered .twinx-mid-label {
    fill: var(--brand-blue);
    stroke: var(--brand-blue);
    opacity: 1;
}

.drawer-twinx-svg .twinx-integrity-part.is-hovered .diagram-node,
.drawer-twinx-svg .twinx-integrity-part.is-hovered .diagram-core {
    transform: scale(1.08);
}

.twinx-drawer-tooltip {
    width: min(calc(210px * var(--ui-scale, 1)), calc(100% - 12px));
    padding: calc(9px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
}

.drawer-twinx-svg .diagram-link {
    animation: diagramBreath 7.4s ease-in-out infinite;
}

.drawer-twinx-svg .diagram-path-flow {
    animation: diagramDash 16s linear infinite;
}

.drawer-twinx-svg .diagram-node {
    transform-box: fill-box;
    transform-origin: center;
    animation: diagramPulse 5.8s ease-in-out infinite;
}

.drawer-twinx-svg .diagram-node-delay-2 {
    animation-delay: 0.85s;
}

.drawer-twinx-svg .diagram-node-delay-3 {
    animation-delay: 1.65s;
}

.drawer-twinx-svg .diagram-node-delay-4 {
    animation-delay: 2.35s;
}

.drawer-twinx-svg .diagram-core {
    transform-box: fill-box;
    transform-origin: center;
    animation: diagramCorePulse 7.8s ease-in-out infinite;
}

.drawer-twinx-svg .diagram-outer-rotor {
    transform-box: fill-box;
    transform-origin: center;
    animation: diagramSpinSlow 40s linear infinite;
}

.drawer-twinx-svg .diagram-inner-rotor {
    transform-box: fill-box;
    transform-origin: center;
    animation: diagramSpinReverse 32s linear infinite;
}

.drawer-twinx-svg .diagram-label-group {
    transform-box: fill-box;
    transform-origin: center;
    animation: none;
}

.drawer-twinx-svg .diagram-label-group.delay-2 {
    animation-delay: 0s;
}

.drawer-twinx-svg .diagram-label-group.delay-3 {
    animation-delay: 0s;
}

.drawer-twinx-svg .diagram-label-group.delay-4 {
    animation-delay: 0s;
}

.drawer-twinx-svg .diagram-warning-chip {
    animation: diagramWarningJitter 5.6s steps(1, end) infinite;
}

@keyframes diagramWarningJitter {
    0%, 18%, 24%, 52%, 58%, 100% { transform: translateY(0); }
    20% { transform: translateY(-1px); }
    22% { transform: translateY(1px); }
    54% { transform: translateY(-0.8px); }
    56% { transform: translateY(0.8px); }
}