:root {
    --bg: #0d080b;
    --panel: #180e13;
    --panel-light: #26141c;
    --lime: #e33750;
    --cyan: #ff8a98;
    --line: rgba(245, 235, 255, .14)
}

.brand-mark {
    font-size: 0;
    border: 0;
    background: url("logo.ico") center/contain no-repeat
}

.brand-mark img {
    display: none
}

.ambient-one {
    background: #a91f34
}

.ambient-two {
    background: #260d15
}

.ambient-grid {
    background-image: linear-gradient(rgba(227, 55, 80, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(227, 55, 80, .14) 1px, transparent 1px)
}

.live-dot,
.status i,
.rail-pulse {
    background: var(--lime);
    box-shadow: 0 0 13px var(--lime)
}

.hero-card {
    border-color: rgba(227, 55, 80, .52);
    box-shadow: 0 0 80px rgba(227, 55, 80, .14), inset 0 0 40px rgba(227, 55, 80, .04)
}

.crosshair {
    border-color: rgba(227, 55, 80, .24)
}

.crosshair:before,
.crosshair:after {
    background: rgba(227, 55, 80, .3)
}

.crosshair span {
    border-color: var(--lime);
    box-shadow: 0 0 18px var(--lime)
}

.version-card.external {
    border-color: rgba(227, 55, 80, .6);
    background: radial-gradient(circle at 90% 0%, rgba(227, 55, 80, .16), transparent 38%), var(--panel);
    box-shadow: 0 0 70px rgba(227, 55, 80, .1)
}

.accent-card {
    background: linear-gradient(135deg, rgba(227, 55, 80, .13), var(--panel));
    border-color: rgba(227, 55, 80, .34)
}

.sphere-core {
    background: radial-gradient(circle at 30% 25%, #ffd4db, #ad1f36 28%, #17090f 70%);
    box-shadow: 0 0 40px rgba(227, 55, 80, .55)
}

.sphere-grid {
    border-color: rgba(227, 55, 80, .35);
    box-shadow: 0 0 0 25px rgba(227, 55, 80, .05), 0 0 0 55px rgba(227, 55, 80, .03)
}

.protocol-disc {
    border-color: var(--lime);
    background: radial-gradient(circle at 40% 30%, rgba(227, 55, 80, .38), rgba(36, 12, 10, .1) 45%, transparent 46%);
    box-shadow: 0 0 70px rgba(227, 55, 80, .18)
}

.protocol-axis {
    background: linear-gradient(90deg, transparent, var(--lime), transparent)
}