Face Lab 2027 - AI Avatar Studio

\n Video Effects\n \n

Select an effect

\n\n \n\n`;\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html; charset=utf-8\",\n \"Cache-Control\": \"no-cache\",\n },\n });\n}\n\n// ============================================================================\n// CLIENT SCRIPT (TypeScript compiled to JS for browser execution)\n// ============================================================================\n\nconst FACELAB_CLIENT_SCRIPT = `\nimport * as THREE from 'three';\nimport { OrbitControls } from 'three/addons/controls/OrbitControls.js';\nimport { MindARThree } from 'mindar-face-three';\n\nconst STORAGE_KEY = 'facelab-2027-config';\n\n// Video Effect Styles\nconst VIDEO_EFFECT_STYLES = ${JSON.stringify(VIDEO_EFFECT_STYLES)};\n\nconst TEETH_SVG = \\`\\`;\n\nconst DEFAULT_CONFIG = {\n performance: \"Low\",\n devView: false,\n videoHidden: false,\n lerpFactor: 0.95,\n renderMode: \"Cel-Shaded\",\n skinColor: \"#fff5e6\",\n outlineColor: \"#000000\",\n outlineWidth: 0.006,\n eyeStyle: \"Cartoon\",\n eyeColor: \"#3498db\",\n pupilSize: 0.45,\n eyeSize: 0.855,\n showTopTeeth: true,\n topTeethWidth: 1.39,\n topTeethHeight: 0.86,\n topTeethOffsetX: -0.06,\n topTeethOffsetY: -0.30,\n topTeethDepth: 0.08,\n showBottomTeeth: true,\n bottomTeethWidth: 1.21,\n bottomTeethHeight: 0.66,\n bottomTeethOffsetX: -0.06,\n bottomTeethOffsetY: 0.26,\n bottomTeethDepth: 0.28,\n teethScale: 0.75,\n teethAnchorBlend: 0.79,\n showTongue: true,\n tongueColor: \"#d13d69\",\n tongueDepth: 0.187,\n lipOpacity: 0.095,\n eyelashOpacity: 1.0,\n eyebrowOpacity: 0,\n ambientIntensity: 1.982,\n lightIntensity: 2.445,\n lightColor: \"#ffffff\",\n lightX: 5,\n lightY: 2,\n lightZ: 5,\n isoZoom: 2.5,\n frameDelay: 1,\n showDelayedVideo: true,\n // Video effect settings\n videoEffectStyle: \"none\",\n videoEffectParams: {},\n showVideoEffect: false,\n};\n\nconst LANDMARKS = {\n LIPS_OUTER: [61, 146, 91, 181, 84, 17, 314, 405, 321, 375, 291, 409, 270, 269, 267, 0, 37, 39, 40, 185, 61],\n LIPS_INNER: [78, 95, 88, 178, 87, 14, 317, 402, 318, 324, 308, 415, 310, 311, 312, 13, 82, 81, 80, 191, 78],\n LEFT_EYE: [33, 7, 163, 144, 145, 153, 154, 155, 133, 173, 157, 158, 159, 160, 161, 246, 33],\n LEFT_EYE_LOOP: [33, 246, 161, 160, 159, 158, 157, 173, 133, 155, 154, 153, 145, 144, 163, 7, 33],\n LEFT_LID: [33, 246, 161, 160, 159, 158, 157, 173],\n LEFT_BROW: [70, 63, 105, 66, 107, 55, 65, 52, 53, 46],\n LEFT_EYE_OUTER: 33,\n LEFT_EYE_INNER: 133,\n RIGHT_EYE: [362, 382, 381, 380, 374, 373, 390, 249, 263, 466, 388, 387, 386, 385, 384, 398, 362],\n RIGHT_EYE_LOOP: [362, 398, 384, 385, 386, 387, 388, 466, 263, 249, 390, 373, 374, 380, 381, 382, 362],\n RIGHT_LID: [263, 466, 388, 387, 386, 385, 384, 398],\n RIGHT_BROW: [300, 293, 334, 296, 336, 285, 295, 282, 283, 276],\n RIGHT_EYE_OUTER: 263,\n RIGHT_EYE_INNER: 362,\n NOSE_TIP: 1,\n CHIN: 152,\n L_CHEEK: 234,\n R_CHEEK: 454,\n FACE_TOP: 10,\n MOUTH_LEFT: 61,\n MOUTH_RIGHT: 291,\n MOUTH_TOP: 13,\n MOUTH_BOTTOM: 14,\n};\n\nfunction getActiveIndices() {\n const indices = new Set();\n Object.values(LANDMARKS).forEach(v => \n Array.isArray(v) ? v.forEach(i => indices.add(i)) : indices.add(v)\n );\n return indices;\n}\n\nconst ACTIVE_INDICES = getActiveIndices();\n\nfunction loadConfig() {\n try {\n const saved = localStorage.getItem(STORAGE_KEY);\n if (saved) return { ...DEFAULT_CONFIG, ...JSON.parse(saved) };\n } catch (e) { \n console.warn('Load config failed:', e); \n }\n return { ...DEFAULT_CONFIG };\n}\n\nfunction saveConfig(config) {\n try {\n localStorage.setItem(STORAGE_KEY, JSON.stringify(config));\n showToast('Configuration saved');\n } catch (e) {\n showToast('Failed to save');\n }\n}\n\nfunction resetConfig() {\n localStorage.removeItem(STORAGE_KEY);\n showToast('Resetting...');\n setTimeout(() => location.reload(), 800);\n}\n\nfunction exportConfig(config) {\n const dataStr = JSON.stringify(config, null, 2);\n const blob = new Blob([dataStr], { type: 'application/json' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = 'facelab-config.json';\n a.click();\n URL.revokeObjectURL(url);\n}\n\nfunction showToast(message) {\n const toast = document.getElementById('toast');\n if (!toast) return;\n toast.textContent = message;\n toast.classList.add('show');\n setTimeout(() => toast.classList.remove('show'), 2500);\n}\n\nfunction bindSlider(id, config, configKey, valueId, transform = v => v, format = v => v.toFixed(2)) {\n const slider = document.getElementById(id);\n const valueEl = document.getElementById(valueId);\n if (!slider) return;\n\n slider.value = config[configKey];\n if (valueEl) valueEl.textContent = format(config[configKey]);\n\n slider.oninput = () => {\n config[configKey] = transform(parseFloat(slider.value));\n if (valueEl) valueEl.textContent = format(config[configKey]);\n };\n}\n\nfunction bindColor(id, config, configKey, previewId, hexId, onChange) {\n const input = document.getElementById(id);\n const preview = document.getElementById(previewId);\n const hex = document.getElementById(hexId);\n if (!input) return;\n\n input.value = config[configKey];\n if (preview) preview.style.background = config[configKey];\n if (hex) hex.textContent = config[configKey];\n\n if (preview) preview.onclick = () => input.click();\n\n input.oninput = () => {\n config[configKey] = input.value;\n if (preview) preview.style.background = input.value;\n if (hex) hex.textContent = input.value;\n if (onChange) onChange(input.value);\n };\n}\n\nfunction bindToggle(id, config, configKey, onChange) {\n const toggle = document.getElementById(id);\n if (!toggle) return;\n\n toggle.classList.toggle('active', config[configKey]);\n\n toggle.onclick = () => {\n config[configKey] = !config[configKey];\n toggle.classList.toggle('active', config[configKey]);\n if (onChange) onChange(config[configKey]);\n };\n}\n\nclass VideoFrameBuffer {\n constructor(maxFrames = 15) {\n this.maxFrames = maxFrames;\n this.frames = [];\n this.frameNumbers = [];\n this.currentFrameNumber = 0;\n }\n\n captureFrame(video, frameNumber) {\n if (!video || video.readyState < 2) return;\n\n const canvas = document.createElement(\"canvas\");\n canvas.width = video.videoWidth || 640;\n canvas.height = video.videoHeight || 480;\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return;\n\n ctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n\n this.frames.push(canvas);\n this.frameNumbers.push(frameNumber);\n this.currentFrameNumber = frameNumber;\n\n while (this.frames.length > this.maxFrames) {\n this.frames.shift();\n this.frameNumbers.shift();\n }\n }\n\n getDelayedFrame(delayFrames) {\n if (this.frames.length === 0) return null;\n\n const index = Math.max(0, this.frames.length - 1 - delayFrames);\n return {\n canvas: this.frames[index],\n frameNumber: this.frameNumbers[index],\n currentFrameNumber: this.currentFrameNumber,\n actualDelay: this.frames.length - 1 - index,\n bufferedFrames: this.frames.length,\n };\n }\n\n clear() {\n this.frames = [];\n this.frameNumbers = [];\n }\n}\n\nlet currentFaceTiltX = 0;\nlet currentFaceTiltY = 0;\n\nfunction updateParallax(tiltX, tiltY) {\n const parallaxBg = document.getElementById('parallax-bg');\n if (!parallaxBg) return;\n \n currentFaceTiltX += (tiltX - currentFaceTiltX) * 0.1;\n currentFaceTiltY += (tiltY - currentFaceTiltY) * 0.1;\n const translateX = -currentFaceTiltX * 30;\n const translateY = -currentFaceTiltY * 15;\n parallaxBg.style.transform = \\`translate(\\${translateX}px, \\${translateY}px)\\`;\n}\n\nfunction createWizardState() {\n return {\n currentStep: 0,\n totalSteps: 5,\n stepZoomModes: ['face', 'eyes', 'mouth', 'mouth', 'face']\n };\n}\n\nfunction updateWizardUI(state, devView) {\n document.querySelectorAll('.progress-step').forEach((el, i) => {\n el.classList.remove('active', 'completed');\n if (i < state.currentStep) el.classList.add('completed');\n else if (i === state.currentStep) el.classList.add('active');\n });\n\n document.querySelectorAll('.step-label').forEach((el, i) => {\n el.classList.remove('active', 'completed');\n if (i < state.currentStep) el.classList.add('completed');\n else if (i === state.currentStep) el.classList.add('active');\n });\n\n document.querySelectorAll('.step-panel').forEach((el, i) => {\n el.classList.toggle('active', i === state.currentStep);\n });\n\n const prevBtn = document.getElementById('prev-step');\n if (prevBtn) prevBtn.style.visibility = state.currentStep === 0 ? 'hidden' : 'visible';\n \n const nextBtn = document.getElementById('next-step');\n if (nextBtn) {\n if (state.currentStep === state.totalSteps - 1) {\n nextBtn.innerHTML = \\`Finish \\`;\n } else {\n nextBtn.innerHTML = \\`Next \\`;\n }\n }\n\n updateZoom(state, devView);\n}\n\nfunction updateZoom(state, devView) {\n const container = document.getElementById('container');\n const indicator = document.getElementById('zoom-indicator');\n const label = document.getElementById('zoom-label');\n if (!container) return;\n\n if (devView) {\n container.classList.remove('zoomed-eyes', 'zoomed-mouth', 'zoomed-face');\n container.classList.add('dev-mode');\n if (indicator) indicator.classList.remove('visible');\n return;\n }\n\n container.classList.remove('zoomed-eyes', 'zoomed-mouth', 'zoomed-face', 'dev-mode');\n\n const zoomMode = state.stepZoomModes[state.currentStep];\n if (zoomMode === 'eyes') {\n container.classList.add('zoomed-eyes');\n if (indicator) indicator.classList.add('visible');\n if (label) label.textContent = 'Zoomed: Eyes';\n } else if (zoomMode === 'mouth') {\n container.classList.add('zoomed-mouth');\n if (indicator) indicator.classList.add('visible');\n if (label) label.textContent = 'Zoomed: Mouth';\n } else {\n if (indicator) indicator.classList.remove('visible');\n }\n}\n\nfunction goToStep(state, step, devView) {\n state.currentStep = Math.max(0, Math.min(state.totalSteps - 1, step));\n updateWizardUI(state, devView);\n}\n\nconst pointCache = {};\nconst tempVec = new THREE.Vector3();\n\nfunction projectPoint(index, positions, matrixWorld, camera, w, h, lerpFactor) {\n tempVec.set(positions[index*3], positions[index*3+1], positions[index*3+2]);\n tempVec.applyMatrix4(matrixWorld);\n tempVec.project(camera);\n\n const targetX = (tempVec.x + 1) / 2 * w;\n const targetY = (-tempVec.y + 1) / 2 * h;\n\n if (!pointCache[index]) {\n pointCache[index] = { x: targetX, y: targetY };\n } else {\n const p = pointCache[index];\n p.x += (targetX - p.x) * lerpFactor;\n p.y += (targetY - p.y) * lerpFactor;\n }\n return pointCache[index];\n}\n\nfunction drawPath(ctx, points, isClosed, style = {}) {\n if (!points || points.length < 2) return;\n ctx.save();\n\n if (style.blend) ctx.globalCompositeOperation = style.blend;\n if (style.blur) ctx.filter = \\`blur(\\${style.blur}px)\\`;\n\n ctx.beginPath();\n ctx.moveTo(points[0].x, points[0].y);\n for (let i = 1; i < points.length; i++) ctx.lineTo(points[i].x, points[i].y);\n if (isClosed) ctx.closePath();\n\n if (style.fill) { ctx.fillStyle = style.fill; ctx.fill(); }\n if (style.stroke) {\n ctx.strokeStyle = style.stroke;\n ctx.lineWidth = style.lineWidth || 1;\n ctx.lineCap = 'round';\n ctx.lineJoin = 'round';\n ctx.stroke();\n }\n ctx.restore();\n}\n\nfunction calculateEyeCenter(points, loopIndices) {\n let sumX = 0, sumY = 0, count = 0;\n for (const idx of loopIndices) {\n if (points[idx]) {\n sumX += points[idx].x;\n sumY += points[idx].y;\n count++;\n }\n }\n return count === 0 ? null : { x: sumX / count, y: sumY / count };\n}\n\nfunction drawCartoonEye(ctx, points, loopIndices, outerIdx, innerIdx, scale, config) {\n const eyePoints = loopIndices.map(i => points[i]).filter(p => p);\n if (eyePoints.length < 3) return;\n\n const irisCenter = calculateEyeCenter(points, loopIndices);\n if (!irisCenter) return;\n\n const outerCorner = points[outerIdx];\n const innerCorner = points[innerIdx];\n if (!outerCorner || !innerCorner) return;\n\n const eyeWidth = Math.hypot(outerCorner.x - innerCorner.x, outerCorner.y - innerCorner.y);\n if (eyeWidth < 1 || !isFinite(eyeWidth)) return;\n\n const irisRadius = (eyeWidth * 0.35) * config.eyeSize;\n if (irisRadius < 1 || !isFinite(irisRadius)) return;\n\n ctx.save();\n\n ctx.beginPath();\n ctx.moveTo(eyePoints[0].x, eyePoints[0].y);\n for (let i = 1; i < eyePoints.length; i++) ctx.lineTo(eyePoints[i].x, eyePoints[i].y);\n ctx.closePath();\n ctx.clip();\n\n ctx.fillStyle = '#ffffff';\n ctx.fill();\n ctx.lineWidth = 3 * scale;\n ctx.strokeStyle = 'rgba(0,0,0,0.1)';\n ctx.stroke();\n\n const grd = ctx.createRadialGradient(\n irisCenter.x, irisCenter.y, irisRadius * 0.1,\n irisCenter.x, irisCenter.y, irisRadius\n );\n grd.addColorStop(0, '#ffffff');\n grd.addColorStop(0.2, config.eyeColor);\n grd.addColorStop(0.8, config.eyeColor);\n grd.addColorStop(1, '#0a0a0a');\n\n ctx.fillStyle = grd;\n ctx.beginPath();\n ctx.arc(irisCenter.x, irisCenter.y, irisRadius, 0, Math.PI * 2);\n ctx.fill();\n\n ctx.fillStyle = '#000000';\n ctx.beginPath();\n ctx.arc(irisCenter.x, irisCenter.y, irisRadius * config.pupilSize, 0, Math.PI * 2);\n ctx.fill();\n\n ctx.fillStyle = 'rgba(255,255,255,0.9)';\n ctx.beginPath();\n ctx.arc(\n irisCenter.x + irisRadius * 0.3,\n irisCenter.y - irisRadius * 0.3,\n irisRadius * 0.18,\n 0, Math.PI * 2\n );\n ctx.fill();\n\n ctx.restore();\n\n ctx.save();\n ctx.beginPath();\n ctx.moveTo(eyePoints[0].x, eyePoints[0].y);\n for (let i = 1; i < eyePoints.length; i++) ctx.lineTo(eyePoints[i].x, eyePoints[i].y);\n ctx.closePath();\n ctx.strokeStyle = '#000000';\n ctx.lineWidth = 2 * scale;\n ctx.lineJoin = 'round';\n ctx.stroke();\n ctx.restore();\n}\n\nclass SVGTeethRenderer {\n constructor() {\n this.topTeethImage = null;\n this.bottomTeethImage = null;\n this.loaded = false;\n this.loadTeethImages();\n }\n\n loadTeethImages() {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(TEETH_SVG, 'image/svg+xml');\n const paths = svgDoc.querySelectorAll('path');\n\n const topPaths = [];\n const bottomPaths = [];\n\n paths.forEach(path => {\n const d = path.getAttribute('d');\n if (!d) return;\n const match = d.match(/M\\\\s*([\\\\d.]+)\\\\s+([\\\\d.]+)/);\n if (match) {\n const y = parseFloat(match[2]);\n if (y < 1000) topPaths.push(path.outerHTML);\n else bottomPaths.push(path.outerHTML);\n }\n });\n\n const topSVG = \\`\\`;\n const bottomSVG = \\`\\`;\n\n this.topTeethImage = new Image();\n this.bottomTeethImage = new Image();\n\n const topBlob = new Blob([topSVG], { type: 'image/svg+xml' });\n const bottomBlob = new Blob([bottomSVG], { type: 'image/svg+xml' });\n\n this.topTeethImage.src = URL.createObjectURL(topBlob);\n this.bottomTeethImage.src = URL.createObjectURL(bottomBlob);\n\n let loadCount = 0;\n const checkLoaded = () => { if (++loadCount === 2) this.loaded = true; };\n\n this.topTeethImage.onload = checkLoaded;\n this.bottomTeethImage.onload = checkLoaded;\n }\n\n render(ctx, points, canvasW, canvasH, config) {\n if (!this.loaded) return;\n\n const mouthLeft = points[LANDMARKS.MOUTH_LEFT];\n const mouthRight = points[LANDMARKS.MOUTH_RIGHT];\n const mouthTop = points[LANDMARKS.MOUTH_TOP];\n const mouthBottom = points[LANDMARKS.MOUTH_BOTTOM];\n const lCheek = points[LANDMARKS.L_CHEEK];\n const rCheek = points[LANDMARKS.R_CHEEK];\n\n if (!mouthLeft || !mouthRight || !mouthTop || !mouthBottom || !lCheek || !rCheek) return;\n\n const faceWidth = Math.hypot(rCheek.x - lCheek.x, rCheek.y - lCheek.y);\n const axisX = mouthRight.x - mouthLeft.x;\n const axisY = mouthRight.y - mouthLeft.y;\n const mouthWidth = Math.hypot(axisX, axisY);\n\n if (mouthWidth < 1) return;\n\n const ux = axisX / mouthWidth;\n const uy = axisY / mouthWidth;\n const vx = uy;\n const vy = -ux;\n const mouthAngle = Math.atan2(uy, ux);\n\n const originX = (mouthLeft.x + mouthRight.x) / 2;\n const originY = (mouthLeft.y + mouthRight.y) / 2;\n\n const topDx = mouthTop.x - originX;\n const topDy = mouthTop.y - originY;\n const topLocalY = topDx * vx + topDy * vy;\n\n const bottomDx = mouthBottom.x - originX;\n const bottomDy = mouthBottom.y - originY;\n const bottomLocalY = bottomDx * vx + bottomDy * vy;\n\n const mouthOpenness = topLocalY - bottomLocalY;\n if (mouthOpenness < faceWidth * 0.02) return;\n\n const toScreen = (localX, localY) => ({\n x: originX + localX * ux + localY * vx,\n y: originY + localX * uy + localY * vy\n });\n\n ctx.save();\n ctx.beginPath();\n const innerLip = LANDMARKS.LIPS_INNER.map(i => points[i]).filter(p => p);\n if (innerLip.length > 2) {\n ctx.moveTo(innerLip[0].x, innerLip[0].y);\n for (let i = 1; i < innerLip.length; i++) ctx.lineTo(innerLip[i].x, innerLip[i].y);\n ctx.closePath();\n ctx.clip();\n }\n\n const throatGrad = ctx.createRadialGradient(originX, originY, 0, originX, originY, mouthWidth);\n throatGrad.addColorStop(0, '#0a0202');\n throatGrad.addColorStop(0.5, '#1a0508');\n throatGrad.addColorStop(1, '#2a0a10');\n ctx.fillStyle = throatGrad;\n ctx.fillRect(0, 0, canvasW, canvasH);\n\n if (config.showTongue) {\n const tongueLocalY = bottomLocalY * (1 - config.tongueDepth);\n const tonguePos = toScreen(0, tongueLocalY);\n this.drawTongue(ctx, tonguePos.x, tonguePos.y, mouthWidth * 0.5, mouthOpenness * 0.4, mouthAngle, config);\n }\n\n if (config.showTopTeeth && this.topTeethImage) {\n const baseLocalY = topLocalY * (1 - config.topTeethDepth);\n const teethLocalX = config.topTeethOffsetX * mouthWidth;\n const teethLocalY = baseLocalY - config.topTeethOffsetY * mouthOpenness;\n const teethPos = toScreen(teethLocalX, teethLocalY);\n\n const topWidth = mouthWidth * 1.1 * config.teethScale * config.topTeethWidth;\n const topHeight = topWidth * 0.5 * config.topTeethHeight;\n\n ctx.save();\n ctx.translate(teethPos.x, teethPos.y);\n ctx.rotate(mouthAngle);\n ctx.drawImage(this.topTeethImage, -topWidth / 2, -topHeight * 0.1, topWidth, topHeight);\n ctx.restore();\n }\n\n if (config.showBottomTeeth && this.bottomTeethImage) {\n const baseLocalY = bottomLocalY * (1 - config.bottomTeethDepth);\n const teethLocalX = config.bottomTeethOffsetX * mouthWidth;\n const teethLocalY = baseLocalY - config.bottomTeethOffsetY * mouthOpenness;\n const teethPos = toScreen(teethLocalX, teethLocalY);\n\n const bottomWidth = mouthWidth * 1.1 * config.teethScale * config.bottomTeethWidth;\n const bottomHeight = bottomWidth * 0.5 * config.bottomTeethHeight;\n\n ctx.save();\n ctx.translate(teethPos.x, teethPos.y);\n ctx.rotate(mouthAngle);\n ctx.drawImage(this.bottomTeethImage, -bottomWidth / 2, -bottomHeight * 0.7, bottomWidth, bottomHeight);\n ctx.restore();\n }\n\n ctx.restore();\n }\n\n drawTongue(ctx, x, y, w, h, angle, config) {\n ctx.save();\n ctx.translate(x, y);\n ctx.rotate(angle);\n\n const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, w);\n gradient.addColorStop(0, config.tongueColor);\n gradient.addColorStop(0.7, '#a02020');\n gradient.addColorStop(1, '#601010');\n\n ctx.fillStyle = gradient;\n ctx.beginPath();\n ctx.ellipse(0, h * 0.2, w, h, 0, 0, Math.PI);\n ctx.fill();\n\n ctx.strokeStyle = 'rgba(0,0,0,0.3)';\n ctx.lineWidth = 2;\n ctx.beginPath();\n ctx.moveTo(0, -h * 0.5);\n ctx.lineTo(0, h * 0.3);\n ctx.stroke();\n\n ctx.restore();\n }\n}\n\nfunction createCelMaterial(skinColor) {\n return new THREE.ShaderMaterial({\n vertexShader: \\`\n varying vec3 vNormal;\n void main() {\n vNormal = normalize(normalMatrix * normal);\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n \\`,\n fragmentShader: \\`\n uniform vec3 uColor;\n varying vec3 vNormal;\n void main() {\n vec3 light = normalize(vec3(0.5, 0.8, 1.0));\n float d = dot(vNormal, light);\n float i = smoothstep(0.0, 0.1, d) * 0.3 + 0.7;\n gl_FragColor = vec4(uColor * i, 1.0);\n }\n \\`,\n uniforms: { uColor: { value: new THREE.Color(skinColor) } }\n });\n}\n\nfunction createOutlineMaterial(outlineColor, outlineWidth) {\n return new THREE.ShaderMaterial({\n vertexShader: \\`\n uniform float uWidth;\n void main() {\n vec3 pos = position + normal * uWidth;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);\n }\n \\`,\n fragmentShader: \\`\n uniform vec3 uColor;\n void main() { gl_FragColor = vec4(uColor, 1.0); }\n \\`,\n uniforms: {\n uWidth: { value: outlineWidth },\n uColor: { value: new THREE.Color(outlineColor) }\n },\n side: THREE.BackSide\n });\n}\n\nfunction createStandardMaterial() {\n return new THREE.MeshStandardMaterial({\n color: 0xffffff, \n transparent: true, \n opacity: 0.5,\n roughness: 0.5, \n metalness: 0.1\n });\n}\n\n// ============================================================================\n// VIDEO EFFECT SYSTEM - Head Position Based Transform\n// ============================================================================\n\nclass VideoEffectSystem {\n constructor(video, container) {\n this.video = video;\n this.container = container;\n this.currentStyle = 'none';\n this.params = {};\n this.mesh = null;\n this.material = null;\n this.scene = null;\n this.camera = null;\n this.renderer = null;\n this.clock = new THREE.Clock();\n this.anchor = null;\n this.enabled = false;\n this.faceMesh = null;\n \n this.init();\n }\n\n init() {\n // Create a separate renderer for video effects\n this.effectCanvas = document.createElement('canvas');\n this.effectCanvas.id = 'video-effect-canvas';\n this.effectCanvas.style.cssText = \\`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 0;\n pointer-events: none;\n transform: scaleX(-1);\n \\`;\n \n this.scene = new THREE.Scene();\n this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 10);\n this.camera.position.z = 1;\n \n this.renderer = new THREE.WebGLRenderer({ \n canvas: this.effectCanvas,\n alpha: true,\n antialias: false \n });\n this.renderer.setSize(640, 480);\n }\n\n attachToContainer() {\n if (this.container && !this.effectCanvas.parentNode) {\n // Insert at the beginning of the container\n this.container.insertBefore(this.effectCanvas, this.container.firstChild);\n }\n }\n\n setVideo(video) {\n this.video = video;\n if (video) {\n this.videoTexture = new THREE.VideoTexture(video);\n this.videoTexture.minFilter = THREE.LinearFilter;\n this.videoTexture.magFilter = THREE.LinearFilter;\n this.createMesh();\n }\n }\n\n createMesh() {\n if (this.mesh) {\n this.scene.remove(this.mesh);\n }\n\n const style = VIDEO_EFFECT_STYLES.find(s => s.id === this.currentStyle) || VIDEO_EFFECT_STYLES[0];\n \n // Initialize params for this style if not exists\n if (!this.params[this.currentStyle]) {\n this.params[this.currentStyle] = {};\n style.parameters.forEach(p => {\n this.params[this.currentStyle][p.id] = p.default;\n });\n }\n\n const uniforms = {\n map: { value: this.videoTexture },\n time: { value: 0 },\n resolution: { value: new THREE.Vector2(640, 480) },\n headPosition: { value: new THREE.Vector2(0.5, 0.5) },\n headRotation: { value: new THREE.Vector3(0, 0, 0) }\n };\n\n // Add style-specific params\n style.parameters.forEach(p => {\n uniforms[p.id] = { value: this.params[this.currentStyle][p.id] ?? p.default };\n });\n\n this.material = new THREE.ShaderMaterial({\n uniforms,\n vertexShader: \\`\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n \\`,\n fragmentShader: style.fragmentShader,\n transparent: true\n });\n\n const geometry = new THREE.PlaneGeometry(2, 2);\n this.mesh = new THREE.Mesh(geometry, this.material);\n this.scene.add(this.mesh);\n }\n\n setStyle(styleId) {\n this.currentStyle = styleId;\n if (this.videoTexture) {\n this.createMesh();\n }\n }\n\n setParam(paramId, value) {\n if (!this.params[this.currentStyle]) {\n this.params[this.currentStyle] = {};\n }\n this.params[this.currentStyle][paramId] = value;\n \n if (this.material && this.material.uniforms[paramId]) {\n this.material.uniforms[paramId].value = value;\n }\n }\n\n getParam(paramId) {\n return this.params[this.currentStyle]?.[paramId] ?? 0;\n }\n\n updateHeadTransform(position, rotation) {\n if (this.material) {\n if (this.material.uniforms.headPosition) {\n this.material.uniforms.headPosition.value.set(position.x, position.y);\n }\n if (this.material.uniforms.headRotation) {\n this.material.uniforms.headRotation.value.set(rotation.x, rotation.y, rotation.z);\n }\n }\n }\n\n setEnabled(enabled) {\n this.enabled = enabled;\n this.effectCanvas.style.display = enabled ? 'block' : 'none';\n }\n\n render() {\n if (!this.enabled || !this.material || this.currentStyle === 'none') return;\n\n this.material.uniforms.time.value = this.clock.getElapsedTime();\n\n if (this.video && this.video.videoWidth) {\n this.material.uniforms.resolution.value.set(\n this.video.videoWidth,\n this.video.videoHeight\n );\n }\n\n this.renderer.render(this.scene, this.camera);\n }\n\n resize(width, height) {\n this.renderer.setSize(width, height);\n if (this.material) {\n this.material.uniforms.resolution.value.set(width, height);\n }\n }\n}\n\n// ============================================================================\n// VIDEO EFFECTS UI\n// ============================================================================\n\nfunction buildVideoEffectsUI(effectSystem, config) {\n const effectGrid = document.getElementById('effect-grid');\n const effectParams = document.getElementById('effect-params');\n \n if (!effectGrid) return;\n\n // Build effect buttons\n VIDEO_EFFECT_STYLES.forEach(style => {\n const btn = document.createElement('button');\n btn.className = 'effect-btn' + (config.videoEffectStyle === style.id ? ' active' : '');\n btn.dataset.id = style.id;\n btn.innerHTML = \\`\n \\${style.preview}\n \\${style.name}\n \\`;\n btn.onclick = () => selectVideoEffect(style.id, effectSystem, config);\n effectGrid.appendChild(btn);\n });\n\n // Initial params build\n buildEffectParams(config.videoEffectStyle, effectSystem, config);\n}\n\nfunction selectVideoEffect(styleId, effectSystem, config) {\n config.videoEffectStyle = styleId;\n effectSystem.setStyle(styleId);\n\n // Update active button\n document.querySelectorAll('.effect-btn').forEach(btn => {\n btn.classList.toggle('active', btn.dataset.id === styleId);\n });\n\n // Update params UI\n buildEffectParams(styleId, effectSystem, config);\n\n showToast(\\`Effect: \\${VIDEO_EFFECT_STYLES.find(s => s.id === styleId)?.name || 'None'}\\`);\n}\n\nfunction buildEffectParams(styleId, effectSystem, config) {\n const effectParams = document.getElementById('effect-params');\n if (!effectParams) return;\n\n const style = VIDEO_EFFECT_STYLES.find(s => s.id === styleId);\n \n if (!style || style.parameters.length === 0) {\n effectParams.innerHTML = '

