/* Environmental Technology Details
   Page-specific blueprint, configuration, deployment, and position visuals.
   Shared shell, hero, controls, register surface, tokens, and responsiveness
   remain in their dedicated Environmental Solutions modules. */

.technology-details-page {
    color: var(--solutions-ink);
}

/* Match the Environmental Solutions breadcrumb palette without changing scale. */
.technology-evidence-page .facility-breadcrumb.solutions-breadcrumb {
    margin-bottom: -2px;
    font-size: 9px;
    line-height: 1.35;
}

.technology-evidence-page .facility-breadcrumb.solutions-breadcrumb a,
.technology-evidence-page .facility-breadcrumb.solutions-breadcrumb > span {
    font-size: inherit;
    line-height: inherit;
}

.technology-details-page a:focus-visible,
.technology-details-page [tabindex]:focus-visible {
    outline: 2px solid var(--solutions-cyan-soft);
    outline-offset: 3px;
}

.technology-details-hero .solutions-hero-emblem > span {
    background:
        linear-gradient(90deg, rgba(82, 217, 255, .04) 1px, transparent 1px) 0 0 / 11px 11px,
        linear-gradient(rgba(82, 217, 255, .04) 1px, transparent 1px) 0 0 / 11px 11px,
        radial-gradient(circle, rgba(9, 61, 82, .9), rgba(3, 25, 41, .98) 68%);
}

.technology-details-hero .solutions-hero-emblem > small {
    max-width: 88px;
}

/* Technology identity readout */

.technology-readout-strip {
    display: grid;
    grid-template-columns: minmax(190px, 1.25fr) repeat(4, minmax(130px, 1fr));
    min-width: 0;
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid rgba(82, 217, 255, .34);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(82, 217, 255, .035) 1px, transparent 1px) 0 0 / 46px 46px,
        linear-gradient(90deg, rgba(2, 18, 31, .9), rgba(3, 29, 39, .8));
    box-shadow: inset 0 1px 0 rgba(147, 234, 255, .08);
}

.technology-readout-strip > div {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 82px;
    justify-content: center;
    flex-direction: column;
    padding: 12px 14px;
    border-right: 1px solid rgba(82, 217, 255, .16);
}

.technology-readout-strip > div:last-child {
    border-right: 0;
}

.technology-readout-strip > div::after {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 7px;
    height: 7px;
    border: 1px solid var(--solutions-cyan);
    border-radius: 50%;
    content: "";
    opacity: .85;
}

.technology-readout-strip > div::before {
    position: absolute;
    top: 15px;
    right: 19px;
    width: 15px;
    border-top: 1px solid rgba(82, 217, 255, .45);
    content: "";
}

.technology-readout-strip small,
.technology-readout-strip strong,
.technology-readout-strip span {
    display: block;
    min-width: 0;
}

.technology-readout-strip small {
    color: var(--solutions-cyan-soft);
    font-size: 7.2px;
    font-weight: 900;
    letter-spacing: .1em;
}

