html.pxmkv-page-scroll-locked,
body.pxmkv-page-scroll-locked {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

.pxmkv-builder__diagram-wrap {
    display: grid;
    gap: 0;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(var(--pxmkv-color-ffffff-rgb),0.10);
    border-radius: var(--pxmkv-builder-radius);
    background: rgba(var(--pxmkv-color-ffffff-rgb),0.025);
}

.pxmkv-builder__diagram-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 11px 13px;
    border-bottom: 1px solid rgba(var(--pxmkv-color-ffffff-rgb),0.08);
    color: rgba(var(--pxmkv-color-ffffff-rgb),0.64);
    font-size: 11.68px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pxmkv-builder__diagram-expand {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 10px !important;
    border: 1px solid var(--pxmkv-builder-accent-border) !important;
    border-radius: var(--pxmkv-radius-pill) !important;
    background: var(--pxmkv-builder-accent-background) !important;
    color: var(--pxmkv-builder-accent-text) !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    cursor: pointer;
}

.pxmkv-builder__diagram-expand:hover,
.pxmkv-builder__diagram-expand:focus-visible,
.pxmkv-builder__diagram-expand:active {
    border-color: var(--pxmkv-builder-accent-hover-border) !important;
    background: var(--pxmkv-builder-accent-hover-background) !important;
    color: var(--pxmkv-builder-accent-hover-text) !important;
    outline: none;
}

.pxmkv-builder__diagram-expand:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--pxmkv-color-ffef19-rgb),0.16) !important;
}

.pxmkv-builder__diagram-expand-icon {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 auto;
    align-self: center;
}

.pxmkv-builder__diagram-expand .pxmkv-builder__diagram-expand-icon {
    color: var(--pxmkv-builder-accent-icon);
}

.pxmkv-builder__diagram-expand:hover .pxmkv-builder__diagram-expand-icon,
.pxmkv-builder__diagram-expand:focus-visible .pxmkv-builder__diagram-expand-icon,
.pxmkv-builder__diagram-expand:active .pxmkv-builder__diagram-expand-icon {
    color: var(--pxmkv-builder-accent-hover-icon);
}

.pxmkv-builder__diagram-expand > span {
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}

.pxmkv-builder__diagram-wrap > .pxmkv-builder__diagram {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.pxmkv-diagram-modal[hidden] {
    display: none !important;
}

.pxmkv-diagram-modal *,
.pxmkv-diagram-modal *::before,
.pxmkv-diagram-modal *::after {
    font-family: inherit;
}

.pxmkv-diagram-modal button {
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.pxmkv-diagram-modal {
    position: fixed;
    inset: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    padding: 18px;
    isolation: isolate;
}

.pxmkv-diagram-modal__overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(var(--pxmkv-color-090c12-rgb),0.58);
    -webkit-backdrop-filter: blur(10px) saturate(112%);
    backdrop-filter: blur(10px) saturate(112%);
}

.pxmkv-diagram-modal__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(1600px, calc(100vw - 36px));
    height: min(920px, calc(100dvh - 36px));
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(var(--pxmkv-color-ffffff-rgb),0.13);
    border-radius: var(--pxmkv-radius-diagram-modal);
    background: linear-gradient(145deg, rgba(var(--pxmkv-color-1e1e1c-rgb),0.99), rgba(var(--pxmkv-color-0e0e0e-rgb),0.995));
    color: var(--pxmkv-color-ffffff);
    box-shadow: 0 34px 110px rgba(var(--pxmkv-color-000000-rgb),0.58);
    outline: 0;
}

.pxmkv-diagram-modal__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: start;
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(var(--pxmkv-color-ffffff-rgb),0.10);
}

.pxmkv-diagram-modal__eyebrow {
    margin: 0 0 5px !important;
    color: var(--pxmkv-builder-yellow, var(--pxmkv-color-ffef19)) !important;
    font-size: 11.52px !important;
    font-weight: 900 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
}

.pxmkv-diagram-modal__header h2 {
    margin: 0 !important;
    color: var(--pxmkv-color-ffffff) !important;
    font-size: clamp(21.6px, 2vw, 32px) !important;
    line-height: 1.08 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.pxmkv-diagram-modal__header p:last-child {
    max-width: 860px;
    margin: 8px 0 0 !important;
    color: rgba(var(--pxmkv-color-ffffff-rgb),0.68) !important;
    font-size: 14.08px !important;
    line-height: 1.5 !important;
}

.pxmkv-diagram-modal__close {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    border: 1px solid var(--pxmkv-modal-close-border) !important;
    border-radius: var(--pxmkv-radius-pill) !important;
    background: var(--pxmkv-modal-close-background) !important;
    color: var(--pxmkv-modal-close-text) !important;
    box-shadow: none !important;
    cursor: pointer;
}

.pxmkv-diagram-modal__close:hover,
.pxmkv-diagram-modal__close:focus-visible,
.pxmkv-diagram-modal__close:active {
    border-color: var(--pxmkv-modal-close-hover-border) !important;
    background: var(--pxmkv-modal-close-hover-background) !important;
    color: var(--pxmkv-modal-close-hover-text) !important;
    outline: none;
}

.pxmkv-diagram-modal__close:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--pxmkv-color-ffef19-rgb),0.18) !important;
}

