:root {
  --viewport-width: 100vw;
  --viewport-height: 100vh;
  --viewport-scaling: 1;
}

html, body {
  touch-action: manipulation; /* limits gestures to taps, not pinch */
  overscroll-behavior: none;
}

body.modal-open {
  overflow: hidden;
}

.modal, .iframe-wrapper {
  touch-action: none;
}

.mindsurge {
    display: flex; 
    width: var(--viewport-width); 
    height: var(--viewport-height);
    justify-content: center;   /* Horizontal */
    align-items: center;       /* Vertical */
    position: absolute;
    transform: scale(var(--viewport-scaling));
    background-image: url('mindsurge.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

#logo {
    display: flex;
    width: var(--viewport-width);
    height: var(--viewport-height);
    transform: scale(calc(1 / var(--viewport-scaling)));
    justify-content: center;   /* Horizontal */
    align-items: center;       /* Vertical */
    position: absolute;
    z-index: -10;
}

@media (max-width: 768px) {
  .modal {
    position: absolute;
    top: 10%;
    left: 5%;
    width: 90%;
    height: 70%;
  }
}

.modal {
  display: none;
  position: fixed;
  top: 20%;
  left: 20%;
  transform: translate(-20%, -20%);
  padding: 1em;
  max-width: 50vw;
  max-height: 40vh;
  width: 640px;
  height: 360px;
  background: white;
  box-shadow: 12px 12px 20px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow:
    3px 3px 6px rgba(0, 0, 0, 0.2), /* main outer shadow */
    inset 0 0 10px rgba(255, 255, 255, 0.4); /* soft inner light */
  z-index: 1000;
  touch-action: none;
}

.modal.visible {
    display: block;
}

.modal iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.close-btn {
    position: absolute;
    top: 4px;
    right: 15px;
    font-size: 20px;
    color: #444;
    cursor: pointer;
    z-index: 1001;
}

.map {
    display: block; 
    width: 600px; 
    height: 504px; 
    position: absolute;
    justify-content: center;   /* Horizontal */
    align-items: center;       /* Vertical */
    overflow: hidden; 
    opacity: 0;
    transform: scale(0.8);
    transition: 
        opacity 0.2s ease-in,
        transform 0.2s cubic-bezier(0.5, 2.4, 0.6, 0.5);
    transform-origin: top left;
}

#brainmap {
    opacity: 0;
    transform: scale(0.8);
    transition: 
        opacity 0.2s ease-in,
        transform 0.2s cubic-bezier(0.5, 2.4, 0.6, 0.5);
    background-image: url("wp-content/uploads/2025/04/brain.png"), url("wp-content/uploads/2025/04/frontal.png"), url("wp-content/uploads/2025/04/leftlat.png"), url("wp-content/uploads/2025/04/leftmed.png"), url("wp-content/uploads/2025/04/rightlat.png"), url("wp-content/uploads/2025/04/rightmed.png"), url("wp-content/uploads/2025/04/poster.png");
    background-size: 300px 360px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}

#fieldsmap {
    opacity: 0;
    transform: scale(0.8);
    transition: 
        opacity 0.2s ease-in,
        transform 0.2s cubic-bezier(0.5, 2.4, 0.6, 0.5);
    background-image: url("wp-content/uploads/2025/06/fields.png"), url("wp-content/uploads/2025/06/fields-ai.png"), url("wp-content/uploads/2025/06/fields-tts.png"), url("wp-content/uploads/2025/06/fields-dds.png"), url("wp-content/uploads/2025/06/fields-dep.png"), url("wp-content/uploads/2025/06/fields-pri.png"), url("wp-content/uploads/2025/06/fields-rts.png"), url("wp-content/uploads/2025/06/fields-tcs.png"), url("wp-content/uploads/2025/06/fields-math.png"), url("wp-content/uploads/2025/06/fields-tms.png");
    background-size: 300px 360px;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}

#lattice {
    z-index: -1;
}