.technology-readout-strip strong {
    margin-top: 5px;
    overflow: hidden;
    color: var(--solutions-cyan);
    font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
    font-size: 24px;
    font-weight: 520;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.technology-readout-strip span {
    margin-top: 5px;
    overflow: hidden;
    color: #bdd0db;
    font-size: 8.3px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.technology-readout-strip .identity strong {
    color: #f2fbff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    font-weight: 720;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}

.technology-readout-strip .result {
    background: rgba(85, 238, 155, .035);
}

.technology-readout-strip .result::after {
    border-color: var(--solutions-green);
    box-shadow: 0 0 8px rgba(85, 238, 155, .62);
}

.technology-readout-strip .result strong {
    color: var(--solutions-green);
}

/* Shared Details panel headers */

.technology-blueprint,
.technology-configuration,
.technology-deployments,
.technology-position {
    margin-top: 18px;
}

.technology-panel-header {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(82, 217, 255, .18);
    background:
        linear-gradient(90deg, rgba(82, 217, 255, .025) 1px, transparent 1px) 0 0 / 34px 34px,
        rgba(3, 21, 35, .76);
}

.technology-panel-header::before {
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 0;
    width: 2px;
    background: var(--solutions-cyan);
    box-shadow: 0 0 9px rgba(82, 217, 255, .52);
    content: "";
}

.technology-panel-header > div {
    min-width: 0;
}

.technology-panel-header > div > span {
    display: block;
    color: var(--solutions-cyan);
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: .14em;
}

.technology-panel-header h2 {
    margin: 4px 0 0;
    color: #f5fbff;
    font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
    font-size: clamp(18px, 1.8vw, 25px);
    font-weight: 680;
    letter-spacing: -.025em;
    line-height: 1.15;
}

.technology-panel-header p {
    max-width: 780px;
    margin: 5px 0 0;
    color: #b7c9d4;
    font-size: 9px;
    line-height: 1.45;
}

.technology-panel-header dl,
.technology-panel-header dl div {
    margin: 0;
}

.technology-panel-header dl {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid rgba(82, 217, 255, .22);
    border-radius: 6px;
    background: rgba(3, 27, 43, .72);
}

.technology-panel-header dl div {
    min-width: 82px;
    max-width: 132px;
    padding: 7px 10px;
    text-align: center;
}

.technology-panel-header dl div + div {
    border-left: 1px solid rgba(82, 217, 255, .15);
}

.technology-panel-header dt {
    color: #a8beca;
    font-size: 6.8px;
    font-weight: 850;
    letter-spacing: .09em;
}

.technology-panel-header dd {
    margin: 3px 0 0;
    overflow: hidden;
    color: var(--solutions-cyan);
    font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 620;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.technology-panel-header dl .research dd {
    color: var(--solutions-gold);
}

/* Dominant engineering digital twin */

.technology-blueprint {
    border-color: rgba(82, 217, 255, .35);
    box-shadow: inset 0 1px 0 rgba(147, 234, 255, .06), 0 20px 42px rgba(0, 8, 16, .18);
}

.technology-digital-twin {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(250px, .45fr);
    min-width: 0;
    background:
        linear-gradient(90deg, rgba(82, 217, 255, .026) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(rgba(82, 217, 255, .02) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(128deg, rgba(3, 26, 42, .98), rgba(2, 18, 31, .98));
}

.digital-twin-stage {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 438px;
    flex-direction: column;
    padding: 16px 18px 14px;
    overflow: hidden;
    border-right: 1px solid rgba(82, 217, 255, .19);
    background:
        radial-gradient(circle at 50% 51%, rgba(82, 217, 255, .08), transparent 28%),
        linear-gradient(145deg, rgba(3, 34, 52, .82), rgba(3, 24, 39, .9));
}

.digital-twin-stage::before {
    position: absolute;
    inset: 54px 18px 57px;
    pointer-events: none;
    border: 1px solid rgba(82, 217, 255, .075);
    background:
        linear-gradient(90deg, transparent 49.85%, rgba(82, 217, 255, .065) 50%, transparent 50.15%),
        linear-gradient(transparent 49.85%, rgba(82, 217, 255, .065) 50%, transparent 50.15%);
    content: "";
}

.digital-twin-stage > header,
.twin-system-map,
.twin-translation-strip {
    position: relative;
    z-index: 1;
}

.digital-twin-stage > header {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(82, 217, 255, .12);
}

.digital-twin-stage > header > div {
    min-width: 0;
}

.digital-twin-stage > header span,
.digital-twin-stage > header strong {
    display: block;
}

.digital-twin-stage > header span {
    color: var(--solutions-cyan);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .13em;
}

.digital-twin-stage > header strong {
    margin-top: 3px;
    overflow: hidden;
    color: #bfd2dc;
    font-size: 9.5px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.digital-twin-stage > header > b {
    flex: 0 0 auto;
    padding: 4px 7px;
    border: 1px solid rgba(82, 217, 255, .25);
    border-radius: 4px;
    color: var(--solutions-cyan-soft);
    background: rgba(3, 29, 46, .8);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .09em;
}

.twin-system-map {
    position: relative;
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    grid-template-columns: minmax(145px, 1fr) minmax(170px, .92fr) minmax(145px, 1fr);
    align-items: center;
    gap: 22px;
    padding: 20px 0 15px;
}

.technology-digital-twin.hydrogen .twin-system-map,
.technology-digital-twin.hho .twin-system-map {
    grid-template-columns: minmax(155px, 1fr) minmax(320px, 2.15fr) minmax(130px, .72fr);
    gap: 16px;
}

.technology-digital-twin.hho {
    background:
        linear-gradient(90deg, rgba(82, 217, 255, .018) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(rgba(82, 217, 255, .016) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(128deg, #001521, #00101c);
}

.technology-digital-twin.hho .digital-twin-stage {
    min-height: 560px;
    background:
        radial-gradient(circle at 50% 49%, rgba(82, 217, 255, .055), transparent 31%),
        linear-gradient(145deg, rgba(1, 25, 39, .98), rgba(0, 16, 28, .98));
}

.technology-digital-twin.hho .digital-twin-stage > header span {
    font-size: 10.6px;
    letter-spacing: .14em;
}

.technology-digital-twin.hho .digital-twin-stage > header strong {
    font-size: 10.4px;
}

.technology-digital-twin.hho .digital-twin-stage > header > b {
    padding: 7px 10px;
    font-size: 8.2px;
}

.technology-digital-twin.hho .twin-system-map::before,
.technology-digital-twin.hho .twin-system-map::after {
    display: none;
}

.technology-digital-twin.hho .twin-signal {
    min-height: 82px;
    border-radius: 5px;
    background: linear-gradient(90deg, rgba(82, 217, 255, .055), transparent 76%), rgba(1, 19, 31, .96);
}

.technology-digital-twin.hho .twin-signal small {
    font-size: 7.7px;
}

.technology-digital-twin.hho .twin-signal strong {
    font-size: 11px;
}

.technology-digital-twin.hho .twin-signal em {
    font-size: 7.6px;
}

.technology-digital-twin.hho .research-bank {
    transform: translateY(20px);
}

.technology-digital-twin.hydrogen .digital-twin-stage > header strong,
.technology-digital-twin.hho .digital-twin-stage > header strong {
    max-width: 760px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.twin-system-map::before {
    position: absolute;
    z-index: 0;
    top: 50%;
    right: 6%;
    left: 6%;
    border-top: 1px dashed rgba(110, 211, 238, .48);
    content: "";
}

.twin-system-map::after {
    position: absolute;
    z-index: 0;
    top: calc(50% - 3px);
    right: 5.5%;
    width: 7px;
    height: 7px;
    border-top: 1px solid var(--solutions-green);
    border-right: 1px solid var(--solutions-green);
    content: "";
    transform: rotate(45deg);
}

.twin-signal-bank,
.twin-machine {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.twin-signal-bank {
    display: grid;
    align-content: center;
    gap: 7px;
}

.twin-signal-bank > header {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
    padding: 0 3px 7px;
    border-bottom: 1px solid rgba(82, 217, 255, .13);
}

.twin-signal-bank > header span {
    color: var(--solutions-cyan);
    font-size: 7.2px;
    font-weight: 900;
    letter-spacing: .11em;
}

.twin-signal-bank > header b {
    color: #7fa3b4;
    font-size: 6.5px;
    font-weight: 850;
    letter-spacing: .06em;
}

.input-bank > header span {
    color: var(--solutions-cyan);
}

.output-bank > header span {
    color: var(--solutions-green);
}

.twin-signal {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 63px;
    grid-template-columns: 9px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid rgba(82, 217, 255, .25);
    border-radius: 5px 18px 5px 5px;
    background:
        linear-gradient(90deg, rgba(82, 217, 255, .07), transparent 76%),
        rgba(3, 31, 48, .93);
    box-shadow: inset 2px 0 0 rgba(82, 217, 255, .55);
}

.twin-signal::after {
    position: absolute;
    top: 50%;
    right: -23px;
    width: 23px;
    border-top: 1px solid rgba(82, 217, 255, .6);
    content: "";
}

.twin-signal::before {
    position: absolute;
    z-index: 2;
    top: calc(50% - 3px);
    right: -23px;
    width: 6px;
    height: 6px;
    border-top: 1px solid var(--solutions-cyan);
    border-right: 1px solid var(--solutions-cyan);
    content: "";
    transform: rotate(45deg);
}

.output-bank .twin-signal {
    border-color: rgba(85, 238, 155, .26);
    border-radius: 18px 5px 5px 5px;
    background:
        linear-gradient(90deg, rgba(85, 238, 155, .065), transparent 76%),
        rgba(3, 38, 43, .93);
    box-shadow: inset -2px 0 0 rgba(85, 238, 155, .55);
}

.output-bank .twin-signal::after {
    right: auto;
    left: -23px;
    border-color: rgba(85, 238, 155, .62);
}

.output-bank .twin-signal::before {
    right: auto;
    left: -6px;
    border-color: var(--solutions-green);
}

.twin-signal > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--solutions-cyan);
    box-shadow: 0 0 8px rgba(82, 217, 255, .72);
}

.output-bank .twin-signal > i {
    background: var(--solutions-green);
    box-shadow: 0 0 8px rgba(85, 238, 155, .72);
}

.twin-signal > span {
    min-width: 0;
}

.twin-signal small,
.twin-signal strong,
.twin-signal em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.twin-signal small {
    color: #7da5b6;
    font-size: 6.8px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.twin-signal strong {
    margin-top: 3px;
    display: -webkit-box;
    color: #ecf8fb;
    font-size: 9.5px;
    line-height: 1.2;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.twin-signal em {
    margin-top: 3px;
    color: var(--solutions-cyan-soft);
    font-size: 6.8px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .04em;
}

.output-bank .twin-signal em {
    color: var(--solutions-green-soft);
}

.twin-signal.empty {
    border-style: dashed;
    opacity: .78;
}

.twin-machine {
    display: flex;
    min-height: 275px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.twin-machine-cutaway {
    position: relative;
    display: grid;
    width: 100%;
    max-width: 320px;
    min-height: 222px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(82, 217, 255, .38);
    border-radius: 6px;
    background:
        linear-gradient(90deg, rgba(82, 217, 255, .045) 1px, transparent 1px) 0 0 / 18px 18px,
        linear-gradient(rgba(82, 217, 255, .035) 1px, transparent 1px) 0 0 / 18px 18px,
        radial-gradient(circle at 50% 50%, rgba(82, 217, 255, .1), transparent 58%),
        rgba(2, 25, 40, .96);
    box-shadow:
        inset 0 0 0 5px rgba(82, 217, 255, .025),
        0 0 28px rgba(82, 217, 255, .1);
}

.twin-machine-cutaway::before,
.twin-machine-cutaway::after {
    position: absolute;
    z-index: 2;
    width: 26px;
    height: 26px;
    border-color: var(--solutions-cyan);
    pointer-events: none;
    content: "";
}

.twin-machine-cutaway::before {
    top: 8px;
    left: 8px;
    border-top: 1px solid;
    border-left: 1px solid;
}

.twin-machine-cutaway::after {
    right: 8px;
    bottom: 8px;
    border-right: 1px solid;
    border-bottom: 1px solid;
}

.technology-cutaway {
    position: relative;
    z-index: 1;
    display: block;
    width: calc(100% - 22px);
    height: auto;
    overflow: visible;
}

/* Layered hydrogen fleet instrument cutaway */

.hydrogen-machine-cutaway {
    display: block;
    width: 100%;
    max-width: 560px;
    min-height: 0;
    padding: 10px;
}

.hydrogen-instrument {
    position: relative;
    z-index: 1;
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 10px;
}

.hydrogen-instrument-head {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1.25fr) minmax(95px, .72fr) auto;
    align-items: center;
    gap: 10px;
    padding: 0 2px 8px;
    border-bottom: 1px solid rgba(82, 217, 255, .14);
}

.hydrogen-instrument-head > span,
.hydrogen-instrument-head > b {
    min-width: 0;
}

.hydrogen-instrument-head small,
.hydrogen-instrument-head strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hydrogen-instrument-head small {
    color: #78a8ba;
    font-size: 6.8px;
    font-weight: 900;
    letter-spacing: .11em;
}

.hydrogen-instrument-head strong {
    margin-top: 2px;
    color: #e9f9fd;
    font-size: 9.2px;
    font-weight: 900;
    letter-spacing: .035em;
}

.hydrogen-instrument-head > span:nth-child(2) strong {
    color: var(--solutions-cyan);
}

.hydrogen-instrument-head > b {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    color: var(--solutions-green-soft);
    font-size: 6.8px;
    font-weight: 900;
    letter-spacing: .07em;
    line-height: 1.2;
    text-align: right;
}

.hydrogen-instrument-head > b i {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--solutions-green);
    box-shadow: 0 0 8px rgba(85, 238, 155, .78);
    animation: hydrogen-status-sequence 9s ease-in-out 3;
}

.hydrogen-instrument-head > b.incomplete {
    color: var(--solutions-gold);
}

.hydrogen-instrument-head > b.incomplete i {
    background: var(--solutions-gold);
    box-shadow: 0 0 8px rgba(245, 200, 76, .62);
}

.hydrogen-proof-rail {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1.22fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
}

.hydrogen-proof-node {
    display: block;
    min-width: 0;
    min-height: 43px;
    padding: 7px 8px;
    overflow: hidden;
    border: 1px solid rgba(82, 217, 255, .3);
    border-radius: 4px;
    background: rgba(4, 34, 50, .86);
}

.hydrogen-proof-node small,
.hydrogen-proof-node strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hydrogen-proof-node small {
    color: #7ca8b9;
    font-size: 6.2px;
    font-weight: 900;
    letter-spacing: .075em;
}

.hydrogen-proof-node strong {
    margin-top: 2px;
    display: -webkit-box;
    color: #eaf9fd;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .03em;
    line-height: 1.15;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hydrogen-proof-node.is-reference {
    border-color: rgba(245, 200, 76, .54);
    background: linear-gradient(90deg, rgba(245, 200, 76, .08), transparent 84%), rgba(4, 31, 43, .9);
}

.hydrogen-proof-node.is-reference small,
.hydrogen-proof-node.is-reference strong {
    color: #f6d66f;
}

.hydrogen-proof-node.is-evidence {
    border-color: rgba(82, 217, 255, .45);
}

.hydrogen-proof-node.is-method.is-ready {
    border-color: rgba(85, 238, 155, .45);
    background: linear-gradient(90deg, rgba(85, 238, 155, .07), transparent 84%), rgba(4, 34, 47, .9);
}

.hydrogen-proof-node.is-method.is-ready strong {
    color: var(--solutions-green-soft);
}

.hydrogen-proof-node.is-method.is-pending {
    border-color: rgba(245, 200, 76, .44);
}

.hydrogen-proof-link {
    position: relative;
    display: block;
    height: 1px;
    overflow: visible;
    background: rgba(82, 217, 255, .42);
}

.hydrogen-proof-link::before {
    position: absolute;
    top: -1px;
    right: 0;
    left: 0;
    height: 3px;
    opacity: .35;
    background: linear-gradient(90deg, transparent, var(--solutions-cyan), transparent);
    content: "";
    animation: hydrogen-proof-sequence 9s linear 3;
}

.hydrogen-proof-link::after {
    position: absolute;
    top: -3px;
    right: 0;
    width: 6px;
    height: 6px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    color: var(--solutions-cyan);
    content: "";
    transform: rotate(45deg);
}

.hydrogen-proof-link.is-reference {
    background: rgba(245, 200, 76, .5);
}

.hydrogen-proof-link.is-reference::before,
.hydrogen-proof-link.is-reference::after {
    color: var(--solutions-gold);
}

.hydrogen-proof-link.is-reference::before {
    background: linear-gradient(90deg, transparent, var(--solutions-gold), transparent);
}

.hydrogen-proof-link.is-method::before {
    animation-delay: 3.8s;
}

.hydrogen-vehicle-plane {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 2px 3px 0;
    overflow: hidden;
    border-bottom: 1px solid rgba(82, 217, 255, .13);
}

.hydrogen-vehicle-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 220px;
    overflow: visible;
}

.hydrogen-vehicle-svg path,
.hydrogen-vehicle-svg rect,
.hydrogen-vehicle-svg circle {
    vector-effect: non-scaling-stroke;
}

.hydrogen-vehicle-shell {
    fill: rgba(7, 47, 65, .22);
    stroke: rgba(119, 220, 247, .72);
    stroke-width: 1.15;
}

.hydrogen-vehicle-cab {
    fill: rgba(8, 55, 75, .3);
    stroke: rgba(147, 234, 255, .5);
    stroke-width: 1;
}

.hydrogen-vehicle-window {
    fill: rgba(82, 217, 255, .075);
    stroke: rgba(175, 239, 255, .67);
    stroke-width: 1;
}

.hydrogen-vehicle-detail,
.hydrogen-vehicle-grille,
.hydrogen-vehicle-chassis,
.hydrogen-engine-detail,
.hydrogen-diesel-detail,
.hydrogen-h2-detail,
.hydrogen-regulator-detail,
.hydrogen-wheel-spoke {
    fill: none;
    stroke: rgba(147, 234, 255, .3);
    stroke-width: .82;
}

.hydrogen-vehicle-chassis {
    stroke: rgba(147, 234, 255, .76);
    stroke-width: 1.35;
}

.hydrogen-engine {
    fill: rgba(82, 217, 255, .07);
    stroke: rgba(147, 234, 255, .74);
    stroke-width: 1.1;
}

.hydrogen-diesel-tank {
    fill: rgba(245, 200, 76, .1);
    stroke: rgba(245, 200, 76, .82);
    stroke-width: 1.1;
    filter: drop-shadow(0 0 4px rgba(245, 200, 76, .17));
}

.hydrogen-diesel-detail {
    stroke: rgba(245, 222, 145, .52);
}

.hydrogen-h2-rack {
    fill: rgba(6, 62, 53, .2);
    stroke: rgba(85, 238, 155, .62);
    stroke-width: 1;
}

.hydrogen-h2-cylinder {
    fill: rgba(85, 238, 155, .12);
    stroke: rgba(116, 255, 179, .88);
    stroke-width: 1;
    filter: drop-shadow(0 0 3px rgba(85, 238, 155, .2));
}

.hydrogen-h2-detail,
.hydrogen-regulator-detail {
    stroke: rgba(211, 255, 231, .62);
}

.hydrogen-regulator {
    fill: rgba(5, 45, 39, .92);
    stroke: var(--solutions-green);
    stroke-width: 1.1;
}

.hydrogen-injection-node {
    fill: rgba(85, 238, 155, .32);
    stroke: var(--solutions-green);
    stroke-width: 1.2;
    filter: drop-shadow(0 0 4px rgba(85, 238, 155, .5));
}

.hydrogen-diesel-track,
.hydrogen-diesel-flow,
.hydrogen-assist-track,
.hydrogen-assist-flow,
.hydrogen-work-track,
.hydrogen-work-flow,
.hydrogen-sensor-drop {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hydrogen-diesel-track,
.hydrogen-assist-track,
.hydrogen-work-track {
    stroke-width: 3;
    opacity: .14;
}

.hydrogen-diesel-track {
    stroke: var(--solutions-gold);
}

.hydrogen-assist-track {
    stroke: var(--solutions-green);
}

.hydrogen-work-track {
    stroke: var(--solutions-cyan);
}

.hydrogen-diesel-flow,
.hydrogen-assist-flow,
.hydrogen-work-flow {
    stroke-width: 1.45;
    stroke-dasharray: 8 6;
}

.hydrogen-diesel-flow {
    stroke: var(--solutions-gold);
    animation: hydrogen-diesel-sequence 9s linear 3;
}

.hydrogen-assist-flow {
    stroke: var(--solutions-green);
    animation: hydrogen-assist-sequence 9s linear 3;
}

.hydrogen-work-flow {
    stroke: var(--solutions-cyan);
    animation: hydrogen-work-sequence 9s linear 3;
}

.hydrogen-work-sensor {
    fill: var(--solutions-cyan);
    stroke: rgba(5, 34, 48, .9);
    stroke-width: 2;
    filter: drop-shadow(0 0 5px rgba(82, 217, 255, .58));
}

.hydrogen-wheel {
    fill: #031520;
    stroke: rgba(147, 234, 255, .7);
    stroke-width: 1.25;
}

.hydrogen-wheel-rim {
    fill: rgba(82, 217, 255, .035);
    stroke: rgba(147, 234, 255, .36);
    stroke-width: .85;
}

.hydrogen-wheel-core {
    fill: var(--solutions-cyan);
    stroke: #062838;
    stroke-width: 1.4;
}

.hydrogen-sensor-drop {
    stroke-width: 1;
    stroke-dasharray: 3 5;
    opacity: .52;
}

.hydrogen-sensor-drop.is-diesel {
    stroke: var(--solutions-gold);
}

.hydrogen-sensor-drop.is-hydrogen {
    stroke: var(--solutions-green);
}

.hydrogen-sensor-drop.is-activity {
    stroke: var(--solutions-cyan);
}

.hydrogen-marker-ring {
    fill: rgba(2, 25, 38, .88);
    stroke-width: 1.1;
    opacity: .76;
    transform-box: fill-box;
    transform-origin: center;
    animation: hydrogen-marker-sequence 9s ease-in-out 3;
}

.hydrogen-marker-core {
    fill: rgba(2, 28, 42, .96);
    stroke-width: 1.2;
}

.hydrogen-sensor-marker.is-diesel .hydrogen-marker-ring,
.hydrogen-sensor-marker.is-diesel .hydrogen-marker-core {
    stroke: var(--solutions-gold);
}

.hydrogen-sensor-marker.is-hydrogen .hydrogen-marker-ring,
.hydrogen-sensor-marker.is-hydrogen .hydrogen-marker-core {
    stroke: var(--solutions-green);
}

.hydrogen-sensor-marker.is-activity .hydrogen-marker-ring,
.hydrogen-sensor-marker.is-activity .hydrogen-marker-core {
    stroke: var(--solutions-cyan);
}

.hydrogen-marker-label {
    fill: #f2fbfd;
    font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .02em;
}

.hydrogen-sensor-marker.is-hydrogen .hydrogen-marker-ring {
    animation-delay: .75s;
}

.hydrogen-sensor-marker.is-activity .hydrogen-marker-ring {
    animation-delay: 1.5s;
}

.hydrogen-vehicle-plane figcaption {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 2px 7px;
}

.hydrogen-vehicle-plane figcaption span {
    flex: 0 0 auto;
    color: var(--solutions-cyan);
    font-size: 6.8px;
    font-weight: 900;
    letter-spacing: .1em;
}

.hydrogen-vehicle-plane figcaption small {
    min-width: 0;
    overflow: visible;
    color: #8cb1c0;
    font-size: 6.8px;
    line-height: 1.25;
    text-align: right;
    text-overflow: clip;
    white-space: normal;
}

.hydrogen-telemetry-bus {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: 7px auto minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    overflow: hidden;
    border: 1px solid rgba(82, 217, 255, .5);
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(82, 217, 255, .07), transparent 72%), rgba(3, 29, 44, .94);
}

.hydrogen-telemetry-bus::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -30%;
    width: 28%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(82, 217, 255, .16), transparent);
    content: "";
    animation: hydrogen-bus-sequence 9s ease-in-out 3;
}

.hydrogen-telemetry-bus > * {
    position: relative;
    z-index: 1;
}

.hydrogen-telemetry-bus > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--solutions-cyan);
    box-shadow: 0 0 7px rgba(82, 217, 255, .72);
}

.hydrogen-telemetry-bus strong {
    color: #edfaff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .13em;
}

.hydrogen-telemetry-bus span {
    min-width: 0;
    overflow: hidden;
    color: var(--solutions-cyan-soft);
    font-size: 6.8px;
    font-weight: 850;
    letter-spacing: .06em;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hydrogen-instrument-register {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(82, 217, 255, .18);
    border-radius: 4px;
    background: rgba(2, 23, 36, .86);
    list-style: none;
}

.hydrogen-instrument-register > li {
    --hydrogen-channel-accent: var(--solutions-cyan);
    display: grid;
    min-width: 0;
    min-height: 66px;
    grid-template-columns: 25px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    padding: 8px;
}

.hydrogen-instrument-register > li + li {
    border-left: 1px solid rgba(82, 217, 255, .13);
}

.hydrogen-instrument-register > li.is-diesel {
    --hydrogen-channel-accent: var(--solutions-gold);
}

.hydrogen-instrument-register > li.is-hydrogen {
    --hydrogen-channel-accent: var(--solutions-green);
}

.hydrogen-channel-index {
    display: grid;
    width: 25px;
    height: 25px;
    grid-row: 1 / span 2;
    place-items: center;
    border: 1px solid rgba(82, 217, 255, .72);
    border-radius: 50%;
    color: var(--hydrogen-channel-accent);
    background: rgba(2, 26, 39, .9);
    font-size: 7px;
    font-weight: 900;
}

.hydrogen-instrument-register > li.is-diesel .hydrogen-channel-index {
    border-color: rgba(245, 200, 76, .72);
}

.hydrogen-instrument-register > li.is-hydrogen .hydrogen-channel-index {
    border-color: rgba(85, 238, 155, .72);
}

.hydrogen-channel-copy {
    min-width: 0;
}

.hydrogen-channel-copy small,
.hydrogen-channel-copy strong,
.hydrogen-channel-copy em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hydrogen-channel-copy small {
    color: #7fa6b6;
    font-size: 6.2px;
    font-weight: 900;
    letter-spacing: .06em;
}

.hydrogen-channel-copy strong {
    margin-top: 2px;
    display: -webkit-box;
    overflow: hidden;
    color: #edfaff;
    font-size: 8px;
    line-height: 1.15;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hydrogen-channel-copy em {
    margin-top: 2px;
    color: var(--hydrogen-channel-accent);
    font-size: 6.4px;
    font-style: normal;
    font-weight: 900;
}

.hydrogen-instrument-register > li > b {
    grid-column: 2;
    color: var(--hydrogen-channel-accent);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .07em;
}

.hydrogen-instrument-empty {
    display: grid;
    min-width: 0;
    grid-template-columns: 8px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 9px;
    border: 1px dashed rgba(245, 200, 76, .36);
    border-radius: 4px;
    background: rgba(42, 34, 10, .2);
}

.hydrogen-instrument-empty > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--solutions-gold);
    box-shadow: 0 0 7px rgba(245, 200, 76, .55);
}

.hydrogen-instrument-empty strong,
.hydrogen-instrument-empty small {
    display: block;
}

.hydrogen-instrument-empty strong {
    color: #f6e7b0;
    font-size: 7.4px;
}

.hydrogen-instrument-empty small {
    margin-top: 2px;
    color: #b5a873;
    font-size: 6.2px;
}

/* Onboard HHO / oxyhydrogen combustion-assist research system */

.hho-machine-cutaway {
    display: block;
    width: 100%;
    max-width: 640px;
    min-height: 0;
    padding: 12px 14px 10px;
    border-color: rgba(82, 217, 255, .15);
    background:
        radial-gradient(circle at 50% 52%, rgba(82, 217, 255, .065), transparent 60%),
        rgba(0, 18, 30, .82);
    box-shadow: inset 0 0 0 1px rgba(82, 217, 255, .018), 0 0 28px rgba(82, 217, 255, .055);
}

.hho-instrument {
    position: relative;
    z-index: 1;
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 9px;
}

.hho-instrument-head {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 4px 8px;
    border-bottom: 1px solid rgba(82, 217, 255, .14);
}

.hho-instrument-head > strong,
.hho-instrument-head > b {
    min-width: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hho-instrument-head > strong {
    color: #c7f3ff;
    font-size: 9.2px;
    font-weight: 900;
    letter-spacing: .1em;
}

.hho-instrument-head > b {
    flex: 0 0 auto;
    color: var(--solutions-cyan);
    font-size: 8.7px;
    font-weight: 900;
    letter-spacing: .1em;
    text-align: right;
}

.hho-proof-rail {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
}

.hho-proof-node {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 36px;
    padding: 10px 8px 9px;
    overflow: visible;
    border: 1px solid rgba(82, 217, 255, .3);
    border-radius: 4px;
    background: rgba(4, 34, 50, .86);
    text-align: center;
}

.hho-proof-node strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hho-proof-node strong {
    color: #eaf9fd;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .055em;
}

.hho-proof-node::after {
    position: absolute;
    z-index: 8;
    top: calc(100% + 6px);
    left: 50%;
    width: max-content;
    max-width: 190px;
    padding: 4px 6px;
    pointer-events: none;
    border: 1px solid rgba(82, 217, 255, .32);
    border-radius: 3px;
    color: #b9d4df;
    background: rgba(2, 21, 33, .98);
    box-shadow: 0 8px 18px rgba(0, 8, 15, .38);
    content: attr(data-detail);
    font-size: 6.4px;
    font-weight: 850;
    letter-spacing: .06em;
    opacity: 0;
    transform: translate(-50%, -3px);
    transition: opacity .16s ease, transform .16s ease;
}

.hho-proof-node:hover::after,
.hho-proof-node:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.hho-proof-node:focus-visible {
    outline: 1px solid var(--solutions-cyan);
    outline-offset: 2px;
}

.hho-proof-node.is-reference {
    border-color: rgba(245, 200, 76, .54);
    background: linear-gradient(90deg, rgba(245, 200, 76, .08), transparent 84%), rgba(4, 31, 43, .9);
}

.hho-proof-node.is-reference small,
.hho-proof-node.is-reference strong {
    color: #f6d66f;
}

.hho-proof-node.is-ready:not(.is-reference) {
    border-color: rgba(82, 217, 255, .55);
    box-shadow: inset 0 0 14px rgba(82, 217, 255, .035);
}

.hho-proof-node.is-pending {
    border-style: dashed;
}

.hho-proof-node.is-method.is-ready {
    border-color: rgba(85, 238, 155, .4);
}

.hho-proof-link {
    position: relative;
    display: block;
    height: 1px;
    overflow: visible;
    color: var(--solutions-cyan);
    background: rgba(82, 217, 255, .42);
}

.hho-proof-link::before {
    position: absolute;
    top: -1px;
    right: 0;
    left: 0;
    height: 3px;
    opacity: .35;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    content: "";
    animation: hho-proof-sequence 10s linear 3;
}

.hho-proof-link::after {
    position: absolute;
    top: -3px;
    right: 0;
    width: 6px;
    height: 6px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    content: "";
    transform: rotate(45deg);
}

.hho-proof-link.is-reference {
    color: var(--solutions-gold);
    background: rgba(245, 200, 76, .5);
}

.hho-proof-link.is-method::before {
    animation-delay: 4.1s;
}

.hho-proof-link.is-method.is-ready {
    color: var(--solutions-green);
    background: rgba(85, 238, 155, .5);
}

.hho-proof-link.is-method.is-pending {
    opacity: .48;
    background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px);
}

.hho-vehicle-plane {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 0 2px;
    overflow: visible;
    border-bottom: 1px solid rgba(82, 217, 255, .13);
}

.hho-reference-artwork {
    position: relative;
    width: min(100%, 600px);
    aspect-ratio: 12 / 5;
    margin-inline: auto;
    background: #001421;
}

.hho-reference-equipment {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    image-rendering: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.hho-vehicle-svg.hho-vector-fallback[hidden] {
    display: none;
}

.hho-art-hotspot {
    position: absolute;
    z-index: 3;
    width: 15%;
    height: 44%;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: help;
    transform: translate(-50%, -50%);
}

.hho-art-hotspot.is-power {
    top: 39%;
    left: 34.2%;
    width: 17%;
    height: 58%;
}

.hho-art-hotspot.is-electrolyzer {
    top: 31%;
    left: 55.4%;
    width: 25%;
    height: 55%;
}

.hho-art-hotspot.is-safety {
    top: 33%;
    left: 76.4%;
    width: 14%;
    height: 55%;
}

.hho-art-hotspot.is-intake {
    top: 42%;
    left: 90.5%;
    width: 16%;
    height: 52%;
}

.hho-art-hotspot::after {
    position: absolute;
    z-index: 8;
    top: calc(100% + 6px);
    left: 50%;
    width: max-content;
    max-width: min(245px, 72vw);
    padding: 7px 9px;
    pointer-events: none;
    border: 1px solid rgba(82, 217, 255, .42);
    border-radius: 3px;
    color: #dff7fc;
    background: rgba(2, 21, 33, .98);
    box-shadow: 0 8px 22px rgba(0, 8, 15, .58);
    content: attr(data-detail);
    font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
    font-size: 7.4px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: .055em;
    opacity: 0;
    transform: translate(-50%, 4px);
    transition: opacity .16s ease, transform .16s ease;
    white-space: normal;
}

.hho-art-hotspot.is-intake::after {
    right: 0;
    left: auto;
    transform: translateY(4px);
}

.hho-art-hotspot:hover::after,
.hho-art-hotspot:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.hho-art-hotspot.is-intake:hover::after,
.hho-art-hotspot.is-intake:focus-visible::after {
    transform: translateY(0);
}

.hho-art-hotspot:focus-visible {
    border-radius: 4px;
    outline: 1px solid var(--solutions-cyan);
    outline-offset: 2px;
    box-shadow: 0 0 12px rgba(82, 217, 255, .3);
}

.hho-art-hotspot.is-power:focus-visible {
    outline-color: var(--solutions-gold);
}

.hho-art-hotspot.is-electrolyzer:focus-visible,
.hho-art-hotspot.is-safety:focus-visible {
    outline-color: var(--solutions-green);
}

.hho-vehicle-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 250px;
    overflow: visible;
}

.hho-vehicle-svg path,
.hho-vehicle-svg rect,
.hho-vehicle-svg circle {
    vector-effect: non-scaling-stroke;
}

.hho-vehicle-frame,
.hho-diesel-system,
.hho-generation-system,
.hho-work-system,
.hho-vehicle-wheels,
.hho-wheel-assembly {
    pointer-events: none;
}

.hho-vehicle-shell {
    fill: url("#hho-truck-body-gradient");
    stroke: rgba(190, 245, 255, .98);
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 2px rgba(82, 217, 255, .2));
}

.hho-vehicle-cab {
    fill: url("#hho-truck-body-gradient");
    stroke: rgba(164, 236, 255, .78);
    stroke-width: 1.08;
}

.hho-vehicle-roof {
    fill: none;
    stroke: rgba(190, 244, 255, .88);
    stroke-width: 1.15;
    filter: drop-shadow(0 0 3px rgba(82, 217, 255, .12));
}

.hho-vehicle-window {
    fill: url("#hho-truck-glass-gradient");
    stroke: rgba(190, 244, 255, .76);
    stroke-width: 1;
}

.hho-vehicle-window.is-windshield {
    opacity: .92;
}

.hho-vehicle-door,
.hho-vehicle-depth,
.hho-vehicle-mirror,
.hho-vehicle-fender {
    fill: none;
    stroke: rgba(166, 229, 246, .46);
    stroke-width: .82;
}

.hho-vehicle-deck {
    fill: none;
    stroke: rgba(161, 226, 244, .42);
    stroke-width: .78;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hho-vehicle-depth {
    stroke: rgba(166, 229, 246, .28);
    stroke-width: .7;
}

.hho-vehicle-mirror {
    stroke: rgba(186, 239, 252, .68);
}

.hho-vehicle-fender {
    stroke: rgba(176, 237, 252, .8);
    stroke-width: 1.1;
}

.hho-vehicle-bumper,
.hho-vehicle-step {
    fill: none;
    stroke: rgba(175, 235, 250, .72);
    stroke-width: .9;
}

.hho-vehicle-lamp {
    fill: rgba(245, 200, 76, .36);
    stroke: rgba(255, 222, 119, .92);
    stroke-width: .8;
    filter: drop-shadow(0 0 3px rgba(245, 200, 76, .34));
}

.hho-vehicle-fine-detail path {
    fill: none;
    stroke: rgba(164, 228, 245, .3);
    stroke-width: .66;
}

.hho-vehicle-fine-detail circle,
.hho-vehicle-fine-detail rect {
    fill: rgba(178, 237, 252, .42);
    stroke: rgba(190, 242, 255, .5);
    stroke-width: .55;
}

.hho-vehicle-detail,
.hho-vehicle-grille,
.hho-vehicle-chassis,
.hho-component-detail,
.hho-tailpipe,
.hho-water-line,
.hho-water-feed,
.hho-mechanical-coupling {
    fill: none;
    stroke: rgba(166, 229, 246, .44);
    stroke-width: .86;
}

.hho-component-detail {
    stroke-width: .95;
    opacity: .88;
}

.hho-vehicle-chassis {
    stroke: rgba(178, 238, 253, .84);
    stroke-width: 1.35;
}

.hho-component-shell {
    fill: rgba(4, 38, 54, .9);
    stroke: rgba(129, 220, 245, .82);
    stroke-width: 1.05;
}

.hho-engine {
    fill: rgba(245, 200, 76, .14);
    stroke: rgba(255, 211, 88, .98);
    stroke-width: 1.25;
    filter: drop-shadow(0 0 2px rgba(245, 200, 76, .28));
}

.hho-engine-detail path,
.hho-engine-detail circle {
    fill: none;
    stroke: rgba(255, 219, 112, .86);
    stroke-width: .9;
}

.hho-diesel-system .hho-component-detail {
    stroke: rgba(245, 216, 123, .56);
}

.hho-diesel-tank {
    fill: rgba(245, 200, 76, .07);
    stroke: rgba(245, 200, 76, .62);
    filter: none;
}

.hho-alternator,
.hho-power-controller {
    fill: rgba(9, 67, 88, .72);
    stroke: rgba(94, 224, 255, .96);
    stroke-width: 1.2;
    filter: drop-shadow(0 0 2px rgba(82, 217, 255, .28));
}

.hho-controller-screen {
    fill: rgba(82, 217, 255, .08);
    stroke: rgba(153, 236, 255, .72);
    stroke-width: .75;
}

.hho-electrolyzer-reservoir {
    fill: rgba(19, 82, 100, .62);
    stroke: rgba(105, 231, 255, .96);
    stroke-width: 1.15;
    filter: drop-shadow(0 0 2px rgba(82, 217, 255, .22));
}

.hho-water-line {
    stroke: rgba(116, 230, 255, .84);
}

.hho-water-feed {
    stroke: rgba(116, 230, 255, .88);
    stroke-width: 1.2;
    stroke-dasharray: 2 3;
}

.hho-mechanical-coupling {
    stroke: rgba(245, 200, 76, .82);
    stroke-width: 2.2;
}

.hho-electrolyzer-cell {
    fill: rgba(17, 101, 76, .62);
    stroke: rgba(100, 249, 165, .98);
    stroke-width: 1.2;
    filter: drop-shadow(0 0 2px rgba(85, 238, 155, .24));
}

.hho-safety-module {
    fill: rgba(13, 82, 67, .64);
    stroke: rgba(111, 247, 175, .96);
    stroke-width: 1.15;
    filter: drop-shadow(0 0 2px rgba(85, 238, 155, .22));
}

.hho-bubble {
    fill: rgba(160, 255, 207, .5);
    stroke: rgba(196, 255, 225, .9);
    transform-box: fill-box;
    transform-origin: center;
    animation: hho-bubble-sequence 10s ease-in-out 3;
}

.hho-bubble + .hho-bubble {
    animation-delay: .45s;
}

.hho-bubble.is-required {
    opacity: .24;
    animation: none;
}

.hho-intake-node {
    fill: rgba(85, 238, 155, .36);
    stroke: #55ee9b;
    stroke-width: 1.2;
    filter: drop-shadow(0 0 5px rgba(85, 238, 155, .55));
}

.hho-component-glyph,
.hho-callout-number,
.hho-callout-name {
    font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
    font-weight: 900;
}

.hho-component-glyph {
    fill: #d8f7ff;
    font-size: 6.5px;
}

.hho-flow-track,
.hho-flow,
.hho-sensor-drop {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hho-flow-track {
    stroke-width: 3.2;
    opacity: .28;
}

.hho-flow {
    stroke-width: 1.65;
    stroke-dasharray: 8 6;
    filter: drop-shadow(0 0 1.5px currentColor);
}

.hho-flow-track.is-electrical,
.hho-flow.is-electrical,
.hho-sensor-drop.is-electrical {
    stroke: #f5c84c;
}

.hho-flow-track.is-hho,
.hho-flow.is-hho,
.hho-sensor-drop.is-hho {
    stroke: #55ee9b;
}

.hho-flow-track.is-diesel,
.hho-flow.is-diesel,
.hho-sensor-drop.is-diesel {
    stroke: #f5c84c;
}

.hho-flow-track.is-work,
.hho-flow.is-work,
.hho-sensor-drop.is-work {
    stroke: #65d8ff;
}

.hho-sensor-drop.is-tailpipe,
.hho-tailpipe {
    stroke: #52d9ff;
}

.hho-flow.is-electrical {
    animation: hho-electrical-sequence 10s linear 3;
}

.hho-flow.is-hho {
    animation: hho-generation-sequence 10s linear 3;
}

.hho-flow.is-diesel {
    animation: hho-diesel-sequence 10s linear 3;
}

.hho-flow.is-work {
    animation: hho-work-sequence 10s linear 3;
}

.hho-flow.is-required {
    opacity: .55;
    stroke-dasharray: 2 6;
    animation: none;
}

.hho-sensor-drop.is-required,
.hho-flow-node.is-required {
    opacity: .55;
}

.hho-flow-node {
    fill: #52d9ff;
    stroke: rgba(5, 34, 48, .9);
    stroke-width: 2;
    filter: drop-shadow(0 0 5px rgba(82, 217, 255, .58));
}

.hho-flow-arrow {
    stroke: none;
    opacity: .92;
}

.hho-flow-arrow.is-electrical {
    fill: #f5c84c;
}

.hho-flow-arrow.is-hho {
    fill: #55ee9b;
}

.hho-sensor-terminal {
    fill: #52d9ff;
    stroke: rgba(5, 34, 48, .82);
    stroke-width: .8;
}

.hho-flow-node.is-tailpipe {
    fill: #52d9ff;
    filter: drop-shadow(0 0 5px rgba(82, 217, 255, .5));
    transform-box: fill-box;
    transform-origin: center;
    animation: hho-tailpipe-sequence 10s ease-in-out 3;
}

.hho-flow-node.is-tailpipe.is-required {
    animation: none;
}

.hho-wheel {
    fill: #031520;
    stroke: rgba(181, 239, 253, .88);
    stroke-width: 1.35;
    filter: drop-shadow(0 0 3px rgba(82, 217, 255, .15));
}

.hho-wheel-shoulder {
    fill: rgba(4, 26, 38, .98);
    stroke: rgba(154, 222, 241, .36);
    stroke-width: .8;
}

.hho-wheel-rim {
    fill: rgba(82, 217, 255, .055);
    stroke: rgba(176, 237, 252, .62);
    stroke-width: .95;
}

.hho-wheel-spoke {
    fill: none;
    stroke: rgba(170, 231, 248, .58);
    stroke-width: .75;
}

.hho-wheel-hub {
    fill: rgba(82, 217, 255, .14);
    stroke: rgba(190, 243, 255, .76);
    stroke-width: .8;
}

.hho-wheel-lug {
    fill: rgba(184, 241, 255, .74);
    stroke: rgba(2, 28, 42, .9);
    stroke-width: .45;
}

.hho-sensor-drop {
    stroke-width: 1.1;
    stroke-dasharray: none;
    opacity: .74;
}

.hho-process-callouts {
    pointer-events: none;
}

.hho-callout-leader {
    fill: none;
    stroke-width: 1.15;
    opacity: .9;
}

.hho-callout-index {
    fill: rgba(2, 24, 36, .98);
    stroke-width: 1.25;
    filter: none;
}

.hho-process-callout.is-power .hho-callout-leader,
.hho-process-callout.is-power .hho-callout-index {
    stroke: #f5c84c;
}

.hho-process-callout.is-electrolyzer .hho-callout-leader,
.hho-process-callout.is-electrolyzer .hho-callout-index,
.hho-process-callout.is-safety .hho-callout-leader,
.hho-process-callout.is-safety .hho-callout-index {
    stroke: #55ee9b;
}

.hho-process-callout.is-intake .hho-callout-leader,
.hho-process-callout.is-intake .hho-callout-index {
    stroke: #52d9ff;
}

.hho-callout-number {
    fill: #f3fbfd;
    font-size: 9.5px;
    letter-spacing: .01em;
}

.hho-callout-name {
    fill: #e9f8fc;
    font-size: 8px;
    letter-spacing: .065em;
}

.hho-safety-caption {
    fill: #55ee9b;
    font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
    filter: none;
}

.hho-telemetry-bus {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    margin-top: -2px;
    padding: 6px 9px;
    overflow: hidden;
    border: 1px solid rgba(82, 217, 255, .5);
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(82, 217, 255, .07), transparent 72%), rgba(3, 29, 44, .94);
}

.hho-telemetry-bus::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -30%;
    width: 28%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(82, 217, 255, .16), transparent);
    content: "";
    animation: hho-bus-sequence 10s ease-in-out 3;
}

.hho-telemetry-bus > * {
    position: relative;
    z-index: 1;
}

.hho-telemetry-bus > i {
    position: absolute;
    left: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--solutions-cyan);
    box-shadow: 0 0 7px rgba(82, 217, 255, .72);
}

.hho-telemetry-bus strong {
    color: #edfaff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .13em;
}

.hho-telemetry-bus span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hho-instrument-register {
    position: relative;
    z-index: 4;
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    overflow: visible;
    list-style: none;
}

.hho-instrument-register > li {
    --hho-channel-accent: var(--solutions-cyan);
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 86px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 34px minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    gap: 5px;
    padding: 8px 6px;
    border: 1px solid color-mix(in srgb, var(--hho-channel-accent) 58%, transparent);
    border-radius: 4px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--hho-channel-accent) 7%, transparent), transparent 68%), rgba(2, 24, 37, .94);
    box-shadow: inset 0 0 18px color-mix(in srgb, var(--hho-channel-accent) 4%, transparent);
    text-align: center;
}

.hho-instrument-register > li:hover,
.hho-instrument-register > li:focus-visible {
    z-index: 12;
}

.hho-instrument-register > li::before {
    position: absolute;
    bottom: 100%;
    left: 50%;
    height: 9px;
    border-left: 1px solid var(--hho-channel-accent);
    content: "";
    opacity: .7;
}

.hho-instrument-register > li::after {
    position: absolute;
    z-index: 8;
    bottom: calc(100% + 6px);
    left: 50%;
    width: max-content;
    max-width: min(230px, 72vw);
    padding: 7px 9px;
    pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--hho-channel-accent) 58%, transparent);
    border-radius: 3px;
    color: #dff7fc;
    background: rgba(2, 21, 33, .98);
    box-shadow: 0 8px 22px rgba(0, 8, 15, .58);
    content: attr(data-detail);
    font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
    font-size: 7.2px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: .05em;
    opacity: 0;
    transform: translate(-50%, 4px);
    transition: opacity .16s ease, transform .16s ease;
    white-space: normal;
}

