<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>AIGC Workflow | AI Smartphone Exploration</title>

  <script type="importmap">
    {
      "imports": {
        "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
        "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
      }
    }
  </script>

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800;900&family=Noto+Sans+SC:wght@300;400;700;900&display=swap');

    :root {
      --app-bg: #f0f2f5;
      --slide-bg: rgba(255, 255, 255, 0.85);
      --slide-border: rgba(255, 255, 255, 0.6);
      
      --accent: #FF4D00; 
      --green: #00CC66;
      --text-main: #1d1d1f;
      --locked-color: #ff4d4f;
      --selection-color: #2953FF;
      
      --glass-blur: 50px;
      --slide-shadow: 0 40px 100px -20px rgba(0,0,0,0.15);
      --slide-base-w: 1600px;
      --slide-base-h: 900px;
      --scale: 1;

      --font-stack: "Inter", "Noto Sans SC", "Helvetica Neue", sans-serif;
    }

    * { box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent; }
    [contenteditable="true"] { user-select: text; cursor: text; outline: none; border-bottom: 1px dashed transparent; transition:0.2s; }
    [contenteditable="true"]:focus { border-bottom-color: var(--accent); background: rgba(255, 77, 0, 0.05); }

    body { margin: 0; background: var(--app-bg); color: var(--text-main); font-family: var(--font-stack); overflow: hidden; -webkit-font-smoothing: antialiased; }

    #bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

    .scroller { height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; position: relative; z-index: 10; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
    .scroller::-webkit-scrollbar { width: 0; }

    section { height: 100vh; width: 100vw; scroll-snap-align: center; display: flex; justify-content: center; align-items: center; position: relative; }

    .scaler-wrap { width: var(--slide-base-w); height: var(--slide-base-h); transform: scale(var(--scale)); transform-origin: center center; box-shadow: var(--slide-shadow); transition: transform 0.3s; }
    
    .slide-frame { 
      width: 100%; height: 100%; 
      background: var(--slide-bg); 
      backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
      border: 1px solid var(--slide-border); 
      border-radius: 24px; 
      position: relative; overflow: hidden; 
      contain: layout style;
      transform: translate3d(0,0,0); /* iOS GPU fix */
    }

    .pg-num { position: absolute; bottom: 30px; left: 50px; font-family: monospace; color: #888; font-size: 14px; pointer-events: none; z-index: 2; }

    /* --- 组件系统 --- */
    .comp { position: absolute; display: flex; flex-direction: column; justify-content: center; border: 1px solid transparent; transition: border 0.1s; z-index: 10; transform: translate3d(0,0,0); }
    
    /* 多选状态 */
    .comp.selected { border: 1px solid var(--selection-color); z-index: 100; background: rgba(41, 83, 255, 0.05); }
    
    /* 锁定状态 */
    .comp.locked { border-color: var(--locked-color) !important; border-style: dashed; pointer-events: auto !important; }
    .comp.locked .drag-bar, .comp.locked .resize-handle { display: none !important; }
    
    .drag-bar { height: 16px; width: 100%; background: #222; cursor: grab; position: absolute; top: -16px; left: 0; border-radius: 4px 4px 0 0; opacity: 0; transition: 0.2s; pointer-events: auto; }
    .comp:hover .drag-bar, .comp.selected .drag-bar { opacity: 1; }
    
    .resize-handle { width: 12px; height: 12px; background: var(--selection-color); position: absolute; bottom: -6px; right: -6px; cursor: nwse-resize; border-radius: 50%; opacity: 0; transition: 0.2s; pointer-events: auto; }
    .comp:hover .resize-handle, .comp.selected .resize-handle { opacity: 1; }

    .comp-content { width: 100%; height: 100%; position: relative; overflow: visible; font-family: inherit; line-height: 1.5; color: inherit; }
    .comp[data-type="text"] .comp-content { cursor: text; }
    
    .comp-content .dud { color: #ccc; opacity: 0.7; }
    
    .comp[data-type="media"] .comp-content img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; border-radius: 6px; display: block; -webkit-user-select: none; will-change: transform; -webkit-backface-visibility: hidden; }
    
    .comp.placeholder { border: 2px dashed #ccc; border-radius: 12px; background: rgba(0,0,0,0.02); }
    .comp.placeholder .comp-content { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #aaa; font-size: 14px; pointer-events: none; }

    /* Loading Spinner */
    .loader-overlay {
        position: absolute; top:0; left:0; width:100%; height:100%;
        background: rgba(255,255,255,0.8);
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        z-index: 200; font-size: 14px; color: #666;
    }
    .spinner {
        width: 30px; height: 30px; border: 3px solid #eee;
        border-top-color: var(--accent); border-radius: 50%;
        animation: spin 1s linear infinite; margin-bottom: 8px;
    }
    @keyframes spin { 100% { transform: rotate(360deg); } }

    /* --- 动效 --- */
    .animate-in { opacity: 0; }
    .active .animate-in { animation: blurFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
    @keyframes blurFadeIn { from { opacity: 0; transform: translateY(40px) scale(0.98); filter: blur(10px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }

    .anim-top { opacity: 0; } .active .anim-top { animation: insertTop 1s ease forwards; }
    @keyframes insertTop { from { opacity: 0; transform: translateY(-150px); filter: blur(20px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
    .anim-bottom { opacity: 0; } .active .anim-bottom { animation: insertBottom 1s ease forwards; }
    @keyframes insertBottom { from { opacity: 0; transform: translateY(150px); filter: blur(20px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }

    .corner-tl { opacity: 0; } .active .corner-tl { animation: flyTL 1s ease forwards; }
    @keyframes flyTL { from { opacity: 0; transform: translate(-100px, -100px); filter: blur(20px); } to { opacity: 1; transform: translate(0,0); filter: blur(0); } }
    .corner-tr { opacity: 0; } .active .corner-tr { animation: flyTR 1s ease forwards; }
    @keyframes flyTR { from { opacity: 0; transform: translate(100px, -100px); filter: blur(20px); } to { opacity: 1; transform: translate(0,0); filter: blur(0); } }
    .corner-bl { opacity: 0; } .active .corner-bl { animation: flyBL 1s ease forwards; }
    @keyframes flyBL { from { opacity: 0; transform: translate(-100px, 100px); filter: blur(20px); } to { opacity: 1; transform: translate(0,0); filter: blur(0); } }
    .corner-br { opacity: 0; } .active .corner-br { animation: flyBR 1s ease forwards; }
    @keyframes flyBR { from { opacity: 0; transform: translate(100px, 100px); filter: blur(20px); } to { opacity: 1; transform: translate(0,0); filter: blur(0); } }

    .sticker-slap { opacity: 0; transform-origin: center center; }
    .active .sticker-slap { animation: stickerSlapAnim 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
    @keyframes stickerSlapAnim { 0% { opacity: 0; transform: scale(2) rotate(15deg); filter: blur(10px); } 100% { opacity: 1; transform: scale(1) rotate(-2deg); filter: blur(0); } }

    /* Bullet Time Parabola */
    .parabola-container { width: 100%; height: 100%; position: relative; pointer-events: none; z-index: 0; }
    .para-path { fill: none; stroke: url(#grad1); stroke-width: 4; stroke-linecap: round; }
    .para-ball { 
        offset-path: path("M 100 50 Q 600 450 1100 50"); 
        width: 30px; height: 30px; border-radius: 50%; 
        position: absolute; top:0; left:0; 
        animation: moveBall 5s infinite cubic-bezier(0.45, 0, 0.55, 1) normal; 
    }
    @keyframes moveBall { 
        0% { offset-distance: 0%; background-color: var(--accent); box-shadow: 0 0 15px var(--accent); } 
        40% { background-color: #ff8800; box-shadow: 0 0 30px #ff8800; }
        100% { offset-distance: 100%; background-color: var(--green); box-shadow: 0 0 40px var(--green), 0 0 10px #fff; } 
    }

    /* --- V32: Flip Card (Updated Size for Finale) --- */
    .slider-container { 
        position: absolute; 
        top: 130px; 
        left: 50px; 
        width: 1500px; 
        height: 680px; 
        overflow: visible; border-radius: 20px; border: 1px solid #ccc; background: rgba(255,255,255,0.5); 
        pointer-events: auto; transition: all 0.5s; z-index: 20;
    }
    .slider-track { display: flex; gap: 20px; padding: 20px; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), gap 0.5s, width 0.5s; width: max-content; }
    .slider-track.finale-mode { width: 100%; gap: 30px; justify-content: center; padding: 40px 0; }
    .slider-item { width: 300px; height: 460px; flex-shrink: 0; position: relative; perspective: 1000px; -webkit-perspective: 1000px; transition: opacity 0.5s, width 0.5s, height 0.5s; }
    
    .slider-track.finale-mode .slider-item { width: 220px; height: 340px; }
    .slider-track.finale-mode .slider-item .card-back { font-size: 100px; }
    
    .card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
    .slider-item.flipped .card-inner { transform: rotateY(180deg); }
    .card-front, .card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 12px; transition: font-size 0.5s; top: 0; left: 0; }
    .card-front { background: transparent; z-index: 2; transform: rotateY(0deg); }
    .card-back { background: linear-gradient(135deg, var(--accent), var(--green)); color: white; transform: rotateY(180deg); display: flex; align-items: center; justify-content: center; font-size: 140px; font-weight: 900; font-family: 'Inter', sans-serif; box-shadow: 0 20px 50px rgba(0,0,0,0.3); border: 4px solid white; z-index: 1; }
    .slider-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: white; border-radius: 50%; border: 1px solid #ccc; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); z-index: 20; transition: opacity 0.5s; }
    .nav-left { left: 20px; } .nav-right { right: 20px; }
    .slider-nav:hover { background: var(--accent); color: white; }

    /* --- UI - Sidebar (Optimized) --- */
    .sidebar { 
        position: fixed; top: 50%; right: 24px; transform: translateY(-50%); 
        background: rgba(255,255,255,0.75); 
        padding: 8px; border-radius: 20px; 
        box-shadow: 0 10px 40px rgba(0,0,0,0.1), inset 0 0 0 1px rgba(255,255,255,0.5); 
        z-index: 5000; 
        display: flex; flex-direction: column; gap: 12px; align-items: center; 
        backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); 
        width: 64px; 
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .sidebar.collapsed { transform: translate(140%, -50%); }

    /* Toggle Button */
    .sidebar-toggle-btn {
        position: absolute; top: 50%; left: -20px; transform: translateY(-50%);
        width: 20px; height: 40px; 
        background: rgba(255,255,255,0.9); border: 1px solid rgba(0,0,0,0.1); 
        border-right: none; border-radius: 10px 0 0 10px;
        cursor: pointer; display: flex; align-items: center; justify-content: center; 
        color: #666; font-size: 12px;
        box-shadow: -2px 0 10px rgba(0,0,0,0.05);
        transition: 0.2s;
    }
    .sidebar.collapsed .sidebar-toggle-btn { width: 32px; height: 48px; left: -40px; background: var(--accent); color: white; }

    /* Tool Groups */
    .tool-group { 
        width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; 
        padding-bottom: 12px; border-bottom: 1px solid rgba(0,0,0,0.06); 
    }
    .tool-group:last-child { border-bottom: none; padding-bottom: 0; }
    
    .group-label { font-size: 9px; color: #999; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.5px; display:none; }

    /* Buttons */
    .tool-btn { 
        width: 44px; height: 44px; border-radius: 12px; 
        border: none; background: rgba(255,255,255,0.6); 
        cursor: pointer; font-size: 18px; 
        display: flex; align-items: center; justify-content: center; 
        transition: all 0.2s; color: #444; position:relative; 
        box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    }
    .tool-btn:hover { background: var(--accent); color: white; transform: scale(1.05); box-shadow: 0 4px 12px rgba(255, 77, 0, 0.3); }
    .tool-btn:active { transform: scale(0.95); }
    .tool-btn.active-tool { background: #1d1d1f; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
    .tool-btn.active-state { background: #fff0f0; color: #ff4d4f; border: 1px solid #ff4d4f; }
    
    .tool-btn.mini { width: 36px; height: 28px; font-size: 12px; border-radius: 6px; background: rgba(255,255,255,0.4); }

    /* Property Panels */
    .prop-panel { display: none; flex-direction: column; gap: 8px; width: 100%; align-items: center; background: rgba(0,0,0,0.02); padding: 8px 4px; border-radius: 12px; margin-bottom: 8px;}
    .sidebar.has-selection .prop-panel { display: flex; animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
    @keyframes slideIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
    
    .input-row { display: flex; gap: 4px; width: 100%; justify-content: center; align-items: center; }
    .num-input { width: 40px; height: 28px; text-align: center; border: 1px solid transparent; border-radius: 6px; font-family: inherit; font-size: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
    .num-input:focus { border-color: var(--accent); }
    .color-picker { width: 36px; height: 28px; padding: 0; border: 2px solid #fff; border-radius: 6px; cursor: pointer; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
    .color-picker::-webkit-color-swatch-wrapper { padding: 0; }
    .color-picker::-webkit-color-swatch { border: none; }

    .icon-heavy { font-weight: 900; }
    .icon-mod { font-family: monospace; letter-spacing: -2px; }

    /* Thumb UI & Reset Button */
    .thumb-btn { position: absolute; bottom: 40px; right: 40px; width: 60px; height: 60px; border-radius: 50%; background: #333; color: #fff; border: 4px solid #fff; font-size: 24px; cursor: pointer; z-index: 2000; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.2); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
    .thumb-btn:hover { transform: scale(1.1) rotate(-10deg); background: var(--accent); }
    .thumb-btn:active { transform: scale(0.9); }
    .thumb-btn.hidden { opacity: 0; transform: scale(0) rotate(180deg); pointer-events: none; }
    .reset-btn { background: #fff; color: #333; border-color: #333; }
    .reset-btn:hover { background: #eee; color: #000; transform: scale(1.1) rotate(-180deg); }

    /* Pin & String */
    .pin { 
        position: absolute; width: 14px; height: 14px; background: #ff4d4f; border: 2px solid #fff; 
        border-radius: 50%; z-index: 1000; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.3); 
        transform: translate(-50%, -50%); transition: transform 0.2s; pointer-events: auto;
    }
    .pin:hover { transform: translate(-50%, -50%) scale(1.5); }
    .pin.active-pin { background: #fff !important; border-color: #2953FF; transform: translate(-50%, -50%) scale(1.2); }
    .string-svg-layer { position: absolute; top:0; left:0; width:100%; height:100%; pointer-events: none; z-index: 900; overflow: visible; }
    .detective-string { fill: none; stroke: #ff4d4f; stroke-width: 2px; stroke-dasharray: 5,5; animation: dash 1s linear infinite; opacity: 0.8; }
    @keyframes dash { to { stroke-dashoffset: -10; } }

    /* --- Lusion/Clock Flip Styles --- */
    .lusion-title-wrap {
      display: flex; justify-content: center; align-items: baseline; 
      gap: 0px; font-family: 'Inter', sans-serif; line-height: 1.2; white-space: nowrap;
      overflow: visible;
      padding-bottom: 10px;
    }
    .char-box {
      position: relative; display: inline-block; overflow: hidden; height: 1.2em; vertical-align: baseline; 
    }
    .char-scroll {
      display: flex; flex-direction: column; transform: translateY(0); will-change: transform;
    }
    .char-scroll span {
      display: block; height: 1.2em; line-height: 1.2; text-align: center;
    }
    .runner-l {
        display: inline-block; transition: transform 0.1s ease-out; will-change: transform; cursor: default;
    }

    /* Edit Modal */
    #edit-title-modal {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(255,255,255,0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
        z-index: 6000; display: none; align-items: center; justify-content: center;
    }
    #edit-title-modal.active-modal { display: flex; animation: fadeIn 0.3s ease; }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    .edit-box {
        background: white; padding: 30px; border-radius: 20px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.2); border: 1px solid #eee;
        width: 400px; display: flex; flex-direction: column; gap: 15px;
    }
    .edit-box h3 { margin: 0 0 10px 0; font-family: 'Inter'; font-weight: 800; }
    .edit-inp {
        padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px;
        font-family: inherit; width: 100%;
    }
    .edit-inp:focus { border-color: var(--accent); outline: none; background: #fafafa; }
    .edit-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
    .btn-save { background: var(--accent); color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: 600; }
    .btn-cancel { background: #eee; color: #333; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; }

    .edit-trigger {
        position: absolute; top: -40px; right: 0;
        width: 40px; height: 40px; border-radius: 50%;
        background: rgba(0,0,0,0.05); color: #333;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; transition: 0.2s; opacity: 0; z-index: 200;
    }
    .comp:hover .edit-trigger { opacity: 1; }
    .edit-trigger:hover { background: var(--accent); color: white; }

  </style>
</head>
<body>

  <canvas id="bg-canvas"></canvas>

  <div class="sidebar" id="main-sidebar">
    <div class="sidebar-toggle-btn" onclick="toggleSidebar()">›</div>
    
    <div class="tool-group">
        <button class="tool-btn" onclick="undo()" title="撤销 (Ctrl+Z)">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 14L4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5v0a5.5 5.5 0 0 1-5.5 5.5H11"/></svg>
        </button>
    </div>

    <div class="tool-group">
        <button class="tool-btn" onclick="triggerInput('inp-img')" title="插入图片">🖼</button>
        <button class="tool-btn" onclick="triggerInput('inp-model')" title="插入 3D 模型 (.glb)">🧊</button>
        <button class="tool-btn" onclick="spawnText()" title="插入文本">T</button>
    </div>
    
    <div class="tool-group prop-panel" id="align-props">
        <div class="group-label">对齐</div>
        <div class="input-row">
            <button class="tool-btn mini icon-mod" onclick="alignSelection('left')" title="左对齐">|←</button>
            <button class="tool-btn mini icon-mod" onclick="alignSelection('h-center')" title="水平居中">→|←</button>
            <button class="tool-btn mini icon-mod" onclick="alignSelection('right')" title="右对齐">→|</button>
        </div>
        <div class="input-row">
            <button class="tool-btn mini icon-mod" onclick="alignSelection('top')" title="顶对齐">↑¯</button>
            <button class="tool-btn mini icon-mod" onclick="alignSelection('v-center')" title="垂直居中">÷</button>
            <button class="tool-btn mini icon-mod" onclick="alignSelection('bottom')" title="底对齐">_↓</button>
        </div>
    </div>

    <div class="tool-group prop-panel" id="text-props">
        <div class="group-label">文本</div>
        <div class="input-row">
            <button class="tool-btn mini" onclick="adjFontSize(-2)">A-</button>
            <input type="number" id="font-size-val" class="num-input" value="32" onchange="applyFontSize(this.value)">
            <button class="tool-btn mini" onclick="adjFontSize(2)">A+</button>
        </div>
        <div class="input-row" style="margin-top:4px;">
            <button class="tool-btn mini icon-heavy" onclick="toggleBold()" title="加粗">B</button>
            <button class="tool-btn mini" onclick="toggleItalic()" title="斜体" style="font-family:serif; font-style:italic;">I</button>
            <input type="color" id="text-color" class="color-picker" oninput="applyColor(this.value)" title="文字颜色">
        </div>
        <div class="input-row" style="margin-top:4px;">
            <button class="tool-btn mini" onclick="alignText('left')" title="文本左对齐">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><line x1="21" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="3" y2="18"></line></svg>
            </button>
            <button class="tool-btn mini" onclick="alignText('center')" title="文本居中">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><line x1="18" y1="10" x2="6" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="18" y1="18" x2="6" y2="18"></line></svg>
            </button>
        </div>
    </div>

    <div class="tool-group prop-panel" id="layer-props">
        <div class="group-label">图层</div>
        <div class="input-row">
            <button class="tool-btn mini" onclick="changeLayer(1)" title="上移图层">↥</button>
            <button class="tool-btn mini" onclick="changeLayer(-1)" title="下移图层">↧</button>
            <button class="tool-btn mini" id="btn-lock" onclick="toggleLock()" title="锁定/解锁">🔓</button>
        </div>
    </div>

    <div class="tool-group">
        <button class="tool-btn" id="btn-pin" onclick="toggleTool('pin')" title="图钉模式">📌</button>
        <button class="tool-btn" id="btn-string" onclick="toggleTool('string')" title="连线模式">🧶</button>
        <div class="input-row" style="margin-top:4px;" title="连线/图钉颜色">
            <input type="color" id="tool-color" class="color-picker" value="#ff4d4f">
        </div>
    </div>
    
    <div class="tool-group" id="delete-group" style="display:none;">
        <button class="tool-btn" onclick="confirmDelete()" style="color:#ff4d4f; border-color:#ffdbdb; background:#fff5f5;" title="删除选中 (Del)">🗑</button>
    </div>

    <div style="flex:1;"></div>

    <div class="tool-group" style="border-top: 1px solid rgba(0,0,0,0.1); padding-top:12px; background:rgba(255,255,255,0.4); border-radius:12px;">
        <div class="input-row">
            <button class="tool-btn mini" onclick="moveSlide(-1)" title="上一页" style="font-size:10px;">Pg↑</button>
            <button class="tool-btn mini" onclick="moveSlide(1)" title="下一页" style="font-size:10px;">Pg↓</button>
        </div>
        <div class="input-row" style="margin-top:6px;">
            <button class="tool-btn" onclick="addNewSlide()" style="color:#00CC66;" title="新建页面">+</button>
            <button class="tool-btn" onclick="saveProject()" style="color:#2953FF;" title="保存项目 (.html)">💾</button>
        </div>
    </div>
  </div>

  <div id="edit-title-modal">
      <div class="edit-box">
          <h3>编辑标题内容</h3>
          <div><label>第一行 (英):</label><input type="text" id="inp-title-1" class="edit-inp" value="INTELLIGENT"></div>
          <div><label>第二行 (中/英):</label><input type="text" id="inp-title-2" class="edit-inp" value="AI Phone × 智能终端架构探索"></div>
          <div class="edit-actions">
              <button class="btn-cancel" onclick="closeEditModal()">取消</button>
              <button class="btn-save" onclick="applyNewTitle()">确认 & 生效</button>
          </div>
      </div>
  </div>

  <input type="file" id="inp-img" hidden multiple accept="image/*">
  <input type="file" id="inp-model" hidden accept=".glb,.gltf,.obj">

  <div class="scroller" id="scroller"></div>

  <svg width="0" height="0">
    <defs>
      <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:#FF4D00;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#00CC66;stop-opacity:1" />
      </linearGradient>
    </defs>
  </svg>

  <script type="module">
    import * as THREE from 'three';
    import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
    import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

    const scroller = document.getElementById('scroller');
    const sidebar = document.getElementById('main-sidebar');
    const fontSizeInput = document.getElementById('font-size-val');
    const textProps = document.getElementById('text-props');
    const alignProps = document.getElementById('align-props'); 
    const layerProps = document.getElementById('layer-props');
    const btnLock = document.getElementById('btn-lock');
    const editModal = document.getElementById('edit-title-modal');
    const toolColorInput = document.getElementById('tool-color');

    // MULTI-SELECT STATE
    const selectedElements = new Set();
    let toolMode = 'cursor'; 
    let firstPin = null; 
    const historyStack = [];
    let clipboard = []; 
    let selectedComp = null; // Legacy support

    // --- Core Logic ---
    window.undo = () => {
      if (historyStack.length === 0) return;
      scroller.innerHTML = historyStack.pop();
      selectedElements.clear();
      firstPin = null;
      updateUIState();
      restoreModels();
      setupObserver(); 
      setupClockFlip(); 
    };
    function saveState() {
      if (historyStack.length > 8) historyStack.shift();
      historyStack.push(scroller.innerHTML);
    }

    // Toggle Sidebar
    window.toggleSidebar = () => {
        sidebar.classList.toggle('collapsed');
        const btn = sidebar.querySelector('.sidebar-toggle-btn');
        btn.innerText = sidebar.classList.contains('collapsed') ? '‹' : '›';
    }

    // --- Dynamic Title Logic (Improved) ---
    window.openEditModal = () => { editModal.classList.add('active-modal'); }
    window.closeEditModal = () => { editModal.classList.remove('active-modal'); }
    
    window.applyNewTitle = () => {
        const t1 = document.getElementById('inp-title-1').value || 'INTELLIGENT';
        const t2 = document.getElementById('inp-title-2').value || 'AI Phone × 智能终端';
        
        const wrap1 = document.getElementById('title-wrap-1');
        const wrap2 = document.getElementById('title-wrap-2');
        
        if(wrap1 && wrap2) {
            saveState();
            // Generate HTML for Line 1
            let html1 = '';
            [...t1].forEach((char, i) => {
                if(char === ' ') { html1 += '&nbsp;'; return; }
                let isScroll = (i % 3 === 1) || (i % 4 === 2); 
                let group = (i % 3) + 1;
                
                if(isScroll) {
                    html1 += `<div class="char-box group-${group}"><div class="char-scroll"><span>${char}</span><span>${char}</span></div></div>`;
                } else if(i === t1.length-1) {
                    html1 += `<span class="runner-l">${char}</span>`; 
                } else {
                    html1 += `<span>${char}</span>`;
                }
            });
            wrap1.innerHTML = html1;

            // Generate HTML for Line 2
            let html2 = '';
            [...t2].forEach((char, i) => {
                if(char === ' ') { html2 += '&nbsp;'; return; }
                let isScroll = (i % 5 === 2) || (i % 7 === 0); 
                let group = ((i+1) % 3) + 1;
                
                if(isScroll) {
                    html2 += `<div class="char-box group-${group}"><div class="char-scroll"><span>${char}</span><span>${char}</span></div></div>`;
                } else {
                    html2 += `<span>${char}</span>`;
                }
            });
            wrap2.innerHTML = html2;
            
            closeEditModal();
            setupClockFlip();
        }
    };

    // --- Content (Mobile Phone Theme) ---
    const slidesData = [
      { 
        // Page 1: Title (Movable Components now) - FIX: Use explicit pixels to avoid shift
        customHTML: `
          <div class="comp animate-in" data-type="text" style="top:250px; left:100px; width:1400px; height:auto; z-index:100;">
             <div class="comp-content" style="display:flex; justify-content:center;">
                 <div class="edit-trigger" onclick="openEditModal()" title="Edit Title">✎</div>
                 <div class="lusion-title-wrap" id="title-wrap-1" style="font-size:110px; font-weight:900; color:#1d1d1f; letter-spacing:-2px;">
                    <span>I</span>
                    <div class="char-box group-1"><div class="char-scroll"><span>N</span><span>N</span></div></div>
                    <span>T</span>
                    <div class="char-box group-2"><div class="char-scroll"><span>E</span><span>E</span></div></div>
                    <span>L</span><span>L</span>
                    <div class="char-box group-3"><div class="char-scroll"><span>I</span><span>I</span></div></div>
                    <span>G</span><span>E</span>
                    <div class="char-box group-1"><div class="char-scroll"><span>N</span><span>N</span></div></div>
                    <span class="runner-l">T</span>
                 </div>
             </div>
             <div class="drag-bar"></div><div class="resize-handle"></div>
          </div>
          <div class="comp animate-in" data-type="text" style="top:400px; left:100px; width:1400px; height:auto;">
             <div class="comp-content" style="display:flex; justify-content:center;">
                 <div class="lusion-title-wrap" id="title-wrap-2" style="font-size:48px; font-weight:700; color:#FF4D00; letter-spacing:1px;">
                    AI Phone&nbsp;<div class="char-box group-2"><div class="char-scroll"><span>×</span><span>×</span></div></div>&nbsp;智能<div class="char-box group-3"><div class="char-scroll"><span>终</span><span>终</span></div></div>端架<div class="char-box group-1"><div class="char-scroll"><span>构</span><span>构</span></div></div>探索
                 </div>
             </div>
             <div class="drag-bar"></div><div class="resize-handle"></div>
          </div>
          <div class="comp animate-in" data-type="text" style="top:600px; left:600px; width:400px; height:40px;">
             <div class="comp-content" contenteditable="true" style="text-align:center; color:#999; font-family:monospace; font-size:18px;">汇报人: AI Product Designer</div>
             <div class="drag-bar"></div>
          </div>
        ` 
      },
      { elements: [ { type:'text', t:'CONTENTS', x:100, y:100, w:400, h:60, s:48, wgt:900 }, { type:'text', t:'目录索引', x:100, y:160, w:200, h:30, s:20, color:'var(--accent)', wgt:600 }, { type:'text', t:'01. Market Trends / 市场趋势', x:120, y:300, w:600, h:50, s:28, wgt:600 }, { type:'text', t:'02. System Architecture / 系统架构', x:120, y:450, w:600, h:50, s:28, wgt:600 }, { type:'text', t:'03. AIGC Workflow / 生成式UI探索', x:850, y:300, w:600, h:50, s:28, wgt:600 }, { type:'text', t:'04. Summary / 总结展望', x:850, y:450, w:600, h:50, s:28, wgt:600 }] },
      { elements: [ { type:'text', t:'01', x:600, y:250, w:400, h:250, s:200, wgt:900, color:'rgba(0,0,0,0.05)', align:'center' }, { type:'text', t:'市场趋势', x:500, y:450, w:600, h:80, s:64, wgt:800, color:'var(--accent)', align:'center' }, { type:'text', t:'MARKET TRENDS', x:500, y:540, w:600, h:40, s:20, color:'#666', align:'center', spacing:4 }] },
      { elements: [ { type:'text', t:'LANDSCAPE 智能手机现状', x:100, y:80, w:800, h:60, s:40, wgt:800 }, { type:'text', t:'设计停滞 Stagnation', x:100, y:200, w:400, h:40, s:28, color:'var(--accent)', wgt:700, anim:'top' }, { type:'text', t:'硬件形态趋同，屏占比竞争触及天花板。', x:100, y:250, w:400, h:60, s:18, color:'#555', anim:'top' }, { type:'ph', x:100, y:400, w:400, h:350, anim:'top' }, { type:'text', t:'交互瓶颈 Interaction', x:600, y:200, w:400, h:40, s:28, color:'var(--accent)', wgt:700, anim:'bottom' }, { type:'text', t:'APP 孤岛效应严重，跨应用协作效率低。', x:600, y:250, w:400, h:60, s:18, color:'#555', anim:'bottom' }, { type:'ph', x:600, y:400, w:400, h:350, anim:'bottom' }, { type:'text', t:'AI 整合 AI Integration', x:1100, y:200, w:400, h:40, s:28, color:'var(--accent)', wgt:700, anim:'top' }, { type:'text', t:'从单一功能向系统级原生 AI 助手演进。', x:1100, y:250, w:400, h:60, s:18, color:'#555', anim:'top' }, { type:'ph', x:1100, y:400, w:400, h:350, anim:'top' } ]},
      { elements: [ { type:'text', t:'PAIN POINT 核心挑战', x:100, y:80, w:600, h:60, s:40, wgt:800 }, { type:'text', t:'端侧算力未充分释放', x:100, y:250, w:800, h:60, s:48, wgt:800, color:'var(--accent)' }, { type:'text', t:'NPU Capabilities Not Fully Utilized by OS', x:100, y:320, w:800, h:40, s:24, color:'#555' }, { type:'ph', x:800, y:200, w:700, h:550 }] },
      { elements: [ { type:'text', t:'02', x:600, y:250, w:400, h:250, s:200, wgt:900, color:'rgba(0,0,0,0.05)', align:'center' }, { type:'text', t:'系统架构', x:500, y:450, w:600, h:80, s:64, wgt:800, color:'var(--accent)', align:'center' }, { type:'text', t:'SYSTEM ARCHITECTURE', x:500, y:540, w:600, h:40, s:20, color:'#666', align:'center', spacing:4 }] },
      { elements: [{ type:'text', t:'HARDWARE 硬件堆叠', x:100, y:80, w:600, h:60, s:40, wgt:800 }, { type:'ph', x:800, y:150, w:700, h:600 }] },
      { elements: [ { type:'text', t:'ARCHITECTURE 架构分析', x:100, y:80, w:800, h:60, s:40, wgt:800 }, { type:'text', t:'01 Computing / 算力', x:100, y:200, w:300, h:40, s:24, color:'var(--accent)', anim:'tl' }, { type:'text', t:'异构计算单元 (CPU+GPU+NPU) 协同调度。', x:100, y:250, w:600, h:60, s:18, color:'#555', anim:'tl' }, { type:'text', t:'02 Latency / 时延', x:850, y:200, w:300, h:40, s:24, color:'var(--accent)', anim:'tr' }, { type:'text', t:'端侧推理降低网络依赖，提升隐私与速度。', x:850, y:250, w:600, h:60, s:18, color:'#555', anim:'tr' }, { type:'text', t:'03 Inference / 推理', x:100, y:450, w:300, h:40, s:24, color:'var(--accent)', anim:'bl' }, { type:'text', t:'轻量化模型 (Small Language Models) 本地部署。', x:100, y:500, w:600, h:60, s:18, color:'#555', anim:'bl' }, { type:'text', t:'04 Interaction / 交互', x:850, y:450, w:300, h:40, s:24, color:'var(--accent)', anim:'br' }, { type:'text', t:'基于意图识别的流体交互界面 (Fluid UI)。', x:850, y:500, w:600, h:60, s:18, color:'#555', anim:'br' } ]},
      // Page 9: MOVABLE ANIMATION FIX
      { customHTML: `
            <div class="comp animate-in" data-type="media" style="left:200px; top:200px; width:1200px; height:500px; z-index:0;">
                <div class="comp-content" style="width:100%; height:100%;">
                    <div class="parabola-container" style="width:100%; height:100%;">
                        <svg width="100%" height="100%" style="overflow:visible;">
                            <path d="M 0 0 Q 600 500 1200 0" class="para-path" vector-effect="non-scaling-stroke" />
                        </svg>
                        <div class="para-ball" style="top:0; left:0;"></div>
                    </div>
                </div>
                <div class="drag-bar"></div><div class="resize-handle"></div>
            </div>
            
            <div class="comp animate-in" data-type="text" style="left:100px; top:80px; width:600px; height:60px;">
                <div class="comp-content" contenteditable="true" style="font-size:40px; font-weight:800; font-family:'Inter'">CORE STRATEGY 核心策略</div>
                <div class="drag-bar"></div>
            </div>
            <div class="comp animate-in" data-type="text" style="left:150px; top:200px; width:400px;">
                <div class="comp-content" contenteditable="true" style="font-size:24px; font-weight:700; color:var(--accent);">Phase 1: Sense (感知)</div>
                <div style="font-size:16px; color:#666;">多模态传感器数据采集</div>
                <div class="drag-bar"></div>
            </div>
            <div class="comp animate-in" data-type="text" style="left:600px; top:750px; width:400px;">
                <div class="comp-content" contenteditable="true" style="font-size:24px; font-weight:700; color:#888;">Phase 2: Think (决策)</div>
                <div style="font-size:16px; color:#666;">本地大模型意图分析</div>
                <div class="drag-bar"></div>
            </div>
            <div class="comp animate-in" data-type="text" style="left:1300px; top:200px; width:400px;">
                <div class="comp-content" contenteditable="true" style="font-size:24px; font-weight:700; color:var(--green);">Phase 3: Act (执行)</div>
                <div style="font-size:16px; color:#666;">跨应用自动执行任务</div>
                <div class="drag-bar"></div>
            </div>` },
      { elements: [ { type:'text', t:'03', x:600, y:250, w:400, h:250, s:200, wgt:900, color:'rgba(0,0,0,0.05)', align:'center' }, { type:'text', t:'生成式 UI', x:500, y:450, w:600, h:80, s:64, wgt:800, color:'var(--accent)', align:'center' }, { type:'text', t:'GENERATIVE UI EXPLORATION', x:500, y:540, w:600, h:40, s:20, color:'#666', align:'center', spacing:4 }] },
      { customHTML: `<div class="comp animate-in" data-type="text" style="left:100px; top:80px; width:600px; height:60px;"><div class="comp-content" contenteditable="true" style="font-size:40px; font-weight:800; font-family:'Inter'">MOODBOARD 灵感板</div><div class="drag-bar"></div></div><div class="comp sticker-slap placeholder" data-type="media" style="left:100px; top:200px; width:1400px; height:600px; transform: rotate(-2deg); box-shadow: 0 20px 60px rgba(0,0,0,0.2);"><div class="comp-content"><div>+ LARGE UI STICKER</div></div><div class="drag-bar"></div><div class="resize-handle"></div></div>` },
      { elements: [{ type:'text', t:'STEP 01: PROMPT', x:100, y:80, w:600, h:60, s:40, wgt:800 }, { type:'text', t:'自然语言描述界面需求', x:100, y:140, w:400, h:30, s:20, color:'#555' }, { type:'ph', x:800, y:180, w:700, h:600, anim:'paper' }] },
      { elements: [{ type:'text', t:'STEP 02: GENERATION', x:100, y:80, w:600, h:60, s:40, wgt:800 }, { type:'text', t:'AI 实时生成组件布局', x:100, y:140, w:400, h:30, s:20, color:'#555' }, { type:'ph', x:100, y:180, w:750, h:600 }] },
      { elements: [{ type:'text', t:'STEP 03: ADAPTATION', x:100, y:80, w:600, h:60, s:40, wgt:800 }, { type:'text', t:'自适应不同屏幕尺寸', x:100, y:140, w:400, h:30, s:20, color:'#555' }, { type:'ph', x:800, y:180, w:700, h:600 }] },
      { elements: [ { type:'text', t:'04', x:600, y:250, w:400, h:250, s:200, wgt:900, color:'rgba(0,0,0,0.05)', align:'center' }, { type:'text', t:'总结展望', x:500, y:450, w:600, h:80, s:64, wgt:800, color:'var(--accent)', align:'center' }, { type:'text', t:'SUMMARY & VISION', x:500, y:540, w:600, h:40, s:20, color:'#666', align:'center', spacing:4 }] },
      { elements: [ { type:'text', t:'VISION 未来展望', x:100, y:80, w:800, h:60, s:40, wgt:800 }, { type:'text', t:'主动智能 Proactive AI', x:100, y:200, w:400, h:40, s:24, wgt:700, color:'var(--accent)' }, { type:'text', t:'系统不再等待指令，而是基于情境主动提供服务。', x:100, y:250, w:400, h:80, s:18, color:'#555' }, { type:'ph', x:100, y:350, w:400, h:250 }, { type:'text', t:'隐私安全 Privacy First', x:600, y:200, w:400, h:40, s:24, wgt:700, color:'var(--accent)' }, { type:'text', t:'所有敏感数据处理均在端侧完成，数据不出端。', x:600, y:250, w:400, h:80, s:18, color:'#555' }, { type:'ph', x:600, y:350, w:400, h:250 }, { type:'text', t:'无界融合 Boundaryless', x:1100, y:200, w:400, h:40, s:24, wgt:700, color:'var(--accent)' }, { type:'text', t:'手机、车机、IoT 设备无缝流转，算力共享。', x:1100, y:250, w:400, h:80, s:18, color:'#555' }, { type:'ph', x:1100, y:350, w:400, h:250 } ]},
      /* Page 17: Finale (Last Page) - FIX: Use explicit pixels to avoid shift */
      {
        customHTML: `
          <div class="header animate-in" style="position:absolute; top:50px; left:100px; width:1400px; border-bottom:2px solid #ddd; font-size:40px; font-weight:800; padding-bottom:10px;">THE END</div>
          
          <div class="slider-container animate-in" id="slider-17" style="animation-delay: 0.2s;">
             <div class="slider-nav nav-left" onclick="slideLeft()">‹</div>
             <div class="slider-nav nav-right" onclick="slideRight()">›</div>
             <div class="slider-track">
                <div class="slider-item" style="transition-delay: 0ms;"><div class="card-inner"><div class="card-front"><div class="comp placeholder" data-type="media" style="width:100%; height:100%;"><div class="comp-content"><div>+ 1</div></div></div></div><div class="card-back">T</div></div></div>
                <div class="slider-item" style="transition-delay: 50ms;"><div class="card-inner"><div class="card-front"><div class="comp placeholder" data-type="media" style="width:100%; height:100%;"><div class="comp-content"><div>+ 2</div></div></div></div><div class="card-back">H</div></div></div>
                <div class="slider-item" style="transition-delay: 100ms;"><div class="card-inner"><div class="card-front"><div class="comp placeholder" data-type="media" style="width:100%; height:100%;"><div class="comp-content"><div>+ 3</div></div></div></div><div class="card-back">A</div></div></div>
                <div class="slider-item" style="transition-delay: 150ms;"><div class="card-inner"><div class="card-front"><div class="comp placeholder" data-type="media" style="width:100%; height:100%;"><div class="comp-content"><div>+ 4</div></div></div></div><div class="card-back">N</div></div></div>
                <div class="slider-item" style="transition-delay: 200ms;"><div class="card-inner"><div class="card-front"><div class="comp placeholder" data-type="media" style="width:100%; height:100%;"><div class="comp-content"><div>+ 5</div></div></div></div><div class="card-back">K</div></div></div>
                <div class="slider-item" style="transition-delay: 250ms;"><div class="card-inner"><div class="card-front"><div class="comp placeholder" data-type="media" style="width:100%; height:100%;"><div class="comp-content"><div>+ 6</div></div></div></div><div class="card-back">S</div></div></div>
                <div class="slider-item" style="transition-delay: 300ms;"><div class="comp placeholder" data-type="media" style="width:100%; height:100%;"><div class="comp-content"><div>+ 7</div></div></div></div>
                <div class="slider-item" style="transition-delay: 350ms;"><div class="comp placeholder" data-type="media" style="width:100%; height:100%;"><div class="comp-content"><div>+ 8</div></div></div></div>
                <div class="slider-item" style="transition-delay: 400ms;"><div class="comp placeholder" data-type="media" style="width:100%; height:100%;"><div class="comp-content"><div>+ 9</div></div></div></div>
             </div>
          </div>
          
          <button class="thumb-btn animate-in" onclick="finishPresentation(this)" title="Show Finale" style="animation-delay: 0.5s;">👍</button>
          <button class="thumb-btn reset-btn hidden" onclick="resetFinale(this)" title="Back to Gallery">↺</button>
        `
      }
    ];

    function init() {
      initNetworkBackground();
      if (scroller.innerHTML.trim() === '') {
        renderDefaultSlides();
      } else {
        restoreModels();
        bindCarouselEvents();
      }
      setupDelegatedEvents();
      fitSlides();
      window.addEventListener('resize', fitSlides);
      setupObserver();
      setupCopyPaste();
      updatePageNumbers();
      setupClockFlip();
    }

    // --- Special Effect: Clock Flip Logic (Fixed Loop A->A->A) ---
    let flipInterval;
    function setupClockFlip() {
        if(flipInterval) clearInterval(flipInterval);
        
        let currentGroup = 1; 
        
        flipInterval = setInterval(() => {
            const targets = document.querySelectorAll(`.group-${currentGroup} .char-scroll`);
            if(!targets.length) { 
                currentGroup = (currentGroup % 3) + 1;
                return; 
            }
            
            targets.forEach(el => {
                el.style.transition = 'transform 1s cubic-bezier(0.34, 1.56, 0.64, 1)';
                el.style.transform = 'translateY(-1.2em)'; 
                setTimeout(() => {
                    el.style.transition = 'none';
                    el.style.transform = 'translateY(0)';
                }, 1000); 
            });
            currentGroup = (currentGroup % 3) + 1;
        }, 2000); 

        const runner = document.querySelector('.runner-l');
        if(runner) {
            window.addEventListener('mousemove', (e) => {
                const rect = runner.getBoundingClientRect();
                const centerX = rect.left + rect.width / 2;
                const centerY = rect.top + rect.height / 2;
                const dx = e.clientX - centerX;
                const dy = e.clientY - centerY;
                const dist = Math.sqrt(dx*dx + dy*dy);
                const maxDist = 200; 
                if(dist < maxDist) {
                    const power = (maxDist - dist) / maxDist;
                    const moveX = -(dx * power * 0.8);
                    const moveY = -(dy * power * 0.8);
                    runner.style.transform = `translate(${moveX}px, ${moveY}px)`;
                } else {
                    runner.style.transform = `translate(0, 0)`;
                }
            });
        }
    }

    // --- V32 Finale Logic ---
    window.finishPresentation = (btn) => {
        saveState();
        const frame = btn.closest('.slide-frame');
        const track = frame.querySelector('.slider-track');
        const items = frame.querySelectorAll('.slider-item');
        const navs = frame.querySelectorAll('.slider-nav');
        const resetBtn = frame.querySelector('.reset-btn'); 
        
        track.style.transform = 'translateX(0px)';
        carouselIdx = 0;
        track.classList.add('finale-mode'); 

        btn.classList.add('hidden');
        if(resetBtn) resetBtn.classList.remove('hidden');

        navs.forEach(n => { n.style.opacity = '0'; n.style.pointerEvents = 'none'; });
        
        items.forEach((item, idx) => {
            if(idx < 6) {
                setTimeout(() => item.classList.add('flipped'), idx * 100 + 300); 
            } else {
                item.style.opacity = '0';
                setTimeout(() => item.style.display = 'none', 500);
            }
        });
    };

    window.resetFinale = (btn) => {
        const frame = btn.closest('.slide-frame');
        const track = frame.querySelector('.slider-track');
        const items = frame.querySelectorAll('.slider-item');
        const navs = frame.querySelectorAll('.slider-nav');
        const thumbBtn = frame.querySelector('.thumb-btn:not(.reset-btn)');

        track.classList.remove('finale-mode');
        btn.classList.add('hidden');
        if(thumbBtn) thumbBtn.classList.remove('hidden');

        navs.forEach(n => { n.style.opacity = '1'; n.style.pointerEvents = 'auto'; });

        items.forEach((item, idx) => {
            item.classList.remove('flipped');
            if(idx >= 6) {
                item.style.display = 'block';
                requestAnimationFrame(() => item.style.opacity = '1');
            }
        });
    };

    function renderDefaultSlides() {
      scroller.innerHTML = '';
      slidesData.forEach((slide, idx) => {
        const sec = document.createElement('section');
        const wrap = document.createElement('div'); wrap.className = 'scaler-wrap';
        const frame = document.createElement('div'); frame.className = 'slide-frame';
        const svgLayer = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        svgLayer.classList.add('string-svg-layer');
        frame.appendChild(svgLayer);
        const pg = document.createElement('div'); pg.className = 'pg-num'; pg.innerHTML = `${idx+1}`;
        frame.appendChild(pg);
        wrap.appendChild(frame);
        sec.appendChild(wrap);
        scroller.appendChild(sec);

        if (slide.customHTML) {
          const temp = document.createElement('div'); temp.innerHTML = slide.customHTML;
          while(temp.firstChild) frame.appendChild(temp.firstChild);
          if(idx === 16) {
             frame.querySelectorAll('.slider-item .comp').forEach(c => bindCompInner(c));
             bindCarouselEvents();
          }
        } else {
          slide.elements.forEach((el, i) => createComp(frame, el, i));
        }
      });
    }

    function bindCompInner(comp) {
        comp.innerHTML += `<div class="drag-bar"></div><div class="resize-handle"></div>`;
    }

    function createComp(parent, data, delayIdx) {
      const comp = document.createElement('div');
      let animClass = 'animate-in';
      if (data.anim === 'top') animClass = 'anim-top';
      if (data.anim === 'bottom') animClass = 'anim-bottom';
      if (data.anim === 'tl') animClass = 'corner-tl';
      if (data.anim === 'tr') animClass = 'corner-tr';
      if (data.anim === 'bl') animClass = 'corner-bl';
      if (data.anim === 'br') animClass = 'corner-br';
      if (data.anim === 'paper') animClass = 'paper-slap';

      comp.className = `comp ${animClass}`;
      comp.style.left = data.x + 'px'; comp.style.top = data.y + 'px';
      comp.style.width = data.w + 'px'; comp.style.height = data.h + 'px';
      comp.style.animationDelay = (delayIdx * 50) + 'ms';
      comp.style.zIndex = 10;

      if (data.type === 'ph') {
        comp.classList.add('placeholder');
        comp.dataset.type = 'media';
        comp.innerHTML = `<div class="comp-content"><div>+</div></div>`;
      } else if (data.type === 'media') {
         comp.dataset.type = 'media';
      } else {
        comp.dataset.type = 'text';
        comp.innerHTML = `<div class="comp-content" contenteditable="true" style="font-size:${data.s}px; font-weight:${data.wgt||400}; color:${data.color||'#1d1d1f'}; text-align:${data.align||'left'}; font-family:${data.font==='mono'?'var(--font-mono)':'inherit'};">${data.t}</div>`;
      }
      comp.innerHTML += `<div class="drag-bar"></div><div class="resize-handle"></div>`;
      parent.appendChild(comp);
      return comp;
    }

    // --- NEW: Multi-Select & PPT Style Copy/Paste ---
    function setupCopyPaste() {
        window.addEventListener('keydown', (e) => {
            // Copy (Ctrl+C)
            if((e.ctrlKey || e.metaKey) && e.key === 'c') {
                if(selectedElements.size > 0 && !document.activeElement.isContentEditable) {
                    e.preventDefault();
                    clipboard = []; // Clear old
                    selectedElements.forEach(el => {
                        const content = el.querySelector('.comp-content');
                        // Clone computed styles to persist them
                        const computedStyle = window.getComputedStyle(content);
                        clipboard.push({
                            type: el.dataset.type,
                            width: el.style.width,
                            height: el.style.height,
                            left: parseFloat(el.style.left), // Store as number for math
                            top: parseFloat(el.style.top),
                            zIndex: el.style.zIndex,
                            inner: content.innerHTML,
                            modelData: content.dataset.modelData,
                            modelExt: content.dataset.modelExt,
                            // Persist text styles
                            fontSize: computedStyle.fontSize,
                            fontWeight: computedStyle.fontWeight,
                            fontStyle: computedStyle.fontStyle,
                            color: computedStyle.color,
                            textAlign: computedStyle.textAlign
                        });
                    });
                }
            }
            // Paste (Ctrl+V)
            if((e.ctrlKey || e.metaKey) && e.key === 'v') {
                if(clipboard.length > 0 && !document.activeElement.isContentEditable) {
                    e.preventDefault();
                    const frame = getActiveFrame();
                    if(frame) {
                        saveState();
                        // Deselect current
                        selectedElements.forEach(el => el.classList.remove('selected'));
                        selectedElements.clear();
                        
                        // Create new elements offset by 20px
                        clipboard.forEach(item => {
                            const comp = document.createElement('div');
                            comp.className = 'comp animate-in selected'; // Auto select new
                            // Offset logic
                            comp.style.left = (item.left + 20) + 'px';
                            comp.style.top = (item.top + 20) + 'px';
                            comp.style.width = item.width;
                            comp.style.height = item.height;
                            comp.style.zIndex = parseInt(item.zIndex || 10) + 1; // Slightly higher
                            comp.dataset.type = item.type;
                            
                            comp.innerHTML = `<div class="comp-content">${item.inner}</div><div class="drag-bar"></div><div class="resize-handle"></div>`;
                            
                            const content = comp.querySelector('.comp-content');
                            // Apply persisted styles
                            if(item.type === 'text') {
                                content.style.fontSize = item.fontSize;
                                content.style.fontWeight = item.fontWeight;
                                content.style.fontStyle = item.fontStyle;
                                content.style.color = item.color;
                                content.style.textAlign = item.textAlign;
                                content.setAttribute('contenteditable', 'true');
                            }
                            
                            if(item.modelData) {
                                content.dataset.modelData = item.modelData;
                                content.dataset.modelExt = item.modelExt;
                                init3D(content, item.modelData, item.modelExt);
                            }
                            
                            frame.appendChild(comp);
                            selectedElements.add(comp);
                        });
                        updateUIState();
                    }
                }
            }
        });
    }

    // --- Carousel Logic ---
    let carouselIdx = 0;
    function bindCarouselEvents() {
       window.slideLeft = () => {
           const track = document.querySelector('.slider-track');
           if(!track) return;
           carouselIdx = Math.max(0, carouselIdx - 1);
           track.style.transform = `translateX(-${carouselIdx * 320}px)`;
       };
       window.slideRight = () => {
           const track = document.querySelector('.slider-track');
           if(!track) return;
           carouselIdx = Math.min(6, carouselIdx + 1); 
           track.style.transform = `translateX(-${carouselIdx * 320}px)`;
       };
    }

    window.addNewSlide = () => {
        saveState();
        const sec = document.createElement('section');
        const wrap = document.createElement('div'); wrap.className = 'scaler-wrap';
        const frame = document.createElement('div'); frame.className = 'slide-frame';
        const pg = document.createElement('div'); pg.className = 'pg-num'; pg.innerHTML = `New`;
        const svgLayer = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        svgLayer.classList.add('string-svg-layer');
        frame.appendChild(svgLayer);
        frame.appendChild(pg);
        wrap.appendChild(frame);
        sec.appendChild(wrap);
        scroller.appendChild(sec);
        setTimeout(() => sec.scrollIntoView({behavior:'smooth'}), 100);
        setupObserver();
        updatePageNumbers();
    };

    window.moveSlide = (dir) => {
        const frame = getActiveFrame();
        if(!frame) return;
        const currentSec = frame.closest('section');
        if (dir === -1 && currentSec.previousElementSibling) {
            saveState();
            currentSec.parentNode.insertBefore(currentSec, currentSec.previousElementSibling);
            currentSec.scrollIntoView({behavior:'smooth'});
            updatePageNumbers();
        } else if (dir === 1 && currentSec.nextElementSibling) {
            saveState();
            currentSec.parentNode.insertBefore(currentSec.nextElementSibling, currentSec);
            currentSec.scrollIntoView({behavior:'smooth'});
            updatePageNumbers();
        }
    };
    
    function updatePageNumbers() {
        const pgs = document.querySelectorAll('.pg-num');
        pgs.forEach((pg, index) => { pg.innerHTML = (index + 1).toString().padStart(2, '0'); });
    }

    window.toggleTool = (mode) => {
      if(toolMode === mode) toolMode = 'cursor'; else toolMode = mode;
      document.querySelectorAll('.tool-btn').forEach(b => b.classList.remove('active-tool'));
      if(toolMode !== 'cursor') document.getElementById(`btn-${toolMode}`).classList.add('active-tool');
      firstPin = null; document.querySelectorAll('.pin').forEach(p => p.classList.remove('active-pin'));
    };

    // --- New Delegated Events for Multi-Select ---
    function setupDelegatedEvents() {
      scroller.addEventListener('mousedown', (e) => {
        const target = e.target;
        const frame = target.closest('.slide-frame');
        const comp = target.closest('.comp');

        // Pin Tool (Fix: Ensure we don't need to click EXACTLY on frame background, bubbling works)
        if(toolMode === 'pin' && frame) {
           e.stopPropagation(); e.preventDefault();
           saveState();
           const rect = frame.getBoundingClientRect();
           const scale = getScale();
           createPin(frame, (e.clientX - rect.left) / scale, (e.clientY - rect.top) / scale);
           return;
        }
        // String Tool
        if(toolMode === 'string') {
           const clickedPin = target.closest('.pin');
           if(clickedPin) {
             e.stopPropagation(); e.preventDefault();
             if(!firstPin) { firstPin = clickedPin; clickedPin.classList.add('active-pin'); } 
             else { if(firstPin !== clickedPin) { saveState(); createString(clickedPin.closest('.slide-frame'), firstPin, clickedPin); } firstPin.classList.remove('active-pin'); firstPin = null; }
           }
           return;
        }

        // Selection Logic
        if(!comp && !target.closest('.sidebar')) { 
            // Clicked empty space -> Clear selection
            if(selectedElements.size > 0) {
                selectedElements.forEach(el => el.classList.remove('selected'));
                selectedElements.clear();
                selectedComp = null; // compatibility
                updateUIState();
            }
            return; 
        }

        if(comp) {
          // Check for Text Editing
          if(comp.dataset.type === 'text' && target.closest('.comp-content')) { 
              if(comp.classList.contains('locked')) { e.stopPropagation(); return; }
              // If entering text edit, ensure it's selected but don't drag
              if(!selectedElements.has(comp)) {
                  selectedElements.forEach(el => el.classList.remove('selected'));
                  selectedElements.clear();
                  selectedElements.add(comp);
                  comp.classList.add('selected');
                  selectedComp = comp;
              }
              return; 
          }

          e.stopPropagation();
          
          // Multi-select logic (Shift Key)
          if(e.shiftKey) {
              if(selectedElements.has(comp)) {
                  selectedElements.delete(comp);
                  comp.classList.remove('selected');
              } else {
                  selectedElements.add(comp);
                  comp.classList.add('selected');
              }
              // Update compatibility pointer
              selectedComp = selectedElements.size === 1 ? comp : null;
          } else {
              // Standard Click
              if(!selectedElements.has(comp)) {
                  // If not already selected, clear others and select this
                  selectedElements.forEach(el => el.classList.remove('selected'));
                  selectedElements.clear();
                  selectedElements.add(comp);
                  comp.classList.add('selected');
                  selectedComp = comp;
              }
              // If already selected, do nothing (ready for drag)
          }
          
          updateUIState();

          if(comp.classList.contains('locked')) return;
          if(target.classList.contains('resize-handle')) startResize(e, comp); 
          else startDragMulti(e);
        }
      });
    }

    function createPin(frame, x, y) {
      const pin = document.createElement('div'); pin.className = 'pin animate-in';
      pin.style.left = x + 'px'; pin.style.top = y + 'px';
      // Apply Color
      const color = toolColorInput.value;
      pin.style.background = color;
      frame.appendChild(pin);
    }

    function createString(frame, p1, p2) {
      const svg = frame.querySelector('.string-svg-layer');
      if(!svg) return;
      const x1 = parseFloat(p1.style.left), y1 = parseFloat(p1.style.top);
      const x2 = parseFloat(p2.style.left), y2 = parseFloat(p2.style.top);
      const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
      path.setAttribute("class", "detective-string");
      path.style.stroke = toolColorInput.value; // Apply color
      const cx = (x1 + x2) / 2, cy = (y1 + y2) / 2 + 50;
      path.setAttribute("d", `M ${x1} ${y1} Q ${cx} ${cy} ${x2} ${y2}`);
      svg.appendChild(path);
    }
    
    // --- UPDATED UI STATE FOR ALIGNMENT ---
    function updateUIState() {
        const deleteGroup = document.getElementById('delete-group');

        if(selectedElements.size > 0) {
            sidebar.classList.add('has-selection');
            layerProps.style.display = 'flex';
            if(deleteGroup) deleteGroup.style.display = 'flex';
            
            // Show Align Props for ANY selection
            alignProps.style.display = 'flex';
            
            // Check lock state of primary selection
            const primary = [...selectedElements][0];
            const isLocked = primary.classList.contains('locked');
            if(isLocked) { btnLock.classList.add('active-state'); btnLock.innerHTML = '🔒'; } else { btnLock.classList.remove('active-state'); btnLock.innerHTML = '🔓'; }
            
            // Show text props only if all selected are text (or just primary)
            if(primary.dataset.type === 'text') {
                textProps.style.display = 'flex';
                const content = primary.querySelector('.comp-content');
                const compStyle = window.getComputedStyle(content);
                fontSizeInput.value = parseInt(compStyle.fontSize);
            } else { textProps.style.display = 'none'; }
        } else {
            sidebar.classList.remove('has-selection');
            textProps.style.display = 'none';
            alignProps.style.display = 'none';
            layerProps.style.display = 'none';
            if(deleteGroup) deleteGroup.style.display = 'none';
        }
    }

    // --- ALIGNMENT FUNCTIONS (Position) ---
    window.alignSelection = (mode) => {
        if(selectedElements.size === 0) return;
        saveState();
        
        const els = Array.from(selectedElements);
        
        // Single Item: Align to Slide
        if(els.length === 1) {
            const el = els[0];
            const slideW = 1600; // Fixed base width
            const slideH = 900;  // Fixed base height
            const elW = el.offsetWidth;
            const elH = el.offsetHeight;
            
            if(mode === 'h-center') el.style.left = (slideW - elW) / 2 + 'px';
            if(mode === 'v-center') el.style.top = (slideH - elH) / 2 + 'px';
            return;
        }

        // Multiple Items: Align relative to selection bounds
        // 1. Calculate Bounds
        let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
        els.forEach(el => {
            const x = parseFloat(el.style.left);
            const y = parseFloat(el.style.top);
            const w = el.offsetWidth;
            const h = el.offsetHeight;
            if(x < minX) minX = x;
            if(x + w > maxX) maxX = x + w;
            if(y < minY) minY = y;
            if(y + h > maxY) maxY = y + h;
        });

        const centerX = (minX + maxX) / 2;
        const centerY = (minY + maxY) / 2;

        els.forEach(el => {
           if(mode === 'left') el.style.left = minX + 'px';
           if(mode === 'h-center') el.style.left = (centerX - el.offsetWidth / 2) + 'px';
           if(mode === 'right') el.style.left = (maxX - el.offsetWidth) + 'px';
           
           if(mode === 'top') el.style.top = minY + 'px';
           if(mode === 'v-center') el.style.top = (centerY - el.offsetHeight / 2) + 'px';
           if(mode === 'bottom') el.style.top = (maxY - el.offsetHeight) + 'px';
        });
    }

    window.toggleLock = () => {
        if(selectedElements.size === 0) return;
        saveState();
        selectedElements.forEach(el => {
            el.classList.toggle('locked');
            if(el.dataset.type === 'text') {
                const content = el.querySelector('.comp-content');
                if(el.classList.contains('locked')) content.removeAttribute('contenteditable'); else content.setAttribute('contenteditable', 'true');
            }
        });
        updateUIState();
    };

    // Apply props to ALL selected elements
    window.applyFontSize = (val) => { 
        saveState();
        selectedElements.forEach(el => {
            if(el.dataset.type === 'text' && !el.classList.contains('locked')) {
               el.querySelector('.comp-content').style.fontSize = val + 'px';
            }
        });
    }
    window.adjFontSize = (delta) => { 
        let current = parseInt(fontSizeInput.value) || 24; current += delta; if(current < 8) current = 8; fontSizeInput.value = current; applyFontSize(current); 
    }
    window.toggleBold = () => { 
        saveState();
        selectedElements.forEach(el => {
            if(el.dataset.type === 'text' && !el.classList.contains('locked')) {
                const content = el.querySelector('.comp-content');
                content.style.fontWeight = (content.style.fontWeight == 'bold' || content.style.fontWeight >= 700) ? '400' : '800'; 
            }
        });
    }
    window.toggleItalic = () => { 
        saveState();
        selectedElements.forEach(el => {
            if(el.dataset.type === 'text' && !el.classList.contains('locked')) {
                const content = el.querySelector('.comp-content');
                content.style.fontStyle = (content.style.fontStyle === 'italic') ? 'normal' : 'italic';
            }
        });
    }
    window.alignText = (align) => { 
        saveState();
        selectedElements.forEach(el => {
            if(el.dataset.type === 'text' && !el.classList.contains('locked')) {
                el.querySelector('.comp-content').style.textAlign = align;
            }
        });
    }
    window.applyColor = (hex) => { 
        selectedElements.forEach(el => {
            if(el.dataset.type === 'text' && !el.classList.contains('locked')) {
                el.querySelector('.comp-content').style.color = hex;
            }
        });
    }
    window.changeLayer = (dir) => { 
        saveState();
        selectedElements.forEach(el => {
            let z = parseInt(window.getComputedStyle(el).zIndex) || 10; z += dir; el.style.zIndex = z; 
        });
    }

    // --- Multi-Element Drag Logic ---
    function startDragMulti(e) {
      const startX = e.clientX, startY = e.clientY;
      const scale = getScale();
      
      // Store initial positions for all selected elements
      const initialPositions = new Map();
      selectedElements.forEach(el => {
          if(!el.classList.contains('locked')) {
              initialPositions.set(el, {
                  left: el.offsetLeft,
                  top: el.offsetTop
              });
          }
      });

      const move = (ev) => { 
          const dx = (ev.clientX - startX) / scale;
          const dy = (ev.clientY - startY) / scale;
          
          initialPositions.forEach((pos, el) => {
              el.style.left = (pos.left + dx) + 'px';
              el.style.top = (pos.top + dy) + 'px';
          });
      };
      
      const up = () => { 
          window.removeEventListener('mousemove', move); 
          window.removeEventListener('mouseup', up); 
          if(Math.abs(e.clientX - startX) > 2) saveState(); // Only save if actually moved
      };
      window.addEventListener('mousemove', move); 
      window.addEventListener('mouseup', up);
    }

    function startResize(e, comp) { 
        if(comp.classList.contains('locked')) return; 
        const startX = e.clientX, startY = e.clientY; 
        const startW = comp.offsetWidth, startH = comp.offsetHeight; 
        const scale = getScale(); 
        const move = (ev) => { comp.style.width = Math.max(50, startW + (ev.clientX - startX) / scale) + 'px'; comp.style.height = Math.max(30, startH + (ev.clientY - startY) / scale) + 'px'; }; 
        const up = () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', up); saveState(); }; 
        window.addEventListener('mousemove', move); window.addEventListener('mouseup', up); 
    }

    window.triggerInput = (id) => document.getElementById(id).click();
    
    document.getElementById('inp-img').onchange = (e) => {
      const files = Array.from(e.target.files);
      if(!files.length) return;
      saveState();
      const frame = getActiveFrame();
      
      // If single selection media -> replace
      if(selectedElements.size === 1) {
          const el = [...selectedElements][0];
          if(el.dataset.type === 'media' && files.length === 1) {
              const reader = new FileReader();
              reader.onload = (event) => { replaceMediaBase64(el, event.target.result); };
              reader.readAsDataURL(files[0]);
              e.target.value = '';
              return;
          }
      }

      // Batch import
      files.forEach((file, index) => {
          const reader = new FileReader();
          reader.onload = (event) => {
              // Use placeholder if available and it's the first image
              let target = null;
              if (index === 0) { const placeholder = frame.querySelector('.comp.placeholder'); if (placeholder && selectedElements.size === 0) target = placeholder; }
              
              if (target) { replaceMediaBase64(target, event.target.result); } 
              else {
                  const offset = index * 30;
                  const newComp = createComp(frame, { type:'ph', x: 200 + offset, y: 200 + offset, w: 400, h: 300 }, 0);
                  replaceMediaBase64(newComp, event.target.result);
              }
          };
          reader.readAsDataURL(file);
      });
      e.target.value = '';
    };

    function replaceMediaBase64(comp, base64) {
      comp.classList.remove('placeholder');
      const content = comp.querySelector('.comp-content');
      content.innerHTML = '';
      const img = document.createElement('img');
      img.src = base64; 
      // iOS Optimization
      img.style.willChange = 'transform';
      img.style.webkitBackfaceVisibility = 'hidden';
      content.appendChild(img);
    }

    document.getElementById('inp-model').onchange = (e) => {
      const file = e.target.files[0];
      if(!file) return;
      const frame = getActiveFrame();
      let target = null;
      if(selectedElements.size === 1) target = [...selectedElements][0];
      
      if(!target || target.dataset.type !== 'media') {
        const placeholder = frame.querySelector('.comp.placeholder');
        if (placeholder) { target = placeholder; } 
        else { target = createComp(frame, { type:'ph', x:400, y:200, w:600, h:500 }, 0); }
      }
      
      const loader = document.createElement('div');
      loader.className = 'loader-overlay';
      loader.innerHTML = '<div class="spinner"></div><div>Loading Model...</div>';
      target.appendChild(loader);
      
      saveState();
      const blobUrl = URL.createObjectURL(file);
      const ext = file.name.split('.').pop().toLowerCase();
      
      const reader = new FileReader();
      reader.onload = (event) => {
          const base64 = event.target.result;
          target.classList.remove('placeholder');
          target.dataset.type = 'model';
          const content = target.querySelector('.comp-content');
          content.innerHTML = '';
          content.dataset.modelData = base64; 
          content.dataset.modelExt = ext;
          init3D(content, base64, ext);
          if(loader.parentNode) loader.parentNode.removeChild(loader);
      };
      reader.readAsDataURL(file);
      e.target.value = '';
    };

    function restoreModels() { document.querySelectorAll('[data-model-data]').forEach(el => { init3D(el, el.dataset.modelData, el.dataset.modelExt); }); }
    window.spawnText = () => { saveState(); const frame = getActiveFrame(); const c = createComp(frame, { type:'text', t:'New Text', x:200, y:200, w:400, h:60, s:32 }, 0); selectedElements.clear(); selectedElements.add(c); c.classList.add('selected'); updateUIState(); };
    window.confirmDelete = () => { 
        if(selectedElements.size > 0) { 
            let locked = false; selectedElements.forEach(el => { if(el.classList.contains('locked')) locked = true; });
            if(locked) { alert('Selection contains locked elements!'); return; }
            if(confirm("Delete selected elements?")) { 
                saveState(); 
                selectedElements.forEach(el => el.remove()); 
                selectedElements.clear(); 
                updateUIState(); 
            } 
        } 
    };
    
    // Key Listener for Delete
    window.addEventListener('keydown', (e) => { 
        if((e.ctrlKey || e.metaKey) && e.key === 'z') { e.preventDefault(); undo(); } 
        if((e.key === 'Delete' || e.key === 'Backspace') && selectedElements.size > 0) { 
            if(document.activeElement.isContentEditable) return; 
            // Check locked
            let locked = false; selectedElements.forEach(el => { if(el.classList.contains('locked')) locked = true; });
            if(locked) return;
            saveState(); 
            selectedElements.forEach(el => el.remove()); 
            selectedElements.clear(); 
            updateUIState(); 
        } 
    });

    window.saveProject = () => { const clone = document.documentElement.cloneNode(true); clone.querySelectorAll('.selected').forEach(el => el.classList.remove('selected')); clone.querySelectorAll('.active-tool').forEach(el => el.classList.remove('active-tool')); clone.querySelectorAll('.loader-overlay').forEach(el => el.remove()); const sb = clone.querySelector('.sidebar'); if(sb) sb.classList.remove('has-selection'); const htmlContent = "<!DOCTYPE html>" + clone.outerHTML; const blob = new Blob([htmlContent], {type: 'text/html'}); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'AIGC_Smartphone_Exploration.html'; a.click(); };
    function getActiveFrame() { const idx = Math.round(scroller.scrollTop / window.innerHeight); return document.querySelectorAll('.slide-frame')[idx] || document.querySelector('.slide-frame'); }
    function getScale() { return Math.min((window.innerWidth * 0.96) / 1600, (window.innerHeight * 0.96) / 900); }
    function fitSlides() { document.documentElement.style.setProperty('--scale', getScale()); }
    function setupObserver() { const obs = new IntersectionObserver((entries) => { entries.forEach(e => { if(e.isIntersecting) e.target.classList.add('active'); else e.target.classList.remove('active'); }); }, { threshold: 0.5 }); document.querySelectorAll('section').forEach(s => obs.observe(s)); }

    function init3D(container, dataUrl, ext) {
      try {
          const w = container.clientWidth; const h = container.clientHeight;
          const scene = new THREE.Scene();
          const camera = new THREE.PerspectiveCamera(45, w/h, 0.1, 1000); camera.position.z = 5;
          const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); renderer.setSize(w, h);
          container.appendChild(renderer.domElement);
          const controls = new OrbitControls(camera, renderer.domElement); controls.autoRotate = true;
          scene.add(new THREE.AmbientLight(0xffffff, 1.2));
          const dl = new THREE.DirectionalLight(0xffffff, 1.5); dl.position.set(5,10,7); scene.add(dl);
          const mat = new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 0.4 });
          const onLoad = (obj) => { obj.traverse(c => { if(c.isMesh) c.material = mat; }); const box = new THREE.Box3().setFromObject(obj); const center = box.getCenter(new THREE.Vector3()); const size = box.getSize(new THREE.Vector3()); const max = Math.max(size.x, size.y, size.z); obj.scale.setScalar(3.5/max); obj.position.sub(center.multiplyScalar(3.5/max)); scene.add(obj); };
          if(ext === 'obj') new OBJLoader().load(dataUrl, onLoad); else new GLTFLoader().load(dataUrl, (g) => onLoad(g.scene));
          function anim() { requestAnimationFrame(anim); controls.update(); renderer.render(scene, camera); }
          anim();
      } catch(e) { console.error("3D Load Error", e); }
    }

    function initNetworkBackground() {
      const canvas = document.getElementById('bg-canvas');
      const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias:true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000);
      camera.position.z = 100;
      const count = 100;
      const pos = new Float32Array(count*3);
      const vel = [];
      for(let i=0; i<count; i++) { pos[i*3] = (Math.random()-0.5)*300; pos[i*3+1] = (Math.random()-0.5)*200; pos[i*3+2] = (Math.random()-0.5)*100; vel.push({x:(Math.random()-0.5)*0.15, y:(Math.random()-0.5)*0.15}); }
      const parts = new THREE.BufferGeometry(); parts.setAttribute('position', new THREE.BufferAttribute(pos, 3));
      const pMat = new THREE.PointsMaterial({ color: 0xFF4D00, size: 2, transparent:true, opacity:0.4 });
      const pSys = new THREE.Points(parts, pMat); scene.add(pSys);
      const lMat = new THREE.LineBasicMaterial({ color: 0x999999, transparent: true, opacity: 0.1 });
      const lGeo = new THREE.BufferGeometry(); const lines = new THREE.LineSegments(lGeo, lMat); scene.add(lines);
      function animate() {
        requestAnimationFrame(animate);
        const pPos = pSys.geometry.attributes.position.array;
        for(let i=0; i<count; i++) { pPos[i*3] += vel[i].x; pPos[i*3+1] += vel[i].y; if(Math.abs(pPos[i*3])>160) vel[i].x *= -1; if(Math.abs(pPos[i*3+1])>100) vel[i].y *= -1; }
        pSys.geometry.attributes.position.needsUpdate = true;
        const lPos = [];
        for(let i=0; i<count; i++) { for(let j=i+1; j<count; j++) { const dx = pPos[i*3]-pPos[j*3]; const dy = pPos[i*3+1]-pPos[j*3+1]; if(dx*dx+dy*dy < 1500) { lPos.push(pPos[i*3], pPos[i*3+1], pPos[i*3+2], pPos[j*3], pPos[j*3+1], pPos[j*3+2]); } } }
        lGeo.setAttribute('position', new THREE.Float32BufferAttribute(lPos, 3));
        renderer.render(scene, camera);
      }
      animate();
      window.addEventListener('resize', () => { renderer.setSize(window.innerWidth, window.innerHeight); camera.aspect = window.innerWidth/window.innerHeight; camera.updateProjectionMatrix(); fitSlides(); });
    }

    init();
  </script>
</body>
</html>