.map > table { 
    display: table;
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.map tr {
    display: table-row;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.map td {
    display: table-cell;
    width: 30px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0px solid #000; 
    vertical-align: bottom;
}

.map td:empty::after {
   content:"\00a0";
}

#brainmap:has(td.frontal.hover) {background-image: url("wp-content/uploads/2025/04/frontal.png");}
#brainmap:has(td.frontal:hover) {background-image: url("wp-content/uploads/2025/04/frontal.png");}
#brainmap:has(td.frontal:focus) {background-image: url("wp-content/uploads/2025/04/frontal.png");}
#brainmap:has(td.frontal:active) {background-image: url("wp-content/uploads/2025/04/frontal.png");}
#brainmap:has(td.leftlat.hover) {background-image: url("wp-content/uploads/2025/04/leftlat.png");}
#brainmap:has(td.leftlat:hover) {background-image: url("wp-content/uploads/2025/04/leftlat.png");}
#brainmap:has(td.leftlat:focus) {background-image: url("wp-content/uploads/2025/04/leftlat.png");}
#brainmap:has(td.leftlat:active) {background-image: url("wp-content/uploads/2025/04/leftlat.png");}
#brainmap:has(td.rightlat.hover) {background-image: url("wp-content/uploads/2025/04/rightlat.png");}
#brainmap:has(td.rightlat:hover) {background-image: url("wp-content/uploads/2025/04/rightlat.png");}
#brainmap:has(td.rightlat:focus) {background-image: url("wp-content/uploads/2025/04/rightlat.png");}
#brainmap:has(td.rightlat:active) {background-image: url("wp-content/uploads/2025/04/rightlat.png");}
#brainmap:has(td.leftmed.hover) {background-image: url("wp-content/uploads/2025/04/leftmed.png");}
#brainmap:has(td.leftmed:hover) {background-image: url("wp-content/uploads/2025/04/leftmed.png");}
#brainmap:has(td.leftmed:focus) {background-image: url("wp-content/uploads/2025/04/leftmed.png");}
#brainmap:has(td.leftmed:active) {background-image: url("wp-content/uploads/2025/04/leftmed.png");}
#brainmap:has(td.rightmed.hover) {background-image: url("wp-content/uploads/2025/04/rightmed.png");}
#brainmap:has(td.rightmed:hover) {background-image: url("wp-content/uploads/2025/04/rightmed.png");}
#brainmap:has(td.rightmed:focus) {background-image: url("wp-content/uploads/2025/04/rightmed.png");}
#brainmap:has(td.rightmed:active) {background-image: url("wp-content/uploads/2025/04/rightmed.png");}
#brainmap:has(td.poster.hover) {background-image: url("wp-content/uploads/2025/04/poster.png");}
#brainmap:has(td.poster:hover) {background-image: url("wp-content/uploads/2025/04/poster.png");}
#brainmap:has(td.poster:focus) {background-image: url("wp-content/uploads/2025/04/poster.png");}
#brainmap:has(td.poster:active) {background-image: url("wp-content/uploads/2025/04/poster.png");}

#fieldsmap:has(td.ai.hover) {background-image: url("wp-content/uploads/2025/06/fields-ai.png");}
#fieldsmap:has(td.ai:hover) {background-image: url("wp-content/uploads/2025/06/fields-ai.png");}
#fieldsmap:has(td.ai:focus) {background-image: url("wp-content/uploads/2025/05/fields-ai.png");}
#fieldsmap:has(td.ai:active) {background-image: url("wp-content/uploads/2025/06/fields-ai.png.png");}
#fieldsmap:has(td.dds.hover) {background-image: url("wp-content/uploads/2025/06/fields-dds.png");}
#fieldsmap:has(td.dds:hover) {background-image: url("wp-content/uploads/2025/06/fields-dds.png");}
#fieldsmap:has(td.dds:focus) {background-image: url("wp-content/uploads/2025/06/fields-dds.png");}
#fieldsmap:has(td.dds:active) {background-image: url("wp-content/uploads/2025/06/fields-dds.png");}
#fieldsmap:has(td.dep.hover) {background-image: url("wp-content/uploads/2025/06/fields-dep.png");}
#fieldsmap:has(td.dep:hover) {background-image: url("wp-content/uploads/2025/06/fields-dep.png");}
#fieldsmap:has(td.dep:focus) {background-image: url("wp-content/uploads/2025/06/fields-dep.png");}
#fieldsmap:has(td.dep:active) {background-image: url("wp-content/uploads/2025/06/fields-dep.png");}
#fieldsmap:has(td.pri.hover) {background-image: url("wp-content/uploads/2025/06/fields-pri.png");}
#fieldsmap:has(td.pri:hover) {background-image: url("wp-content/uploads/2025/06/fields-pri.png");}
#fieldsmap:has(td.pri:focus) {background-image: url("wp-content/uploads/2025/06/fields-pri.png");}
#fieldsmap:has(td.pri:active) {background-image: url("wp-content/uploads/2025/06/fields-pri.png");}
#fieldsmap:has(td.rts.hover) {background-image: url("wp-content/uploads/2025/06/fields-rts.png");}
#fieldsmap:has(td.rts:hover) {background-image: url("wp-content/uploads/2025/06/fields-rts.png");}
#fieldsmap:has(td.rts:focus) {background-image: url("wp-content/uploads/2025/06/fields-rts.png");}
#fieldsmap:has(td.rts:active) {background-image: url("wp-content/uploads/2025/06/fields-rts.png");}
#fieldsmap:has(td.tcs.hover) {background-image: url("wp-content/uploads/2025/06/fields-tcs.png");}
#fieldsmap:has(td.tcs:hover) {background-image: url("wp-content/uploads/2025/06/fields-tcs.png");}
#fieldsmap:has(td.tcs:focus) {background-image: url("wp-content/uploads/2025/06/fields-tcs.png");}
#fieldsmap:has(td.tcs:active) {background-image: url("wp-content/uploads/2025/06/fields-tcs.png");}
#fieldsmap:has(td.math.hover) {background-image: url("wp-content/uploads/2025/06/fields-math.png");}
#fieldsmap:has(td.math:hover) {background-image: url("wp-content/uploads/2025/06/fields-math.png");}
#fieldsmap:has(td.math:focus) {background-image: url("wp-content/uploads/2025/06/fields-math.png");}
#fieldsmap:has(td.math:active) {background-image: url("wp-content/uploads/2025/06/fields-math.png");}
#fieldsmap:has(td.tms.hover) {background-image: url("wp-content/uploads/2025/06/fields-tms.png");}
#fieldsmap:has(td.tms:hover) {background-image: url("wp-content/uploads/2025/06/fields-tms.png");}
#fieldsmap:has(td.tms:focus) {background-image: url("wp-content/uploads/2025/06/fields-tms.png");}
#fieldsmap:has(td.tms:active) {background-image: url("wp-content/uploads/2025/06/fields-tms.png");}
#fieldsmap:has(td.tts.hover) {background-image: url("wp-content/uploads/2025/06/fields-tts.png");}
#fieldsmap:has(td.tts:hover) {background-image: url("wp-content/uploads/2025/06/fields-tts.png");}
#fieldsmap:has(td.tts:focus) {background-image: url("wp-content/uploads/2025/06/fields-tts.png");}
#fieldsmap:has(td.tts:active) {background-image: url("wp-content/uploads/2025/06/fields-tts.png");}


#fieldsmap.visible {
    opacity: 1;
    transform: scale(1);
    background-size: 80% 80%;
    background-image: url("wp-content/uploads/2025/06/fields.png");
}
#brainmap.visible {
    opacity: 1;
    transform: scale(1);
    background-image: url("wp-content/uploads/2025/04/brain.png");
}
#lattice.fields {
    font-family: "Trebuchet MS",Helvetica,sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ac8ffe;
}
#lattice.brain {
    font-family: "Trebuchet MS",Helvetica,sans-serif !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    color: #ac8ffe;
}
#lattice.visible {
    opacity: 1;
    transform: scale(1);
}

