Aetherviz Master

/* 核心渐变 - 从青绿到天蓝 */
--primary-gradient: linear-gradient(135deg, #14B8A6 0%, #06B6D4 50%, #22D3EE 100%);
--primary-gradient-light: linear-gradient(135deg, #2DD4BF 0%, #5EEAD4 50%, #67E8F9 100%);
--primary-gradient-dark: linear-gradient(135deg, #0D9488 0%, #0891B2 50%, #0EA5E9 100%);

/* 背景渐变 - 深海科技感 */
--bg-gradient: linear-gradient(180deg, #0F172A 0%, #164E63 50%, #155E75 100%);
--bg-gradient-card: linear-gradient(145deg, rgba(20, 184, 166, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%);

/* 强调色 - 霓虹质感 */
--accent-cyan: #22D3EE;
--accent-emerald: #34D399;
--accent-amber: #FBBF24;
--accent-rose: #FB7185;
--accent-orange: #FB923C;

/* 主题色 - 根据学科自动切换 */
--theme-physics: linear-gradient(135deg, #3B82F6 0%, #0EA5E9 100%); /* 蓝色物理 */
--theme-chemistry: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%); /* 橙红化学 */
--theme-biology: linear-gradient(135deg, #10B981 0%, #22D3EE 100%); /* 翠绿生物 */
--theme-math: linear-gradient(135deg, #F59E0B 0%, #EAB308 100%); /* 金黄数学 */
--theme-astronomy: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%); /* 深蓝天文 */
--theme-programming: linear-gradient(135deg, #22C55E 0%, #14B8A6 100%); /* 代码青 */

/* 玻璃拟态 */
--glass-bg: rgba(255, 255, 255, 0.08);
--glass-border: rgba(255, 255, 255, 0.15);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

/* 文字颜色 */
--text-primary: #F8FAFC;
--text-secondary: #CBD5E1;
--text-muted: #94A3B8;

/* 功能色 */
--success: #22C55E;
--warning: #F59E0B;
--error: #EF4444;
--info: #3B82F6;

/* 导航栏 */
--nav-bg: rgba(15, 23, 42, 0.85);
--nav-border: rgba(20, 184, 166, 0.3);

/* 侧边栏 */
--sidebar-bg: rgba(15, 23, 42, 0.9);
--sidebar-item-hover: rgba(20, 184, 166, 0.2);
--sidebar-item-active: rgba(6, 182, 212, 0.4);

/* 控制面板 */
--panel-bg: rgba(22, 78, 99, 0.7);
--panel-border: rgba(20, 184, 166, 0.25);

/* 按钮 */
--btn-primary: linear-gradient(135deg, #14B8A6 0%, #06B6D4 100%);
--btn-primary-hover: linear-gradient(135deg, #2DD4BF 0%, #22D3EE 100%);
--btn-secondary: rgba(255, 255, 255, 0.1);

/* 滑块 */
--slider-track: rgba(255, 255, 255, 0.2);
--slider-thumb: linear-gradient(135deg, #2DD4BF 0%, #5EEAD4 100%);

// 1. Three.js 3D 场景（底层）
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({ alpha: true });

// 2. SVG Overlay（顶层，透明背景）
const svgContainer = document.createElement('div');
svgContainer.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;';
document.getElementById('canvas-container').appendChild(svgContainer);

const svg = d3.select(svgContainer).append('svg')
    .attr('width', '100%')
    .attr('height', '100%');

// 3. 坐标同步
function syncSVGto3D() {
    const vector = new THREE.Vector3(x, y, z);
    vector.project(camera);

    const sx = (vector.x * 0.5 + 0.5) * width;
    const sy = (-(vector.y * 0.5) + 0.5) * height;

    return { x: sx, y: sy };
}

THREE.Scene() + PerspectiveCamera(fov:60, near:0.1, far:1000) + WebGLRenderer(antialias:true, shadowMap.enabled:true)