.hho-instrument-register > li:hover::after,
.hho-instrument-register > li:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.hho-instrument-register > li:first-child::after {
    left: 0;
    transform: translateY(4px);
}

.hho-instrument-register > li:last-child::after {
    right: 0;
    left: auto;
    transform: translateY(4px);
}

.hho-instrument-register > li:first-child:hover::after,
.hho-instrument-register > li:first-child:focus-visible::after,
.hho-instrument-register > li:last-child:hover::after,
.hho-instrument-register > li:last-child:focus-visible::after {
    transform: translateY(0);
}

.hho-instrument-register > li + li {
    border-left-color: color-mix(in srgb, var(--hho-channel-accent) 58%, transparent);
}

.hho-instrument-register > li.is-hho { --hho-channel-accent: var(--solutions-green); }
.hho-instrument-register > li.is-electrical { --hho-channel-accent: var(--solutions-gold); }
.hho-instrument-register > li.is-diesel { --hho-channel-accent: var(--solutions-gold); }
.hho-instrument-register > li.is-work { --hho-channel-accent: #65d8ff; }
.hho-instrument-register > li.is-tailpipe { --hho-channel-accent: var(--solutions-cyan); }

.hho-instrument-register > li.is-required {
    border-style: dashed;
    opacity: .72;
}

.hho-channel-node {
    display: grid;
    width: 32px;
    height: 32px;
    align-self: center;
    justify-self: center;
    place-items: center;
    border: 1px solid var(--hho-channel-accent);
    border-radius: 50%;
    color: var(--hho-channel-accent);
    background: color-mix(in srgb, var(--hho-channel-accent) 7%, rgba(2, 24, 37, .98));
    box-shadow: 0 0 9px color-mix(in srgb, var(--hho-channel-accent) 28%, transparent);
}

.hho-channel-node svg {
    width: 21px;
    height: 21px;
    overflow: visible;
}

.hho-channel-node path,
.hho-channel-node circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hho-channel-node text {
    fill: currentColor;
    font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
    font-size: 7px;
    font-weight: 900;
}

.hho-channel-copy {
    min-width: 0;
    width: 100%;
}

.hho-channel-copy strong,
.hho-channel-copy em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hho-channel-copy strong {
    color: #edfaff;
    font-size: 8.4px;
    line-height: 1.2;
    letter-spacing: .055em;
    white-space: normal;
}

.hho-channel-copy em {
    margin-top: 3px;
    color: var(--hho-channel-accent);
    font-size: 7px;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}

.hho-instrument-register > li:focus-visible {
    outline: 1px solid var(--hho-channel-accent);
    outline-offset: 2px;
}

.technology-digital-twin.hho .input-bank .twin-signal.pending {
    border-style: dashed;
    border-color: rgba(245, 200, 76, .34);
    box-shadow: inset 2px 0 0 rgba(245, 200, 76, .42);
}

.technology-digital-twin.hho .input-bank .twin-signal.pending > i {
    background: var(--solutions-gold);
    box-shadow: 0 0 8px rgba(245, 200, 76, .55);
}

.technology-digital-twin.hho .research-bank > header span {
    color: var(--solutions-cyan);
}

.technology-digital-twin.hho .research-bank .twin-signal {
    border-color: rgba(82, 217, 255, .26);
    background: linear-gradient(90deg, rgba(82, 217, 255, .05), transparent 76%), rgba(3, 31, 43, .93);
    box-shadow: inset -2px 0 0 rgba(245, 200, 76, .5);
}

.technology-digital-twin.hho .research-bank .twin-signal::after {
    border-color: rgba(82, 217, 255, .58);
}

.technology-digital-twin.hho .research-bank .twin-signal::before {
    border-color: var(--solutions-cyan);
}

.technology-digital-twin.hho .research-bank .twin-signal > i {
    background: var(--solutions-cyan);
    box-shadow: 0 0 8px rgba(82, 217, 255, .65);
}

.technology-digital-twin.hho .research-bank .twin-signal {
    grid-template-columns: 34px minmax(0, 1fr);
    border-radius: 5px;
    box-shadow: inset -2px 0 0 rgba(82, 217, 255, .48);
}

.technology-digital-twin.hho .research-bank .research-signal-icon {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(82, 217, 255, .68);
    border-radius: 50%;
    color: var(--solutions-cyan);
    background: rgba(6, 48, 64, .52);
    box-shadow: 0 0 10px rgba(82, 217, 255, .18);
}

.technology-digital-twin.hho .research-bank .research-signal-icon.is-carbon {
    border-color: rgba(85, 238, 155, .68);
    color: var(--solutions-green);
    background: rgba(8, 55, 45, .46);
    box-shadow: 0 0 10px rgba(85, 238, 155, .16);
}

.research-signal-icon svg {
    width: 20px;
    height: 20px;
}

.research-signal-icon path,
.research-signal-icon circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.technology-digital-twin.hho .research-bank .twin-signal em {
    color: #f3d876;
}

.twin-translation-strip.hho-research .result strong {
    color: var(--solutions-gold);
}

.twin-translation-strip.hho-research {
    min-height: 58px;
}

.technology-blueprint-rule.hho-research > span.result strong {
    color: var(--solutions-green-soft);
}

.technology-blueprint-rule.hho-research > span.result i {
    background: var(--solutions-green);
    box-shadow: 0 0 8px rgba(85, 238, 155, .7);
}

.technology-blueprint-rule.hho-research {
    min-height: 78px;
}

.twin-portfolio-gate.hho-research-gate {
    min-height: 176px;
    margin-top: 14px;
    border-color: rgba(245, 200, 76, .34);
    background:
        repeating-linear-gradient(135deg, rgba(245, 200, 76, .025) 0 5px, transparent 5px 10px),
        rgba(45, 36, 9, .22);
}

.twin-portfolio-gate.hho-research-gate > i {
    position: relative;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(245, 200, 76, .72);
    transform: rotate(45deg);
}

.twin-portfolio-gate.hho-research-gate > i::before,
.twin-portfolio-gate.hho-research-gate > i::after {
    display: none;
}

.twin-portfolio-gate.hho-research-gate > i b {
    position: relative;
    width: 13px;
    height: 10px;
    border: 0;
    border-radius: 1px;
    background: var(--solutions-gold);
    transform: rotate(-45deg);
}

.twin-portfolio-gate.hho-research-gate > i b::before {
    position: absolute;
    bottom: 100%;
    left: 3px;
    width: 7px;
    height: 7px;
    border: 2px solid var(--solutions-gold);
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    content: "";
}

.twin-portfolio-gate.hho-research-gate > strong {
    color: #f6d76c;
}

.twin-portfolio-gate.hho-research-gate > em {
    border-color: rgba(245, 200, 76, .3);
    color: #f0ce61;
}

.twin-portfolio-gate.hho-research-gate.research-ready > i::before,
.twin-portfolio-gate.hho-research-gate.research-ready > i::after {
    border-color: var(--solutions-green);
}

.twin-portfolio-gate.hho-research-gate.research-ready > i {
    border-color: rgba(85, 238, 155, .7);
}

.twin-portfolio-gate.hho-research-gate.research-ready > i b {
    background: var(--solutions-green);
    box-shadow: 0 0 7px rgba(85, 238, 155, .58);
}

.twin-portfolio-gate.hho-research-gate.research-ready > i b::before {
    border-color: var(--solutions-green);
}

.twin-portfolio-gate.hho-research-gate.research-ready > strong {
    color: var(--solutions-green-soft);
}

.hho-research-position .technology-outcome-terminal > header span,
.hho-research-position .technology-realization-terminal > header span {
    color: var(--solutions-cyan);
}

.hho-research-position .technology-outcome-terminal > div {
    border-color: rgba(82, 217, 255, .2);
    background: linear-gradient(90deg, rgba(82, 217, 255, .05), transparent), rgba(3, 32, 43, .56);
}

.hho-research-position .technology-outcome-terminal > div > i {
    background: var(--solutions-cyan);
    box-shadow: 0 0 8px rgba(82, 217, 255, .66);
}

.hho-research-position .technology-outcome-terminal > div > b {
    color: var(--solutions-cyan-soft);
}

.hho-research-position .technology-outcome-terminal > div > em {
    border-color: rgba(245, 200, 76, .24);
    color: var(--solutions-gold);
}

.realization-verdict.hho-research-verdict.connected {
    border-color: rgba(82, 217, 255, .28);
    background: repeating-linear-gradient(135deg, rgba(82, 217, 255, .02) 0 5px, transparent 5px 10px), rgba(4, 36, 48, .25);
}

.realization-verdict.hho-research-verdict.connected::before,
.realization-verdict.hho-research-verdict.connected::after {
    background: var(--solutions-cyan);
}

.realization-verdict.hho-research-verdict.connected strong {
    color: var(--solutions-cyan-soft);
}

.cutaway-body,
.cutaway-detail,
.cutaway-window,
.cutaway-module,
.cutaway-flow,
.cutaway-telemetry,
.cutaway-gas,
.cutaway-wheel,
.cutaway-wheel-core,
.cutaway-node {
    vector-effect: non-scaling-stroke;
}

.cutaway-body {
    fill: rgba(5, 48, 68, .76);
    stroke: var(--solutions-cyan);
    stroke-width: 1.25;
}

.cutaway-detail {
    fill: none;
    stroke: rgba(147, 234, 255, .55);
    stroke-width: 1;
}

.cutaway-window {
    fill: rgba(82, 217, 255, .09);
    stroke: rgba(147, 234, 255, .72);
    stroke-width: 1;
}

.cutaway-module {
    fill: rgba(85, 238, 155, .12);
    stroke: var(--solutions-green);
    stroke-width: 1.25;
    filter: drop-shadow(0 0 4px rgba(85, 238, 155, .28));
}

.cutaway-flow {
    fill: none;
    stroke: var(--solutions-green);
    stroke-width: 1.35;
    stroke-dasharray: 4 3;
}

.cutaway-telemetry {
    fill: none;
    stroke: var(--solutions-cyan-soft);
    stroke-width: 1;
}

.cutaway-gas {
    fill: none;
    stroke: var(--solutions-green);
    stroke-width: 1.3;
    stroke-dasharray: 3 3;
}

.cutaway-wheel {
    fill: #031724;
    stroke: rgba(147, 234, 255, .8);
    stroke-width: 1.4;
}

.cutaway-wheel-core {
    fill: var(--solutions-green);
    stroke: #063026;
    stroke-width: 2;
}

.cutaway-node {
    fill: var(--solutions-green);
    stroke: #07362b;
    stroke-width: 2;
    filter: drop-shadow(0 0 4px rgba(85, 238, 155, .72));
}

.cutaway-module-label {
    fill: #dffef0;
    font-size: 12px;
    font-weight: 900;
}

.cutaway-callout {
    fill: #9ed5e7;
    font-size: 6.2px;
    font-weight: 850;
    letter-spacing: .07em;
}

.methane-cutaway .cutaway-body {
    fill: rgba(5, 55, 52, .72);
    stroke: rgba(85, 238, 155, .78);
}

.water-cutaway .cutaway-body {
    fill: rgba(5, 46, 73, .78);
    stroke: #66d7ff;
}

.general-cutaway .cutaway-body {
    fill: rgba(5, 43, 62, .76);
}

.cutaway-status {
    position: absolute;
    right: 9px;
    bottom: 8px;
    display: inline-flex;
    z-index: 3;
    align-items: center;
    gap: 5px;
    padding: 4px 6px;
    border: 1px solid rgba(85, 238, 155, .28);
    border-radius: 3px;
    color: var(--solutions-green-soft);
    background: rgba(4, 46, 37, .82);
    font-size: 6.8px;
    font-weight: 900;
    letter-spacing: .06em;
}

.cutaway-status i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--solutions-green);
    box-shadow: 0 0 7px rgba(85, 238, 155, .7);
}

