body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #000; font-family: 'Courier New', monospace; }

.video-container {
    width: 100vw; height: 100vh;
    display: flex; justify-content: center; align-items: center;
}

.pixo-wrapper { width: 35%; perspective: 1000px; }

#pixo { width: 100%; transition: transform 0.3s ease-out; transform-style: preserve-3d; }

/* Glassmorphism Panel */
.glass-panel {
    position: fixed; bottom: 30px; right: 30px;
    padding: 20px; border-radius: 15px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex; gap: 10px; transition: background 0.5s;
}

.mode-btn { background: none; border: 1px solid #fff; color: white; padding: 5px 15px; cursor: pointer; }
.mode-btn:hover { background: rgba(255,255,255,0.2); }

/* Clases de cambio de modo (Cambio de panel) */
.analytics-mode { background: rgba(0, 100, 255, 0.3) !important; border-color: cyan !important; }
.generative-mode { background: rgba(255, 100, 0, 0.3) !important; border-color: orange !important; }