.knowledge-trigger {
    margin-top: 18px;
    min-height: 38px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 999px;
    color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.025);
    cursor: pointer;
    font: 650 .5rem/1 monospace;
    letter-spacing: .08em;
    transition: .2s ease;
}
.knowledge-trigger:hover {
    color: #fff;
    border-color: rgba(32,230,255,.32);
    transform: translateY(-2px);
}
.knowledge-trigger i { color: var(--cyan); font-style: normal; }

.knowledge-explorer {
    position: fixed;
    inset: 0;
    z-index: 96000;
    display: grid;
    place-items: center;
    padding: 22px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}
.knowledge-explorer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.knowledge-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(1,4,8,.8);
    backdrop-filter: blur(20px) saturate(125%);
}
.knowledge-panel {
    position: relative;
    z-index: 2;
    width: min(1100px, 100%);
    min-height: min(720px, calc(100vh - 44px));
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 48%, rgba(32,230,255,.06), transparent 22%),
        radial-gradient(circle at 23% 75%, rgba(155,98,255,.06), transparent 25%),
        linear-gradient(160deg, rgba(255,255,255,.035), transparent 30%),
        rgba(5,9,14,.97);
    box-shadow: 0 50px 150px rgba(0,0,0,.6);
}
.knowledge-head {
    min-height: 84px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.knowledge-head span {
    color: var(--cyan);
    font: 650 .48rem/1 monospace;
    letter-spacing: .12em;
}
.knowledge-head h2 {
    margin: 7px 0 0;
    color: #fff;
    font-size: 1.5rem;
    letter-spacing: -.04em;
}
.knowledge-head button {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
    color: rgba(255,255,255,.6);
    background: rgba(255,255,255,.025);
    cursor: pointer;
    font-size: 1.3rem;
}
.knowledge-map {
    position: relative;
    min-height: 520px;
    margin: 18px 22px 0;
}
.knowledge-core,
.knowledge-node {
    position: absolute;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.035), transparent 45%),
        rgba(7,11,17,.88);
    box-shadow: 0 20px 60px rgba(0,0,0,.22);
}
.knowledge-core {
    left: 50%;
    top: 50%;
    width: 210px;
    height: 210px;
    display: grid;
    place-content: center;
    text-align: center;
    transform: translate(-50%,-50%);
    border-color: rgba(32,230,255,.28);
    background:
        radial-gradient(circle at 50% 40%, rgba(32,230,255,.13), transparent 38%),
        rgba(6,10,16,.96);
}
.knowledge-core small {
    color: rgba(255,255,255,.3);
    font: 650 .46rem/1 monospace;
    letter-spacing: .14em;
}
.knowledge-core strong {
    margin: 8px 0;
    color: #fff;
    font-size: 2.8rem;
    letter-spacing: -.06em;
}
.knowledge-core span {
    color: var(--cyan);
    font-size: .55rem;
}
.knowledge-node {
    width: 245px;
    min-height: 118px;
    padding: 16px;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: .22s ease;
}
.knowledge-node:hover {
    transform: translateY(-3px);
    border-color: rgba(32,230,255,.28);
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
}
.knowledge-node span {
    color: rgba(255,255,255,.34);
    font: 650 .46rem/1 monospace;
    letter-spacing: .09em;
}
.knowledge-node strong {
    display: block;
    margin: 11px 0 7px;
    color: #fff;
    font-size: 1.9rem;
    letter-spacing: -.05em;
}
.knowledge-node small {
    display: block;
    color: rgba(255,255,255,.27);
    font-size: .52rem;
    line-height: 1.45;
}
.node-software { left: 3%; top: 8%; border-left-color: rgba(32,230,255,.35); }
.node-roles { right: 3%; top: 8%; border-left-color: rgba(155,98,255,.35); }
.node-experience { left: 3%; bottom: 8%; border-left-color: rgba(255,150,63,.35); }
.node-evidence { right: 3%; bottom: 8%; border-left-color: rgba(255,77,163,.35); }

.knowledge-connector {
    position: absolute;
    z-index: -1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(32,230,255,.32), rgba(255,255,255,.08));
    transform-origin: left center;
}
.connector-a { left: 26%; top: 29%; width: 25%; transform: rotate(22deg); }
.connector-b { left: 50%; top: 29%; width: 25%; transform: rotate(-22deg); }
.connector-c { left: 26%; top: 69%; width: 25%; transform: rotate(-22deg); }
.connector-d { left: 50%; top: 69%; width: 25%; transform: rotate(22deg); }
.knowledge-foot {
    margin: 0 22px 20px;
    padding: 16px 18px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    align-items: center;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    background: rgba(255,255,255,.015);
}
.knowledge-foot span {
    display: block;
    color: var(--cyan);
    font: 650 .44rem/1 monospace;
    letter-spacing: .08em;
}
.knowledge-foot b {
    display: block;
    margin-top: 6px;
    color: rgba(255,255,255,.7);
    font-size: .6rem;
}
.knowledge-foot p {
    margin: 0;
    color: rgba(255,255,255,.28);
    font-size: .52rem;
    line-height: 1.55;
    text-align: right;
}
@media (max-width: 820px) {
    .knowledge-panel { overflow: auto; }
    .knowledge-map {
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 14px 0;
    }
    .knowledge-core,
    .knowledge-node {
        position: relative;
        inset: auto;
        width: auto;
        min-height: 120px;
        transform: none;
    }
    .knowledge-core {
        grid-column: 1 / -1;
        height: 150px;
    }
    .knowledge-connector { display: none; }
    .knowledge-foot { grid-template-columns: 1fr; }
    .knowledge-foot p { text-align: left; }
}
@media (max-width: 520px) {
    .knowledge-explorer { padding: 8px; }
    .knowledge-map { grid-template-columns: 1fr; }
    .knowledge-core { grid-column: auto; }
}

.node-projects{
    left:50%;top:2%;width:230px;min-height:102px;
    transform:translateX(-50%);
    border-left-color:rgba(79,120,255,.38)
}
.node-projects:hover{transform:translateX(-50%) translateY(-3px)}
.connector-e{
    left:50%;top:21%;width:1px;height:88px;
    background:linear-gradient(180deg,rgba(79,120,255,.34),rgba(32,230,255,.2),rgba(255,255,255,.05))
}
@media(max-width:820px){
    .node-projects{transform:none}
    .node-projects:hover{transform:none}
}

.node-technologies{
    left:50%;
    bottom:2%;
    width:230px;
    min-height:102px;
    transform:translateX(-50%);
    border-left-color:rgba(184,255,104,.62);
    background:
        radial-gradient(circle at 50% 100%, rgba(184,255,104,.12), transparent 42%),
        rgba(20,34,48,.78);
}
.node-technologies:hover{
    transform:translateX(-50%) translateY(-3px);
}
.connector-f{
    left:50%;
    top:58%;
    width:1px;
    height:100px;
    background:
        linear-gradient(180deg,
            rgba(91,234,255,.12),
            rgba(184,255,104,.36),
            rgba(255,255,255,.04));
}
@media(max-width:820px){
    .node-technologies{transform:none}
    .node-technologies:hover{transform:none}
}