.twin-machine-identity {
    width: 100%;
    max-width: 230px;
    margin-top: 15px;
    padding: 8px 9px;
    border: 1px solid rgba(82, 217, 255, .19);
    border-radius: 4px;
    background: rgba(2, 23, 36, .86);
    text-align: center;
}

.twin-machine-identity small,
.twin-machine-identity strong,
.twin-machine-identity span {
    display: block;
}

.twin-machine-identity small {
    color: var(--solutions-cyan);
    font-size: 6.5px;
    font-weight: 900;
    letter-spacing: .1em;
}

.twin-machine-identity strong {
    margin-top: 3px;
    overflow: hidden;
    color: #effbff;
    font-size: 9.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.twin-machine-identity span {
    margin-top: 3px;
    color: #849fab;
    font-size: 6.8px;
}

.twin-translation-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    overflow: hidden;
    border: 1px solid rgba(82, 217, 255, .18);
    border-radius: 5px;
    background: rgba(2, 21, 35, .78);
}

.twin-translation-strip > span {
    display: block;
    min-width: 0;
    padding: 7px 9px;
}

.twin-translation-strip small,
.twin-translation-strip strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.twin-translation-strip small {
    color: #7898a8;
    font-size: 6.5px;
    font-weight: 850;
    letter-spacing: .08em;
}

