article {
    max-width: 100% !important;
}


/* -------- Gruvbox custom color -------- */

/* keywords */
.z-keyword {
    color: #fa5c4b !important;
}

/* let, fn */
.z-storage,
.z-storage.z-type {
    color: #fa5c4b !important;
}

/* functions + macros */
.z-entity.z-name.z-function {
    color: #fabd2f !important;
}

/* types */
.z-entity.z-name.z-type {
    color: #8ec07c !important;
}

/* module/path names */
.z-entity.z-name {
    color: #fdf4c1 !important;
}

/* variables */
.z-variable,
.z-variable.z-other {
    color: #fdf4c1 !important;
}

/* numbers */
.z-constant {
    color: #d3869b !important;
}

/* strings */
.z-string {
    color: #b8bb26 !important;
}

/* operators */
.z-keyword.z-operator {
    color: #fe8019 !important;
}

/* punctuation */
.z-punctuation {
    color: #ebdbb2 !important;
}

/* comments */
.z-comment,
.z-comment.z-comment {
    color: #928374 !important;
    font-style: italic;
}


/* Wire body */
.wire {
    position: relative;
    width: 200px;
    height: 4px;
    border-radius: 3px;
    /* margin-bottom: 20px; */
    /* Space between wires */

}

/* Wire colors */
.wire.red {
    background: #ff0000;
}

/* Red wire */
.wire.black {
    background: #000000;
    border: 2px solid #FFFFFF;
}

/* Black wire */
.wire.green {
    background: #13d613;
}

/* Green wire */
.wire.yellow {
    background: #e6e61c;
}

/* Yellow wire */
.wire.blue {
    background: #057af7;
}

/* Default blue wire */
.wire.orange {
    background: #fc5310;
}

/* Orange wire */
.wire.brown {
    background: #824101;
}

/* Orange wire */
.wire.purple {
    background: #800080;
}

/* White wire with border to make it visible */
.white {
    background: #ffffff;
    /* White color */
    /* border: 1px dotted #AAAAAA; */
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

/* Male connector (left) */
.male-left {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 8px;
    background: #000;
    border: 2px solid #CCC;
}

/* Pin extending from left connector */
.male-left::after {
    content: '';
    position: absolute;
    left: -12px;
    /* Reduced gap between connector and pin */
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 2px;
    background: #555;
    /* Pin color */
}

/* Male connector (right) */
.male-right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 8px;
    background: #000;
    border: 2px solid #CCC;

}

/* Pin extending from right connector */
.male-right::after {
    content: '';
    position: absolute;
    right: -12px;
    /* Reduced gap between connector and pin */
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 2px;
    background: #555;
    /* Pin color */
}

/* Female connector (left) */
.female-left {
    position: absolute;
    left: -19px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 8px;
    background: #000;
    border: 2px solid #CCC;
}

.female-left::after {
    content: '';
    position: absolute;
    left: 1px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: #999;
    border-radius: 50%;
}

/* Female connector (right) */
.female-right {
    position: absolute;
    right: -19px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 8px;
    background: #000;
    border: 2px solid #CCC;
}

.female-right::after {
    content: '';
    position: absolute;
    right: 1px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: #999;
    border-radius: 50%;
}