.html { scroll-behavior: smooth; }
body {
    background-color: #0c0e12;
    color: #e2e2e7;
    -webkit-font-smoothing: antialiased;
}

/* Animated spatial background (two soft radial glows) */
.spatial-bg {
    background: radial-gradient(circle at 20% 30%, rgba(0, 229, 255, 0.15) 0%, rgba(0,229,255,0.02) 30%, transparent 60%),
                radial-gradient(circle at 80% 70%, rgba(108, 0, 247, 0.12) 0%, rgba(108,0,247,0.02) 30%, transparent 60%),
                #0c0e12;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: 20% 30%, 80% 70%, 0 0;
    background-size: 45% 45%, 50% 50%, auto;
    will-change: background-position;
    animation: float-bg 18s ease-in-out infinite;
}

@keyframes float-bg {
    0% { background-position: 20% 30%, 80% 70%, 0 0; }
    50% { background-position: 25% 35%, 75% 65%, 0 0; }
    100% { background-position: 20% 30%, 80% 70%, 0 0; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .spatial-bg { animation: none !important; background-position: 20% 30%, 80% 70%, 0 0; }
}
.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.glass-panel-active {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}