.twin-translation-strip strong {
    margin-top: 3px;
    color: #dcebf2;
    font-size: 8.5px;
}

.twin-translation-strip > b {
    color: #6c9aac;
    font-size: 10px;
    font-weight: 450;
}

.twin-translation-strip .result strong {
    color: var(--solutions-green);
}

.twin-control-console {
    display: flex;
    min-width: 0;
    min-height: 438px;
    flex-direction: column;
    padding: 15px;
    background:
        radial-gradient(circle at 100% 100%, rgba(85, 238, 155, .06), transparent 34%),
        linear-gradient(165deg, rgba(3, 29, 45, .98), rgba(2, 20, 33, .98));
}

.twin-control-console > header {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(82, 217, 255, .14);
}

.twin-control-console > header > span {
    color: var(--solutions-cyan);
    font-size: 7.2px;
    font-weight: 900;
    letter-spacing: .12em;
}

.twin-control-console > header > b {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    color: var(--solutions-green);
    font-size: 6.8px;
    font-weight: 900;
    letter-spacing: .06em;
}

.twin-control-console > header > b i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--solutions-green);
    box-shadow: 0 0 8px rgba(85, 238, 155, .74);
}

.twin-control-stack {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.twin-control-stack > section {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 67px;
    grid-template-columns: 25px minmax(0, 1fr) 58px;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border: 1px solid rgba(82, 217, 255, .16);
    background: linear-gradient(90deg, rgba(82, 217, 255, .045), transparent);
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}

.twin-control-stack > section > span {
    color: #74a5b8;
    font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
    font-size: 14px;
}

.twin-control-stack > section > div {
    min-width: 0;
}

.twin-control-stack small,
.twin-control-stack strong,
.twin-control-stack em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.twin-control-stack small {
    color: var(--solutions-cyan);
    font-size: 6.5px;
    font-weight: 900;
    letter-spacing: .08em;
}

.twin-control-stack strong {
    margin-top: 2px;
    color: #e5f2f7;
    font-size: 8.2px;
}

.twin-control-stack em {
    margin-top: 2px;
    color: #829daa;
    font-size: 6.8px;
    font-style: normal;
}

.twin-control-stack > section > b {
    justify-self: end;
    color: var(--solutions-green);
    font-size: 6.2px;
    font-weight: 900;
    letter-spacing: .05em;
}

.twin-control-stack > section > b.pending {
    color: var(--solutions-gold);
}

.technology-digital-twin.hho .twin-control-console > header > span {
    font-size: 8.6px;
}

.technology-digital-twin.hho .twin-control-console > header > b {
    font-size: 7.6px;
}

.technology-digital-twin.hho .twin-control-stack > section > span {
    font-size: 16px;
}

.technology-digital-twin.hho .twin-control-stack small {
    font-size: 7.4px;
}

.technology-digital-twin.hho .twin-control-stack strong {
    font-size: 9.5px;
}

.technology-digital-twin.hho .twin-control-stack em {
    font-size: 7.4px;
}

.technology-digital-twin.hho .twin-control-stack > section > b {
    font-size: 7px;
}

.twin-portfolio-gate {
    position: relative;
    display: flex;
    min-height: 124px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: auto;
    padding: 12px 10px 10px;
    overflow: hidden;
    border: 1px solid rgba(245, 200, 76, .28);
    background:
        repeating-linear-gradient(135deg, rgba(245, 200, 76, .025) 0 5px, transparent 5px 10px),
        rgba(45, 36, 9, .22);
    text-align: center;
}

.twin-portfolio-gate > span {
    color: var(--solutions-gold);
    font-size: 6.7px;
    font-weight: 900;
    letter-spacing: .1em;
}

.twin-portfolio-gate > i {
    position: relative;
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    margin-top: 7px;
    border: 1px solid rgba(245, 200, 76, .58);
    transform: rotate(45deg);
}

.twin-portfolio-gate > i::before,
.twin-portfolio-gate > i::after {
    position: absolute;
    background: rgba(245, 200, 76, .5);
    content: "";
}

.twin-portfolio-gate > i::before {
    width: 15px;
    height: 1px;
}

.twin-portfolio-gate > i::after {
    width: 1px;
    height: 15px;
}

.twin-portfolio-gate > i b {
    width: 7px;
    height: 7px;
    border: 1px solid var(--solutions-gold);
    background: #2d2409;
}

.twin-portfolio-gate > small {
    margin-top: 8px;
    color: #9aaeb8;
    font-size: 6.5px;
    font-weight: 800;
    letter-spacing: .08em;
}

.twin-portfolio-gate > strong {
    margin-top: 3px;
    color: #f6d76c;
    font-size: 8.8px;
    line-height: 1.25;
}

.twin-portfolio-gate > p {
    max-width: 240px;
    margin: 5px 0 0;
    color: #b4c2c8;
    font-size: 7.3px;
    line-height: 1.35;
}

.twin-portfolio-gate > em {
    margin-top: 7px;
    padding: 3px 5px;
    border: 1px solid rgba(245, 200, 76, .2);
    color: #d8ba56;
    font-size: 6px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .06em;
}

.twin-portfolio-gate.connected {
    border-color: rgba(85, 238, 155, .25);
    background:
        repeating-linear-gradient(135deg, rgba(85, 238, 155, .02) 0 5px, transparent 5px 10px),
        rgba(5, 46, 36, .25);
}

.twin-portfolio-gate.connected > i {
    border-color: rgba(85, 238, 155, .6);
}

.twin-portfolio-gate.connected > i::before,
.twin-portfolio-gate.connected > i::after {
    background: rgba(85, 238, 155, .55);
}

.twin-portfolio-gate.connected > i b {
    border-color: var(--solutions-green);
    background: #053329;
    box-shadow: 0 0 8px rgba(85, 238, 155, .58);
}

.twin-portfolio-gate.connected > strong {
    color: var(--solutions-green-soft);
}

.technology-blueprint-rule {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) auto minmax(100px, 1fr) auto minmax(100px, 1fr) auto minmax(125px, 1.2fr) auto minmax(100px, 1fr);
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid rgba(82, 217, 255, .17);
    background: rgba(2, 18, 30, .9);
}

