diff --git a/3d.html b/3d.html
new file mode 100644
index 0000000..6b10f8e
--- /dev/null
+++ b/3d.html
@@ -0,0 +1,857 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>卡特光醒狮系列 - 包装3D渲染展示</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&display=swap');
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: linear-gradient(135deg, #0D0D0D 0%, #1a1a1a 50%, #0D0D0D 100%);
+            color: #F5F5F0;
+            overflow: hidden;
+        }
+        
+        #canvas-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+        }
+        
+        .ui-layer {
+            position: absolute;
+            z-index: 10;
+            pointer-events: none;
+        }
+        
+        .ui-interactive {
+            pointer-events: auto;
+        }
+        
+        .header {
+            top: 0;
+            left: 0;
+            right: 0;
+            padding: 24px 40px;
+            background: linear-gradient(180deg, rgba(13,13,13,0.95) 0%, rgba(13,13,13,0.7) 60%, transparent 100%);
+        }
+        
+        .logo {
+            font-size: 14px;
+            color: #D4A853;
+            letter-spacing: 4px;
+            margin-bottom: 8px;
+        }
+        
+        .title {
+            font-size: 32px;
+            font-weight: 700;
+            background: linear-gradient(135deg, #D4A853 0%, #F5F5F0 50%, #D4A853 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        
+        .subtitle {
+            font-size: 14px;
+            color: rgba(245,245,240,0.6);
+            margin-top: 4px;
+            letter-spacing: 2px;
+        }
+        
+        .product-selector {
+            bottom: 40px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 16px;
+            padding: 20px;
+            background: rgba(13,13,13,0.85);
+            border: 1px solid rgba(212,168,83,0.3);
+            border-radius: 16px;
+            backdrop-filter: blur(20px);
+        }
+        
+        .product-btn {
+            width: 80px;
+            height: 100px;
+            border: 2px solid transparent;
+            border-radius: 12px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            background: rgba(255,255,255,0.05);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .product-btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            opacity: 0.1;
+            transition: opacity 0.3s ease;
+        }
+        
+        .product-btn:hover {
+            transform: translateY(-4px);
+            border-color: rgba(212,168,83,0.5);
+            background: rgba(255,255,255,0.1);
+        }
+        
+        .product-btn.active {
+            border-color: #D4A853;
+            background: rgba(212,168,83,0.15);
+        }
+        
+        .product-btn.active::before {
+            opacity: 0.2;
+        }
+        
+        .product-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+        }
+        
+        .product-name {
+            font-size: 12px;
+            font-weight: 600;
+            text-align: center;
+        }
+        
+        .view-controls {
+            right: 40px;
+            top: 50%;
+            transform: translateY(-50%);
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+        
+        .view-btn {
+            width: 56px;
+            height: 56px;
+            border: 1px solid rgba(212,168,83,0.3);
+            border-radius: 12px;
+            background: rgba(13,13,13,0.8);
+            color: #F5F5F0;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 4px;
+            font-size: 10px;
+        }
+        
+        .view-btn:hover {
+            border-color: #D4A853;
+            background: rgba(212,168,83,0.15);
+        }
+        
+        .view-btn.active {
+            background: linear-gradient(135deg, rgba(212,168,83,0.3), rgba(212,168,83,0.1));
+            border-color: #D4A853;
+        }
+        
+        .view-btn svg {
+            width: 20px;
+            height: 20px;
+            stroke: currentColor;
+            fill: none;
+            stroke-width: 1.5;
+        }
+        
+        .action-buttons {
+            top: 40px;
+            right: 40px;
+            display: flex;
+            gap: 12px;
+        }
+        
+        .action-btn {
+            padding: 12px 24px;
+            border: 1px solid rgba(212,168,83,0.4);
+            border-radius: 8px;
+            background: rgba(13,13,13,0.8);
+            color: #D4A853;
+            font-size: 13px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            backdrop-filter: blur(10px);
+        }
+        
+        .action-btn:hover {
+            background: rgba(212,168,83,0.2);
+            border-color: #D4A853;
+        }
+        
+        .info-panel {
+            bottom: 180px;
+            left: 40px;
+            max-width: 280px;
+            padding: 24px;
+            background: rgba(13,13,13,0.85);
+            border: 1px solid rgba(212,168,83,0.2);
+            border-radius: 16px;
+            backdrop-filter: blur(20px);
+        }
+        
+        .info-title {
+            font-size: 18px;
+            font-weight: 700;
+            color: #D4A853;
+            margin-bottom: 12px;
+        }
+        
+        .info-desc {
+            font-size: 13px;
+            color: rgba(245,245,240,0.7);
+            line-height: 1.6;
+        }
+        
+        .color-indicator {
+            display: flex;
+            gap: 8px;
+            margin-top: 16px;
+        }
+        
+        .color-dot {
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            border: 2px solid rgba(255,255,255,0.2);
+        }
+        
+        .loading-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: #0D0D0D;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+            transition: opacity 0.5s ease;
+        }
+        
+        .loading-spinner {
+            width: 60px;
+            height: 60px;
+            border: 2px solid rgba(212,168,83,0.2);
+            border-top-color: #D4A853;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        
+        .loading-text {
+            margin-top: 20px;
+            color: #D4A853;
+            font-size: 14px;
+            letter-spacing: 2px;
+        }
+        
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        
+        .hidden {
+            opacity: 0;
+            pointer-events: none;
+        }
+        
+        .lens-glow {
+            filter: drop-shadow(0 0 20px currentColor);
+        }
+    </style>
+</head>
+<body>
+    <!-- Loading Overlay -->
+    <div class="loading-overlay" id="loading">
+        <div class="loading-spinner"></div>
+        <div class="loading-text">正在加载3D渲染...</div>
+    </div>
+
+    <!-- 3D Canvas -->
+    <div id="canvas-container"></div>
+
+    <!-- Header -->
+    <div class="ui-layer header">
+        <div class="logo">KART LIGHTING</div>
+        <div class="title">醒狮系列透镜</div>
+        <div class="subtitle">XINGSHI LENS COLLECTION</div>
+    </div>
+
+    <!-- Action Buttons -->
+    <div class="ui-layer action-buttons ui-interactive">
+        <button class="action-btn" onclick="toggleBoxOpen()">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M5 15l7-7 7 7"/>
+            </svg>
+            <span id="open-btn-text">打开包装</span>
+        </button>
+        <button class="action-btn" onclick="takeScreenshot()">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <rect x="3" y="6" width="18" height="12" rx="2"/>
+                <circle cx="12" cy="12" r="3"/>
+            </svg>
+            截图
+        </button>
+    </div>
+
+    <!-- Info Panel -->
+    <div class="ui-layer info-panel" id="info-panel">
+        <div class="info-title" id="product-title">醒狮·瞳</div>
+        <div class="info-desc" id="product-desc">
+            狮头设计，象征洞察与智慧。帝王金配色彰显尊贵气质，为驾驶者带来清晰明亮的视野体验。
+        </div>
+        <div class="color-indicator" id="color-indicator">
+            <div class="color-dot" style="background: #FFD700;"></div>
+        </div>
+    </div>
+
+    <!-- View Controls -->
+    <div class="ui-layer view-controls ui-interactive">
+        <button class="view-btn active" onclick="setView('front')" title="正面视角">
+            <svg viewBox="0 0 24 24">
+                <rect x="3" y="3" width="18" height="18" rx="2"/>
+                <path d="M12 8v8M8 12h8"/>
+            </svg>
+            <span>正面</span>
+        </button>
+        <button class="view-btn" onclick="setView('angle')" title="45度视角">
+            <svg viewBox="0 0 24 24">
+                <path d="M3 7l9-4 9 4v10l-9 4-9-4V7z"/>
+                <path d="M12 3v18"/>
+            </svg>
+            <span>45°</span>
+        </button>
+        <button class="view-btn" onclick="setView('top')" title="顶面视角">
+            <svg viewBox="0 0 24 24">
+                <rect x="4" y="4" width="16" height="16" rx="2"/>
+                <circle cx="12" cy="12" r="4"/>
+            </svg>
+            <span>顶面</span>
+        </button>
+        <button class="view-btn" onclick="setView('free')" title="自由视角">
+            <svg viewBox="0 0 24 24">
+                <circle cx="12" cy="12" r="3"/>
+                <path d="M12 2v4M12 18v4M2 12h4M18 12h4"/>
+            </svg>
+            <span>自由</span>
+        </button>
+    </div>
+
+    <!-- Product Selector -->
+    <div class="ui-layer product-selector ui-interactive">
+        <div class="product-btn active" onclick="selectProduct(0)" data-product="0">
+            <div class="product-icon" style="background: linear-gradient(135deg, #FFD700, #D4A853); color: #0D0D0D;">瞳</div>
+            <div class="product-name">醒狮·瞳</div>
+        </div>
+        <div class="product-btn" onclick="selectProduct(1)" data-product="1">
+            <div class="product-icon" style="background: linear-gradient(135deg, #FF6B35, #C41E3A); color: #fff;">威</div>
+            <div class="product-name">醒狮·威</div>
+        </div>
+        <div class="product-btn" onclick="selectProduct(2)" data-product="2">
+            <div class="product-icon" style="background: linear-gradient(135deg, #8B7355, #5C4A3A); color: #fff;">鼓</div>
+            <div class="product-name">醒狮·鼓</div>
+        </div>
+        <div class="product-btn" onclick="selectProduct(3)" data-product="3">
+            <div class="product-icon" style="background: linear-gradient(135deg, #6B4EE6, #9B7BF7); color: #fff;">潮</div>
+            <div class="product-name">醒狮·潮</div>
+        </div>
+    </div>
+
+    <script>
+        // Product Data
+        const products = [
+            {
+                name: '醒狮·瞳',
+                subtitle: 'XINGSHI TONG',
+                color: '#FFD700',
+                accentColor: '#D4A853',
+                description: '狮头设计，象征洞察与智慧。帝王金配色彰显尊贵气质，为驾驶者带来清晰明亮的视野体验。',
+                pattern: 'lion_head'
+            },
+            {
+                name: '醒狮·威',
+                subtitle: 'XINGSHI WEI',
+                color: '#FF6B35',
+                accentColor: '#C41E3A',
+                description: '狮尾设计，象征力量与威严。烈焰橙配色展现澎湃动力，为车辆注入强劲光芒。',
+                pattern: 'lion_tail'
+            },
+            {
+                name: '醒狮·鼓',
+                subtitle: 'XINGSHI GU',
+                color: '#8B7355',
+                accentColor: '#D4A853',
+                description: '鼓手设计，象征节奏与韵律。古铜褐配色传递沉稳底蕴，为行车带来和谐节奏。',
+                pattern: 'drummer'
+            },
+            {
+                name: '醒狮·潮',
+                subtitle: 'XINGSHI CHAO',
+                color: '#6B4EE6',
+                accentColor: '#9B7BF7',
+                description: '少年设计，象征活力与创新。电光紫配色诠释年轻态度，为爱车增添时尚魅力。',
+                pattern: 'youth'
+            }
+        ];
+
+        let currentProduct = 0;
+        let isBoxOpen = false;
+        let scene, camera, renderer, controls;
+        let boxGroup, lidGroup, lensMesh;
+        let animationId;
+
+        // Initialize Three.js
+        function init() {
+            const container = document.getElementById('canvas-container');
+            
+            // Scene
+            scene = new THREE.Scene();
+            scene.fog = new THREE.FogExp2(0x0D0D0D, 0.02);
+            
+            // Camera
+            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.set(0, 0, 12);
+            
+            // Renderer
+            renderer = new THREE.WebGLRenderer({ 
+                antialias: true, 
+                alpha: true,
+                preserveDrawingBuffer: true 
+            });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+            renderer.shadowMap.enabled = true;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+            renderer.toneMapping = THREE.ACESFilmicToneMapping;
+            renderer.toneMappingExposure = 1.2;
+            container.appendChild(renderer.domElement);
+            
+            // Controls
+            controls = new THREE.OrbitControls(camera, renderer.domElement);
+            controls.enableDamping = true;
+            controls.dampingFactor = 0.05;
+            controls.minDistance = 5;
+            controls.maxDistance = 20;
+            controls.maxPolarAngle = Math.PI * 0.8;
+            
+            // Lighting
+            setupLighting();
+            
+            // Create Box
+            createPackagingBox();
+            
+            // Start Animation
+            animate();
+            
+            // Hide Loading
+            setTimeout(() => {
+                document.getElementById('loading').classList.add('hidden');
+            }, 1000);
+            
+            // Resize Handler
+            window.addEventListener('resize', onWindowResize);
+        }
+
+        function setupLighting() {
+            // Ambient
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
+            scene.add(ambientLight);
+            
+            // Key Light (warm gold)
+            const keyLight = new THREE.SpotLight(0xD4A853, 1.5);
+            keyLight.position.set(8, 10, 8);
+            keyLight.castShadow = true;
+            keyLight.shadow.mapSize.width = 2048;
+            keyLight.shadow.mapSize.height = 2048;
+            keyLight.shadow.bias = -0.0001;
+            scene.add(keyLight);
+            
+            // Fill Light (cool)
+            const fillLight = new THREE.DirectionalLight(0x6B4EE6, 0.4);
+            fillLight.position.set(-8, 5, 5);
+            scene.add(fillLight);
+            
+            // Rim Light
+            const rimLight = new THREE.SpotLight(0xFFD700, 0.8);
+            rimLight.position.set(0, 8, -8);
+            scene.add(rimLight);
+            
+            // Bottom reflection
+            const bottomLight = new THREE.DirectionalLight(0xffffff, 0.2);
+            bottomLight.position.set(0, -5, 0);
+            scene.add(bottomLight);
+        }
+
+        function createPackagingBox() {
+            if (boxGroup) scene.remove(boxGroup);
+            
+            boxGroup = new THREE.Group();
+            
+            const product = products[currentProduct];
+            const boxWidth = 5.3;
+            const boxHeight = 4.1;
+            const boxDepth = 2.0;
+            
+            // Black card paper material
+            const boxMaterial = new THREE.MeshStandardMaterial({
+                color: 0x0D0D0D,
+                roughness: 0.9,
+                metalness: 0.1,
+                bumpScale: 0.02
+            });
+            
+            // Gold foil material for patterns
+            const goldMaterial = new THREE.MeshStandardMaterial({
+                color: 0xD4A853,
+                roughness: 0.2,
+                metalness: 0.9,
+                emissive: 0xD4A853,
+                emissiveIntensity: 0.1
+            });
+            
+            // Product accent material
+            const accentMaterial = new THREE.MeshStandardMaterial({
+                color: new THREE.Color(product.color),
+                roughness: 0.3,
+                metalness: 0.7,
+                emissive: new THREE.Color(product.color),
+                emissiveIntensity: 0.2
+            });
+            
+            // Main box body
+            const bodyGeometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
+            const bodyMesh = new THREE.Mesh(bodyGeometry, boxMaterial);
+            bodyMesh.castShadow = true;
+            bodyMesh.receiveShadow = true;
+            boxGroup.add(bodyMesh);
+            
+            // Front face design - decorative frame
+            const frameGeometry = new THREE.PlaneGeometry(boxWidth * 0.85, boxHeight * 0.85);
+            const frameMaterial = new THREE.MeshStandardMaterial({
+                color: 0xD4A853,
+                roughness: 0.3,
+                metalness: 0.8,
+                transparent: true,
+                opacity: 0.9,
+                side: THREE.DoubleSide
+            });
+            const frameMesh = new THREE.Mesh(frameGeometry, frameMaterial);
+            frameMesh.position.set(0, 0, boxDepth/2 + 0.01);
+            boxGroup.add(frameMesh);
+            
+            // Inner frame
+            const innerFrameGeometry = new THREE.PlaneGeometry(boxWidth * 0.75, boxHeight * 0.75);
+            const innerFrameMesh = new THREE.Mesh(innerFrameGeometry, boxMaterial);
+            innerFrameMesh.position.set(0, 0, boxDepth/2 + 0.02);
+            boxGroup.add(innerFrameMesh);
+            
+            // Lion pattern area
+            const patternGeometry = new THREE.PlaneGeometry(boxWidth * 0.5, boxWidth * 0.5);
+            const patternMaterial = new THREE.MeshStandardMaterial({
+                color: new THREE.Color(product.color),
+                roughness: 0.4,
+                metalness: 0.6,
+                emissive: new THREE.Color(product.color),
+                emissiveIntensity: 0.15
+            });
+            const patternMesh = new THREE.Mesh(patternGeometry, patternMaterial);
+            patternMesh.position.set(0, 0.3, boxDepth/2 + 0.03);
+            boxGroup.add(patternMesh);
+            
+            // Product name text area
+            const nameBgGeometry = new THREE.PlaneGeometry(boxWidth * 0.6, 0.8);
+            const nameBgMaterial = new THREE.MeshStandardMaterial({
+                color: 0x0D0D0D,
+                roughness: 0.9,
+                metalness: 0.1
+            });
+            const nameBgMesh = new THREE.Mesh(nameBgGeometry, nameBgMaterial);
+            nameBgMesh.position.set(0, -1.2, boxDepth/2 + 0.03);
+            boxGroup.add(nameBgMesh);
+            
+            // Brand logo strip
+            const logoStripGeometry = new THREE.PlaneGeometry(boxWidth, 0.4);
+            const logoStripMaterial = new THREE.MeshStandardMaterial({
+                color: 0xD4A853,
+                roughness: 0.2,
+                metalness: 0.9
+            });
+            const logoStripMesh = new THREE.Mesh(logoStripGeometry, logoStripMaterial);
+            logoStripMesh.position.set(0, 1.6, boxDepth/2 + 0.03);
+            boxGroup.add(logoStripMesh);
+            
+            // Top surface design
+            const topDesignGeometry = new THREE.PlaneGeometry(boxWidth * 0.7, boxDepth * 0.7);
+            const topDesignMaterial = new THREE.MeshStandardMaterial({
+                color: 0xD4A853,
+                roughness: 0.3,
+                metalness: 0.8
+            });
+            const topDesignMesh = new THREE.Mesh(topDesignGeometry, topDesignMaterial);
+            topDesignMesh.rotation.x = -Math.PI / 2;
+            topDesignMesh.position.set(0, boxHeight/2 + 0.01, 0);
+            boxGroup.add(topDesignMesh);
+            
+            // Side decorations
+            const sideDecoGeometry = new THREE.PlaneGeometry(boxDepth * 0.6, boxHeight * 0.6);
+            const sideDecoMaterial = new THREE.MeshStandardMaterial({
+                color: new THREE.Color(product.accentColor),
+                roughness: 0.4,
+                metalness: 0.6
+            });
+            
+            // Left side
+            const leftDeco = new THREE.Mesh(sideDecoGeometry, sideDecoMaterial);
+            leftDeco.rotation.y = -Math.PI / 2;
+            leftDeco.position.set(-boxWidth/2 - 0.01, 0, 0);
+            boxGroup.add(leftDeco);
+            
+            // Right side
+            const rightDeco = new THREE.Mesh(sideDecoGeometry, sideDecoMaterial);
+            rightDeco.rotation.y = Math.PI / 2;
+            rightDeco.position.set(boxWidth/2 + 0.01, 0, 0);
+            boxGroup.add(rightDeco);
+            
+            // Lid group (for opening animation)
+            lidGroup = new THREE.Group();
+            lidGroup.position.set(0, boxHeight/2, -boxDepth/2);
+            
+            // Lid mesh
+            const lidGeometry = new THREE.BoxGeometry(boxWidth, 0.15, boxDepth);
+            const lidMesh = new THREE.Mesh(lidGeometry, boxMaterial);
+            lidMesh.position.set(0, 0.075, boxDepth/2);
+            lidMesh.castShadow = true;
+            lidGroup.add(lidMesh);
+            
+            // Lid top design
+            const lidTopGeometry = new THREE.PlaneGeometry(boxWidth * 0.8, boxDepth * 0.8);
+            const lidTopMesh = new THREE.Mesh(lidTopGeometry, goldMaterial);
+            lidTopMesh.rotation.x = -Math.PI / 2;
+            lidTopMesh.position.set(0, 0.16, boxDepth/2);
+            lidGroup.add(lidTopMesh);
+            
+            boxGroup.add(lidGroup);
+            
+            // Lens product (inside)
+            createLensProduct();
+            
+            scene.add(boxGroup);
+        }
+
+        function createLensProduct() {
+            const product = products[currentProduct];
+            
+            // Lens body
+            const lensGeometry = new THREE.CylinderGeometry(1.2, 1.2, 0.4, 32);
+            const lensMaterial = new THREE.MeshPhysicalMaterial({
+                color: 0x1a1a1a,
+                metalness: 0.8,
+                roughness: 0.2,
+                clearcoat: 1.0,
+                clearcoatRoughness: 0.1
+            });
+            lensMesh = new THREE.Mesh(lensGeometry, lensMaterial);
+            lensMesh.position.set(0, -0.5, 0);
+            lensMesh.rotation.x = Math.PI / 2;
+            lensMesh.visible = false;
+            boxGroup.add(lensMesh);
+            
+            // Lens glass
+            const glassGeometry = new THREE.CylinderGeometry(1.0, 1.0, 0.1, 32);
+            const glassMaterial = new THREE.MeshPhysicalMaterial({
+                color: new THREE.Color(product.color),
+                metalness: 0.1,
+                roughness: 0.0,
+                transmission: 0.9,
+                thickness: 0.5,
+                emissive: new THREE.Color(product.color),
+                emissiveIntensity: 0.3
+            });
+            const glassMesh = new THREE.Mesh(glassGeometry, glassMaterial);
+            glassMesh.position.set(0, -0.5, 0.25);
+            glassMesh.rotation.x = Math.PI / 2;
+            glassMesh.visible = false;
+            glassMesh.name = 'lensGlass';
+            boxGroup.add(glassMesh);
+            
+            // LED chips ring
+            const ledGeometry = new THREE.RingGeometry(0.6, 0.9, 32);
+            const ledMaterial = new THREE.MeshBasicMaterial({
+                color: new THREE.Color(product.color),
+                side: THREE.DoubleSide
+            });
+            const ledMesh = new THREE.Mesh(ledGeometry, ledMaterial);
+            ledMesh.position.set(0, -0.5, 0.26);
+            ledMesh.visible = false;
+            ledMesh.name = 'ledRing';
+            boxGroup.add(ledMesh);
+        }
+
+        function selectProduct(index) {
+            currentProduct = index;
+            
+            // Update UI
+            document.querySelectorAll('.product-btn').forEach((btn, i) => {
+                btn.classList.toggle('active', i === index);
+            });
+            
+            const product = products[index];
+            document.getElementById('product-title').textContent = product.name;
+            document.getElementById('product-desc').textContent = product.description;
+            document.getElementById('color-indicator').innerHTML = 
+                `<div class="color-dot" style="background: ${product.color};"></div>`;
+            
+            // Recreate box with new product
+            createPackagingBox();
+            
+            // Maintain open state if was open
+            if (isBoxOpen) {
+                setTimeout(() => toggleBoxOpen(), 100);
+            }
+        }
+
+        function setView(view) {
+            // Update UI
+            document.querySelectorAll('.view-btn').forEach(btn => btn.classList.remove('active'));
+            event.target.closest('.view-btn').classList.add('active');
+            
+            const duration = 1000;
+            const startPos = camera.position.clone();
+            let targetPos;
+            
+            switch(view) {
+                case 'front':
+                    targetPos = new THREE.Vector3(0, 0, 12);
+                    break;
+                case 'angle':
+                    targetPos = new THREE.Vector3(8, 6, 8);
+                    break;
+                case 'top':
+                    targetPos = new THREE.Vector3(0, 12, 0.1);
+                    break;
+                case 'free':
+                    targetPos = new THREE.Vector3(6, 4, 10);
+                    break;
+            }
+            
+            // Animate camera
+            const startTime = Date.now();
+            function animateCamera() {
+                const elapsed = Date.now() - startTime;
+                const progress = Math.min(elapsed / duration, 1);
+                const ease = 1 - Math.pow(1 - progress, 3);
+                
+                camera.position.lerpVectors(startPos, targetPos, ease);
+                camera.lookAt(0, 0, 0);
+                
+                if (progress < 1) {
+                    requestAnimationFrame(animateCamera);
+                }
+            }
+            animateCamera();
+        }
+
+        function toggleBoxOpen() {
+            isBoxOpen = !isBoxOpen;
+            document.getElementById('open-btn-text').textContent = isBoxOpen ? '关闭包装' : '打开包装';
+            
+            const targetRotation = isBoxOpen ? -Math.PI * 0.7 : 0;
+            const startRotation = lidGroup.rotation.x;
+            const duration = 800;
+            const startTime = Date.now();
+            
+            // Show/hide lens
+            const lensParts = ['lensGlass', 'ledRing'];
+            lensParts.forEach(name => {
+                const part = boxGroup.getObjectByName(name);
+                if (part) part.visible = isBoxOpen;
+            });
+            if (lensMesh) lensMesh.visible = isBoxOpen;
+            
+            function animateLid() {
+                const elapsed = Date.now() - startTime;
+                const progress = Math.min(elapsed / duration, 1);
+                const ease = 1 - Math.pow(1 - progress, 3);
+                
+                lidGroup.rotation.x = startRotation + (targetRotation - startRotation) * ease;
+                
+                if (progress < 1) {
+                    requestAnimationFrame(animateLid);
+                }
+            }
+            animateLid();
+        }
+
+        function takeScreenshot() {
+            renderer.render(scene, camera);
+            const dataURL = renderer.domElement.toDataURL('image/png');
+            
+            const link = document.createElement('a');
+            link.download = `醒狮包装_${products[currentProduct].name}_${new Date().getTime()}.png`;
+            link.href = dataURL;
+            link.click();
+        }
+
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }
+
+        function animate() {
+            animationId = requestAnimationFrame(animate);
+            controls.update();
+            
+            // Subtle floating animation
+            if (boxGroup) {
+                boxGroup.position.y = Math.sin(Date.now() * 0.001) * 0.1;
+                boxGroup.rotation.y += 0.001;
+            }
+            
+            renderer.render(scene, camera);
+        }
+
+        // Initialize
+        init();
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ce7f084
--- /dev/null
+++ b/index.html
@@ -0,0 +1,1246 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>卡特光 · 醒狮系列 | 产品包装设计方案</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
+        
+        :root {
+            /* 品牌基础色 */
+            --brand-black: #0D0D0D;
+            --brand-gold: #D4A853;
+            --brand-gold-light: #E8C87A;
+            --brand-gold-dark: #B08D3F;
+            --brand-red: #C41E3A;
+            --brand-red-dark: #8B1429;
+            --brand-white: #F5F5F0;
+            --brand-gray: #2A2A2A;
+            
+            /* 产品专属色 */
+            --tong-gold: #FFD700;
+            --wei-orange: #FF6B35;
+            --gu-bronze: #8B7355;
+            --chao-purple: #6B4EE6;
+            
+            /* 字体 */
+            --font-serif: 'Noto Serif SC', serif;
+            --font-sans: 'Noto Sans SC', sans-serif;
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: var(--font-sans);
+            background: linear-gradient(135deg, #0D0D0D 0%, #1a1a1a 50%, #0D0D0D 100%);
+            color: var(--brand-white);
+            line-height: 1.8;
+            min-height: 100vh;
+        }
+        
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 40px 20px;
+        }
+        
+        /* 封面页 */
+        .hero {
+            text-align: center;
+            padding: 80px 20px;
+            background: linear-gradient(180deg, rgba(212,168,83,0.1) 0%, transparent 50%);
+            border-bottom: 2px solid var(--brand-gold);
+            margin-bottom: 60px;
+        }
+        
+        .hero h1 {
+            font-family: var(--font-serif);
+            font-size: 3.5rem;
+            font-weight: 900;
+            color: var(--brand-gold);
+            text-shadow: 0 0 40px rgba(212,168,83,0.5);
+            margin-bottom: 20px;
+            letter-spacing: 0.1em;
+        }
+        
+        .hero .subtitle {
+            font-size: 1.5rem;
+            color: var(--brand-gold-light);
+            font-weight: 300;
+            letter-spacing: 0.3em;
+        }
+        
+        .hero .tagline {
+            margin-top: 30px;
+            font-family: var(--font-serif);
+            font-size: 1.2rem;
+            color: rgba(245,245,240,0.7);
+            font-style: italic;
+        }
+        
+        /* 章节标题 */
+        .section {
+            margin-bottom: 80px;
+        }
+        
+        .section-title {
+            font-family: var(--font-serif);
+            font-size: 2rem;
+            color: var(--brand-gold);
+            border-left: 4px solid var(--brand-gold);
+            padding-left: 20px;
+            margin-bottom: 40px;
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+        
+        .section-title::before {
+            content: "◆";
+            color: var(--brand-red);
+        }
+        
+        /* 色彩系统 */
+        .color-system {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+            margin-bottom: 40px;
+        }
+        
+        .color-card {
+            padding: 30px;
+            border-radius: 12px;
+            text-align: center;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+        }
+        
+        .color-card.brand-black { background: var(--brand-black); border: 1px solid #333; }
+        .color-card.brand-gold { background: linear-gradient(135deg, var(--brand-gold), var(--brand-gold-dark)); }
+        .color-card.brand-red { background: var(--brand-red); }
+        .color-card.brand-white { background: var(--brand-white); color: #333; }
+        
+        .color-card .color-name {
+            font-weight: 700;
+            font-size: 1.1rem;
+            margin-bottom: 10px;
+        }
+        
+        .color-card .color-value {
+            font-family: monospace;
+            font-size: 0.9rem;
+            opacity: 0.8;
+        }
+        
+        /* 产品专属色 */
+        .product-colors {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 20px;
+            margin-top: 40px;
+        }
+        
+        .product-color-card {
+            padding: 30px;
+            border-radius: 12px;
+            text-align: center;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .product-color-card::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
+        }
+        
+        .product-color-card.tong { 
+            background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
+            border: 2px solid var(--tong-gold);
+        }
+        .product-color-card.wei { 
+            background: linear-gradient(135deg, #1a1a1a, #2d2418);
+            border: 2px solid var(--wei-orange);
+        }
+        .product-color-card.gu { 
+            background: linear-gradient(135deg, #1a1a1a, #252018);
+            border: 2px solid var(--gu-bronze);
+        }
+        .product-color-card.chao { 
+            background: linear-gradient(135deg, #1a1a1a, #1a1528);
+            border: 2px solid var(--chao-purple);
+        }
+        
+        .product-color-card .product-name {
+            font-family: var(--font-serif);
+            font-size: 1.5rem;
+            font-weight: 700;
+            margin-bottom: 10px;
+        }
+        
+        .product-color-card.tong .product-name { color: var(--tong-gold); }
+        .product-color-card.wei .product-name { color: var(--wei-orange); }
+        .product-color-card.gu .product-name { color: var(--gu-bronze); }
+        .product-color-card.chao .product-name { color: var(--chao-purple); }
+        
+        /* 产品包装展示 */
+        .product-showcase {
+            display: grid;
+            gap: 60px;
+        }
+        
+        .product-item {
+            background: linear-gradient(135deg, rgba(26,26,26,0.8) 0%, rgba(13,13,13,0.9) 100%);
+            border-radius: 20px;
+            padding: 50px;
+            border: 1px solid rgba(212,168,83,0.2);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .product-item::before {
+            content: "";
+            position: absolute;
+            top: -50%;
+            right: -20%;
+            width: 400px;
+            height: 400px;
+            border-radius: 50%;
+            opacity: 0.1;
+            filter: blur(80px);
+        }
+        
+        .product-item.tong::before { background: var(--tong-gold); }
+        .product-item.wei::before { background: var(--wei-orange); }
+        .product-item.gu::before { background: var(--gu-bronze); }
+        .product-item.chao::before { background: var(--chao-purple); }
+        
+        .product-header {
+            display: flex;
+            align-items: center;
+            gap: 30px;
+            margin-bottom: 40px;
+            flex-wrap: wrap;
+        }
+        
+        .product-icon {
+            width: 100px;
+            height: 100px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 3rem;
+            font-weight: 900;
+            font-family: var(--font-serif);
+        }
+        
+        .product-item.tong .product-icon { 
+            background: linear-gradient(135deg, var(--tong-gold), #B8860B);
+            color: #1a1a1a;
+            box-shadow: 0 0 40px rgba(255,215,0,0.3);
+        }
+        .product-item.wei .product-icon { 
+            background: linear-gradient(135deg, var(--wei-orange), #CC5500);
+            color: white;
+            box-shadow: 0 0 40px rgba(255,107,53,0.3);
+        }
+        .product-item.gu .product-icon { 
+            background: linear-gradient(135deg, var(--gu-bronze), #654321);
+            color: white;
+            box-shadow: 0 0 40px rgba(139,115,85,0.3);
+        }
+        .product-item.chao .product-icon { 
+            background: linear-gradient(135deg, var(--chao-purple), #4834A0);
+            color: white;
+            box-shadow: 0 0 40px rgba(107,78,230,0.3);
+        }
+        
+        .product-title-group h3 {
+            font-family: var(--font-serif);
+            font-size: 2.2rem;
+            margin-bottom: 10px;
+        }
+        
+        .product-item.tong h3 { color: var(--tong-gold); }
+        .product-item.wei h3 { color: var(--wei-orange); }
+        .product-item.gu h3 { color: var(--gu-bronze); }
+        .product-item.chao h3 { color: var(--chao-purple); }
+        
+        .product-tag {
+            display: inline-block;
+            padding: 6px 16px;
+            border-radius: 20px;
+            font-size: 0.85rem;
+            font-weight: 500;
+            background: rgba(255,255,255,0.1);
+        }
+        
+        .product-slogan {
+            font-family: var(--font-serif);
+            font-size: 1.4rem;
+            font-style: italic;
+            margin: 20px 0;
+            padding: 20px;
+            border-left: 3px solid;
+            background: rgba(255,255,255,0.03);
+        }
+        
+        .product-item.tong .product-slogan { border-color: var(--tong-gold); color: var(--tong-gold); }
+        .product-item.wei .product-slogan { border-color: var(--wei-orange); color: var(--wei-orange); }
+        .product-item.gu .product-slogan { border-color: var(--gu-bronze); color: var(--gu-bronze); }
+        .product-item.chao .product-slogan { border-color: var(--chao-purple); color: var(--chao-purple); }
+        
+        .product-details {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 30px;
+        }
+        
+        .detail-block {
+            background: rgba(255,255,255,0.03);
+            padding: 25px;
+            border-radius: 12px;
+            border: 1px solid rgba(255,255,255,0.05);
+        }
+        
+        .detail-block h4 {
+            font-size: 0.9rem;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            color: var(--brand-gold);
+            margin-bottom: 15px;
+        }
+        
+        .detail-block ul {
+            list-style: none;
+        }
+        
+        .detail-block li {
+            padding: 8px 0;
+            padding-left: 20px;
+            position: relative;
+        }
+        
+        .detail-block li::before {
+            content: "▸";
+            position: absolute;
+            left: 0;
+            color: var(--brand-gold);
+        }
+        
+        /* 包装六面规划 */
+        .box-layout {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 20px;
+            margin-top: 40px;
+        }
+        
+        .box-face {
+            background: linear-gradient(135deg, rgba(26,26,26,0.9), rgba(13,13,13,0.95));
+            border: 1px solid rgba(212,168,83,0.3);
+            border-radius: 12px;
+            padding: 30px;
+            position: relative;
+            min-height: 200px;
+        }
+        
+        .box-face::after {
+            content: attr(data-face);
+            position: absolute;
+            top: 10px;
+            right: 15px;
+            font-size: 0.75rem;
+            color: rgba(212,168,83,0.5);
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+        }
+        
+        .box-face h4 {
+            font-family: var(--font-serif);
+            font-size: 1.2rem;
+            color: var(--brand-gold);
+            margin-bottom: 15px;
+        }
+        
+        .box-face ul {
+            list-style: none;
+            font-size: 0.9rem;
+        }
+        
+        .box-face li {
+            padding: 5px 0;
+            color: rgba(245,245,240,0.8);
+        }
+        
+        /* 展开图示意 */
+        .unfold-diagram {
+            background: rgba(26,26,26,0.5);
+            border-radius: 20px;
+            padding: 50px;
+            margin-top: 40px;
+            border: 1px solid rgba(212,168,83,0.2);
+        }
+        
+        .unfold-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            grid-template-rows: repeat(3, 150px);
+            gap: 10px;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        
+        .unfold-cell {
+            background: linear-gradient(135deg, rgba(212,168,83,0.1), rgba(212,168,83,0.05));
+            border: 2px solid rgba(212,168,83,0.3);
+            border-radius: 8px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.9rem;
+            position: relative;
+        }
+        
+        .unfold-cell.main {
+            background: linear-gradient(135deg, rgba(212,168,83,0.2), rgba(212,168,83,0.1));
+            border-color: var(--brand-gold);
+        }
+        
+        .unfold-cell .face-name {
+            font-weight: 700;
+            color: var(--brand-gold);
+            margin-bottom: 5px;
+        }
+        
+        .unfold-cell .face-size {
+            font-size: 0.75rem;
+            color: rgba(245,245,240,0.6);
+        }
+        
+        /* 工艺说明 */
+        .craft-section {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 30px;
+            margin-top: 40px;
+        }
+        
+        .craft-card {
+            background: linear-gradient(135deg, rgba(26,26,26,0.8), rgba(13,13,13,0.9));
+            border-radius: 16px;
+            padding: 35px;
+            border: 1px solid rgba(212,168,83,0.2);
+        }
+        
+        .craft-card h4 {
+            font-family: var(--font-serif);
+            font-size: 1.3rem;
+            color: var(--brand-gold);
+            margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        
+        .craft-card .icon {
+            width: 40px;
+            height: 40px;
+            background: rgba(212,168,83,0.2);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.2rem;
+        }
+        
+        .craft-card p {
+            color: rgba(245,245,240,0.8);
+            line-height: 1.8;
+        }
+        
+        /* 规格表 */
+        .spec-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 30px;
+        }
+        
+        .spec-table th,
+        .spec-table td {
+            padding: 15px 20px;
+            text-align: left;
+            border-bottom: 1px solid rgba(212,168,83,0.2);
+        }
+        
+        .spec-table th {
+            font-family: var(--font-serif);
+            color: var(--brand-gold);
+            font-weight: 600;
+            background: rgba(212,168,83,0.1);
+        }
+        
+        .spec-table tr:hover {
+            background: rgba(212,168,83,0.05);
+        }
+        
+        /* 页脚 */
+        .footer {
+            text-align: center;
+            padding: 60px 20px;
+            border-top: 1px solid rgba(212,168,83,0.2);
+            margin-top: 80px;
+        }
+        
+        .footer-logo {
+            font-family: var(--font-serif);
+            font-size: 2rem;
+            color: var(--brand-gold);
+            margin-bottom: 20px;
+        }
+        
+        .footer p {
+            color: rgba(245,245,240,0.5);
+            font-size: 0.9rem;
+        }
+        
+        /* 响应式 */
+        @media (max-width: 1024px) {
+            .product-colors {
+                grid-template-columns: repeat(2, 1fr);
+            }
+            .box-layout {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+        
+        @media (max-width: 768px) {
+            .hero h1 {
+                font-size: 2rem;
+            }
+            .product-colors {
+                grid-template-columns: 1fr;
+            }
+            .box-layout {
+                grid-template-columns: 1fr;
+            }
+            .unfold-grid {
+                grid-template-columns: repeat(2, 1fr);
+                grid-template-rows: repeat(6, 120px);
+            }
+            .product-header {
+                flex-direction: column;
+                text-align: center;
+            }
+        }
+        
+        /* 装饰元素 */
+        .decoration-line {
+            width: 100px;
+            height: 2px;
+            background: linear-gradient(90deg, transparent, var(--brand-gold), transparent);
+            margin: 30px auto;
+        }
+        
+        .highlight {
+            color: var(--brand-gold);
+            font-weight: 600;
+        }
+        
+        /* 3D渲染规范 */
+        .render-specs {
+            background: rgba(0,0,0,0.3);
+            border-radius: 16px;
+            padding: 40px;
+            margin-top: 40px;
+            border: 1px solid rgba(212,168,83,0.2);
+        }
+        
+        .render-specs h4 {
+            font-family: var(--font-serif);
+            color: var(--brand-gold);
+            margin-bottom: 20px;
+            font-size: 1.2rem;
+        }
+        
+        .render-specs code {
+            background: rgba(212,168,83,0.1);
+            padding: 2px 8px;
+            border-radius: 4px;
+            font-family: monospace;
+            color: var(--brand-gold-light);
+        }
+        
+        .dimension-box {
+            display: inline-block;
+            background: rgba(212,168,83,0.1);
+            border: 1px solid var(--brand-gold);
+            padding: 15px 25px;
+            border-radius: 8px;
+            margin: 10px 10px 10px 0;
+            font-family: monospace;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- 封面 -->
+        <header class="hero">
+            <h1>卡特光 · 醒狮系列</h1>
+            <p class="subtitle">产品包装设计方案</p>
+            <div class="decoration-line"></div>
+            <p class="tagline">「承东方狮魂，耀前路无垠」</p>
+        </header>
+
+        <!-- 第一章：视觉系统 -->
+        <section class="section">
+            <h2 class="section-title">整体视觉系统</h2>
+            
+            <h3 style="color: var(--brand-gold); margin-bottom: 20px; font-family: var(--font-serif);">品牌色彩体系</h3>
+            <div class="color-system">
+                <div class="color-card brand-black">
+                    <div class="color-name">墨黑</div>
+                    <div class="color-value">#0D0D0D</div>
+                    <div style="margin-top: 10px; font-size: 0.85rem; opacity: 0.7;">主背景色，沉稳大气</div>
+                </div>
+                <div class="color-card brand-gold">
+                    <div class="color-name">鎏金</div>
+                    <div class="color-value">#D4A853</div>
+                    <div style="margin-top: 10px; font-size: 0.85rem; opacity: 0.9;">品牌主色，醒狮之魂</div>
+                </div>
+                <div class="color-card brand-red">
+                    <div class="color-name">朱红</div>
+                    <div class="color-value">#C41E3A</div>
+                    <div style="margin-top: 10px; font-size: 0.85rem; opacity: 0.9;">点缀色，东方韵味</div>
+                </div>
+                <div class="color-card brand-white">
+                    <div class="color-name" style="color: #333;">宣纸白</div>
+                    <div class="color-value" style="color: #666;">#F5F5F0</div>
+                    <div style="margin-top: 10px; font-size: 0.85rem; color: #666;">文字主色，温润如玉</div>
+                </div>
+            </div>
+
+            <h3 style="color: var(--brand-gold); margin: 40px 0 20px; font-family: var(--font-serif);">产品专属色彩</h3>
+            <div class="product-colors">
+                <div class="product-color-card tong">
+                    <div class="product-name">醒狮·瞳</div>
+                    <div style="color: var(--tong-gold); font-size: 0.9rem;">帝王金 #FFD700</div>
+                    <div style="margin-top: 15px; font-size: 0.8rem; opacity: 0.7;">狮头 · 核心/灵魂</div>
+                </div>
+                <div class="product-color-card wei">
+                    <div class="product-name">醒狮·威</div>
+                    <div style="color: var(--wei-orange); font-size: 0.9rem;">烈焰橙 #FF6B35</div>
+                    <div style="margin-top: 15px; font-size: 0.8rem; opacity: 0.7;">狮尾 · 力量/爆发</div>
+                </div>
+                <div class="product-color-card gu">
+                    <div class="product-name">醒狮·鼓</div>
+                    <div style="color: var(--gu-bronze); font-size: 0.9rem;">古铜褐 #8B7355</div>
+                    <div style="margin-top: 15px; font-size: 0.8rem; opacity: 0.7;">鼓手 · 节奏/指挥</div>
+                </div>
+                <div class="product-color-card chao">
+                    <div class="product-name">醒狮·潮</div>
+                    <div style="color: var(--chao-purple); font-size: 0.9rem;">电光紫 #6B4EE6</div>
+                    <div style="margin-top: 15px; font-size: 0.8rem; opacity: 0.7;">少年 · 新生代/活力</div>
+                </div>
+            </div>
+
+            <h3 style="color: var(--brand-gold); margin: 40px 0 20px; font-family: var(--font-serif);">字体规范</h3>
+            <div class="detail-block" style="margin-top: 20px;">
+                <ul>
+                    <li><span class="highlight">品牌标题：</span>Noto Serif SC（思源宋体）- 用于产品名称、系列标题，体现东方文化底蕴</li>
+                    <li><span class="highlight">正文信息：</span>Noto Sans SC（思源黑体）- 用于产品说明、技术参数，确保清晰易读</li>
+                    <li><span class="highlight">英文/数字：</span>Inter / Roboto - 用于型号、规格数据，现代简洁</li>
+                    <li><span class="highlight">装饰字体：</span>手写体风格 - 用于slogan，增添人文温度</li>
+                </ul>
+            </div>
+
+            <h3 style="color: var(--brand-gold); margin: 40px 0 20px; font-family: var(--font-serif);">核心图形元素</h3>
+            <div class="craft-section">
+                <div class="craft-card">
+                    <h4><span class="icon">狮</span>醒狮图腾</h4>
+                    <p>抽象化醒狮头部轮廓，线条流畅有力，融合LED光带元素。采用烫金/UV工艺呈现，在光线下呈现金属质感。</p>
+                </div>
+                <div class="craft-card">
+                    <h4><span class="icon">光</span>光束纹理</h4>
+                    <p>从中心向外辐射的光束线条，象征透镜的照明效果。采用压纹工艺，触感立体，呼应"光耀全场"的品牌理念。</p>
+                </div>
+                <div class="craft-card">
+                    <h4><span class="icon">纹</span>传统云纹</h4>
+                    <p>融入中国传统祥云纹样，作为背景底纹使用，增添东方美学韵味，与醒狮主题呼应。</p>
+                </div>
+            </div>
+        </section>
+
+        <!-- 第二章：产品包装方案 -->
+        <section class="section">
+            <h2 class="section-title">四款产品包装方案</h2>
+            
+            <div class="product-showcase">
+                <!-- 醒狮·瞳 -->
+                <div class="product-item tong">
+                    <div class="product-header">
+                        <div class="product-icon">瞳</div>
+                        <div class="product-title-group">
+                            <h3>醒狮·瞳</h3>
+                            <span class="product-tag">旗舰性能版</span>
+                        </div>
+                    </div>
+                    <div class="product-slogan">「狮王睁眼，光耀全场」</div>
+                    <div class="product-details">
+                        <div class="detail-block">
+                            <h4>色彩方案</h4>
+                            <ul>
+                                <li>主色调：墨黑 (#0D0D0D) 80%</li>
+                                <li>强调色：帝王金 (#FFD700) 15%</li>
+                                <li>点缀色：朱红 (#C41E3A) 5%</li>
+                                <li>整体呈现黑金奢华质感</li>
+                            </ul>
+                        </div>
+                        <div class="detail-block">
+                            <h4>核心图形</h4>
+                            <ul>
+                                <li>正面：立体烫金狮头正面图腾</li>
+                                <li>狮眼位置采用镂空+金色内衬</li>
+                                <li>光束从狮眼向四周辐射</li>
+                                <li>云纹底纹压花处理</li>
+                            </ul>
+                        </div>
+                        <div class="detail-block">
+                            <h4>文案布局</h4>
+                            <ul>
+                                <li>正面：「醒狮·瞳」竖排大字</li>
+                                <li>副标题：狮王睁眼，光耀全场</li>
+                                <li>侧面：旗舰性能版 + 核心卖点</li>
+                                <li>背面：产品故事与技术参数</li>
+                            </ul>
+                        </div>
+                        <div class="detail-block">
+                            <h4>工艺建议</h4>
+                            <ul>
+                                <li>狮头图腾：立体烫金</li>
+                                <li>狮眼：UV上光+局部击凸</li>
+                                <li>光束线条：丝印金墨</li>
+                                <li>整体：哑光覆膜+局部UV</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 醒狮·威 -->
+                <div class="product-item wei">
+                    <div class="product-header">
+                        <div class="product-icon">威</div>
+                        <div class="product-title-group">
+                            <h3>醒狮·威</h3>
+                            <span class="product-tag">远射巨炮版</span>
+                        </div>
+                    </div>
+                    <div class="product-slogan">「一啸千里，势不可挡」</div>
+                    <div class="product-details">
+                        <div class="detail-block">
+                            <h4>色彩方案</h4>
+                            <ul>
+                                <li>主色调：墨黑 (#0D0D0D) 75%</li>
+                                <li>强调色：烈焰橙 (#FF6B35) 20%</li>
+                                <li>点缀色：鎏金 (#D4A853) 5%</li>
+                                <li>黑橙搭配，力量感十足</li>
+                            </ul>
+                        </div>
+                        <div class="detail-block">
+                            <h4>核心图形</h4>
+                            <ul>
+                                <li>正面：狮尾甩动动态剪影</li>
+                                <li>配合向前冲刺的速度线</li>
+                                <li>光束呈汇聚状指向远方</li>
+                                <li>火焰纹理点缀边缘</li>
+                            </ul>
+                        </div>
+                        <div class="detail-block">
+                            <h4>文案布局</h4>
+                            <ul>
+                                <li>正面：「醒狮·威」横排大字</li>
+                                <li>副标题：一啸千里，势不可挡</li>
+                                <li>侧面：远射巨炮版 + 射程数据</li>
+                                <li>背面：高速路况场景图</li>
+                            </ul>
+                        </div>
+                        <div class="detail-block">
+                            <h4>工艺建议</h4>
+                            <ul>
+                                <li>狮尾图形：烫橙金</li>
+                                <li>速度线：UV上光</li>
+                                <li>火焰纹理：热压变色油墨</li>
+                                <li>整体：触感膜+局部UV</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 醒狮·鼓 -->
+                <div class="product-item gu">
+                    <div class="product-header">
+                        <div class="product-icon">鼓</div>
+                        <div class="product-title-group">
+                            <h3>醒狮·鼓</h3>
+                            <span class="product-tag">启动响应版</span>
+                        </div>
+                    </div>
+                    <div class="product-slogan">「鼓声一响，光随心动」</div>
+                    <div class="product-details">
+                        <div class="detail-block">
+                            <h4>色彩方案</h4>
+                            <ul>
+                                <li>主色调：墨黑 (#0D0D0D) 70%</li>
+                                <li>强调色：古铜褐 (#8B7355) 25%</li>
+                                <li>点缀色：鎏金 (#D4A853) 5%</li>
+                                <li>复古质感，沉稳可靠</li>
+                            </ul>
+                        </div>
+                        <div class="detail-block">
+                            <h4>核心图形</h4>
+                            <ul>
+                                <li>正面：醒狮鼓手击鼓姿态</li>
+                                <li>声波/节奏波纹向外扩散</li>
+                                <li>传统鼓面纹理装饰</li>
+                                <li>机械齿轮元素点缀</li>
+                            </ul>
+                        </div>
+                        <div class="detail-block">
+                            <h4>文案布局</h4>
+                            <ul>
+                                <li>正面：「醒狮·鼓」居中大字</li>
+                                <li>副标题：鼓声一响，光随心动</li>
+                                <li>侧面：瞬启快启 + 响应时间</li>
+                                <li>背面：智能散热系统图解</li>
+                            </ul>
+                        </div>
+                        <div class="detail-block">
+                            <h4>工艺建议</h4>
+                            <ul>
+                                <li>鼓手图形：烫古铜金</li>
+                                <li>声波纹理：压纹工艺</li>
+                                <li>鼓面纹理：布纹纸材质</li>
+                                <li>整体：亚光覆膜+局部UV</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 醒狮·潮 -->
+                <div class="product-item chao">
+                    <div class="product-header">
+                        <div class="product-icon">潮</div>
+                        <div class="product-title-group">
+                            <h3>醒狮·潮</h3>
+                            <span class="product-tag">年轻个性版</span>
+                        </div>
+                    </div>
+                    <div class="product-slogan">「国潮觉醒，自有光」</div>
+                    <div class="product-details">
+                        <div class="detail-block">
+                            <h4>色彩方案</h4>
+                            <ul>
+                                <li>主色调：墨黑 (#0D0D0D) 65%</li>
+                                <li>强调色：电光紫 (#6B4EE6) 30%</li>
+                                <li>点缀色：霓虹粉 (#FF1493) 5%</li>
+                                <li>赛博朋克与国潮融合</li>
+                            </ul>
+                        </div>
+                        <div class="detail-block">
+                            <h4>核心图形</h4>
+                            <ul>
+                                <li>正面：少年狮队大头佛形象</li>
+                                <li>霓虹光效边框装饰</li>
+                                <li>几何化狮头图案</li>
+                                <li>潮流涂鸦元素点缀</li>
+                            </ul>
+                        </div>
+                        <div class="detail-block">
+                            <h4>文案布局</h4>
+                            <ul>
+                                <li>正面：「醒狮·潮」创意字体</li>
+                                <li>副标题：国潮觉醒，自有光</li>
+                                <li>侧面：个性光型展示</li>
+                                <li>背面：潮流场景搭配图</li>
+                            </ul>
+                        </div>
+                        <div class="detail-block">
+                            <h4>工艺建议</h4>
+                            <ul>
+                                <li>图形：烫彩虹金</li>
+                                <li>霓虹边框：夜光油墨</li>
+                                <li>涂鸦元素：丝印荧光色</li>
+                                <li>整体：镭射覆膜+局部UV</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- 第三章：包装六面规划 -->
+        <section class="section">
+            <h2 class="section-title">包装六面内容规划</h2>
+            
+            <div style="background: rgba(212,168,83,0.1); padding: 30px; border-radius: 12px; margin-bottom: 30px;">
+                <p style="color: var(--brand-gold);">📦 包装尺寸规格：<span class="dimension-box">265mm</span> × <span class="dimension-box">205mm</span> × <span class="dimension-box">100mm</span>（长×宽×高）</p>
+            </div>
+
+            <div class="box-layout">
+                <div class="box-face main" data-face="FRONT">
+                    <h4>正面 (265×100mm)</h4>
+                    <ul>
+                        <li>产品名称大字（竖排/横排）</li>
+                        <li>醒狮图腾核心图形</li>
+                        <li>产品系列标识</li>
+                        <li>品牌Logo（卡特光）</li>
+                        <li>版本标签（旗舰/远射等）</li>
+                    </ul>
+                </div>
+                <div class="box-face" data-face="BACK">
+                    <h4>背面 (265×100mm)</h4>
+                    <ul>
+                        <li>产品故事/品牌理念</li>
+                        <li>详细技术参数表</li>
+                        <li>使用场景示意图</li>
+                        <li>认证标志/条形码</li>
+                        <li>生产信息/二维码</li>
+                    </ul>
+                </div>
+                <div class="box-face" data-face="LEFT">
+                    <h4>左侧面 (100×205mm)</h4>
+                    <ul>
+                        <li>产品型号</li>
+                        <li>核心卖点图标</li>
+                        <li>主文案slogan</li>
+                        <li>装饰性狮纹</li>
+                    </ul>
+                </div>
+                <div class="box-face" data-face="RIGHT">
+                    <h4>右侧面 (100×205mm)</h4>
+                    <ul>
+                        <li>产品剖面示意图</li>
+                        <li>安装指引简图</li>
+                        <li>防伪标识</li>
+                        <li>客服/官网信息</li>
+                    </ul>
+                </div>
+                <div class="box-face" data-face="TOP">
+                    <h4>顶面 (265×205mm)</h4>
+                    <ul>
+                        <li>品牌Logo居中</li>
+                        <li>系列名称</li>
+                        <li>产品名称</li>
+                        <li>开启指示箭头</li>
+                        <li>密封贴位置</li>
+                    </ul>
+                </div>
+                <div class="box-face" data-face="BOTTOM">
+                    <h4>底面 (265×205mm)</h4>
+                    <ul>
+                        <li>产品型号/批次号</li>
+                        <li>生产日期</li>
+                        <li>制造商信息</li>
+                        <li>回收标志</li>
+                        <li>注意事项图标</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+        <!-- 第四章：展开图设计 -->
+        <section class="section">
+            <h2 class="section-title">包装展开图设计说明</h2>
+            
+            <div class="unfold-diagram">
+                <h3 style="text-align: center; color: var(--brand-gold); margin-bottom: 30px; font-family: var(--font-serif);">盒型展开示意图</h3>
+                <div class="unfold-grid">
+                    <div class="unfold-cell" style="grid-column: 2;">
+                        <span class="face-name">顶面</span>
+                        <span class="face-size">265×205mm</span>
+                    </div>
+                    <div></div>
+                    <div></div>
+                    <div class="unfold-cell" style="grid-column: 1; grid-row: 2;">
+                        <span class="face-name">左侧面</span>
+                        <span class="face-size">100×205mm</span>
+                    </div>
+                    <div class="unfold-cell main" style="grid-column: 2; grid-row: 2;">
+                        <span class="face-name">正面</span>
+                        <span class="face-size">265×100mm</span>
+                    </div>
+                    <div class="unfold-cell" style="grid-column: 3; grid-row: 2;">
+                        <span class="face-name">右侧面</span>
+                        <span class="face-size">100×205mm</span>
+                    </div>
+                    <div class="unfold-cell" style="grid-column: 4; grid-row: 2;">
+                        <span class="face-name">背面</span>
+                        <span class="face-size">265×100mm</span>
+                    </div>
+                    <div class="unfold-cell" style="grid-column: 2; grid-row: 3;">
+                        <span class="face-name">底面</span>
+                        <span class="face-size">265×205mm</span>
+                    </div>
+                    <div></div>
+                    <div></div>
+                </div>
+                
+                <div style="margin-top: 40px; padding: 30px; background: rgba(0,0,0,0.3); border-radius: 12px;">
+                    <h4 style="color: var(--brand-gold); margin-bottom: 20px;">展开图尺寸计算</h4>
+                    <table class="spec-table">
+                        <tr>
+                            <th>方向</th>
+                            <th>计算方式</th>
+                            <th>总尺寸</th>
+                        </tr>
+                        <tr>
+                            <td>横向</td>
+                            <td>左侧面(100) + 正面(265) + 右侧面(100) + 背面(265) + 粘口(20)</td>
+                            <td><code>750mm</code></td>
+                        </tr>
+                        <tr>
+                            <td>纵向</td>
+                            <td>顶面(205) + 正面(100) + 底面(205) + 折边(40)</td>
+                            <td><code>550mm</code></td>
+                        </tr>
+                    </table>
+                    <p style="margin-top: 20px; color: rgba(245,245,240,0.7);">
+                        <span class="highlight">出血位：</span>各边 +3mm | <span class="highlight">裁切线：</span>实线 | <span class="highlight">折痕线：</span>虚线
+                    </p>
+                </div>
+            </div>
+        </section>
+
+        <!-- 第五章：材质与工艺 -->
+        <section class="section">
+            <h2 class="section-title">材质与工艺规范</h2>
+            
+            <h3 style="color: var(--brand-gold); margin-bottom: 20px; font-family: var(--font-serif);">推荐材质</h3>
+            <table class="spec-table">
+                <tr>
+                    <th>材质类型</th>
+                    <th>规格</th>
+                    <th>适用产品</th>
+                    <th>特点</th>
+                </tr>
+                <tr>
+                    <td>黑卡纸</td>
+                    <td>350g-400g</td>
+                    <td>醒狮·瞳</td>
+                    <td>自带黑色，适合烫金工艺，质感高级</td>
+                </tr>
+                <tr>
+                    <td>触感纸</td>
+                    <td>300g-350g</td>
+                    <td>醒狮·威/鼓</td>
+                    <td>细腻触感，提升开箱体验</td>
+                </tr>
+                <tr>
+                    <td>镭射卡纸</td>
+                    <td>300g</td>
+                    <td>醒狮·潮</td>
+                    <td>炫彩效果，符合潮流定位</td>
+                </tr>
+                <tr>
+                    <td>瓦楞内衬</td>
+                    <td>E坑/B坑</td>
+                    <td>全系列</td>
+                    <td>缓冲保护，可定制形状</td>
+                </tr>
+            </table>
+
+            <h3 style="color: var(--brand-gold); margin: 40px 0 20px; font-family: var(--font-serif);">工艺详解</h3>
+            <div class="craft-section">
+                <div class="craft-card">
+                    <h4><span class="icon">✦</span>烫金工艺</h4>
+                    <p><strong>适用：</strong>品牌Logo、产品名称、狮头图腾<br>
+                    <strong>颜色：</strong>亮金/哑金/古铜金/橙金（按产品区分）<br>
+                    <strong>效果：</strong>金属光泽，提升档次感<br>
+                    <strong>注意：</strong>线条不宜过细，最小0.2mm</p>
+                </div>
+                <div class="craft-card">
+                    <h4><span class="icon">✧</span>UV上光</h4>
+                    <p><strong>适用：</strong>狮眼、光束线条、重点图形<br>
+                    <strong>类型：</strong>局部UV / 满版UV<br>
+                    <strong>效果：</strong>高光泽度，视觉焦点突出<br>
+                    <strong>注意：</strong>与哑光底形成对比</p>
+                </div>
+                <div class="craft-card">
+                    <h4><span class="icon">◈</span>压纹工艺</h4>
+                    <p><strong>适用：</strong>云纹底纹、品牌暗纹<br>
+                    <strong>纹理：</strong>布纹/皮纹/定制狮纹<br>
+                    <strong>效果：</strong>触感立体，增加质感<br>
+                    <strong>注意：</strong>深度0.3-0.5mm为宜</p>
+                </div>
+                <div class="craft-card">
+                    <h4><span class="icon">◇</span>击凸/压凹</h4>
+                    <p><strong>适用：</strong>产品名称、核心图形<br>
+                    <strong>效果：</strong>3D立体效果，高端大气<br>
+                    <strong>注意：</strong>需配合烫金使用效果更佳</p>
+                </div>
+                <div class="craft-card">
+                    <h4><span class="icon">◎</span>覆膜工艺</h4>
+                    <p><strong>类型：</strong>哑光膜/触感膜/镭射膜<br>
+                    <strong>效果：</strong>保护印刷+质感提升<br>
+                    <strong>建议：</strong>全系列采用覆膜，增强耐用性</p>
+                </div>
+                <div class="craft-card">
+                    <h4><span class="icon">◉</span>特殊油墨</h4>
+                    <p><strong>夜光油墨：</strong>醒狮·潮霓虹边框<br>
+                    <strong>温变油墨：</strong>可玩性互动元素<br>
+                    <strong>香味油墨：</strong>开箱嗅觉体验（可选）</p>
+                </div>
+            </div>
+        </section>
+
+        <!-- 第六章：3D渲染规范 -->
+        <section class="section">
+            <h2 class="section-title">3D渲染设计规范</h2>
+            
+            <div class="render-specs">
+                <h4>📐 基础尺寸参数</h4>
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px;">
+                    <div style="background: rgba(255,255,255,0.05); padding: 20px; border-radius: 8px;">
+                        <div style="color: var(--brand-gold); font-weight: 600;">外盒尺寸</div>
+                        <div style="font-family: monospace; margin-top: 10px;">
+                            长: 265mm<br>
+                            宽: 205mm<br>
+                            高: 100mm
+                        </div>
+                    </div>
+                    <div style="background: rgba(255,255,255,0.05); padding: 20px; border-radius: 8px;">
+                        <div style="color: var(--brand-gold); font-weight: 600;">材质厚度</div>
+                        <div style="font-family: monospace; margin-top: 10px;">
+                            纸板: 0.5mm<br>
+                            覆膜: 0.02mm<br>
+                            总厚度: ~0.6mm
+                        </div>
+                    </div>
+                    <div style="background: rgba(255,255,255,0.05); padding: 20px; border-radius: 8px;">
+                        <div style="color: var(--brand-gold); font-weight: 600;">展开图尺寸</div>
+                        <div style="font-family: monospace; margin-top: 10px;">
+                            宽度: 750mm<br>
+                            高度: 550mm<br>
+                            分辨率: 300dpi
+                        </div>
+                    </div>
+                </div>
+
+                <h4>🎨 材质贴图规范</h4>
+                <table class="spec-table">
+                    <tr>
+                        <th>材质属性</th>
+                        <th>参数值</th>
+                        <th>说明</th>
+                    </tr>
+                    <tr>
+                        <td>基础色 (Base Color)</td>
+                        <td>#0D0D0D</td>
+                        <td>墨黑色主背景</td>
+                    </tr>
+                    <tr>
+                        <td>粗糙度 (Roughness)</td>
+                        <td>0.7-0.9</td>
+                        <td>纸质哑光质感</td>
+                    </tr>
+                    <tr>
+                        <td>金属度 (Metallic)</td>
+                        <td>0.0</td>
+                        <td>非金属材质</td>
+                    </tr>
+                    <tr>
+                        <td>法线强度 (Normal)</td>
+                        <td>0.3-0.5</td>
+                        <td>压纹纹理高度</td>
+                    </tr>
+                    <tr>
+                        <td>高光 (Specular)</td>
+                        <td>0.1-0.2</td>
+                        <td>微弱反光</td>
+                    </tr>
+                </table>
+
+                <h4 style="margin-top: 30px;">💡 灯光设置建议</h4>
+                <ul style="list-style: none; margin-top: 15px;">
+                    <li style="padding: 8px 0;"><span class="highlight">主光源：</span>暖白色 (色温 4000K) - 模拟自然光</li>
+                    <li style="padding: 8px 0;"><span class="highlight">补光：</span>冷白色 (色温 5500K) - 突出烫金反光</li>
+                    <li style="padding: 8px 0;"><span class="highlight">轮廓光：</span>金色 (RGB: 212,168,83) - 强调边缘</li>
+                    <li style="padding: 8px 0;"><span class="highlight">环境光：</span>深灰色 (RGB: 40,40,40) - 营造高级感</li>
+                </ul>
+
+                <h4 style="margin-top: 30px;">📷 渲染角度推荐</h4>
+                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 15px;">
+                    <div style="background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px;">
+                        <div style="color: var(--brand-gold); font-weight: 600;">正面视角</div>
+                        <div style="font-size: 0.9rem; margin-top: 5px;">0° 水平 / 0° 垂直</div>
+                    </div>
+                    <div style="background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px;">
+                        <div style="color: var(--brand-gold); font-weight: 600;">45° 展示角</div>
+                        <div style="font-size: 0.9rem; margin-top: 5px;">45° 水平 / 30° 垂直</div>
+                    </div>
+                    <div style="background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px;">
+                        <div style="color: var(--brand-gold); font-weight: 600;">俯视角度</div>
+                        <div style="font-size: 0.9rem; margin-top: 5px;">0° 水平 / 60° 垂直</div>
+                    </div>
+                    <div style="background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px;">
+                        <div style="color: var(--brand-gold); font-weight: 600;">开箱视角</div>
+                        <div style="font-size: 0.9rem; margin-top: 5px;">半开盖展示内部</div>
+                    </div>
+                </div>
+
+                <h4 style="margin-top: 30px;">📁 输出文件规格</h4>
+                <table class="spec-table">
+                    <tr>
+                        <th>用途</th>
+                        <th>格式</th>
+                        <th>分辨率</th>
+                        <th>色彩模式</th>
+                    </tr>
+                    <tr>
+                        <td>印刷生产</td>
+                        <td>AI / PDF</td>
+                        <td>300dpi</td>
+                        <td>CMYK</td>
+                    </tr>
+                    <tr>
+                        <td>3D渲染贴图</td>
+                        <td>PNG / TIFF</td>
+                        <td>300dpi</td>
+                        <td>RGB</td>
+                    </tr>
+                    <tr>
+                        <td>电商展示</td>
+                        <td>JPG / PNG</td>
+                        <td>150dpi</td>
+                        <td>RGB</td>
+                    </tr>
+                    <tr>
+                        <td>宣传物料</td>
+                        <td>PSD / AI</td>
+                        <td>300dpi</td>
+                        <td>CMYK + RGB</td>
+                    </tr>
+                </table>
+            </div>
+        </section>
+
+        <!-- 页脚 -->
+        <footer class="footer">
+            <div class="footer-logo">卡特光 · 醒狮系列</div>
+            <p>承东方狮魂，耀前路无垠</p>
+            <p style="margin-top: 10px; font-size: 0.8rem;">包装设计方案 v1.0 | 2026</p>
+        </footer>
+    </div>
+</body>
+</html>

方向	计算方式	总尺寸
横向	左侧面(100) + 正面(265) + 右侧面(100) + 背面(265) + 粘口(20)	`750mm`
纵向	顶面(205) + 正面(100) + 底面(205) + 折边(40)	`550mm`
材质类型	规格	适用产品	特点
黑卡纸	350g-400g	醒狮·瞳	自带黑色，适合烫金工艺，质感高级
触感纸	300g-350g	醒狮·威/鼓	细腻触感，提升开箱体验
镭射卡纸	300g	醒狮·潮	炫彩效果，符合潮流定位
瓦楞内衬	E坑/B坑	全系列	缓冲保护，可定制形状
材质属性	参数值	说明
基础色 (Base Color)	#0D0D0D	墨黑色主背景
粗糙度 (Roughness)	0.7-0.9	纸质哑光质感
金属度 (Metallic)	0.0	非金属材质
法线强度 (Normal)	0.3-0.5	压纹纹理高度
高光 (Specular)	0.1-0.2	微弱反光
用途	格式	分辨率	色彩模式
印刷生产	AI / PDF	300dpi	CMYK
3D渲染贴图	PNG / TIFF	300dpi	RGB
电商展示	JPG / PNG	150dpi	RGB
宣传物料	PSD / AI	300dpi	CMYK + RGB