#lattice td.void, #fieldsmap td.void {
  pointer-events: none;
  touch-action: none;
}

#lattice td.trule {
    position: relative;
    border-top: 2px solid transparent;
}
#lattice td.leftlat.trule.clip.right {
    right: 20px;
}
#lattice td.trule::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0px;
    width: 100%;
    height: 2px;
    background: linear-gradient(to top, #ffcc80, #fe7443, #ffcc80);
    transition: all 0.3s ease-in-out;
    z-index: -1;
}
#lattice td.trule.slip.out::before {
    top: -3px;
}
#lattice td.trule.slip.left::before {
    left: -1px;
}


#lattice td.brule {
    position: relative;
    border-bottom: 2px solid transparent;
}
#lattice td.frontal.brule.clip.right {
    right: 15px;
}
#lattice td.rightlat.brule.clip.left {
    left: 20px;
}
#lattice td.rightmed.brule.clip.left {
    left: 12px;
}
#lattice td.poster.brule.clip.left {
    left: 9px;
}
#lattice td.leftmed.brule.clip.right::before {
    width: 15px;
}
#lattice td.brule::before {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0px;
    width: 100%;
    height: 2px;
    background: linear-gradient(to bottom, #ffcc80, #fe7443, #ffcc80);
    transition: all 0.3s ease-in-out;
    z-index: -1;
}
#lattice td.brule.slip.out::before {
    bottom: -3px;
}
#lattice td.brule.slip.left::before {
    left: -1px;
}
#lattice td.brule.slip.right::before {
    left: 1px;
}

#lattice td.lrule {
    position: relative;
    border-left: 2px solid transparent;
}
#lattice td.lrule::before {
    content: "";
    position: absolute;
    top: 0px;
    left: -2px;
    width: 2px;
    height: 100%;
    background: linear-gradient(to left, #ffcc80, #fe7443, #ffcc80);
    transition: all 0.3s ease-in-out;
    z-index: -1;
}
#lattice td.lrule.slip.out::before {
    left: -3px;
}

#lattice td.rrule {
    position: relative;
    border-right: 2px solid transparent;
}
#lattice td.rrule::before {
    content: "";
    position: absolute;
    top: 0px;
    right: -2px;
    width: 2px;
    height: 100%;
    background: linear-gradient(to right, #ffcc80, #fe7443, #ffcc80);
    transition: all 0.3s ease-in-out;
    z-index: -1;
}

#lattice td.trule.lcap::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -1px;
    width: 2px;
    height: 2px;
    background: transparent;
    border-radius: 50%;
    background: radial-gradient(circle at center, #fe7443, #ffcc80, #ffcc80);
    z-index: -2;

}

#lattice td.brule.joint.left.down::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: -2px;
    width: 4px;
    height: 4px;
    background: transparent;
    clip-path: polygon(0 0, 0 100%, 100% 0);
    border-radius: 50%;
    background: radial-gradient(circle at center, #ffcc80, #fe7443, #ffcc80, #ffcc80);
    z-index: -2;
}

#lattice td.brule.joint.right.down::after {
    content: "";
    position: absolute;
    bottom: -4px;
    right: -1.1px;
    width: 4px;
    height: 4px;
    background: transparent;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    border-radius: 50%;
    background: radial-gradient(circle at center, #ffcc80, #fe7443, #ffcc80, #ffcc80);
    z-index: -2;
}