.technology-blueprint-rule > span {
    display: grid;
    min-width: 0;
    grid-template-columns: 7px minmax(0, 1fr);
    column-gap: 7px;
    align-items: center;
}

.technology-blueprint-rule > span i {
    grid-row: 1 / span 2;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--solutions-cyan);
    box-shadow: 0 0 7px rgba(82, 217, 255, .6);
}

.technology-blueprint-rule > span strong,
.technology-blueprint-rule > span small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.technology-blueprint-rule > span strong {
    color: #dcecf3;
    font-size: 7.4px;
    font-weight: 850;
}

.technology-blueprint-rule > span small {
    margin-top: 2px;
    color: #7f9baa;
    font-size: 6.2px;
}

.technology-blueprint-rule > b {
    color: #6997aa;
    font-size: 10px;
    font-weight: 450;
}

.technology-blueprint-rule > span.result i {
    background: var(--solutions-green);
    box-shadow: 0 0 8px rgba(85, 238, 155, .7);
}

.technology-blueprint-rule > span.result strong {
    color: var(--solutions-green-soft);
}

/* Configuration registers */

.technology-version-register,
.technology-component-register {
    min-width: 0;
}

.technology-component-register {
    border-top: 1px solid rgba(82, 217, 255, .16);
}

.technology-register-label {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 9px 14px;
    border-bottom: 1px solid rgba(82, 217, 255, .12);
    background: rgba(2, 20, 33, .76);
}

