:root {
    --bg: #0c080f;
    --panel: #160f1d;
    --panel-light: #21132b;
    --lime: #b45cff;
    --cyan: #d49aff;
    --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: #8b2be2
}

.ambient-two {
    background: #32104f
}

.ambient-grid {
    background-image: linear-gradient(rgba(180, 92, 255, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(180, 92, 255, .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(180, 92, 255, .52);
    box-shadow: 0 0 80px rgba(180, 92, 255, .14), inset 0 0 40px rgba(180, 92, 255, .04)
}

.crosshair {
    border-color: rgba(180, 92, 255, .24)
}

.crosshair:before,
.crosshair:after {
    background: rgba(180, 92, 255, .3)
}

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

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

.accent-card {
    background: linear-gradient(135deg, rgba(180, 92, 255, .13), var(--panel));
    border-color: rgba(180, 92, 255, .34)
}

.sphere-core {
    background: radial-gradient(circle at 30% 25%, #f0d0ff, #7c28a8 28%, #100817 70%);
    box-shadow: 0 0 40px rgba(180, 92, 255, .55)
}

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

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

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