flowchart TB
    subgraph UI["使用者介面"]
        Preview["預覽區<br/>3D 卡片"]
        Panel["控制面板<br/>Bento Grid 佈局"]
        ThemeSwitch["主題切換<br/>Earth / Dream / Cyber"]
    end

    subgraph JS["JavaScript 模組"]
        App["app.js<br/>主入口"]
        State["state.js<br/>響應式狀態"]
        Card["card.js<br/>3D 引擎"]
        Controls["controls.js<br/>輸入綁定"]
        Export["export.js<br/>匯出功能"]
        Theme["theme.js<br/>主題管理"]
    end

    subgraph CSS["CSS 模組"]
        Variables["variables.css<br/>設計 Tokens"]
        Base["base.css<br/>Reset + 基礎"]
        Layout["layout.css<br/>Bento Grid"]
        CardCSS["card.css<br/>3D 特效"]
        ControlsCSS["controls.css<br/>控制元件"]
        Themes["themes/<br/>earth / dream / cyber"]
    end

    subgraph Effects["視覺特效層"]
        Foil["雷射箔面<br/>conic-gradient"]
        Glare["反光層<br/>linear-gradient"]
        Glass["磨砂玻璃<br/>backdrop-blur"]
        Noise["噪點紋理<br/>SVG feTurbulence"]
    end

    subgraph Export["匯出引擎"]
        HTML["HTML Generator<br/>獨立組件"]
        Screenshot["html2canvas-pro<br/>PNG 截圖"]
    end

    UI --> JS
    JS --> CSS
    Card --> Effects
    Theme --> Themes
    Export --> Screenshot
    Preview --> Export

flowchart LR
    subgraph Themes["三種視覺主題"]
        Earth["🌍 Earth<br/>大地風格"]
        Dream["🌙 Dream<br/>夢境風格"]
        Cyber["⚡ Cyber<br/>賽博風格"]
    end

    subgraph EarthStyle["Earth 特色"]
        E1["Wabi-sabi 侘寂美學"]
        E2["SVG 噪點紋理背景"]
        E3["溫暖大地色調"]
        E4["襯線字體標題"]
    end

    subgraph DreamStyle["Dream 特色"]
        D1["Aurora 極光漸層"]
        D2["Claymorphism 軟 3D"]
        D3["冰藍 + 薰衣草色"]
        D4["動態背景動畫"]
    end

    subgraph CyberStyle["Cyber 特色"]
        C1["CRT 掃描線效果"]
        C2["霓虹綠發光"]
        C3["Monospace 終端字體"]
        C4["故障藝術按鈕"]
    end

    Earth --> EarthStyle
    Dream --> DreamStyle
    Cyber --> CyberStyle