#lattice td.brule.joint.right.up::after {
    content: "";
    position: absolute;
    bottom: -3px;
    right: -2px;
    width: 4px;
    height: 4px;
    background: transparent;
    clip-path: polygon(0 100%, 100% 100%, 100% 0);
    border-radius: 50%;
    background: radial-gradient(circle at center, #ffcc80, #fe7443, #ffcc80, #ffcc80);
    z-index: -2;
}

#lattice td.brule.lcap::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: -1px;
    width: 2px;
    height: 2px;
    background: transparent;
    border-radius: 50%;
    background: radial-gradient(circle at center, #fe7443, #ffcc80, #ffcc80);
    z-index: -2;

}

#lattice td.brule.lbcap::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: -2px;
    width: 2px;
    height: 2px;
    background: transparent;
    border-radius: 50%;
    background: radial-gradient(circle at center, #fe7443, #ffcc80, #ffcc80);
    z-index: -2;
}

#lattice td.brule.rcap::after {
    content: "";
    position: absolute;
    bottom: -2px;
    right: -1px;
    width: 2px;
    height: 2px;
    background: transparent;
    border-radius: 50%;
    background: radial-gradient(circle at center, #fe7443, #ffcc80, #ffcc80);
    z-index: -2;
}

#lattice td.brule.rbcap::after {
    content: "";
    position: absolute;
    bottom: -3px;
    right: -1px;
    width: 2px;
    height: 2px;
    background: transparent;
    border-radius: 50%;
    background: radial-gradient(circle at center, #fe7443, #ffcc80, #ffcc80);
    z-index: -2;
}

#lattice td.lrule.joint.left.down::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: -4px;
    width: 4px;
    height: 4px;
    background: transparent;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    border-radius: 50%;
    background: radial-gradient(circle at center, #ffcc80, #fe7443, #ffcc80, #ffcc80);
    z-index: -2;
}

#lattice td.lrule.joint.right.up::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 4px;
    height: 4px;
    background: transparent;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    border-radius: 50%;
    background: radial-gradient(circle at center, #ffcc80, #fe7443, #ffcc80, #ffcc80);
    z-index: -2;
}

#lattice td.lrule.slip.out.joint.left.down::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: -5px;
    width: 4px;
    height: 4px;
    background: transparent;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    border-radius: 50%;
    background: radial-gradient(circle at center, #ffcc80, #fe7443, #ffcc80, #ffcc80);
    z-index: -2;
}

#lattice td.rrule.joint.right.up::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -4px;
    width: 4px;
    height: 4px;
    background: transparent;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    border-radius: 50%;
    background: radial-gradient(circle at center, #ffcc80, #fe7443, #ffcc80, #ffcc80);
    z-index: -2;
}

#lattice td.rrule.joint.right.down::after {
    content: "";
    position: absolute;
    bottom: -2px;
    right: -4px;
    width: 4px;
    height: 4px;
    background: transparent;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
    border-radius: 50%;
    background: radial-gradient(circle at center, #ffcc80, #fe7443, #ffcc80, #ffcc80);
    z-index: -2;
}

#lattice td.rrule.joint.left.up::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 4px;
    height: 4px;
    background: transparent;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    border-radius: 50%;
    background: radial-gradient(circle at center, #ffcc80, #fe7443, #ffcc80, #ffcc80);
    z-index: -2;
}

#lattice td.rrule.joint.left.down::after {
    content: "";
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 4px;
    height: 4px;
    background: transparent;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    border-radius: 50%;
    background: radial-gradient(circle at center, #ffcc80, #fe7443, #ffcc80, #ffcc80);
    z-index: -2;
}

@-webkit-keyframes highlight {
    from, to {
        color: initial;
    }
    50% {
        color: #ffd700;
    }
}    

@keyframes highlight {
    from, to {
        color: initial;
    }
    50% {
        color: #ffd700;
    }
}