.pxmkv-diagram-modal__close-icon {
    width: 20px !important;
    height: 20px !important;
}

.pxmkv-diagram-modal__close .pxmkv-diagram-modal__close-icon {
    color: var(--pxmkv-modal-close-icon);
}

.pxmkv-diagram-modal__close:hover .pxmkv-diagram-modal__close-icon,
.pxmkv-diagram-modal__close:focus-visible .pxmkv-diagram-modal__close-icon,
.pxmkv-diagram-modal__close:active .pxmkv-diagram-modal__close-icon {
    color: var(--pxmkv-modal-close-hover-icon);
}

.pxmkv-diagram-modal__canvas {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 28px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    scrollbar-gutter: stable;
}

.pxmkv-diagram-modal__canvas.is-pannable {
    cursor: grab;
}

.pxmkv-diagram-modal__canvas.is-pannable.is-pan-armed,
.pxmkv-diagram-modal__canvas.is-pannable.is-dragging {
    cursor: grabbing;
}

.pxmkv-diagram-modal__canvas.is-pan-armed,
.pxmkv-diagram-modal__canvas.is-dragging {
    user-select: none;
    -webkit-user-select: none;
}

.pxmkv-diagram-modal__canvas:focus-visible {
    outline: 2px solid rgba(var(--pxmkv-color-ffef19-rgb),0.78);
    outline-offset: -3px;
}

@media (pointer: coarse) {
    .pxmkv-diagram-modal__canvas.is-pannable,
    .pxmkv-diagram-modal__canvas.is-pannable.is-pan-armed,
    .pxmkv-diagram-modal__canvas.is-pannable.is-dragging {
        cursor: auto;
    }
}

.pxmkv-diagram-modal__canvas > svg {
    display: block;
    width: max(1180px, 100%);
    min-width: 1180px;
    height: auto;
    margin: 0 auto;
    overflow: visible;
}

.pxmkv-diagram-modal__canvas .pxmkv-builder__diagram-node {
    stroke-width: 1.5;
}

.pxmkv-diagram-modal__canvas .pxmkv-builder__diagram-text {
    font-size: 16px;
}

.pxmkv-diagram-modal__canvas .pxmkv-builder__diagram-small {
    font-size: 13px;
}

.pxmkv-diagram-modal.is-open .pxmkv-diagram-modal__overlay {
    animation: pxmkvDiagramBackdropIn 180ms ease both;
}