.technology-register-label span {
    color: var(--solutions-cyan);
    font-size: 7.2px;
    font-weight: 900;
    letter-spacing: .12em;
}

.technology-register-label small {
    color: #96adba;
    font-size: 7.4px;
    line-height: 1.35;
    text-align: right;
}

.technology-version-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(170px, 1.15fr) minmax(120px, .8fr) minmax(160px, 1fr) minmax(200px, 1.3fr) auto;
    min-width: 0;
    align-items: center;
    gap: 12px;
    padding: 11px 14px 11px 17px;
    background: linear-gradient(90deg, rgba(82, 217, 255, .035), transparent 55%);
}

.technology-version-row + .technology-version-row {
    border-top: 1px solid rgba(82, 217, 255, .1);
}

.technology-version-row::before {
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 0;
    width: 2px;
    background: var(--solutions-cyan);
    content: "";
}

.technology-version-row > span {
    min-width: 0;
}

.technology-version-row .register-code strong {
    color: #effaff;
}

.technology-version-row small,
.technology-version-row strong,
.technology-version-row em {
    display: block;
    min-width: 0;
}

.technology-version-row small {
    color: #7fa1b1;
    font-size: 6.5px;
    font-weight: 850;
    letter-spacing: .08em;
}

.technology-version-row strong {
    margin-top: 3px;
    overflow: hidden;
    color: #dcecf3;
    font-size: 8.5px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.technology-version-row em {
    margin-top: 2px;
    overflow: hidden;
    color: #85b5c7;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 6.8px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.technology-version-row > b,
.component-requirement,
.deployment-state {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    justify-self: end;
    padding: 4px 7px;
    border: 1px solid rgba(85, 238, 155, .27);
    border-radius: 999px;
    color: var(--solutions-green-soft);
    background: rgba(6, 57, 43, .42);
    font-size: 6.5px;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.technology-component-row {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(180px, 1.15fr) minmax(170px, 1fr) minmax(170px, 1fr) auto;
    min-width: 0;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    background: linear-gradient(90deg, rgba(82, 217, 255, .025), transparent 58%);
}

.technology-component-row + .technology-component-row {
    border-top: 1px solid rgba(82, 217, 255, .1);
}

.component-sequence {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid rgba(82, 217, 255, .3);
    color: var(--solutions-cyan);
    background: rgba(5, 42, 60, .72);
    font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
    font-size: 12px;
}

.component-identity,
.component-signal-list {
    min-width: 0;
}

.component-identity small,
.component-signal-list > small {
    display: block;
    color: #78a0b1;
    font-size: 6.5px;
    font-weight: 900;
    letter-spacing: .09em;
}

.component-identity h3 {
    margin: 3px 0 0;
    overflow: hidden;
    color: #f0f9fc;
    font-size: 10.5px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.component-identity p {
    margin: 3px 0 0;
    overflow: hidden;
    color: #a9bdc8;
    font-size: 7.5px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.component-signal-list > span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    overflow: hidden;
    color: #c5d7df;
    font-size: 7.5px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.component-signal-list > span i {
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--solutions-cyan);
    box-shadow: 0 0 6px rgba(82, 217, 255, .48);
}

.component-signal-list.outcomes > span i {
    background: var(--solutions-green);
    box-shadow: 0 0 6px rgba(85, 238, 155, .52);
}

.component-signal-list > em {
    display: block;
    margin-top: 4px;
    color: #7f99a8;
    font-size: 7.3px;
    font-style: normal;
}

.component-requirement.optional {
    border-color: rgba(245, 200, 76, .3);
    color: #f6d873;
    background: rgba(74, 55, 8, .34);
}

/* Deployment control dossiers */

.technology-deployment-list {
    display: grid;
}

.technology-deployment-record {
    position: relative;
    min-width: 0;
    background: linear-gradient(90deg, rgba(82, 217, 255, .026), transparent 58%);
}

.technology-deployment-record + .technology-deployment-record {
    border-top: 1px solid rgba(82, 217, 255, .18);
}

.technology-deployment-record::before {
    position: absolute;
    z-index: 2;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 2px;
    background: var(--solutions-cyan);
    box-shadow: 0 0 8px rgba(82, 217, 255, .45);
    content: "";
}

.technology-deployment-record.independent::before {
    background: var(--solutions-green);
    box-shadow: 0 0 8px rgba(85, 238, 155, .5);
}

.technology-deployment-record > header {
    display: grid;
    grid-template-columns: 30px 44px minmax(190px, 1.2fr) minmax(330px, 1fr) auto;
    min-width: 0;
    align-items: center;
    gap: 12px;
    padding: 13px 14px 12px 17px;
    border-bottom: 1px solid rgba(82, 217, 255, .1);
    background: rgba(3, 25, 40, .58);
}

.deployment-index {
    color: #719bad;
    font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
    font-size: 17px;
}

.deployment-context-mark {
    position: relative;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(82, 217, 255, .38);
    border-radius: 50%;
    color: var(--solutions-cyan);
    background: rgba(5, 46, 64, .72);
}

.deployment-context-mark::before,
.deployment-context-mark i {
    position: absolute;
    border: 1px solid currentColor;
    border-radius: 50%;
    content: "";
}

.deployment-context-mark::before {
    inset: 5px;
    opacity: .38;
}

.deployment-context-mark i {
    inset: 10px;
    border-style: dashed;
    opacity: .7;
}

.deployment-context-mark b {
    position: relative;
    z-index: 1;
    font-size: 6px;
    letter-spacing: .05em;
}

.technology-deployment-record.independent .deployment-context-mark {
    border-color: rgba(85, 238, 155, .42);
    color: var(--solutions-green);
    background: rgba(5, 51, 43, .68);
}

.deployment-identity {
    min-width: 0;
}

.deployment-identity small {
    display: block;
    color: var(--solutions-cyan);
    font-size: 6.8px;
    font-weight: 900;
    letter-spacing: .1em;
}

.technology-deployment-record.independent .deployment-identity small {
    color: var(--solutions-green);
}

.deployment-identity h3 {
    margin: 3px 0 0;
    display: -webkit-box;
    overflow: hidden;
    color: #f1fbff;
    font-size: 12px;
    line-height: 1.25;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.deployment-identity p {
    margin: 3px 0 0;
    display: -webkit-box;
    overflow: hidden;
    color: #9eb5c1;
    font-size: 8px;
    line-height: 1.35;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.technology-deployment-record > header dl,
.technology-deployment-record > header dl div {
    margin: 0;
}

.technology-deployment-record > header dl {
    display: grid;
    grid-template-columns: 1.2fr .72fr .72fr;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(82, 217, 255, .16);
    border-radius: 5px;
}

.technology-deployment-record > header dl div {
    min-width: 0;
    padding: 7px 8px;
}

.technology-deployment-record > header dl div + div {
    border-left: 1px solid rgba(82, 217, 255, .12);
}

.technology-deployment-record > header dt {
    color: #7894a4;
    font-size: 6.2px;
    font-weight: 850;
    letter-spacing: .08em;
}

.technology-deployment-record > header dd {
    margin: 3px 0 0;
    overflow: hidden;
    color: #d5e5ec;
    font-size: 7.5px;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deployment-state {
    gap: 5px;
}

.deployment-state i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--solutions-green);
    box-shadow: 0 0 7px rgba(85, 238, 155, .7);
}

.deployment-control-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
}

.deployment-control-grid > section {
    min-width: 0;
    padding: 11px 14px 13px;
}

.deployment-control-grid > section + section {
    border-left: 1px solid rgba(82, 217, 255, .13);
}

.deployment-control-grid > section > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(82, 217, 255, .1);
}

.deployment-control-grid > section > header span {
    color: #9fbac7;
    font-size: 6.8px;
    font-weight: 900;
    letter-spacing: .1em;
}

.deployment-control-grid > section > header small {
    color: var(--solutions-green);
    font-size: 6.3px;
    font-weight: 850;
    letter-spacing: .06em;
}

.deployment-signal {
    position: relative;
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    min-width: 0;
    align-items: center;
    gap: 8px;
    min-height: 35px;
    padding: 6px 7px;
    border: 1px solid rgba(82, 217, 255, .12);
    background: rgba(5, 36, 51, .48);
}

.deployment-signal + .deployment-signal {
    margin-top: 5px;
}

.deployment-signal > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--solutions-cyan);
    box-shadow: 0 0 7px rgba(82, 217, 255, .68);
}

.deployment-signal.method > i {
    background: var(--solutions-green);
    box-shadow: 0 0 7px rgba(85, 238, 155, .7);
}

.deployment-signal > span {
    min-width: 0;
}

.deployment-signal strong,
.deployment-signal small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.deployment-signal strong {
    color: #dcecf2;
    font-size: 8px;
}

.deployment-signal small {
    margin-top: 2px;
    color: #87a4b2;
    font-size: 6.7px;
}

.deployment-signal > b {
    color: var(--solutions-green);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .05em;
}

.deployment-empty {
    margin: 0;
    padding: 12px;
    color: #879fab;
    font-size: 8px;
    text-align: center;
}

/* Environmental outcome adjudication */

.technology-position-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(245px, .7fr) minmax(0, .82fr);
    min-width: 0;
    align-items: start;
    background:
        linear-gradient(90deg, rgba(82, 217, 255, .018) 1px, transparent 1px) 0 0 / 36px 36px,
        rgba(2, 20, 33, .35);
}

.technology-position-grid > article {
    position: relative;
    min-width: 0;
    padding: 14px 15px 16px;
}

.technology-position-grid > article + article {
    border-left: 1px solid rgba(82, 217, 255, .14);
}

.technology-position-grid > article > header {
    min-height: 66px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(82, 217, 255, .12);
}

.technology-position-grid > article > header span,
.technology-position-grid > article > header strong,
.technology-position-grid > article > header small {
    display: block;
}

.technology-position-grid > article > header span {
    color: var(--solutions-green);
    font-size: 7.4px;
    font-weight: 900;
    letter-spacing: .11em;
}

.technology-position-grid > article > header strong {
    margin-top: 4px;
    color: #edf9fc;
    font-size: 12px;
}

.technology-position-grid > article > header small {
    margin-top: 4px;
    color: #a5bac5;
    font-size: 8px;
    line-height: 1.4;
}

.technology-outcome-terminal::after {
    position: absolute;
    z-index: 2;
    top: 48%;
    right: -11px;
    width: 21px;
    border-top: 1px solid rgba(85, 238, 155, .52);
    content: "";
}

.technology-outcome-terminal::before {
    position: absolute;
    z-index: 3;
    top: calc(48% - 3px);
    right: -11px;
    width: 7px;
    height: 7px;
    border-top: 1px solid var(--solutions-green);
    border-right: 1px solid var(--solutions-green);
    content: "";
    transform: rotate(45deg);
}

.technology-outcome-terminal > div,
.technology-program-terminal > div {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 9px;
    min-height: 52px;
    margin-top: 7px;
    padding: 9px 10px;
    border: 1px solid rgba(85, 238, 155, .2);
    background:
        linear-gradient(90deg, rgba(85, 238, 155, .055), transparent),
        rgba(3, 35, 42, .55);
}

.technology-outcome-terminal > div {
    grid-template-columns: 8px minmax(0, 1fr) auto auto;
}

.technology-outcome-terminal > div > i,
.technology-program-terminal > div > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--solutions-green);
    box-shadow: 0 0 8px rgba(85, 238, 155, .72);
}