@-webkit-keyframes flash {
    from, to {
        border: 0.3px solid transparent;
        background: linear-gradient(to bottom, #ffcc80, #fe7443, #ffcc80);
    }
    50% {
        border: 0.3px solid #ffd700;
        background: linear-gradient(to bottom, #fee724, #ffd700, #fee724);
    }
}    

@keyframes flash {
    from, to {
        border: 0.3px solid transparent;
        background: linear-gradient(to bottom, #ffcc80, #fe7443, #ffcc80);
    }
    50% {
        border: 0.3px solid #ffd700;
        background: linear-gradient(to bottom, #fee724, #ffd700, #fee724);
    }
}

.hover {
    -webkit-user-select: none;
    -webkit-touch-callout: none;        
}

#lattice:has(+#brainmap td.frontal.hover) td.frontal,
#lattice:has(+#brainmap td.frontal:hover) td.frontal,
#lattice:has(+#brainmap td.frontal:focus) td.frontal,
#lattice:has(+#brainmap td.frontal:active) td.frontal,
#lattice:has(+#brainmap td.leftlat.hover) td.leftlat,
#lattice:has(+#brainmap td.leftlat:hover) td.leftlat,
#lattice:has(+#brainmap td.leftlat:focus) td.leftlat,
#lattice:has(+#brainmap td.leftlat:active) td.leftlat,
#lattice:has(+#brainmap td.rightlat.hover) td.rightlat, 
#lattice:has(+#brainmap td.rightlat:hover) td.rightlat, 
#lattice:has(+#brainmap td.rightlat:focus) td.rightlat, 
#lattice:has(+#brainmap td.rightlat:active) td.rightlat, 
#lattice:has(+#brainmap td.leftmed.hover) td.leftmed,
#lattice:has(+#brainmap td.leftmed:hover) td.leftmed,
#lattice:has(+#brainmap td.leftmed:focus) td.leftmed,
#lattice:has(+#brainmap td.leftmed:active) td.leftmed,
#lattice:has(+#brainmap td.rightmed.hover) td.rightmed,
#lattice:has(+#brainmap td.rightmed:hover) td.rightmed,
#lattice:has(+#brainmap td.rightmed:focus) td.rightmed,
#lattice:has(+#brainmap td.rightmed:active) td.rightmed,
#lattice:has(+#brainmap td.poster.hover) td.poster,
#lattice:has(+#brainmap td.poster:hover) td.poster,
#lattice:has(+#brainmap td.poster:focus) td.poster,
#lattice:has(+#brainmap td.poster:active) td.poster {
    animation: highlight 0.3s cubic-bezier(.68,-0.55,.32,2.14) 0s 1 normal backwards running; 
    -webkit-animation: highlight 0.3s cubic-bezier(.68,-0.55,.32,2.14) 0s 1 normal backwards running;
}

#lattice:has(+#brainmap td.frontal.hover) td.frontal::before, 
#lattice:has(+#brainmap td.frontal:hover) td.frontal::before, 
#lattice:has(+#brainmap td.frontal:focus) td.frontal::before, 
#lattice:has(+#brainmap td.frontal:active) td.frontal::before, 
#lattice:has(+#brainmap td.leftlat.hover) td.leftlat::before, 
#lattice:has(+#brainmap td.leftlat:hover) td.leftlat::before, 
#lattice:has(+#brainmap td.leftlat:focus) td.leftlat::before, 
#lattice:has(+#brainmap td.leftlat:active) td.leftlat::before, 
#lattice:has(+#brainmap td.rightlat.hover) td.rightlat::before, 
#lattice:has(+#brainmap td.rightlat:hover) td.rightlat::before, 
#lattice:has(+#brainmap td.rightlat:focus) td.rightlat::before, 
#lattice:has(+#brainmap td.rightlat:active) td.rightlat::before, 
#lattice:has(+#brainmap td.leftmed.hover) td.leftmed::before,
#lattice:has(+#brainmap td.leftmed:hover) td.leftmed::before,
#lattice:has(+#brainmap td.leftmed:focus) td.leftmed::before,
#lattice:has(+#brainmap td.leftmed:active) td.leftmed::before,
#lattice:has(+#brainmap td.rightmed.hover) td.rightmed::before,
#lattice:has(+#brainmap td.rightmed:hover) td.rightmed::before,
#lattice:has(+#brainmap td.rightmed:focus) td.rightmed::before,
#lattice:has(+#brainmap td.rightmed:active) td.rightmed::before,
#lattice:has(+#brainmap td.poster.hover) td.poster::before,
#lattice:has(+#brainmap td.poster:hover) td.poster::before,
#lattice:has(+#brainmap td.poster:focus) td.poster::before,
#lattice:has(+#brainmap td.poster:active) td.poster::before,
#lattice:has(+#brainmap td.frontal.hover) td.frontal.joint::after,
#lattice:has(+#brainmap td.frontal:hover) td.frontal.joint::after,
#lattice:has(+#brainmap td.frontal:focus) td.frontal.joint::after,
#lattice:has(+#brainmap td.frontal:active) td.frontal.joint::after,
#lattice:has(+#brainmap td.leftlat.hover) td.leftlat.joint::after,
#lattice:has(+#brainmap td.leftlat:hover) td.leftlat.joint::after,
#lattice:has(+#brainmap td.leftlat:focus) td.leftlat.joint::after,
#lattice:has(+#brainmap td.leftlat:active) td.leftlat.joint::after,
#lattice:has(+#brainmap td.rightlat.hover) td.rightlat.joint::after,
#lattice:has(+#brainmap td.rightlat:hover) td.rightlat.joint::after,
#lattice:has(+#brainmap td.rightlat:focus) td.rightlat.joint::after,
#lattice:has(+#brainmap td.rightlat:active) td.rightlat.joint::after,
#lattice:has(+#brainmap td.leftmed.hover) td.leftmed.joint::after,
#lattice:has(+#brainmap td.leftmed:hover) td.leftmed.joint::after,
#lattice:has(+#brainmap td.leftmed:focus) td.leftmed.joint::after,
#lattice:has(+#brainmap td.leftmed:active) td.leftmed.joint::after,
#lattice:has(+#brainmap td.rightmed.hover) td.rightmed.joint::after,
#lattice:has(+#brainmap td.rightmed:hover) td.rightmed.joint::after,
#lattice:has(+#brainmap td.rightmed:focus) td.rightmed.joint::after,
#lattice:has(+#brainmap td.rightmed:active) td.rightmed.joint::after,
#lattice:has(+#brainmap td.poster.hover) td.poster.joint::after,
#lattice:has(+#brainmap td.poster:hover) td.poster.joint::after,
#lattice:has(+#brainmap td.poster:focus) td.poster.joint::after,
#lattice:has(+#brainmap td.poster:active) td.poster.joint::after,
#lattice:has(+#brainmap td.frontal.hover) td.frontal.lcap::after,
#lattice:has(+#brainmap td.frontal:hover) td.frontal.lcap::after,
#lattice:has(+#brainmap td.frontal:focus) td.frontal.lcap::after,
#lattice:has(+#brainmap td.frontal:active) td.frontal.lcap::after,
#lattice:has(+#brainmap td.leftlat.hover) td.leftlat.lcap::after,
#lattice:has(+#brainmap td.leftlat:hover) td.leftlat.lcap::after,
#lattice:has(+#brainmap td.leftlat:focus) td.leftlat.lcap::after,
#lattice:has(+#brainmap td.leftlat:active) td.leftlat.lcap::after,
#lattice:has(+#brainmap td.leftmed.hover) td.leftmed.lbcap::after,
#lattice:has(+#brainmap td.leftmed:hover) td.leftmed.lbcap::after,
#lattice:has(+#brainmap td.leftmed:focus) td.leftmed.lbcap::after,
#lattice:has(+#brainmap td.leftmed:active) td.leftmed.lbcap::after,
#lattice:has(+#brainmap td.rightlat.hover) td.rightlat.rcap::after,
#lattice:has(+#brainmap td.rightlat:hover) td.rightlat.rcap::after,
#lattice:has(+#brainmap td.rightlat:focus) td.rightlat.rcap::after,
#lattice:has(+#brainmap td.rightlat:active) td.rightlat.rcap::after,
#lattice:has(+#brainmap td.rightmed.hover) td.rightmed.rcap::after,
#lattice:has(+#brainmap td.rightmed:hover) td.rightmed.rcap::after,
#lattice:has(+#brainmap td.rightmed:focus) td.rightmed.rcap::after,
#lattice:has(+#brainmap td.rightmed:active) td.rightmed.rcap::after,
#lattice:has(+#brainmap td.poster.hover) td.poster.rbcap::after,
#lattice:has(+#brainmap td.poster:hover) td.poster.rbcap::after,
#lattice:has(+#brainmap td.poster:focus) td.poster.rbcap::after,
#lattice:has(+#brainmap td.poster:active) td.poster.rbcap::after {
    animation: flash 0.3s cubic-bezier(.68,-0.55,.32,2.14) 0s 1 normal backwards running; 
    -webkit-animation: flash 0.3s cubic-bezier(.68,-0.55,.32,2.14) 0s 1 normal backwards running;
}

#lattice:has(+#fieldsmap td.ai.hover) td.ai,
#lattice:has(+#fieldsmap td.ai:hover) td.ai,
#lattice:has(+#fieldsmap td.ai:focus) td.ai,
#lattice:has(+#fieldsmap td.ai:active) td.ai,
#lattice:has(+#fieldsmap td.dds.hover) td.dds,
#lattice:has(+#fieldsmap td.dds:hover) td.dds,
#lattice:has(+#fieldsmap td.dds:focus) td.dds,
#lattice:has(+#fieldsmap td.dds:active) td.dds,
#lattice:has(+#fieldsmap td.dep.hover) td.dep,
#lattice:has(+#fieldsmap td.dep:hover) td.dep,
#lattice:has(+#fieldsmap td.dep:focus) td.dep,
#lattice:has(+#fieldsmap td.dep:active) td.dep,
#lattice:has(+#fieldsmap td.pri.hover) td.pri,
#lattice:has(+#fieldsmap td.pri:hover) td.pri,
#lattice:has(+#fieldsmap td.pri:focus) td.pri,
#lattice:has(+#fieldsmap td.pri:active) td.pri,
#lattice:has(+#fieldsmap td.rts.hover) td.rts,
#lattice:has(+#fieldsmap td.rts:hover) td.rts,
#lattice:has(+#fieldsmap td.rts:focus) td.rts,
#lattice:has(+#fieldsmap td.rts:active) td.rts,
#lattice:has(+#fieldsmap td.tcs.hover) td.tcs,
#lattice:has(+#fieldsmap td.tcs:hover) td.tcs,
#lattice:has(+#fieldsmap td.tcs:focus) td.tcs,
#lattice:has(+#fieldsmap td.tcs:active) td.tcs,
#lattice:has(+#fieldsmap td.math.hover) td.math,
#lattice:has(+#fieldsmap td.math:hover) td.math,
#lattice:has(+#fieldsmap td.math:focus) td.math,
#lattice:has(+#fieldsmap td.math:active) td.math,
#lattice:has(+#fieldsmap td.tms.hover) td.tms,
#lattice:has(+#fieldsmap td.tms:hover) td.tms,
#lattice:has(+#fieldsmap td.tms:focus) td.tms,
#lattice:has(+#fieldsmap td.tms:active) td.tms,
#lattice:has(+#fieldsmap td.tts.hover) td.tts,
#lattice:has(+#fieldsmap td.tts:hover) td.tts,
#lattice:has(+#fieldsmap td.tts:focus) td.tts,
#lattice:has(+#fieldsmap td.tts:active) td.tts {
    animation: highlight 0.3s cubic-bezier(.68,-0.55,.32,2.14) 0s 1 normal backwards running; 
    -webkit-animation: highlight 0.3s cubic-bezier(.68,-0.55,.32,2.14) 0s 1 normal backwards running;
}

#lattice:has(+#fieldsmap td.ai.hover) td.ai::before, 
#lattice:has(+#fieldsmap td.ai:hover) td.ai::before, 
#lattice:has(+#fieldsmap td.ai:focus) td.ai::before, 
#lattice:has(+#fieldsmap td.ai:active) td.ai::before, 
#lattice:has(+#fieldsmap td.dds.hover) td.dds::before, 
#lattice:has(+#fieldsmap td.dds:hover) td.dds::before, 
#lattice:has(+#fieldsmap td.dds:focus) td.dds::before, 
#lattice:has(+#fieldsmap td.dds:active) td.dds::before, 
#lattice:has(+#fieldsmap td.dep.hover) td.dep::before, 
#lattice:has(+#fieldsmap td.dep:hover) td.dep::before, 
#lattice:has(+#fieldsmap td.dep:focus) td.dep::before, 
#lattice:has(+#fieldsmap td.dep:active) td.dep::before, 
#lattice:has(+#fieldsmap td.pri.hover) td.pri::before, 
#lattice:has(+#fieldsmap td.pri:hover) td.pri::before, 
#lattice:has(+#fieldsmap td.pri:focus) td.pri::before, 
#lattice:has(+#fieldsmap td.pri:active) td.pri::before, 
#lattice:has(+#fieldsmap td.rts.hover) td.rts::before, 
#lattice:has(+#fieldsmap td.rts:hover) td.rts::before, 
#lattice:has(+#fieldsmap td.rts:focus) td.rts::before, 
#lattice:has(+#fieldsmap td.rts:active) td.rts::before, 
#lattice:has(+#fieldsmap td.tcs.hover) td.tcs::before, 
#lattice:has(+#fieldsmap td.tcs:hover) td.tcs::before, 
#lattice:has(+#fieldsmap td.tcs:focus) td.tcs::before, 
#lattice:has(+#fieldsmap td.tcs:active) td.tcs::before, 
#lattice:has(+#fieldsmap td.math.hover) td.math::before, 
#lattice:has(+#fieldsmap td.math:hover) td.math::before, 
#lattice:has(+#fieldsmap td.math:focus) td.math::before, 
#lattice:has(+#fieldsmap td.math:active) td.math::before, 
#lattice:has(+#fieldsmap td.tms.hover) td.tms::before, 
#lattice:has(+#fieldsmap td.tms:hover) td.tms::before, 
#lattice:has(+#fieldsmap td.tms:focus) td.tms::before, 
#lattice:has(+#fieldsmap td.tms:active) td.tms::before, 
#lattice:has(+#fieldsmap td.tts.hover) td.tts::before, 
#lattice:has(+#fieldsmap td.tts:hover) td.tts::before, 
#lattice:has(+#fieldsmap td.tts:focus) td.tts::before, 
#lattice:has(+#fieldsmap td.tts:active) td.tts::before, 
#lattice:has(+#fieldsmap td.ai.hover) td.ai.joint::after,
#lattice:has(+#fieldsmap td.ai:hover) td.ai.joint::after,
#lattice:has(+#fieldsmap td.ai:focus) td.ai.joint::after,
#lattice:has(+#fieldsmap td.ai:active) td.ai.joint::after,
#lattice:has(+#fieldsmap td.dds.hover) td.dds.joint::after,
#lattice:has(+#fieldsmap td.dds:hover) td.dds.joint::after,
#lattice:has(+#fieldsmap td.dds:focus) td.dds.joint::after,
#lattice:has(+#fieldsmap td.dds:active) td.dds.joint::after,
#lattice:has(+#fieldsmap td.dep.hover) td.dep.joint::after,
#lattice:has(+#fieldsmap td.dep:hover) td.dep.joint::after,
#lattice:has(+#fieldsmap td.dep:focus) td.dep.joint::after,
#lattice:has(+#fieldsmap td.dep:active) td.dep.joint::after,
#lattice:has(+#fieldsmap td.pri.hover) td.pri.joint::after,
#lattice:has(+#fieldsmap td.pri:hover) td.pri.joint::after,
#lattice:has(+#fieldsmap td.pri:focus) td.pri.joint::after,
#lattice:has(+#fieldsmap td.pri:active) td.pri.joint::after,
#lattice:has(+#fieldsmap td.rts.hover) td.rts.joint::after,
#lattice:has(+#fieldsmap td.rts:hover) td.rts.joint::after,
#lattice:has(+#fieldsmap td.rts:focus) td.rts.joint::after,
#lattice:has(+#fieldsmap td.rts:active) td.rts.joint::after,
#lattice:has(+#fieldsmap td.tcs.hover) td.tcs.joint::after,
#lattice:has(+#fieldsmap td.tcs:hover) td.tcs.joint::after,
#lattice:has(+#fieldsmap td.tcs:focus) td.tcs.joint::after,
#lattice:has(+#fieldsmap td.tcs:active) td.tcs.joint::after,
#lattice:has(+#fieldsmap td.math.hover) td.math.joint::after,
#lattice:has(+#fieldsmap td.math:hover) td.math.joint::after,
#lattice:has(+#fieldsmap td.math:focus) td.math.joint::after,
#lattice:has(+#fieldsmap td.math:active) td.math.joint::after,
#lattice:has(+#fieldsmap td.tms.hover) td.tms.joint::after,
#lattice:has(+#fieldsmap td.tms:hover) td.tms.joint::after,
#lattice:has(+#fieldsmap td.tms:focus) td.tms.joint::after,
#lattice:has(+#fieldsmap td.tms:active) td.tms.joint::after,
#lattice:has(+#fieldsmap td.tts.hover) td.tts.joint::after,
#lattice:has(+#fieldsmap td.tts:hover) td.tts.joint::after,
#lattice:has(+#fieldsmap td.tts:focus) td.tts.joint::after,
#lattice:has(+#fieldsmap td.tts:active) td.tts.joint::after,
#lattice:has(+#fieldsmap td.ai.hover) td.ai.lcap::after,
#lattice:has(+#fieldsmap td.ai:hover) td.ai.lcap::after,
#lattice:has(+#fieldsmap td.ai:focus) td.ai.lcap::after,
#lattice:has(+#fieldsmap td.ai:active) td.ai.lcap::after,
#lattice:has(+#fieldsmap td.dds.hover) td.dds.lcap::after,
#lattice:has(+#fieldsmap td.dds:hover) td.dds.lcap::after,
#lattice:has(+#fieldsmap td.dds:focus) td.dds.lcap::after,
#lattice:has(+#fieldsmap td.dds:active) td.dds.lcap::after,
#lattice:has(+#fieldsmap td.rts.hover) td.rts.lcap::after,
#lattice:has(+#fieldsmap td.rts:hover) td.rts.lcap::after,
#lattice:has(+#fieldsmap td.rts:focus) td.rts.lcap::after,
#lattice:has(+#fieldsmap td.rts:active) td.rts.lcap::after,
#lattice:has(+#fieldsmap td.dep.hover) td.dep.lbcap::after,
#lattice:has(+#fieldsmap td.dep:hover) td.dep.lbcap::after,
#lattice:has(+#fieldsmap td.dep:focus) td.dep.lbcap::after,
#lattice:has(+#fieldsmap td.dep:active) td.dep.lbcap::after,
#lattice:has(+#fieldsmap td.tts.hover) td.tts.lbcap::after,
#lattice:has(+#fieldsmap td.tts:hover) td.tts.lbcap::after,
#lattice:has(+#fieldsmap td.tts:focus) td.tts.lbcap::after,
#lattice:has(+#fieldsmap td.tts:active) td.tts.lbcap::after,
#lattice:has(+#fieldsmap td.tcs.hover) td.tcs.rcap::after,
#lattice:has(+#fieldsmap td.tcs:hover) td.tcs.rcap::after,
#lattice:has(+#fieldsmap td.tcs:focus) td.tcs.rcap::after,
#lattice:has(+#fieldsmap td.tcs:active) td.tcs.rcap::after,
#lattice:has(+#fieldsmap td.math.hover) td.math.rcap::after,
#lattice:has(+#fieldsmap td.math:hover) td.math.rcap::after,
#lattice:has(+#fieldsmap td.math:focus) td.math.rcap::after,
#lattice:has(+#fieldsmap td.math:active) td.math.rcap::after,
#lattice:has(+#fieldsmap td.pri.hover) td.pri.rbcap::after,
#lattice:has(+#fieldsmap td.pri:hover) td.pri.rbcap::after,
#lattice:has(+#fieldsmap td.pri:focus) td.pri.rbcap::after,
#lattice:has(+#fieldsmap td.pri:active) td.pri.rbcap::after,
#lattice:has(+#fieldsmap td.tms.hover) td.tms.rbcap::after,
#lattice:has(+#fieldsmap td.tms:hover) td.tms.rbcap::after,
#lattice:has(+#fieldsmap td.tms:focus) td.tms.rbcap::after,
#lattice:has(+#fieldsmap td.tms:active) td.tms.rbcap::after {
    animation: flash 0.3s cubic-bezier(.68,-0.55,.32,2.14) 0s 1 normal backwards running; 
    -webkit-animation: flash 0.3s cubic-bezier(.68,-0.55,.32,2.14) 0s 1 normal backwards running;
}


.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}

td.frontal:hover, td.frontal.hover,
td.leftlat:hover, td.leftlat.hover,
td.leftmed:hover, td.leftmed.hover,
td.rightlat:hover, td.rightlat.hover,
td.rightmed:hover, td.rightmed.hover,
td.poster:hover, td.poster.hover,
td.ai:hover, td.ai.hover,
td.dds:hover, td.dds.hover,
td.dep:hover, td.dep.hover,
td.pri:hover, td.pri.hover,
td.rts:hover, td.rts.hover,
td.tcs:hover, td.tcs.hover,
td.math:hover, td.math.hover,
td.tms:hover, td.tms.hover,
td.tts:hover, td.tts.hover {
    cursor: pointer;
}