.pxmkv-diagram-modal.is-open .pxmkv-diagram-modal__dialog {
    animation: pxmkvDiagramDialogIn 220ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes pxmkvDiagramBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pxmkvDiagramDialogIn {
    from { opacity: 0; transform: translateY(10px) scale(.992); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
    .pxmkv-builder__diagram-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .pxmkv-builder__diagram-expand {
        width: 100%;
    }

    .pxmkv-diagram-modal {
        padding: 0;
        place-items: end stretch;
    }

    .pxmkv-diagram-modal__dialog {
        width: 100%;
        height: calc(100dvh - 10px);
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: var(--pxmkv-radius-diagram-modal-mobile) var(--pxmkv-radius-diagram-modal-mobile) 0 0;
    }

    .pxmkv-diagram-modal__header {
        padding: 18px 16px 15px;
    }

    .pxmkv-diagram-modal__canvas {
        padding: 18px 14px calc(22px + env(safe-area-inset-bottom, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .pxmkv-diagram-modal.is-open .pxmkv-diagram-modal__overlay,
    .pxmkv-diagram-modal.is-open .pxmkv-diagram-modal__dialog {
        animation: none !important;
    }
}

.pxmkv-diagram-modal__detail[hidden] {
    display: none !important;
}

.pxmkv-diagram-modal__detail {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: grid;
    place-items: center;
    padding: 24px;
    isolation: isolate;
}

.pxmkv-diagram-modal__detail-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(var(--pxmkv-color-07090d-rgb),0.56);
    -webkit-backdrop-filter: blur(14px) saturate(116%);
    backdrop-filter: blur(14px) saturate(116%);
}

.pxmkv-diagram-modal__detail-dialog {
    position: relative;
    z-index: 1;
    width: min(760px, 100%);
    max-height: min(680px, calc(100dvh - 96px));
    overflow: auto;
    padding: 28px 30px 30px;
    border: 1px solid rgba(var(--pxmkv-color-ffef19-rgb),0.42);
    border-radius: var(--pxmkv-radius-diagram-detail-modal);
    background: linear-gradient(145deg, rgba(var(--pxmkv-color-1f1f1d-rgb),0.98), rgba(var(--pxmkv-color-0d0d0d-rgb),0.99));
    color: var(--pxmkv-color-ffffff);
    box-shadow: 0 28px 90px rgba(var(--pxmkv-color-000000-rgb),0.62);
    outline: 0;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.pxmkv-diagram-modal__detail-dialog:focus-visible {
    box-shadow: 0 28px 90px rgba(var(--pxmkv-color-000000-rgb),0.62), 0 0 0 3px rgba(var(--pxmkv-color-ffef19-rgb),0.18);
}

.pxmkv-diagram-modal__detail-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border: 1px solid var(--pxmkv-modal-detail-close-border) !important;
    border-radius: var(--pxmkv-radius-pill) !important;
    background: var(--pxmkv-modal-detail-close-background) !important;
    color: var(--pxmkv-modal-detail-close-text) !important;
    box-shadow: none !important;
    cursor: pointer;
}

.pxmkv-diagram-modal__detail-close:hover,
.pxmkv-diagram-modal__detail-close:focus-visible,
.pxmkv-diagram-modal__detail-close:active {
    border-color: var(--pxmkv-modal-detail-close-hover-border) !important;
    background: var(--pxmkv-modal-detail-close-hover-background) !important;
    color: var(--pxmkv-modal-detail-close-hover-text) !important;
    outline: none;
}

.pxmkv-diagram-modal__detail-close:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--pxmkv-color-ffef19-rgb),0.18) !important;
}

.pxmkv-diagram-modal__detail-close-icon {
    width: 20px !important;
    height: 20px !important;
}

.pxmkv-diagram-modal__detail-close .pxmkv-diagram-modal__detail-close-icon {
    color: var(--pxmkv-modal-detail-close-icon);
}

.pxmkv-diagram-modal__detail-close:hover .pxmkv-diagram-modal__detail-close-icon,
.pxmkv-diagram-modal__detail-close:focus-visible .pxmkv-diagram-modal__detail-close-icon,
.pxmkv-diagram-modal__detail-close:active .pxmkv-diagram-modal__detail-close-icon {
    color: var(--pxmkv-modal-detail-close-hover-icon);
}

.pxmkv-diagram-modal__detail-eyebrow {
    margin: 0 52px 7px 0 !important;
    color: var(--pxmkv-builder-yellow, var(--pxmkv-color-ffef19)) !important;
    font-size: 11.52px !important;
    font-weight: 900 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

.pxmkv-diagram-modal__detail-dialog h3 {
    margin: 0 52px 8px 0 !important;
    color: var(--pxmkv-color-ffffff) !important;
    font-size: clamp(20.8px, 2.4vw, 30.4px) !important;
    line-height: 1.15 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.pxmkv-diagram-modal__detail-meta {
    margin: 0 52px 18px 0 !important;
    color: var(--pxmkv-builder-yellow, var(--pxmkv-color-ffef19)) !important;
    font-size: 14.08px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
}

.pxmkv-diagram-modal__detail-body {
    margin: 0 !important;
    color: rgba(var(--pxmkv-color-ffffff-rgb),0.82) !important;
    font-size: 15.04px !important;
    line-height: 1.7 !important;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.pxmkv-diagram-modal__detail.is-open .pxmkv-diagram-modal__detail-overlay {
    animation: pxmkvDiagramDetailBackdropIn 160ms ease both;
}

.pxmkv-diagram-modal__detail.is-open .pxmkv-diagram-modal__detail-dialog {
    animation: pxmkvDiagramDetailDialogIn 190ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes pxmkvDiagramDetailBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pxmkvDiagramDetailDialogIn {
    from { opacity: 0; transform: translateY(8px) scale(.992); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 760px) {
    .pxmkv-diagram-modal__detail {
        place-items: center stretch;
        padding: calc(12px + env(safe-area-inset-top, 0px)) 10px calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .pxmkv-diagram-modal__detail-dialog {
        width: 100%;
        max-height: min(72dvh, 680px);
        padding: 24px 20px 26px;
        border-radius: var(--pxmkv-radius-diagram-detail-modal-mobile);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pxmkv-diagram-modal__detail.is-open .pxmkv-diagram-modal__detail-overlay,
    .pxmkv-diagram-modal__detail.is-open .pxmkv-diagram-modal__detail-dialog {
        animation: none !important;
    }
}