.technology-outcome-terminal > div > span,
.technology-program-terminal > div > span {
    min-width: 0;
}

.technology-outcome-terminal > div strong,
.technology-outcome-terminal > div small,
.technology-program-terminal > div strong,
.technology-program-terminal > div small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.technology-outcome-terminal > div strong,
.technology-program-terminal > div strong {
    color: #eaf6f9;
    font-size: 9.5px;
}

.technology-outcome-terminal > div small,
.technology-program-terminal > div small {
    margin-top: 3px;
    color: #96adb8;
    font-size: 7.4px;
}

.technology-outcome-terminal > div > b {
    color: var(--solutions-green);
    font-size: 7.8px;
    font-weight: 900;
}

.technology-outcome-terminal > div > em {
    padding: 3px 5px;
    border: 1px solid rgba(85, 238, 155, .23);
    border-radius: 3px;
    color: var(--solutions-green-soft);
    font-size: 6.5px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: .05em;
}

.technology-realization-terminal {
    min-height: 100%;
    background:
        radial-gradient(circle at 50% 70%, rgba(85, 238, 155, .055), transparent 42%),
        rgba(2, 24, 37, .72);
}

.technology-realization-terminal > header span {
    color: var(--solutions-cyan);
}

.realization-gate-track {
    position: relative;
    display: grid;
    gap: 0;
    margin-top: 9px;
    padding: 0 5px;
}

.realization-gate-track::before {
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 15px;
    border-left: 1px solid rgba(82, 217, 255, .3);
    content: "";
}

.realization-gate-track > span {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 43px;
    grid-template-columns: 12px minmax(0, 1fr);
    column-gap: 9px;
    align-items: center;
    padding: 5px 0;
}

.realization-gate-track > span i {
    position: relative;
    z-index: 2;
    grid-row: 1 / span 2;
    width: 10px;
    height: 10px;
    border: 1px solid #668492;
    border-radius: 50%;
    background: #062132;
    box-shadow: inset 0 0 0 3px #062132;
}

.realization-gate-track > span.complete i {
    border-color: var(--solutions-green);
    background: var(--solutions-green);
    box-shadow: 0 0 7px rgba(85, 238, 155, .58);
}

.realization-gate-track > span.accounting-gate i {
    border-color: var(--solutions-gold);
    background: #4d3a0a;
    box-shadow: 0 0 7px rgba(245, 200, 76, .4);
}

.realization-gate-track small,
.realization-gate-track strong {
    display: block;
    min-width: 0;
}

.realization-gate-track small {
    color: #8aa7b4;
    font-size: 6.5px;
    font-weight: 850;
    letter-spacing: .07em;
}

.realization-gate-track strong {
    margin-top: 2px;
    color: #dcebf0;
    font-size: 7.5px;
}

.realization-gate-track > span.complete strong {
    color: var(--solutions-green-soft);
}

.realization-gate-track > span.accounting-gate strong {
    color: #f5d66b;
}

.realization-verdict {
    position: relative;
    margin-top: 10px;
    padding: 12px 11px;
    overflow: hidden;
    border: 1px solid rgba(245, 200, 76, .28);
    background:
        repeating-linear-gradient(135deg, rgba(245, 200, 76, .025) 0 5px, transparent 5px 10px),
        rgba(52, 40, 7, .2);
    text-align: center;
}

.realization-verdict::before,
.realization-verdict::after {
    position: absolute;
    top: 0;
    width: 22px;
    height: 1px;
    background: var(--solutions-gold);
    content: "";
}

.realization-verdict::before {
    left: 0;
}

.realization-verdict::after {
    right: 0;
}

.realization-verdict small,
.realization-verdict strong {
    display: block;
}

.realization-verdict small {
    color: #9daeb6;
    font-size: 6.3px;
    font-weight: 850;
    letter-spacing: .08em;
}

.realization-verdict strong {
    margin-top: 5px;
    color: #f6d66a;
    font-size: 8.2px;
    line-height: 1.3;
}

.realization-verdict p {
    margin: 6px 0 0;
    color: #b8c8ce;
    font-size: 7.2px;
    line-height: 1.4;
}

.realization-verdict.connected {
    border-color: rgba(85, 238, 155, .24);
    background:
        repeating-linear-gradient(135deg, rgba(85, 238, 155, .02) 0 5px, transparent 5px 10px),
        rgba(5, 47, 37, .22);
}

.realization-verdict.connected::before,
.realization-verdict.connected::after {
    background: var(--solutions-green);
}

.realization-verdict.connected strong {
    color: var(--solutions-green-soft);
}

.technology-position-grid > article.technology-program-terminal {
    align-self: start;
    margin: 14px;
    padding: 0;
    overflow: hidden;
    border: 1px dashed rgba(245, 200, 76, .3);
    background: rgba(45, 35, 7, .12);
}

.technology-position-grid > article.technology-program-terminal > header {
    min-height: 0;
    padding: 12px 13px;
    border-color: rgba(245, 200, 76, .16);
    background: linear-gradient(90deg, rgba(245, 200, 76, .045), transparent);
}

.technology-program-terminal > header span {
    color: var(--solutions-gold);
}

.technology-program-terminal > div {
    grid-template-columns: 8px minmax(0, 1fr);
    margin: 0;
    border: 0;
    border-top: 1px solid rgba(245, 200, 76, .13);
    background: transparent;
}

.technology-program-terminal > div > i {
    background: var(--solutions-gold);
    box-shadow: 0 0 7px rgba(245, 200, 76, .6);
}

.technology-program-terminal > div > b {
    grid-column: 2;
    justify-self: start;
    margin-top: 3px;
    padding: 3px 5px;
    border: 1px solid rgba(245, 200, 76, .25);
    border-radius: 3px;
    color: #f8d96d;
    background: rgba(78, 57, 8, .25);
    font-size: 6.5px;
    font-weight: 900;
    letter-spacing: .04em;
}

.position-empty {
    margin: 7px 0 0;
    padding: 18px 10px;
    border: 1px dashed rgba(82, 217, 255, .17);
    color: #9db0ba;
    font-size: 8px;
    text-align: center;
}

/* Empty and conclusion states */

.technology-empty-state {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding: 16px;
    color: #b7c9d3;
}

.technology-empty-state.prominent {
    min-height: 90px;
    justify-content: center;
}

.technology-empty-state > i {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border: 1px solid var(--solutions-cyan);
    transform: rotate(45deg);
}

.technology-empty-state strong,
.technology-empty-state small {
    display: block;
}

.technology-empty-state strong {
    color: #e7f5f9;
    font-size: 9px;
}

.technology-empty-state small {
    margin-top: 3px;
    color: #8fa7b3;
    font-size: 7.5px;
}

.technology-detail-footer {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
    padding: 12px 14px;
    border-top: 1px solid rgba(82, 217, 255, .18);
    color: #a7bcc7;
}

.technology-detail-footer > span {
    display: grid;
    min-width: 0;
    grid-template-columns: 7px minmax(0, 1fr);
    column-gap: 8px;
    align-items: center;
}

.technology-detail-footer > span > i {
    grid-row: 1 / span 2;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--solutions-green);
    box-shadow: 0 0 8px rgba(85, 238, 155, .7);
}

.technology-detail-footer strong,
.technology-detail-footer small {
    display: block;
    min-width: 0;
}

.technology-detail-footer strong {
    color: var(--solutions-green-soft);
    font-size: 7.2px;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.technology-detail-footer small {
    margin-top: 2px;
    color: #8ca4b1;
    font-size: 7px;
    line-height: 1.3;
}

.technology-detail-footer nav {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.technology-detail-footer nav a {
    padding: 6px 9px;
    border: 1px solid rgba(82, 217, 255, .25);
    border-radius: 4px;
    color: var(--solutions-cyan-soft);
    background: rgba(4, 35, 51, .58);
    font-size: 7px;
    font-weight: 850;
    letter-spacing: .04em;
    text-decoration: none;
}

.technology-detail-footer nav a:hover {
    border-color: rgba(85, 238, 155, .4);
    color: var(--solutions-green-soft);
    background: rgba(5, 50, 42, .48);
}

@keyframes hho-electrical-sequence {
    0%, 16%, 100% { opacity: .46; stroke-dashoffset: 0; }
    22%, 38% { opacity: 1; stroke-dashoffset: -32; }
    46%, 99% { opacity: .46; stroke-dashoffset: -42; }
}

@keyframes hho-generation-sequence {
    0%, 27%, 100% { opacity: .44; stroke-dashoffset: 0; }
    34%, 55% { opacity: 1; stroke-dashoffset: -36; }
    63%, 99% { opacity: .44; stroke-dashoffset: -48; }
}

@keyframes hho-diesel-sequence {
    0%, 3%, 100% { opacity: .48; stroke-dashoffset: 0; }
    8%, 58% { opacity: .82; stroke-dashoffset: -34; }
    66%, 99% { opacity: .48; stroke-dashoffset: -44; }
}

@keyframes hho-work-sequence {
    0%, 50%, 100% { opacity: .44; stroke-dashoffset: 0; }
    58%, 74% { opacity: 1; stroke-dashoffset: -34; }
    82%, 99% { opacity: .44; stroke-dashoffset: -44; }
}

@keyframes hho-tailpipe-sequence {
    0%, 62%, 100% { opacity: .55; transform: scale(.92); }
    70%, 82% { opacity: 1; transform: scale(1.08); }
    90%, 99% { opacity: .55; transform: scale(.92); }
}

@keyframes hho-proof-sequence {
    0%, 12% { opacity: 0; transform: translateX(-70%); }
    24%, 68% { opacity: .62; }
    82%, 100% { opacity: 0; transform: translateX(70%); }
}

@keyframes hho-bus-sequence {
    0%, 58% { left: -30%; opacity: 0; }
    65% { opacity: .75; }
    84% { left: 102%; opacity: .75; }
    90%, 100% { left: 102%; opacity: 0; }
}

@keyframes hho-bubble-sequence {
    0%, 28%, 68%, 100% { opacity: .3; transform: translateY(3px) scale(.85); }
    42%, 55% { opacity: 1; transform: translateY(-3px) scale(1.08); }
}

@keyframes hydrogen-diesel-sequence {
    0%, 5%, 100% { opacity: .26; stroke-dashoffset: 0; }
    10%, 24% { opacity: 1; stroke-dashoffset: -28; }
    31%, 99% { opacity: .26; stroke-dashoffset: -36; }
}

@keyframes hydrogen-assist-sequence {
    0%, 24%, 100% { opacity: .24; stroke-dashoffset: 0; }
    30%, 45% { opacity: 1; stroke-dashoffset: -30; }
    52%, 99% { opacity: .24; stroke-dashoffset: -38; }
}

@keyframes hydrogen-work-sequence {
    0%, 46%, 100% { opacity: .22; stroke-dashoffset: 0; }
    52%, 66% { opacity: 1; stroke-dashoffset: -32; }
    73%, 99% { opacity: .22; stroke-dashoffset: -40; }
}

@keyframes hydrogen-marker-sequence {
    0%, 12%, 100% { opacity: .72; transform: scale(.94); }
    22%, 34% { opacity: 1; transform: scale(1.06); }
    44%, 99% { opacity: .72; transform: scale(.94); }
}

@keyframes hydrogen-proof-sequence {
    0%, 12% { opacity: 0; transform: translateX(-70%); }
    24%, 68% { opacity: .62; }
    82%, 100% { opacity: 0; transform: translateX(70%); }
}

@keyframes hydrogen-bus-sequence {
    0%, 56% { left: -30%; opacity: 0; }
    63% { opacity: .75; }
    82% { left: 102%; opacity: .75; }
    88%, 100% { left: 102%; opacity: 0; }
}

@keyframes hydrogen-status-sequence {
    0%, 78%, 100% { opacity: .72; transform: scale(.88); }
    86%, 94% { opacity: 1; transform: scale(1.16); }
}