No parameters for this effect

';\n return;\n }\n\n // Initialize params in config if needed\n if (!config.videoEffectParams[styleId]) {\n config.videoEffectParams[styleId] = {};\n style.parameters.forEach(p => {\n config.videoEffectParams[styleId][p.id] = p.default;\n });\n }\n\n effectParams.innerHTML = '';\n const params = config.videoEffectParams[styleId];\n\n style.parameters.forEach(param => {\n const div = document.createElement('div');\n div.className = 'effect-param';\n \n const formatValue = (v) => {\n if (param.step >= 1) return Math.round(v);\n return v.toFixed(param.step < 0.01 ? 3 : 2);\n };\n\n div.innerHTML = \\`\n

\n \\${param.name}\n \\${formatValue(params[param.id])}\n

\n \n \\`;\n effectParams.appendChild(div);\n\n const slider = div.querySelector('input');\n slider.oninput = () => {\n const v = parseFloat(slider.value);\n params[param.id] = v;\n document.getElementById('effect-v-' + param.id).textContent = formatValue(v);\n effectSystem.setParam(param.id, v);\n };\n });\n}\n\n// ============================================================================\n// MAIN INIT\n// ============================================================================\n\nasync function initFaceLab() {\n const CONFIG = loadConfig();\n const wizardState = createWizardState();\n const teethRenderer = new SVGTeethRenderer();\n\n const container = document.querySelector(\"#container\");\n if (!container) {\n console.error('Container not found');\n return;\n }\n \n const mindarThree = new MindARThree({ container });\n const { renderer, scene, camera: arCamera } = mindarThree;\n\n const frameBuffer = new VideoFrameBuffer(15);\n let globalFrameNumber = 0;\n\n // Initialize video effect system\n const videoEffectSystem = new VideoEffectSystem(null, container);\n videoEffectSystem.setStyle(CONFIG.videoEffectStyle);\n videoEffectSystem.setEnabled(CONFIG.showVideoEffect);\n\n const delayedVideoCanvas = document.createElement(\"canvas\");\n delayedVideoCanvas.id = \"delayed-video-canvas\";\n delayedVideoCanvas.style.cssText = \\`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n pointer-events: none;\n transform: scaleX(-1);\n \\`;\n const delayedCtx = delayedVideoCanvas.getContext(\"2d\");\n\n const aspect = 640 / 480;\n const frustumSize = 0.5;\n const isoCamera = new THREE.OrthographicCamera(\n -frustumSize * aspect,\n frustumSize * aspect,\n frustumSize,\n -frustumSize,\n 0.001,\n 1000\n );\n isoCamera.position.set(0.3, 0.3, 0.3);\n isoCamera.lookAt(0, 0, 0);\n\n const controls = new OrbitControls(isoCamera, renderer.domElement);\n controls.enableZoom = true;\n controls.enablePan = true;\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.enabled = false;\n\n let activeCamera = arCamera;\n\n const ambientLight = new THREE.AmbientLight(0xffffff, CONFIG.ambientIntensity);\n scene.add(ambientLight);\n\n const dirLight = new THREE.DirectionalLight(new THREE.Color(CONFIG.lightColor), CONFIG.lightIntensity);\n dirLight.position.set(CONFIG.lightX, CONFIG.lightY, CONFIG.lightZ);\n scene.add(dirLight);\n\n const gridHelper = new THREE.GridHelper(1, 10, 0x444444, 0x222222);\n gridHelper.visible = false;\n scene.add(gridHelper);\n\n const axesHelper = new THREE.AxesHelper(0.2);\n axesHelper.visible = false;\n scene.add(axesHelper);\n\n const celMat = createCelMaterial(CONFIG.skinColor);\n const outlineMat = createOutlineMaterial(CONFIG.outlineColor, CONFIG.outlineWidth);\n const standardMat = createStandardMaterial();\n\n const faceMesh = mindarThree.addFaceMesh();\n faceMesh.material = celMat;\n scene.add(faceMesh);\n\n const outlineMesh = new THREE.Mesh(faceMesh.geometry, outlineMat);\n outlineMesh.scale.multiplyScalar(1.02);\n scene.add(outlineMesh);\n\n const canvas = document.getElementById('overlay-canvas');\n if (!canvas) {\n console.error('Overlay canvas not found');\n return;\n }\n const ctx = canvas.getContext('2d', { alpha: true, desynchronized: true });\n\n let lastTime = performance.now();\n let frames = 0;\n let fpsValue = 60;\n\n const handleResize = () => {\n const dpr = window.devicePixelRatio;\n const w = 640;\n const h = 480;\n\n renderer.setSize(w, h);\n renderer.setPixelRatio(dpr);\n\n canvas.width = w * dpr;\n canvas.height = h * dpr;\n\n delayedVideoCanvas.width = w;\n delayedVideoCanvas.height = h;\n\n arCamera.aspect = w / h;\n arCamera.updateProjectionMatrix();\n\n videoEffectSystem.resize(w, h);\n };\n\n handleResize();\n\n // Video Effects Panel UI\n const toggleEffectsBtn = document.getElementById('toggle-effects-btn');\n const videoEffectsPanel = document.getElementById('video-effects-panel');\n const closeEffectsPanel = document.getElementById('close-effects-panel');\n\n if (toggleEffectsBtn && videoEffectsPanel) {\n toggleEffectsBtn.onclick = () => {\n const isVisible = videoEffectsPanel.classList.toggle('visible');\n toggleEffectsBtn.classList.toggle('active', isVisible);\n \n // Enable/disable effect system\n CONFIG.showVideoEffect = isVisible;\n videoEffectSystem.setEnabled(isVisible);\n \n // Hide original video when effect is active\n const video = container.querySelector('video');\n if (video) {\n video.style.opacity = isVisible ? '0' : (CONFIG.showDelayedVideo ? '0' : '1');\n }\n };\n\n if (closeEffectsPanel) {\n closeEffectsPanel.onclick = () => {\n videoEffectsPanel.classList.remove('visible');\n toggleEffectsBtn.classList.remove('active');\n CONFIG.showVideoEffect = false;\n videoEffectSystem.setEnabled(false);\n \n const video = container.querySelector('video');\n if (video) {\n video.style.opacity = CONFIG.showDelayedVideo ? '0' : '1';\n }\n };\n }\n }\n\n // Build video effects UI\n buildVideoEffectsUI(videoEffectSystem, CONFIG);\n\n const prevBtn = document.getElementById('prev-step');\n const nextBtn = document.getElementById('next-step');\n\n if (prevBtn) {\n prevBtn.onclick = () => goToStep(wizardState, wizardState.currentStep - 1, CONFIG.devView);\n }\n\n if (nextBtn) {\n nextBtn.onclick = () => {\n if (wizardState.currentStep === wizardState.totalSteps - 1) {\n saveConfig(CONFIG);\n showToast('Configuration complete!');\n } else {\n goToStep(wizardState, wizardState.currentStep + 1, CONFIG.devView);\n }\n };\n }\n\n document.querySelectorAll('.progress-step').forEach(el => {\n el.onclick = () => goToStep(wizardState, parseInt(el.dataset.step || '0'), CONFIG.devView);\n });\n\n document.querySelectorAll('.step-label').forEach(el => {\n el.onclick = () => goToStep(wizardState, parseInt(el.dataset.step || '0'), CONFIG.devView);\n });\n\n const frameDelaySlider = document.getElementById(\"frame-delay\");\n const frameDelayValue = document.getElementById(\"frame-delay-value\");\n if (frameDelaySlider) {\n frameDelaySlider.value = CONFIG.frameDelay;\n if (frameDelayValue) frameDelayValue.textContent = CONFIG.frameDelay;\n\n frameDelaySlider.oninput = () => {\n CONFIG.frameDelay = parseInt(frameDelaySlider.value);\n if (frameDelayValue) frameDelayValue.textContent = CONFIG.frameDelay;\n const delayPill = document.getElementById(\"delay-pill\");\n if (delayPill) delayPill.textContent = \\`Delay: \\${CONFIG.frameDelay}f\\`;\n };\n }\n\n const delayedVideoToggle = document.getElementById(\"toggle-delayed-video\");\n if (delayedVideoToggle) {\n delayedVideoToggle.classList.toggle(\"active\", CONFIG.showDelayedVideo);\n\n const updateVideoVisibility = () => {\n const video = container.querySelector(\"video\");\n if (video) {\n video.style.opacity = CONFIG.showDelayedVideo ? \"0\" : \"1\";\n }\n delayedVideoCanvas.style.display = CONFIG.showDelayedVideo ? \"block\" : \"none\";\n };\n\n delayedVideoToggle.onclick = () => {\n CONFIG.showDelayedVideo = !CONFIG.showDelayedVideo;\n delayedVideoToggle.classList.toggle(\"active\", CONFIG.showDelayedVideo);\n updateVideoVisibility();\n };\n }\n\n bindColor('skin-color', CONFIG, 'skinColor', 'skin-color-preview', 'skin-color-hex', c => celMat.uniforms.uColor.value.set(c));\n bindColor('outline-color', CONFIG, 'outlineColor', 'outline-color-preview', 'outline-color-hex', c => outlineMat.uniforms.uColor.value.set(c));\n \n const outlineWidthSlider = document.getElementById('outline-width');\n if (outlineWidthSlider) {\n outlineWidthSlider.value = CONFIG.outlineWidth;\n const outlineWidthValue = document.getElementById('outline-width-value');\n if (outlineWidthValue) outlineWidthValue.textContent = CONFIG.outlineWidth.toFixed(3);\n \n outlineWidthSlider.oninput = function() {\n CONFIG.outlineWidth = parseFloat(this.value);\n if (outlineWidthValue) outlineWidthValue.textContent = CONFIG.outlineWidth.toFixed(3);\n outlineMat.uniforms.uWidth.value = CONFIG.outlineWidth;\n };\n }\n\n bindSlider('lerp-factor', CONFIG, 'lerpFactor', 'lerp-value');\n\n document.querySelectorAll('.view-option').forEach(el => {\n el.onclick = () => {\n document.querySelectorAll('.view-option').forEach(e => e.classList.remove('active'));\n el.classList.add('active');\n const mode = el.dataset.mode;\n CONFIG.renderMode = mode === 'cel' ? 'Cel-Shaded' : 'Standard';\n\n if (CONFIG.renderMode === 'Cel-Shaded') {\n faceMesh.material = celMat;\n outlineMesh.visible = true;\n } else {\n faceMesh.material = standardMat;\n outlineMesh.visible = false;\n }\n };\n });\n\n const devToggle = document.getElementById('toggle-dev-view');\n if (devToggle) {\n devToggle.classList.toggle('active', CONFIG.devView);\n \n devToggle.onclick = () => {\n CONFIG.devView = !CONFIG.devView;\n devToggle.classList.toggle('active', CONFIG.devView);\n \n activeCamera = CONFIG.devView ? isoCamera : arCamera;\n controls.enabled = CONFIG.devView;\n gridHelper.visible = CONFIG.devView;\n axesHelper.visible = CONFIG.devView;\n \n const statsPanel = document.getElementById('stats-panel');\n if (statsPanel) statsPanel.classList.toggle('visible', CONFIG.devView);\n\n const video = container.querySelector('video');\n if (video) {\n video.style.opacity = CONFIG.devView \n ? \"0.05\" \n : (CONFIG.showDelayedVideo ? \"0\" : \"1\");\n }\n \n updateWizardUI(wizardState, CONFIG.devView);\n };\n }\n\n bindColor('eye-color', CONFIG, 'eyeColor', 'eye-color-preview', 'eye-color-hex');\n bindSlider('eye-size', CONFIG, 'eyeSize', 'eye-size-value');\n bindSlider('pupil-size', CONFIG, 'pupilSize', 'pupil-size-value');\n bindSlider('eyelash-opacity', CONFIG, 'eyelashOpacity', 'eyelash-value', v => v, v => v.toFixed(1));\n bindSlider('eyebrow-opacity', CONFIG, 'eyebrowOpacity', 'eyebrow-value', v => v, v => v.toFixed(1));\n\n document.querySelectorAll('[data-eye-style]').forEach(btn => {\n btn.onclick = () => {\n document.querySelectorAll('[data-eye-style]').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n CONFIG.eyeStyle = btn.dataset.eyeStyle;\n };\n });\n\n bindSlider('lip-opacity', CONFIG, 'lipOpacity', 'lip-opacity-value');\n bindToggle('toggle-tongue', CONFIG, 'showTongue');\n bindColor('tongue-color', CONFIG, 'tongueColor', 'tongue-color-preview', 'tongue-color-hex');\n bindSlider('tongue-depth', CONFIG, 'tongueDepth', 'tongue-depth-value');\n\n bindSlider('teeth-scale', CONFIG, 'teethScale', 'teeth-scale-value');\n bindToggle('toggle-top-teeth', CONFIG, 'showTopTeeth');\n bindSlider('top-teeth-width', CONFIG, 'topTeethWidth', 'top-teeth-width-value');\n bindSlider('top-teeth-height', CONFIG, 'topTeethHeight', 'top-teeth-height-value');\n bindSlider('top-teeth-x', CONFIG, 'topTeethOffsetX', 'top-teeth-x-value');\n bindSlider('top-teeth-y', CONFIG, 'topTeethOffsetY', 'top-teeth-y-value');\n bindSlider('top-teeth-depth', CONFIG, 'topTeethDepth', 'top-teeth-depth-value');\n\n bindToggle('toggle-bottom-teeth', CONFIG, 'showBottomTeeth');\n bindSlider('bottom-teeth-width', CONFIG, 'bottomTeethWidth', 'bottom-teeth-width-value');\n bindSlider('bottom-teeth-height', CONFIG, 'bottomTeethHeight', 'bottom-teeth-height-value');\n bindSlider('bottom-teeth-x', CONFIG, 'bottomTeethOffsetX', 'bottom-teeth-x-value');\n bindSlider('bottom-teeth-y', CONFIG, 'bottomTeethOffsetY', 'bottom-teeth-y-value');\n bindSlider('bottom-teeth-depth', CONFIG, 'bottomTeethDepth', 'bottom-teeth-depth-value');\n\n const ambientSlider = document.getElementById('ambient-intensity');\n if (ambientSlider) {\n ambientSlider.value = CONFIG.ambientIntensity;\n const ambientValue = document.getElementById('ambient-value');\n if (ambientValue) ambientValue.textContent = CONFIG.ambientIntensity.toFixed(2);\n \n ambientSlider.oninput = function() {\n CONFIG.ambientIntensity = parseFloat(this.value);\n if (ambientValue) ambientValue.textContent = CONFIG.ambientIntensity.toFixed(2);\n ambientLight.intensity = CONFIG.ambientIntensity;\n };\n }\n\n const lightIntensitySlider = document.getElementById('light-intensity');\n if (lightIntensitySlider) {\n lightIntensitySlider.value = CONFIG.lightIntensity;\n const lightIntensityValue = document.getElementById('light-intensity-value');\n if (lightIntensityValue) lightIntensityValue.textContent = CONFIG.lightIntensity.toFixed(2);\n \n lightIntensitySlider.oninput = function() {\n CONFIG.lightIntensity = parseFloat(this.value);\n if (lightIntensityValue) lightIntensityValue.textContent = CONFIG.lightIntensity.toFixed(2);\n dirLight.intensity = CONFIG.lightIntensity;\n };\n }\n\n bindColor('light-color', CONFIG, 'lightColor', 'light-color-preview', 'light-color-hex', c => dirLight.color.set(c));\n\n const lightPosBindings = [\n { id: 'light-x', key: 'lightX', valueId: 'light-x-value', prop: 'x' },\n { id: 'light-y', key: 'lightY', valueId: 'light-y-value', prop: 'y' },\n { id: 'light-z', key: 'lightZ', valueId: 'light-z-value', prop: 'z' }\n ];\n\n lightPosBindings.forEach(({ id, key, valueId, prop }) => {\n const slider = document.getElementById(id);\n if (slider) {\n slider.value = CONFIG[key];\n const valueEl = document.getElementById(valueId);\n if (valueEl) valueEl.textContent = CONFIG[key].toFixed(1);\n\n slider.oninput = function() {\n CONFIG[key] = parseFloat(this.value);\n dirLight.position[prop] = CONFIG[key];\n if (valueEl) valueEl.textContent = CONFIG[key].toFixed(1);\n };\n }\n });\n\n const saveBtn = document.getElementById('save-config');\n if (saveBtn) saveBtn.onclick = () => saveConfig(CONFIG);\n\n const resetBtn = document.getElementById('reset-config');\n if (resetBtn) resetBtn.onclick = resetConfig;\n\n const finishBtn = document.getElementById('finish-wizard');\n if (finishBtn) {\n finishBtn.onclick = () => {\n saveConfig(CONFIG);\n showToast('All done!');\n };\n }\n\n const exportBtn = document.getElementById('export-config');\n if (exportBtn) {\n exportBtn.onclick = () => {\n exportConfig(CONFIG);\n showToast('Config exported');\n };\n }\n\n const toggleBgBtn = document.getElementById('toggle-bg');\n if (toggleBgBtn) {\n toggleBgBtn.onclick = () => {\n CONFIG.videoHidden = !CONFIG.videoHidden;\n const video = container.querySelector('video');\n if (video) {\n video.classList.toggle('video-hidden', CONFIG.videoHidden);\n }\n delayedVideoCanvas.style.display = CONFIG.videoHidden\n ? \"none\"\n : (CONFIG.showDelayedVideo ? \"block\" : \"none\");\n showToast(CONFIG.videoHidden ? 'Background hidden' : 'Background visible');\n };\n }\n\n const textureLoader = new THREE.TextureLoader();\n const fileInput = document.getElementById('file-input');\n if (fileInput) {\n fileInput.addEventListener('change', (e) => {\n const file = e.target.files[0];\n if (!file) return;\n const url = URL.createObjectURL(file);\n textureLoader.load(url, (tex) => {\n tex.colorSpace = THREE.SRGBColorSpace;\n standardMat.map = tex;\n standardMat.opacity = 1.0;\n standardMat.needsUpdate = true;\n faceMesh.material = standardMat;\n outlineMesh.visible = false;\n CONFIG.renderMode = 'Standard';\n showToast('Texture applied');\n });\n });\n }\n\n await mindarThree.start();\n\n const video = container.querySelector(\"video\");\n const threeCanvas = renderer.domElement;\n\n // Set up video effect system with actual video\n if (video) {\n videoEffectSystem.setVideo(video);\n videoEffectSystem.attachToContainer();\n\n video.after(delayedVideoCanvas);\n threeCanvas.style.position = \"absolute\";\n threeCanvas.style.zIndex = \"2\";\n\n if (CONFIG.showDelayedVideo) {\n video.style.opacity = \"0\";\n delayedVideoCanvas.style.display = \"block\";\n } else {\n video.style.opacity = \"1\";\n delayedVideoCanvas.style.display = \"none\";\n }\n }\n\n updateWizardUI(wizardState, CONFIG.devView);\n\n if (localStorage.getItem(STORAGE_KEY)) {\n showToast('Config loaded');\n }\n\n renderer.setAnimationLoop(() => {\n const face = mindarThree.faceMeshes[0];\n const currentCamera = CONFIG.devView ? isoCamera : arCamera;\n globalFrameNumber++;\n\n const videoEl = container.querySelector(\"video\");\n if (videoEl && videoEl.readyState >= 2) {\n frameBuffer.captureFrame(videoEl, globalFrameNumber);\n }\n\n if (CONFIG.showDelayedVideo && !CONFIG.videoHidden && videoEl && delayedCtx) {\n const delayedFrame = frameBuffer.getDelayedFrame(CONFIG.frameDelay);\n if (delayedFrame && delayedFrame.canvas) {\n delayedCtx.clearRect(0, 0, delayedVideoCanvas.width, delayedVideoCanvas.height);\n delayedCtx.drawImage(delayedFrame.canvas, 0, 0, delayedVideoCanvas.width, delayedVideoCanvas.height);\n }\n }\n\n if (CONFIG.devView && face && face.visible) {\n const target = new THREE.Vector3();\n faceMesh.getWorldPosition(target);\n controls.target.copy(target);\n controls.update();\n }\n\n if (face && face.visible) {\n outlineMesh.position.copy(faceMesh.position);\n outlineMesh.quaternion.copy(faceMesh.quaternion);\n outlineMesh.scale.copy(faceMesh.scale).multiplyScalar(1.02);\n outlineMesh.visible = CONFIG.renderMode === 'Cel-Shaded';\n \n const euler = new THREE.Euler().setFromQuaternion(faceMesh.quaternion);\n updateParallax(euler.y * 2, euler.x * 2);\n\n // Update video effect system with head position/rotation\n const headPos = new THREE.Vector3();\n faceMesh.getWorldPosition(headPos);\n headPos.project(currentCamera);\n \n videoEffectSystem.updateHeadTransform(\n { x: (headPos.x + 1) / 2, y: (-headPos.y + 1) / 2 },\n { x: euler.x, y: euler.y, z: euler.z }\n );\n }\n\n // Render video effects\n videoEffectSystem.render();\n\n renderer.render(scene, currentCamera);\n\n const w = canvas.width;\n const h = canvas.height;\n ctx.clearRect(0, 0, w, h);\n\n const s = w / 1080;\n\n if (face && face.visible) {\n const positions = face.geometry.attributes.position.array;\n const matrix = face.matrixWorld;\n\n const points = {};\n for (const i of ACTIVE_INDICES) {\n points[i] = projectPoint(i, positions, matrix, currentCamera, w, h, CONFIG.lerpFactor);\n }\n\n if (CONFIG.eyeStyle === 'Cartoon' || CONFIG.eyeStyle === 'Anime') {\n drawCartoonEye(ctx, points, LANDMARKS.LEFT_EYE_LOOP, LANDMARKS.LEFT_EYE_OUTER, LANDMARKS.LEFT_EYE_INNER, s, CONFIG);\n drawCartoonEye(ctx, points, LANDMARKS.RIGHT_EYE_LOOP, LANDMARKS.RIGHT_EYE_OUTER, LANDMARKS.RIGHT_EYE_INNER, s, CONFIG);\n } else {\n ['LEFT', 'RIGHT'].forEach(side => {\n const eyeIndices = LANDMARKS[\\`\\${side}_EYE\\`];\n const eye = eyeIndices.map(i => points[i]).filter(p => p);\n if (eye.length > 2) {\n drawPath(ctx, eye, true, { fill: 'rgba(255,255,255,0.15)', blend: 'overlay' });\n }\n });\n }\n\n ['LEFT', 'RIGHT'].forEach(side => {\n const lidIndices = LANDMARKS[\\`\\${side}_LID\\`];\n const lid = lidIndices.map(i => points[i]).filter(p => p);\n if (lid.length > 1) {\n drawPath(ctx, lid, false, {\n stroke: \\`rgba(20, 10, 10, \\${CONFIG.eyelashOpacity})\\`,\n lineWidth: 5 * s,\n blur: 1\n });\n }\n });\n\n ['LEFT', 'RIGHT'].forEach(side => {\n const browIndices = LANDMARKS[\\`\\${side}_BROW\\`];\n const brow = browIndices.map(i => points[i]).filter(p => p);\n if (brow.length > 1) {\n drawPath(ctx, brow, false, {\n stroke: \\`rgba(30, 20, 20, \\${CONFIG.eyebrowOpacity})\\`,\n lineWidth: 12 * s,\n blur: 6,\n blend: 'multiply'\n });\n }\n });\n\n teethRenderer.render(ctx, points, w, h, CONFIG);\n\n const lipsOuter = LANDMARKS.LIPS_OUTER.map(i => points[i]).filter(p => p);\n if (lipsOuter.length > 2) {\n drawPath(ctx, lipsOuter, true, {\n fill: \\`rgba(200, 50, 80, \\${CONFIG.lipOpacity})\\`,\n blend: 'multiply',\n blur: 2\n });\n drawPath(ctx, lipsOuter, true, {\n stroke: 'rgba(150, 30, 50, 0.4)',\n lineWidth: 2 * s\n });\n }\n\n const trackingStatus = document.getElementById('tracking-status');\n if (trackingStatus) trackingStatus.textContent = 'Tracking';\n } else {\n const trackingStatus = document.getElementById('tracking-status');\n if (trackingStatus) trackingStatus.textContent = 'Searching...';\n }\n\n frames++;\n const now = performance.now();\n if (now - lastTime >= 1000) {\n fpsValue = frames;\n const frameTimeMs = (1000 / fpsValue).toFixed(1);\n const delayMs = (CONFIG.frameDelay * (1000 / fpsValue)).toFixed(1);\n const delayedFrame = frameBuffer.getDelayedFrame(CONFIG.frameDelay);\n\n const fpsPill = document.getElementById('fps-pill');\n if (fpsPill) fpsPill.textContent = \\`\\${fpsValue} FPS\\`;\n\n const delayPill = document.getElementById(\"delay-pill\");\n if (delayPill) delayPill.textContent = \\`Delay: \\${CONFIG.frameDelay}f (\\${delayMs}ms)\\`;\n\n const statsPanel = document.getElementById('stats-panel');\n if (statsPanel) {\n statsPanel.innerHTML = \\`\n FPS: \\${fpsValue} | Frame: \\${frameTimeMs}ms
\n SVG Teeth: \\${teethRenderer.loaded ? \"OK\" : \"...\"}
\n Step: \\${wizardState.currentStep + 1}/\\${wizardState.totalSteps}
\n Mode: \\${CONFIG.devView ? \"DEV\" : \"LIVE\"}
\n Video Effect: \\${CONFIG.showVideoEffect ? CONFIG.videoEffectStyle : \"OFF\"}
\n ── Frame Sync ──
\n Current Frame: \\${globalFrameNumber}
\n Displayed Frame: \\${delayedFrame ? delayedFrame.frameNumber : \"N/A\"}
\n Buffer: \\${delayedFrame ? delayedFrame.bufferedFrames : 0}/15
\n Delay: \\${CONFIG.frameDelay}f = \\${delayMs}ms\n \\`;\n }\n\n frames = 0;\n lastTime = now;\n }\n });\n}\n\nif (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => initFaceLab());\n} else {\n initFaceLab();\n}\n`;","deleted","label","children",[],[100],{"_105":172,"_96":173,"_154":174,"_156":-5,"_157":140,"_158":175,"_159":22,"_107":176,"_101":177,"_162":178,"_164":179,"_166":22,"_167":-5,"_168":180,"_99":181},"a242504c-e876-11f0-a4e4-42dde27851f2","styles.ts","d73570f0-e857-11f0-8c47-42dde27851f2",63,["D",1767425667446],15,"script","const STYLES = `\n:root {\n --bg-primary: #0a0a0f;\n --bg-secondary: #12121a;\n --bg-tertiary: #1a1a25;\n --bg-card: #16161f;\n --bg-hover: #1e1e2a;\n \n --text-primary: #ffffff;\n --text-secondary: #a0a0b0;\n --text-muted: #606070;\n \n --accent-primary: #6366f1;\n --accent-secondary: #8b5cf6;\n --accent-success: #10b981;\n --accent-warning: #f59e0b;\n --accent-error: #ef4444;\n \n --border-color: #2a2a35;\n --border-radius: 12px;\n --border-radius-sm: 8px;\n \n --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);\n --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);\n --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);\n \n --transition-fast: 150ms ease;\n --transition-normal: 250ms ease;\n \n --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n --font-mono: 'JetBrains Mono', 'Fira Code', monospace;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml, body {\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: var(--font-sans);\n background: var(--bg-primary);\n color: var(--text-primary);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Layout */\n.app-container {\n display: flex;\n width: 100%;\n height: 100%;\n}\n\n.sidebar {\n width: 320px;\n min-width: 320px;\n height: 100%;\n background: var(--bg-secondary);\n border-right: 1px solid var(--border-color);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.main-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n position: relative;\n}\n\n/* Sidebar Header */\n.sidebar-header {\n padding: 20px;\n border-bottom: 1px solid var(--border-color);\n}\n\n.logo {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 16px;\n}\n\n.logo-icon {\n width: 40px;\n height: 40px;\n background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));\n border-radius: var(--border-radius-sm);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n}\n\n.logo-text {\n font-size: 20px;\n font-weight: 700;\n background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.status-bar {\n display: flex;\n gap: 16px;\n font-size: 12px;\n color: var(--text-secondary);\n}\n\n.status-item {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.status-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--accent-success);\n animation: pulse 2s infinite;\n}\n\n.status-dot.warning { background: var(--accent-warning); }\n.status-dot.error { background: var(--accent-error); }\n\n@keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n/* Sidebar Tabs */\n.sidebar-tabs {\n display: flex;\n border-bottom: 1px solid var(--border-color);\n}\n\n.tab-btn {\n flex: 1;\n padding: 12px;\n background: transparent;\n border: none;\n color: var(--text-secondary);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: var(--transition-fast);\n position: relative;\n}\n\n.tab-btn:hover {\n color: var(--text-primary);\n background: var(--bg-hover);\n}\n\n.tab-btn.active {\n color: var(--accent-primary);\n}\n\n.tab-btn.active::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: var(--accent-primary);\n}\n\n/* Sidebar Content */\n.sidebar-content {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n}\n\n.sidebar-content::-webkit-scrollbar {\n width: 6px;\n}\n\n.sidebar-content::-webkit-scrollbar-track {\n background: var(--bg-tertiary);\n}\n\n.sidebar-content::-webkit-scrollbar-thumb {\n background: var(--border-color);\n border-radius: 3px;\n}\n\n.tab-panel {\n display: none;\n}\n\n.tab-panel.active {\n display: block;\n}\n\n/* Style Grid */\n.style-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 12px;\n}\n\n.style-card {\n background: var(--bg-card);\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius);\n padding: 16px;\n cursor: pointer;\n transition: var(--transition-fast);\n position: relative;\n overflow: hidden;\n}\n\n.style-card:hover {\n border-color: var(--accent-primary);\n transform: translateY(-2px);\n box-shadow: var(--shadow-md);\n}\n\n.style-card.active {\n border-color: var(--accent-primary);\n background: rgba(99, 102, 241, 0.1);\n}\n\n.style-card.locked {\n opacity: 0.6;\n}\n\n.style-card.locked::after {\n content: '🔒';\n position: absolute;\n top: 8px;\n right: 8px;\n font-size: 12px;\n}\n\n.style-preview {\n font-size: 32px;\n text-align: center;\n margin-bottom: 8px;\n}\n\n.style-name {\n font-size: 13px;\n font-weight: 600;\n text-align: center;\n margin-bottom: 4px;\n}\n\n.style-tier {\n font-size: 10px;\n text-align: center;\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.style-tier.free { color: var(--accent-success); }\n.style-tier.pro { color: var(--accent-primary); }\n.style-tier.enterprise { color: var(--accent-secondary); }\n\n/* Controls */\n.control-group {\n margin-bottom: 20px;\n}\n\n.control-label {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n font-size: 13px;\n color: var(--text-secondary);\n}\n\n.control-value {\n font-family: var(--font-mono);\n font-size: 12px;\n color: var(--accent-primary);\n}\n\n/* Slider */\ninput[type=\"range\"] {\n width: 100%;\n height: 6px;\n background: var(--bg-tertiary);\n border-radius: 3px;\n outline: none;\n -webkit-appearance: none;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n background: var(--accent-primary);\n border-radius: 50%;\n cursor: pointer;\n transition: var(--transition-fast);\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb:hover {\n transform: scale(1.2);\n box-shadow: 0 0 10px var(--accent-primary);\n}\n\n/* Toggle */\n.toggle-wrapper {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px;\n background: var(--bg-card);\n border-radius: var(--border-radius-sm);\n margin-bottom: 8px;\n}\n\n.toggle-label {\n font-size: 13px;\n}\n\n.toggle {\n width: 44px;\n height: 24px;\n background: var(--bg-tertiary);\n border-radius: 12px;\n position: relative;\n cursor: pointer;\n transition: var(--transition-fast);\n}\n\n.toggle.active {\n background: var(--accent-primary);\n}\n\n.toggle::after {\n content: '';\n position: absolute;\n top: 2px;\n left: 2px;\n width: 20px;\n height: 20px;\n background: white;\n border-radius: 50%;\n transition: var(--transition-fast);\n}\n\n.toggle.active::after {\n left: 22px;\n}\n\n/* Color Picker */\n.color-picker-wrapper {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.color-preview {\n width: 36px;\n height: 36px;\n border-radius: var(--border-radius-sm);\n border: 2px solid var(--border-color);\n cursor: pointer;\n}\n\n.color-input {\n flex: 1;\n padding: 8px 12px;\n background: var(--bg-card);\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius-sm);\n color: var(--text-primary);\n font-family: var(--font-mono);\n font-size: 13px;\n}\n\n/* Buttons */\n.btn {\n padding: 10px 20px;\n border: none;\n border-radius: var(--border-radius-sm);\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: var(--transition-fast);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n.btn-primary {\n background: var(--accent-primary);\n color: white;\n}\n\n.btn-primary:hover {\n background: var(--accent-secondary);\n transform: translateY(-1px);\n}\n\n.btn-secondary {\n background: var(--bg-tertiary);\n color: var(--text-primary);\n border: 1px solid var(--border-color);\n}\n\n.btn-secondary:hover {\n background: var(--bg-hover);\n border-color: var(--accent-primary);\n}\n\n.btn-icon {\n width: 40px;\n height: 40px;\n padding: 0;\n border-radius: 50%;\n}\n\n/* Canvas Container */\n.canvas-container {\n flex: 1;\n position: relative;\n background: var(--bg-primary);\n overflow: hidden;\n}\n\n#render-canvas {\n width: 100%;\n height: 100%;\n}\n\n.video-hidden {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n\n/* Overlay Controls */\n.overlay-controls {\n position: absolute;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 12px;\n padding: 12px 20px;\n background: rgba(0, 0, 0, 0.8);\n backdrop-filter: blur(10px);\n border-radius: 50px;\n border: 1px solid var(--border-color);\n}\n\n.overlay-btn {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: var(--bg-tertiary);\n border: 1px solid var(--border-color);\n color: var(--text-primary);\n font-size: 20px;\n cursor: pointer;\n transition: var(--transition-fast);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.overlay-btn:hover {\n background: var(--accent-primary);\n border-color: var(--accent-primary);\n transform: scale(1.1);\n}\n\n.overlay-btn.recording {\n background: var(--accent-error);\n border-color: var(--accent-error);\n animation: pulse-red 1s infinite;\n}\n\n@keyframes pulse-red {\n 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }\n 50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }\n}\n\n/* Stats Overlay */\n.stats-overlay {\n position: absolute;\n top: 20px;\n left: 20px;\n padding: 12px 16px;\n background: rgba(0, 0, 0, 0.8);\n backdrop-filter: blur(10px);\n border-radius: var(--border-radius-sm);\n font-family: var(--font-mono);\n font-size: 12px;\n color: var(--text-secondary);\n pointer-events: none;\n}\n\n.stats-row {\n display: flex;\n justify-content: space-between;\n gap: 20px;\n margin-bottom: 4px;\n}\n\n.stats-row:last-child {\n margin-bottom: 0;\n}\n\n.stats-value {\n color: var(--accent-success);\n}\n\n.stats-value.warning { color: var(--accent-warning); }\n.stats-value.error { color: var(--accent-error); }\n\n/* Watermark */\n.watermark {\n position: absolute;\n bottom: 80px;\n right: 20px;\n padding: 8px 12px;\n background: rgba(0, 0, 0, 0.6);\n border-radius: var(--border-radius-sm);\n font-size: 11px;\n color: var(--text-muted);\n pointer-events: none;\n}\n\n/* Settings Panel */\n.settings-section {\n margin-bottom: 24px;\n}\n\n.settings-section-title {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: var(--text-muted);\n margin-bottom: 12px;\n}\n\n/* License Panel */\n.license-card {\n padding: 20px;\n background: var(--bg-card);\n border-radius: var(--border-radius);\n border: 1px solid var(--border-color);\n text-align: center;\n}\n\n.license-tier {\n font-size: 24px;\n font-weight: 700;\n margin-bottom: 8px;\n background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.license-features {\n margin: 16px 0;\n text-align: left;\n}\n\n.license-feature {\n display: flex; align-items: center;\n gap: 8px;\n padding: 8px 0;\n font-size: 13px;\n color: var(--text-secondary);\n border-bottom: 1px solid var(--border-color);\n}\n\n.license-feature:last-child {\n border-bottom: none;\n}\n\n.feature-icon {\n width: 20px;\n text-align: center;\n}\n\n.feature-icon.enabled { color: var(--accent-success); }\n.feature-icon.disabled { color: var(--text-muted); }\n\n/* Modal */\n.modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.8);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n opacity: 0;\n visibility: hidden;\n transition: var(--transition-normal);\n}\n\n.modal-overlay.active {\n opacity: 1;\n visibility: visible;\n}\n\n.modal {\n background: var(--bg-secondary);\n border-radius: var(--border-radius);\n border: 1px solid var(--border-color);\n max-width: 500px;\n width: 90%;\n max-height: 80vh;\n overflow: auto;\n transform: translateY(20px);\n transition: var(--transition-normal);\n}\n\n.modal-overlay.active .modal {\n transform: translateY(0);\n}\n\n.modal-header {\n padding: 20px;\n border-bottom: 1px solid var(--border-color);\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.modal-title {\n font-size: 18px;\n font-weight: 600;\n}\n\n.modal-close {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: var(--bg-tertiary);\n border: none;\n color: var(--text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: var(--transition-fast);\n}\n\n.modal-close:hover {\n background: var(--accent-error);\n color: white;\n}\n\n.modal-body {\n padding: 20px;\n}\n\n.modal-footer {\n padding: 20px;\n border-top: 1px solid var(--border-color);\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n}\n\n/* License Input */\n.license-input-wrapper {\n margin-bottom: 20px;\n}\n\n.license-input {\n width: 100%;\n padding: 16px;\n background: var(--bg-card);\n border: 2px solid var(--border-color);\n border-radius: var(--border-radius-sm);\n color: var(--text-primary);\n font-family: var(--font-mono);\n font-size: 14px;\n text-align: center;\n letter-spacing: 2px;\n transition: var(--transition-fast);\n}\n\n.license-input:focus {\n outline: none;\n border-color: var(--accent-primary);\n}\n\n.license-input.valid {\n border-color: var(--accent-success);\n}\n\n.license-input.invalid {\n border-color: var(--accent-error);\n}\n\n/* Toast Notifications */\n.toast-container {\n position: fixed;\n top: 20px;\n right: 20px;\n z-index: 2000;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.toast {\n padding: 12px 20px;\n background: var(--bg-secondary);\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius-sm);\n box-shadow: var(--shadow-lg);\n display: flex;\n align-items: center;\n gap: 12px;\n animation: slideIn 0.3s ease;\n}\n\n@keyframes slideIn {\n from {\n transform: translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n.toast.success { border-left: 3px solid var(--accent-success); }\n.toast.error { border-left: 3px solid var(--accent-error); }\n.toast.warning { border-left: 3px solid var(--accent-warning); }\n.toast.info { border-left: 3px solid var(--accent-primary); }\n\n/* Loading Spinner */\n.spinner {\n width: 40px;\n height: 40px;\n border: 3px solid var(--bg-tertiary);\n border-top-color: var(--accent-primary);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n to { transform: rotate(360deg); }\n}\n\n.loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(10, 10, 15, 0.9);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 20px;\n z-index: 100;\n}\n\n.loading-text {\n font-size: 14px;\n color: var(--text-secondary);\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .app-container {\n flex-direction: column;\n }\n \n .sidebar {\n width: 100%;\n min-width: 100%;\n height: auto;\n max-height: 50vh;\n border-right: none;\n border-bottom: 1px solid var(--border-color);\n }\n \n .style-grid {\n grid-template-columns: repeat(3, 1fr);\n }\n \n .overlay-controls {\n bottom: 10px;\n padding: 8px 16px;\n }\n \n .overlay-btn {\n width: 40px;\n height: 40px;\n font-size: 16px;\n }\n}\n`;\n\nexport default STYLES;",[],[173],"files",[152,171],"counts",{"_186":32,"_187":188,"_189":32,"_190":191},"pulls","branches",1,"forks","envVars",{"_192":32,"_193":32},"count","emptyCount","contents",[],"file",{"_105":153,"_96":100,"_154":155,"_156":-5,"_157":140,"_158":102,"_159":22,"_107":198,"_101":161,"_162":163,"_164":165,"_166":22,"_167":-5,"_99":199},["D",1767431346625],[100],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":44,"_101":102,"_99":100,"_103":208,"_150":213,"_182":220,"_196":221,"_194":223,"_224":-5,"_225":-5,"_226":-5,"_227":-5,"_228":229,"_190":-5},{"_105":106,"_96":97,"_107":209,"_109":-5,"_110":22,"_111":112,"_113":-5,"_114":-5,"_14":115,"_116":-5,"_117":22,"_118":-5,"_119":-5,"_120":32,"_16":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_23":210,"_134":211,"_137":212,"_149":22},["D",1767412318598],{"_94":95,"_132":133},{"_94":95,"_136":133,"_14":115},{"_101":139,"_96":44,"_105":140,"_141":106,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":97,"_148":95},[214,217],{"_105":153,"_96":100,"_154":155,"_156":-5,"_157":140,"_158":102,"_159":22,"_107":160,"_101":161,"_162":163,"_164":165,"_166":22,"_167":-5,"_168":215,"_99":216},[],[100],{"_105":172,"_96":173,"_154":174,"_156":-5,"_157":140,"_158":175,"_159":22,"_107":176,"_101":177,"_162":178,"_164":179,"_166":22,"_167":-5,"_168":218,"_99":219},[],[173],[214,217],{"_105":153,"_96":100,"_154":155,"_156":-5,"_157":140,"_158":102,"_159":22,"_107":198,"_101":161,"_162":163,"_164":165,"_166":22,"_167":-5,"_99":222},[100],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

banks

patternlanguage