{"id":486,"date":"2026-03-12T00:00:13","date_gmt":"2026-03-12T00:00:13","guid":{"rendered":"https:\/\/onlinetexteditor.io\/?page_id=486"},"modified":"2026-04-06T06:04:59","modified_gmt":"2026-04-06T06:04:59","slug":"3d-text-generator","status":"publish","type":"page","link":"https:\/\/onlinetexteditor.io\/fr\/3d-text-generator\/","title":{"rendered":"3D Text Generator \u2013 Create Instantly"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; theme_builder_area=&#8221;post_content&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221;][et_pb_fullwidth_code _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; theme_builder_area=&#8221;post_content&#8221; hover_enabled=&#8221;0&#8243; sticky_enabled=&#8221;0&#8243;]<!-- START OF FILE 3D Text Generator -->\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n    .pg-tool-wrapper {\r\n        --primary-font: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n        --body-font: \"Consolas\", \"Monaco\", \"Courier New\", monospace;\r\n        \r\n        --theme-panel: rgba(10, 15, 25, 0.96);\r\n        --theme-border: rgba(0, 255, 255, 0.3); \r\n        \r\n        --cyan-3d: #00ffff;\r\n        --red-3d: #ff003c;\r\n        --silver-3d: #e2e8f0;\r\n        --void-dark: #050810;\r\n        --text-muted: #94a3b8;\r\n        \r\n        --grad-master: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        --grad-anaglyph: linear-gradient(135deg, #00ffff 0%, #ff003c 100%);\r\n        --grad-shimmer: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.4), transparent);\r\n        --grad-dark: linear-gradient(180deg, rgba(10,15,25,0.8) 0%, rgba(5,8,16,0.98) 100%);\r\n        \r\n        --glow-cyan: 0 0 20px rgba(0, 255, 255, 0.5);\r\n        --glow-red: 0 0 20px rgba(255, 0, 60, 0.5);\r\n        --shadow-ui: 0 20px 50px rgba(0, 0, 0, 0.9);\r\n        --shadow-3d-text: 3px 3px 0 rgba(255,0,60,0.8), -3px -3px 0 rgba(0,255,255,0.8);\r\n        \r\n        --transition-ui: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        --transition-fast: all 0.2s ease;\r\n        \r\n        font-family: var(--primary-font);\r\n        color: var(--silver-3d);\r\n        line-height: 1.5;\r\n        width: 100%;\r\n        overflow-x: hidden;\r\n        text-align: center; \r\n        \r\n        background: var(--grad-master);\r\n        background-attachment: fixed;\r\n    }\r\n\r\n    .pg-tool-wrapper * { box-sizing: border-box; }\r\n\r\n    .pg-container {\r\n        max-width: 1200px !important;\r\n        width: 100% !important;\r\n        margin: 0 auto !important;\r\n        padding: 40px 20px !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n    }\r\n\r\n    .pg-hero-content-wrapper {\r\n        z-index: 2;\r\n        padding-top: 20px;\r\n        width: 100%;\r\n    }\r\n\r\n    .pg-main-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 3.2rem;\r\n        font-weight: 900; \r\n        line-height: 1.1;\r\n        margin: 0 auto 15px auto;\r\n        text-transform: uppercase;\r\n        letter-spacing: 3px;\r\n        color: #fff;\r\n        text-shadow: var(--shadow-3d-text);\r\n        max-width: 900px;\r\n        position: relative;\r\n        display: inline-block;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .pg-main-title:hover {\r\n        text-shadow: 5px 5px 0 rgba(255,0,60,0.9), -5px -5px 0 rgba(0,255,255,0.9);\r\n        transform: scale(1.02);\r\n    }\r\n    \r\n    .pg-main-title::after {\r\n        content: '';\r\n        display: block;\r\n        width: 120px;\r\n        height: 5px;\r\n        background: var(--grad-anaglyph);\r\n        margin: 25px auto 0;\r\n        box-shadow: var(--glow-cyan);\r\n        border-radius: 5px;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .pg-main-title:hover::after { width: 300px; }\r\n    \r\n    .pg-subtitle {\r\n        font-size: 1.1rem;\r\n        color: rgba(226, 232, 240, 0.9);\r\n        max-width: 750px;\r\n        margin: 0 auto 35px auto;\r\n        padding: 0 10px;\r\n        font-weight: 600;\r\n        letter-spacing: 0.5px;\r\n        text-shadow: 0 3px 6px rgba(0,0,0,0.8);\r\n    }\r\n\r\n    .pg-generator-card {\r\n        background: var(--theme-panel);\r\n        border: 1px solid var(--theme-border); \r\n        border-top-width: 4px;\r\n        border-top-color: var(--cyan-3d);\r\n        width: 100%;\r\n        box-shadow: var(--shadow-ui), inset 0 0 40px rgba(0,0,0,0.6); \r\n        border-radius: 12px;\r\n        position: relative;\r\n        transform: translateY(0);\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .pg-generator-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 100%; height: 2px;\r\n        background: var(--grad-shimmer);\r\n        opacity: 0.4;\r\n        transition: opacity 0.3s ease;\r\n    }\r\n    .pg-generator-card:hover::before { opacity: 1; }\r\n\r\n    .pg-controls-wrapper {\r\n        padding: 35px;\r\n        background: var(--grad-dark);\r\n        border-bottom: 2px solid #000;\r\n        display: grid;\r\n        grid-template-columns: 1.2fr 1fr;\r\n        grid-template-rows: auto auto;\r\n        gap: 25px;\r\n        align-items: stretch;\r\n    }\r\n\r\n    .pg-input-section {\r\n        grid-column: 1 \/ 2;\r\n        grid-row: 1 \/ 3;\r\n        display: flex;\r\n        flex-direction: column;\r\n        height: 100%;\r\n    }\r\n    \r\n    .pg-enhanced-input-wrapper {\r\n        background: rgba(5, 8, 16, 0.8);\r\n        border: 2px solid rgba(0, 255, 255, 0.2);\r\n        border-radius: 8px;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        flex-grow: 1;\r\n        transition: var(--transition-ui);\r\n        box-shadow: inset 0 0 20px rgba(0,0,0,1);\r\n        position: relative;\r\n    }\r\n\r\n    .pg-enhanced-input-wrapper:focus-within {\r\n        border-color: var(--cyan-3d);\r\n        box-shadow: inset 0 0 30px rgba(0, 255, 255, 0.15), 0 0 15px rgba(0, 255, 255, 0.3);\r\n    }\r\n    \r\n    .pg-text-input {\r\n        width: 100% !important;\r\n        flex-grow: 1 !important;\r\n        min-height: 150px !important;\r\n        padding: 25px !important;\r\n        background: transparent !important;\r\n        border: none !important;\r\n        color: #fff !important;\r\n        font-family: var(--body-font) !important;\r\n        font-weight: bold !important;\r\n        font-size: 1.8rem !important;\r\n        outline: none !important;\r\n        text-align: left !important;\r\n        text-shadow: 2px 2px 0px #000;\r\n        white-space: pre-wrap !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: break-word !important;\r\n        resize: none;\r\n    }\r\n    \r\n    .pg-text-input::placeholder {\r\n        color: rgba(0, 255, 255, 0.3);\r\n        font-style: italic;\r\n    }\r\n\r\n    .pg-input-toolbar {\r\n        display: flex;\r\n        justify-content: flex-start;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n        background: rgba(10, 15, 25, 0.95);\r\n        padding: 12px 15px;\r\n        border-top: 1px solid rgba(0, 255, 255, 0.2);\r\n    }\r\n\r\n    .pg-toolbar-btn {\r\n        background: rgba(255, 255, 255, 0.05);\r\n        color: var(--text-muted);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        padding: 8px 12px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.75rem;\r\n        font-weight: 700;\r\n        border-radius: 4px;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n    }\r\n\r\n    .pg-toolbar-btn i { transition: transform 0.2s ease; }\r\n\r\n    .pg-toolbar-btn:hover {\r\n        background: rgba(0, 255, 255, 0.1);\r\n        color: var(--cyan-3d);\r\n        border-color: rgba(0, 255, 255, 0.4);\r\n        box-shadow: var(--glow-cyan);\r\n    }\r\n    .pg-toolbar-btn:hover i { transform: translateY(-2px); }\r\n    .pg-toolbar-btn:active { transform: scale(0.95); }\r\n    \r\n    .pg-preset-select {\r\n        background: rgba(255, 0, 60, 0.1);\r\n        color: var(--red-3d);\r\n        border: 1px solid rgba(255, 0, 60, 0.3);\r\n        padding: 8px 12px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.75rem;\r\n        font-weight: 800;\r\n        border-radius: 4px;\r\n        cursor: pointer;\r\n        outline: none;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        appearance: none;\r\n        flex-grow: 1;\r\n    }\r\n    \r\n    .pg-preset-select:hover, .pg-preset-select:focus {\r\n        background: var(--red-3d);\r\n        color: #fff;\r\n        border-color: var(--red-3d);\r\n        box-shadow: var(--glow-red);\r\n    }\r\n    \r\n    .pg-preset-select option {\r\n        background: var(--void-dark);\r\n        color: #fff;\r\n    }\r\n\r\n    .pg-panel-label {\r\n        display: flex;\r\n        align-items: center;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.85rem;\r\n        font-weight: 800;\r\n        color: var(--silver-3d);\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        margin-bottom: 12px;\r\n        text-shadow: 2px 2px 4px #000;\r\n    }\r\n    \r\n    .pg-panel-label i {\r\n        color: var(--cyan-3d);\r\n        margin-right: 8px;\r\n        font-size: 1.1rem;\r\n    }\r\n\r\n    .pg-grid-options {\r\n        display: grid;\r\n        gap: 12px;\r\n        grid-template-columns: repeat(2, 1fr);\r\n    }\r\n\r\n    .pg-option-btn {\r\n        background: rgba(15, 20, 35, 0.6);\r\n        border: 1px solid rgba(255, 255, 255, 0.05);\r\n        padding: 14px 8px;\r\n        color: var(--text-muted);\r\n        font-family: var(--primary-font);\r\n        font-size: 0.75rem;\r\n        font-weight: 700;\r\n        cursor: pointer;\r\n        border-radius: 6px;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 6px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .pg-option-btn i { font-size: 1.3rem; transition: var(--transition-ui); }\r\n\r\n    .pg-option-btn::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: -100%; width: 100%; height: 100%;\r\n        background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.2), transparent);\r\n        transition: left 0.4s ease;\r\n        z-index: 0;\r\n    }\r\n    .pg-option-btn > * { position: relative; z-index: 1; }\r\n\r\n    .pg-option-btn:hover {\r\n        border-color: rgba(0, 255, 255, 0.4);\r\n        color: #fff;\r\n        transform: translateY(-2px);\r\n    }\r\n    .pg-option-btn:hover::before { left: 100%; }\r\n    .pg-option-btn:hover i { transform: scale(1.1) translateY(-2px); color: var(--cyan-3d); }\r\n\r\n    .pg-option-btn.active { \r\n        background: var(--void-dark);\r\n        color: #fff; \r\n        border-color: var(--cyan-3d);\r\n        box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 15px rgba(0, 255, 255, 0.2);\r\n    }\r\n    .pg-option-btn.active i { color: var(--cyan-3d); text-shadow: var(--glow-cyan); }\r\n\r\n    \/* ============================================\r\n       MODE-ACTIVE BUTTON ACCENT COLORS\r\n       ============================================ *\/\r\n    .pg-option-btn.mode-btn[data-val=\"Layered\"].active { border-color: #00ffff; box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 15px rgba(0,255,255,0.3); }\r\n    .pg-option-btn.mode-btn[data-val=\"Layered\"].active i { color: #00ffff; }\r\n    \r\n    .pg-option-btn.mode-btn[data-val=\"Extrude\"].active { border-color: #ff003c; box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 15px rgba(255,0,60,0.3); }\r\n    .pg-option-btn.mode-btn[data-val=\"Extrude\"].active i { color: #ff003c; text-shadow: 0 0 20px rgba(255,0,60,0.5); }\r\n    \r\n    .pg-option-btn.mode-btn[data-val=\"Echo\"].active { border-color: #a855f7; box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 15px rgba(168,85,247,0.3); }\r\n    .pg-option-btn.mode-btn[data-val=\"Echo\"].active i { color: #a855f7; text-shadow: 0 0 20px rgba(168,85,247,0.5); }\r\n    \r\n    .pg-option-btn.mode-btn[data-val=\"Offset\"].active { border-color: #f59e0b; box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 15px rgba(245,158,11,0.3); }\r\n    .pg-option-btn.mode-btn[data-val=\"Offset\"].active i { color: #f59e0b; text-shadow: 0 0 20px rgba(245,158,11,0.5); }\r\n\r\n    \/* ============================================\r\n       RESULT CARD BASE\r\n       ============================================ *\/\r\n    .pg-results-area { \r\n        padding: 40px 30px; \r\n        position: relative; \r\n    }\r\n    \r\n    .pg-result-list {\r\n        display: grid;\r\n        grid-template-columns: 1fr;\r\n        gap: 20px;\r\n        position: relative; \r\n        z-index: 2;\r\n    }\r\n\r\n    .pg-result-card {\r\n        background: #080a10;\r\n        border: 1px solid rgba(0, 255, 255, 0.15);\r\n        padding: 25px 35px;\r\n        transition: var(--transition-ui);\r\n        position: relative;\r\n        overflow: hidden;\r\n        border-radius: 10px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        min-height: 120px; \r\n        box-sizing: border-box;\r\n        cursor: pointer;\r\n    }\r\n    \r\n    .pg-result-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 4px; height: 100%;\r\n        background: var(--grad-anaglyph);\r\n        transition: width 0.2s ease, opacity 0.2s ease;\r\n        opacity: 0.5;\r\n    }\r\n    \r\n    .pg-result-card::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; right: 0; bottom: 0;\r\n        opacity: 0;\r\n        transition: opacity 0.3s ease;\r\n        pointer-events: none;\r\n        z-index: 0;\r\n    }\r\n    \r\n    .pg-result-card > * { position: relative; z-index: 1; }\r\n    \r\n    .pg-result-card:hover {\r\n        transform: perspective(1000px) rotateX(2deg) rotateY(-1deg) translateZ(10px);\r\n        box-shadow: -10px 15px 35px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 255, 255, 0.15);\r\n        border-color: rgba(0, 255, 255, 0.4);\r\n        background: #0a0d17;\r\n        z-index: 10;\r\n    }\r\n    .pg-result-card:hover::before { width: 6px; opacity: 1; }\r\n    .pg-result-card:hover::after { opacity: 1; }\r\n\r\n    .pg-card-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        width: 100%;\r\n        margin-bottom: 15px;\r\n        border-bottom: 1px solid rgba(255,255,255,0.05);\r\n        padding-bottom: 15px;\r\n    }\r\n    \r\n    .pg-card-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 0.85rem;\r\n        font-weight: 800;\r\n        color: var(--text-muted);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1.5px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        transition: var(--transition-fast);\r\n    }\r\n    .pg-card-title i { font-size: 1.1rem; transition: var(--transition-fast); }\r\n    .pg-result-card:hover .pg-card-title {\r\n        color: #fff;\r\n        letter-spacing: 3px;\r\n    }\r\n\r\n    .pg-card-copy-btn {\r\n        background: rgba(0, 255, 255, 0.1);\r\n        border: 1px solid rgba(0, 255, 255, 0.3);\r\n        color: var(--cyan-3d);\r\n        width: 40px;\r\n        height: 40px;\r\n        border-radius: 8px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        outline: none;\r\n        flex-shrink: 0;\r\n    }\r\n    .pg-card-copy-btn i { font-size: 1.2rem; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }\r\n    \r\n    .pg-card-copy-btn:hover {\r\n        background: var(--cyan-3d);\r\n        color: #000;\r\n        box-shadow: var(--glow-cyan);\r\n        transform: scale(1.05);\r\n    }\r\n    .pg-card-copy-btn:hover i { transform: scale(1.2) translateY(-2px); }\r\n    .pg-card-copy-btn:active { transform: scale(0.95); }\r\n\r\n    .pg-card-preview {\r\n        font-size: 1.6rem;\r\n        color: #fff;\r\n        width: 100%;\r\n        text-align: left;\r\n        font-family: var(--body-font);\r\n        position: relative;\r\n        z-index: 1;\r\n        padding: 10px 0; \r\n        text-shadow: 2px 2px 5px #000;\r\n        transition: var(--transition-fast);\r\n        white-space: pre-wrap !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: break-word !important;\r\n        box-sizing: border-box !important;\r\n    }\r\n    .pg-result-card:hover .pg-card-preview {\r\n        color: var(--silver-3d);\r\n        text-shadow: var(--shadow-3d-text);\r\n    }\r\n\r\n    \/* ============================================\r\n       MODE: LAYERED \u2014 CYAN \/ TEAL\r\n       ============================================ *\/\r\n    .pg-result-card.mode-layered {\r\n        background: linear-gradient(135deg, rgba(0,255,255,0.04) 0%, rgba(0,20,30,0.95) 100%);\r\n        border-color: rgba(0,255,255,0.2);\r\n    }\r\n    .pg-result-card.mode-layered::before {\r\n        background: linear-gradient(180deg, #00ffff, #0d9488);\r\n    }\r\n    .pg-result-card.mode-layered::after {\r\n        background: radial-gradient(ellipse at top left, rgba(0,255,255,0.06) 0%, transparent 60%);\r\n    }\r\n    .pg-result-card.mode-layered .pg-card-title i { color: #00ffff; }\r\n    .pg-result-card.mode-layered .pg-card-copy-btn {\r\n        background: rgba(0,255,255,0.1);\r\n        border-color: rgba(0,255,255,0.3);\r\n        color: #00ffff;\r\n    }\r\n    .pg-result-card.mode-layered .pg-card-copy-btn:hover {\r\n        background: #00ffff; color: #000;\r\n        box-shadow: 0 0 20px rgba(0,255,255,0.5);\r\n    }\r\n    .pg-result-card.mode-layered .pg-card-header {\r\n        border-bottom-color: rgba(0,255,255,0.08);\r\n    }\r\n    .pg-result-card.mode-layered:hover {\r\n        border-color: rgba(0,255,255,0.5);\r\n        box-shadow: -10px 15px 35px rgba(0,0,0,0.9), 0 0 30px rgba(0,255,255,0.15);\r\n    }\r\n    .pg-result-card.mode-layered:hover .pg-card-title {\r\n        text-shadow: 0 0 12px rgba(0,255,255,0.6);\r\n    }\r\n    .pg-result-card.mode-layered:hover .pg-card-preview {\r\n        text-shadow: 3px 3px 0 rgba(0,255,255,0.7), -3px -3px 0 rgba(0,255,255,0.3);\r\n    }\r\n\r\n    \/* ============================================\r\n       MODE: EXTRUDE \u2014 RED \/ CRIMSON\r\n       ============================================ *\/\r\n    .pg-result-card.mode-extrude {\r\n        background: linear-gradient(135deg, rgba(255,0,60,0.05) 0%, rgba(20,5,10,0.95) 100%);\r\n        border-color: rgba(255,0,60,0.2);\r\n    }\r\n    .pg-result-card.mode-extrude::before {\r\n        background: linear-gradient(180deg, #ff003c, #be123c);\r\n    }\r\n    .pg-result-card.mode-extrude::after {\r\n        background: radial-gradient(ellipse at top left, rgba(255,0,60,0.06) 0%, transparent 60%);\r\n    }\r\n    .pg-result-card.mode-extrude .pg-card-title i { color: #ff003c; }\r\n    .pg-result-card.mode-extrude .pg-card-copy-btn {\r\n        background: rgba(255,0,60,0.1);\r\n        border-color: rgba(255,0,60,0.3);\r\n        color: #ff003c;\r\n    }\r\n    .pg-result-card.mode-extrude .pg-card-copy-btn:hover {\r\n        background: #ff003c; color: #fff;\r\n        box-shadow: 0 0 20px rgba(255,0,60,0.5);\r\n    }\r\n    .pg-result-card.mode-extrude .pg-card-header {\r\n        border-bottom-color: rgba(255,0,60,0.08);\r\n    }\r\n    .pg-result-card.mode-extrude:hover {\r\n        border-color: rgba(255,0,60,0.5);\r\n        box-shadow: -10px 15px 35px rgba(0,0,0,0.9), 0 0 30px rgba(255,0,60,0.15);\r\n        background: linear-gradient(135deg, rgba(255,0,60,0.08) 0%, rgba(25,5,10,0.95) 100%);\r\n    }\r\n    .pg-result-card.mode-extrude:hover .pg-card-title {\r\n        text-shadow: 0 0 12px rgba(255,0,60,0.6);\r\n    }\r\n    .pg-result-card.mode-extrude:hover .pg-card-preview {\r\n        text-shadow: 3px 3px 0 rgba(255,0,60,0.7), -3px -3px 0 rgba(255,0,60,0.3);\r\n    }\r\n\r\n    \/* ============================================\r\n       MODE: ECHO \u2014 PURPLE \/ VIOLET\r\n       ============================================ *\/\r\n    .pg-result-card.mode-echo {\r\n        background: linear-gradient(135deg, rgba(168,85,247,0.05) 0%, rgba(15,5,25,0.95) 100%);\r\n        border-color: rgba(168,85,247,0.2);\r\n    }\r\n    .pg-result-card.mode-echo::before {\r\n        background: linear-gradient(180deg, #a855f7, #7c3aed);\r\n    }\r\n    .pg-result-card.mode-echo::after {\r\n        background: radial-gradient(ellipse at top left, rgba(168,85,247,0.06) 0%, transparent 60%);\r\n    }\r\n    .pg-result-card.mode-echo .pg-card-title i { color: #a855f7; }\r\n    .pg-result-card.mode-echo .pg-card-copy-btn {\r\n        background: rgba(168,85,247,0.1);\r\n        border-color: rgba(168,85,247,0.3);\r\n        color: #a855f7;\r\n    }\r\n    .pg-result-card.mode-echo .pg-card-copy-btn:hover {\r\n        background: #a855f7; color: #fff;\r\n        box-shadow: 0 0 20px rgba(168,85,247,0.5);\r\n    }\r\n    .pg-result-card.mode-echo .pg-card-header {\r\n        border-bottom-color: rgba(168,85,247,0.08);\r\n    }\r\n    .pg-result-card.mode-echo:hover {\r\n        border-color: rgba(168,85,247,0.5);\r\n        box-shadow: -10px 15px 35px rgba(0,0,0,0.9), 0 0 30px rgba(168,85,247,0.15);\r\n        background: linear-gradient(135deg, rgba(168,85,247,0.08) 0%, rgba(20,5,30,0.95) 100%);\r\n    }\r\n    .pg-result-card.mode-echo:hover .pg-card-title {\r\n        text-shadow: 0 0 12px rgba(168,85,247,0.6);\r\n    }\r\n    .pg-result-card.mode-echo:hover .pg-card-preview {\r\n        text-shadow: 3px 3px 0 rgba(168,85,247,0.7), -3px -3px 0 rgba(168,85,247,0.3);\r\n    }\r\n\r\n    \/* ============================================\r\n       MODE: OFFSET \u2014 AMBER \/ GOLD\r\n       ============================================ *\/\r\n    .pg-result-card.mode-offset {\r\n        background: linear-gradient(135deg, rgba(245,158,11,0.05) 0%, rgba(20,15,5,0.95) 100%);\r\n        border-color: rgba(245,158,11,0.2);\r\n    }\r\n    .pg-result-card.mode-offset::before {\r\n        background: linear-gradient(180deg, #f59e0b, #d97706);\r\n    }\r\n    .pg-result-card.mode-offset::after {\r\n        background: radial-gradient(ellipse at top left, rgba(245,158,11,0.06) 0%, transparent 60%);\r\n    }\r\n    .pg-result-card.mode-offset .pg-card-title i { color: #f59e0b; }\r\n    .pg-result-card.mode-offset .pg-card-copy-btn {\r\n        background: rgba(245,158,11,0.1);\r\n        border-color: rgba(245,158,11,0.3);\r\n        color: #f59e0b;\r\n    }\r\n    .pg-result-card.mode-offset .pg-card-copy-btn:hover {\r\n        background: #f59e0b; color: #000;\r\n        box-shadow: 0 0 20px rgba(245,158,11,0.5);\r\n    }\r\n    .pg-result-card.mode-offset .pg-card-header {\r\n        border-bottom-color: rgba(245,158,11,0.08);\r\n    }\r\n    .pg-result-card.mode-offset:hover {\r\n        border-color: rgba(245,158,11,0.5);\r\n        box-shadow: -10px 15px 35px rgba(0,0,0,0.9), 0 0 30px rgba(245,158,11,0.15);\r\n        background: linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(25,18,5,0.95) 100%);\r\n    }\r\n    .pg-result-card.mode-offset:hover .pg-card-title {\r\n        text-shadow: 0 0 12px rgba(245,158,11,0.6);\r\n    }\r\n    .pg-result-card.mode-offset:hover .pg-card-preview {\r\n        text-shadow: 3px 3px 0 rgba(245,158,11,0.7), -3px -3px 0 rgba(245,158,11,0.3);\r\n    }\r\n\r\n    \/* ============================================\r\n       STYLE SUBTINTS (overlay on top of mode)\r\n       ============================================ *\/\r\n    .pg-result-card.style-double .pg-card-preview { letter-spacing: 1px; }\r\n    \r\n    .pg-result-card.style-solid .pg-card-preview { \r\n        letter-spacing: 3px; \r\n        filter: brightness(1.05);\r\n    }\r\n    \r\n    .pg-result-card.style-wide .pg-card-preview { \r\n        letter-spacing: 2px; \r\n        filter: saturate(1.2);\r\n    }\r\n    \r\n    .pg-result-card.style-normal .pg-card-preview { \r\n        letter-spacing: 0px;\r\n        filter: contrast(1.1);\r\n    }\r\n\r\n    \/* Style indicator dot *\/\r\n    .pg-result-card .pg-style-dot {\r\n        width: 8px;\r\n        height: 8px;\r\n        border-radius: 50%;\r\n        display: inline-block;\r\n        margin-left: 6px;\r\n        flex-shrink: 0;\r\n    }\r\n    .pg-result-card.style-double .pg-style-dot { background: #00ffff; box-shadow: 0 0 6px rgba(0,255,255,0.5); }\r\n    .pg-result-card.style-solid .pg-style-dot { background: #ff003c; box-shadow: 0 0 6px rgba(255,0,60,0.5); }\r\n    .pg-result-card.style-wide .pg-style-dot { background: #a855f7; box-shadow: 0 0 6px rgba(168,85,247,0.5); }\r\n    .pg-result-card.style-normal .pg-style-dot { background: #94a3b8; box-shadow: 0 0 6px rgba(148,163,184,0.5); }\r\n\r\n    \/* ============================================\r\n       CARD TOP ACCENT BAR per mode\r\n       ============================================ *\/\r\n    .pg-result-card.mode-layered { border-top: 2px solid rgba(0,255,255,0.4); }\r\n    .pg-result-card.mode-extrude { border-top: 2px solid rgba(255,0,60,0.4); }\r\n    .pg-result-card.mode-echo { border-top: 2px solid rgba(168,85,247,0.4); }\r\n    .pg-result-card.mode-offset { border-top: 2px solid rgba(245,158,11,0.4); }\r\n\r\n    .pg-result-card.mode-layered:hover { border-top-color: #00ffff; }\r\n    .pg-result-card.mode-extrude:hover { border-top-color: #ff003c; }\r\n    .pg-result-card.mode-echo:hover { border-top-color: #a855f7; }\r\n    .pg-result-card.mode-offset:hover { border-top-color: #f59e0b; }\r\n\r\n    \/* ============================================\r\n       LOAD MORE BUTTON \u2014 follows mode color\r\n       ============================================ *\/\r\n    .pg-btn-load {\r\n        background: transparent;\r\n        color: #fff;\r\n        border: 2px solid var(--cyan-3d);\r\n        padding: 18px 45px;\r\n        font-family: var(--primary-font);\r\n        font-weight: 900;\r\n        font-size: 1rem;\r\n        cursor: pointer;\r\n        margin-top: 40px;\r\n        text-transform: uppercase;\r\n        border-radius: 6px;\r\n        transition: var(--transition-fast);\r\n        position: relative;\r\n        z-index: 2;\r\n        letter-spacing: 2px;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        box-shadow: 0 5px 15px rgba(0,0,0,0.8);\r\n    }\r\n    .pg-btn-load::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; right: 0; bottom: 0;\r\n        border-radius: 6px;\r\n        border: 2px solid var(--cyan-3d);\r\n        opacity: 0;\r\n        transition: all 0.4s ease;\r\n        z-index: -1;\r\n    }\r\n    .pg-btn-load i { transition: transform 0.3s ease; }\r\n    .pg-btn-load:hover { \r\n        background: rgba(0, 255, 255, 0.1); \r\n        box-shadow: var(--glow-cyan);\r\n        transform: translateY(-3px);\r\n        text-shadow: 0 0 8px var(--cyan-3d);\r\n    }\r\n    .pg-btn-load:hover::before {\r\n        transform: scale(1.05, 1.2);\r\n        opacity: 1;\r\n        border-color: transparent;\r\n    }\r\n    .pg-btn-load:hover i { transform: translateY(4px); }\r\n    .pg-btn-load:active { transform: translateY(0); }\r\n\r\n    \/* Load more \u2014 Extrude *\/\r\n    .pg-btn-load.btn-extrude { border-color: #ff003c; }\r\n    .pg-btn-load.btn-extrude::before { border-color: #ff003c; }\r\n    .pg-btn-load.btn-extrude:hover { background: rgba(255,0,60,0.1); box-shadow: 0 0 20px rgba(255,0,60,0.5); text-shadow: 0 0 8px #ff003c; }\r\n\r\n    \/* Load more \u2014 Echo *\/\r\n    .pg-btn-load.btn-echo { border-color: #a855f7; }\r\n    .pg-btn-load.btn-echo::before { border-color: #a855f7; }\r\n    .pg-btn-load.btn-echo:hover { background: rgba(168,85,247,0.1); box-shadow: 0 0 20px rgba(168,85,247,0.5); text-shadow: 0 0 8px #a855f7; }\r\n\r\n    \/* Load more \u2014 Offset *\/\r\n    .pg-btn-load.btn-offset { border-color: #f59e0b; }\r\n    .pg-btn-load.btn-offset::before { border-color: #f59e0b; }\r\n    .pg-btn-load.btn-offset:hover { background: rgba(245,158,11,0.1); box-shadow: 0 0 20px rgba(245,158,11,0.5); text-shadow: 0 0 8px #f59e0b; }\r\n\r\n    \/* ============================================\r\n       TOAST \u2014 follows mode color\r\n       ============================================ *\/\r\n    .pg-toast {\r\n        visibility: hidden;\r\n        background: #0a0a0a;\r\n        color: #fff;\r\n        padding: 15px 30px;\r\n        position: fixed;\r\n        left: 50%;\r\n        bottom: 40px;\r\n        transform: translateX(-50%) translateY(20px);\r\n        font-family: var(--primary-font);\r\n        font-weight: 800;\r\n        z-index: 10000;\r\n        border-radius: 8px;\r\n        border: 1px solid var(--red-3d);\r\n        border-left: 5px solid var(--red-3d);\r\n        text-transform: uppercase;\r\n        box-shadow: var(--shadow-ui), var(--glow-red);\r\n        letter-spacing: 1px;\r\n        opacity: 0;\r\n        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n    }\r\n    .pg-toast i { color: var(--cyan-3d); font-size: 1.2rem; }\r\n    .pg-toast.show { \r\n        visibility: visible; \r\n        opacity: 1;\r\n        transform: translateX(-50%) translateY(0);\r\n    }\r\n\r\n    .pg-toast.toast-layered { border-color: #00ffff; border-left-color: #00ffff; box-shadow: var(--shadow-ui), 0 0 20px rgba(0,255,255,0.5); }\r\n    .pg-toast.toast-layered i { color: #00ffff; }\r\n    \r\n    .pg-toast.toast-extrude { border-color: #ff003c; border-left-color: #ff003c; box-shadow: var(--shadow-ui), 0 0 20px rgba(255,0,60,0.5); }\r\n    .pg-toast.toast-extrude i { color: #ff003c; }\r\n    \r\n    .pg-toast.toast-echo { border-color: #a855f7; border-left-color: #a855f7; box-shadow: var(--shadow-ui), 0 0 20px rgba(168,85,247,0.5); }\r\n    .pg-toast.toast-echo i { color: #a855f7; }\r\n    \r\n    .pg-toast.toast-offset { border-color: #f59e0b; border-left-color: #f59e0b; box-shadow: var(--shadow-ui), 0 0 20px rgba(245,158,11,0.5); }\r\n    .pg-toast.toast-offset i { color: #f59e0b; }\r\n\r\n    \/* ============================================\r\n       GENERATOR CARD TOP BORDER \u2014 follows mode\r\n       ============================================ *\/\r\n    .pg-generator-card.card-mode-layered { border-top-color: #00ffff; }\r\n    .pg-generator-card.card-mode-extrude { border-top-color: #ff003c; }\r\n    .pg-generator-card.card-mode-echo { border-top-color: #a855f7; }\r\n    .pg-generator-card.card-mode-offset { border-top-color: #f59e0b; }\r\n\r\n    \/* RESPONSIVE *\/\r\n    @media (max-width: 900px) {\r\n        .pg-main-title { font-size: 2.2rem; } \r\n        .pg-controls-wrapper { grid-template-columns: 1fr; grid-template-rows: auto; }\r\n        .pg-input-section { grid-column: 1 \/ -1; grid-row: auto; }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        .pg-container { padding: 30px 15px !important; }\r\n        .pg-results-area { padding: 30px 15px; }\r\n        .pg-controls-wrapper { padding: 20px; gap: 20px; }\r\n        .pg-text-input { min-height: 100px !important; font-size: 1.4rem !important; }\r\n        .pg-input-toolbar { justify-content: center; }\r\n        .pg-preset-select { max-width: 100%; }\r\n        .pg-result-list { grid-template-columns: 1fr; gap: 15px; }\r\n        .pg-option-btn { padding: 12px 8px; font-size: 0.7rem; }\r\n        .pg-btn-load { padding: 15px 30px; font-size: 0.9rem; width: 100%; justify-content: center; }\r\n        .pg-main-title { font-size: 1.8rem; }\r\n        .pg-subtitle { font-size: 0.9rem; }\r\n        .pg-result-card { padding: 20px 20px; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"pg-tool-wrapper\">\r\n    <div class=\"pg-container pg-hero-content-wrapper\">\r\n        <h1 class=\"pg-main-title\">3D Text Generator \u2013 Create Instantly<\/h1>\r\n        <p class=\"pg-subtitle\">Create stacked, extruded, and layered Unicode text to simulate 3D depth and shadows. Perfect for generating copy-safe dimensional typography.<\/p>\r\n        \r\n        <div class=\"pg-generator-card\" id=\"pgMainCard\">\r\n            <div class=\"pg-controls-wrapper\">\r\n                \r\n                <div class=\"pg-input-section\">\r\n                    <div class=\"pg-panel-label\"><i class=\"fa-solid fa-cube\"><\/i> Dimension Input<\/div>\r\n                    <div class=\"pg-enhanced-input-wrapper\">\r\n                        <textarea class=\"pg-text-input\" id=\"pgInputText\" placeholder=\"Enter text to render 3D...\"><\/textarea>\r\n                        \r\n                        <div class=\"pg-input-toolbar\">\r\n                            <button class=\"pg-toolbar-btn\" id=\"pgBtnPaste\"><i class=\"fa-solid fa-paste\"><\/i> Paste<\/button>\r\n                            <button class=\"pg-toolbar-btn\" id=\"pgBtnSelectAll\"><i class=\"fa-solid fa-object-group\"><\/i> Select<\/button>\r\n                            <button class=\"pg-toolbar-btn\" id=\"pgBtnCopy\"><i class=\"fa-solid fa-copy\"><\/i> Copy<\/button>\r\n                            \r\n                            <select class=\"pg-preset-select\" id=\"pgPresetSelect\">\r\n                                <option value=\"\" disabled selected>\u2728 3D Presets<\/option>\r\n                                <option value=\"CYBERPUNK\">Cyberpunk Drop<\/option>\r\n                                <option value=\"V A P O R W A V E\">Vaporwave Spaced<\/option>\r\n                                <option value=\"Level Complete!\">Level Complete<\/option>\r\n                                <option value=\"Dimension Shift\">Dimension Shift<\/option>\r\n                                <option value=\"HELLO WORLD\">Hello World<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div>\r\n                    <div class=\"pg-panel-label\"><i class=\"fa-solid fa-layer-group\"><\/i> Projection Mode<\/div>\r\n                    <div class=\"pg-grid-options\">\r\n                        <button class=\"pg-option-btn mode-btn active\" data-val=\"Layered\">\r\n                            <i class=\"fa-solid fa-clone\"><\/i> Layered Depth\r\n                        <\/button>\r\n                        <button class=\"pg-option-btn mode-btn\" data-val=\"Extrude\">\r\n                            <i class=\"fa-solid fa-cubes\"><\/i> Shadow Extrude\r\n                        <\/button>\r\n                        <button class=\"pg-option-btn mode-btn\" data-val=\"Echo\">\r\n                            <i class=\"fa-solid fa-wave-square\"><\/i> Trail Echo\r\n                        <\/button>\r\n                        <button class=\"pg-option-btn mode-btn\" data-val=\"Offset\">\r\n                            <i class=\"fa-solid fa-object-ungroup\"><\/i> Bracket Offset\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div>\r\n                    <div class=\"pg-panel-label\"><i class=\"fa-solid fa-font\"><\/i> Base Typography<\/div>\r\n                    <div class=\"pg-grid-options\">\r\n                        <button class=\"pg-option-btn style-btn active\" data-val=\"Double\">\r\n                            <i class=\"fa-solid fa-bold\"><\/i> Double Struck\r\n                        <\/button>\r\n                        <button class=\"pg-option-btn style-btn\" data-val=\"Solid\">\r\n                            <i class=\"fa-solid fa-square\"><\/i> Negative Box\r\n                        <\/button>\r\n                        <button class=\"pg-option-btn style-btn\" data-val=\"Wide\">\r\n                            <i class=\"fa-solid fa-text-width\"><\/i> Wide Print\r\n                        <\/button>\r\n                        <button class=\"pg-option-btn style-btn\" data-val=\"Normal\">\r\n                            <i class=\"fa-solid fa-n\"><\/i> Standard\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"pg-results-area\">\r\n                <div class=\"pg-result-list\" id=\"pgResultList\"><\/div>\r\n                <button class=\"pg-btn-load\" id=\"pgLoadMoreBtn\"><span>Render More Layers<\/span> <i class=\"fa-solid fa-arrow-down\"><\/i><\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div id=\"pgToast\" class=\"pg-toast\"><i class=\"fa-solid fa-check-double\"><\/i> 3D Object Copied<\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    const inputEl = document.getElementById('pgInputText');\r\n    const resultList = document.getElementById('pgResultList');\r\n    const loadMoreBtn = document.getElementById('pgLoadMoreBtn');\r\n    const toast = document.getElementById('pgToast');\r\n    const btnPaste = document.getElementById('pgBtnPaste');\r\n    const btnSelectAll = document.getElementById('pgBtnSelectAll');\r\n    const btnCopy = document.getElementById('pgBtnCopy');\r\n    const presetSelect = document.getElementById('pgPresetSelect');\r\n    const mainCard = document.getElementById('pgMainCard');\r\n\r\n    let currentMode = 'Layered';\r\n    let currentStyle = 'Double';\r\n    let limit = 6; \r\n    const LOAD_INCREMENT = 6; \r\n\r\n    const baseChars = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ\";\r\n    const doubleStruckArr = \"\ud835\udd52\ud835\udd53\ud835\udd54\ud835\udd55\ud835\udd56\ud835\udd57\ud835\udd58\ud835\udd59\ud835\udd5a\ud835\udd5b\ud835\udd5c\ud835\udd5d\ud835\udd5e\ud835\udd5f\ud835\udd60\ud835\udd61\ud835\udd62\ud835\udd63\ud835\udd64\ud835\udd65\ud835\udd66\ud835\udd67\ud835\udd68\ud835\udd69\ud835\udd6a\ud835\udd6b\ud835\udd38\ud835\udd39\u2102\ud835\udd3b\ud835\udd3c\ud835\udd3d\ud835\udd3e\u210d\ud835\udd40\ud835\udd41\ud835\udd42\ud835\udd43\ud835\udd44\u2115\ud835\udd46\u2119\u211a\u211d\ud835\udd4a\ud835\udd4b\ud835\udd4c\ud835\udd4d\ud835\udd4e\ud835\udd4f\ud835\udd50\u2124\";\r\n    const solidBoxArr = \"\ud83c\udd70\ud83c\udd71\ud83c\udd72\ud83c\udd73\ud83c\udd74\ud83c\udd75\ud83c\udd76\ud83c\udd77\ud83c\udd78\ud83c\udd79\ud83c\udd7a\ud83c\udd7b\ud83c\udd7c\ud83c\udd7d\ud83c\udd7e\ud83c\udd7f\ud83c\udd80\ud83c\udd81\ud83c\udd82\ud83c\udd83\ud83c\udd84\ud83c\udd45\ud83c\udd86\ud83c\udd87\ud83c\udd88\ud83c\udd89\ud83c\udd70\ud83c\udd71\ud83c\udd72\ud83c\udd73\ud83c\udd74\ud83c\udd75\ud83c\udd76\ud83c\udd77\ud83c\udd78\ud83c\udd79\ud83c\udd7a\ud83c\udd7b\ud83c\udd7c\ud83c\udd7d\ud83c\udd7e\ud83c\udd7f\ud83c\udd80\ud83c\udd81\ud83c\udd82\ud83c\udd83\ud83c\udd84\ud83c\udd45\ud83c\udd86\ud83c\udd87\ud83c\udd88\ud83c\udd89\";\r\n    const wideTextArr = \"\uff41\uff42\uff43\uff44\uff45\uff46\uff47\uff48\uff49\uff4a\uff4b\uff4c\uff4d\uff4e\uff4f\uff50\uff51\uff52\uff53\uff54\uff55\uff56\uff57\uff58\uff59\uff5a\uff21\uff22\uff23\uff24\uff25\uff26\uff27\uff28\uff29\uff2a\uff2b\uff2c\uff2d\uff2e\uff2f\uff30\uff31\uff32\uff33\uff34\uff35\uff36\uff37\uff38\uff39\uff3a\";\r\n\r\n    const generateConfigs = () => {\r\n        const templates = [];\r\n        const names = ['Isometric Matrix', 'Perspective Drop', 'Extrusion Core', 'Z-Axis Lift', 'Shadow Block', 'Stacked Render', 'Dimensional Rift', 'Hologram Offset'];\r\n        let idCounter = 0;\r\n        for(let i=0; i<60; i++){\r\n            templates.push({\r\n                id: `3d-${idCounter++}`,\r\n                name: names[i % names.length] + ` Model-${Math.floor(Math.random()*99)}`,\r\n                icon: ['cube', 'cubes', 'layer-group', 'boxes-stacked', 'draw-polygon'][i % 5]\r\n            });\r\n        }\r\n        return templates;\r\n    };\r\n\r\n    const ALL_STYLES = generateConfigs();\r\n\r\n    const applyBaseStyle = (char, style) => {\r\n        const index = baseChars.indexOf(char);\r\n        if (index === -1) return char;\r\n        if (style === 'Double') return Array.from(doubleStruckArr)[index] || char;\r\n        if (style === 'Solid') return Array.from(solidBoxArr)[index] || char;\r\n        if (style === 'Wide') return Array.from(wideTextArr)[index] || char;\r\n        return char;\r\n    };\r\n\r\n    const transformLogic = (text, mode, style, variationIndex) => {\r\n        let styledChars = Array.from(text).map(c => applyBaseStyle(c, style));\r\n        let baseWord = styledChars.join('');\r\n        let result = '';\r\n\r\n        if (mode === 'Layered') {\r\n            if (variationIndex % 2 === 0) {\r\n                result = styledChars.map(c => c !== ' ' ? `${c} ${c}` : '  ').join(' ');\r\n            } else {\r\n                result = styledChars.map(c => c !== ' ' ? `${c}\\u0338` : ' ').join('');\r\n            }\r\n        } else if (mode === 'Extrude') {\r\n            const blocks = ['\u2593', '\u2592', '\u2591', '\u2588'];\r\n            const block = blocks[variationIndex % blocks.length];\r\n            result = styledChars.map(c => c !== ' ' ? `${c}${block}` : '  ').join('');\r\n        } else if (mode === 'Echo') {\r\n            let reps = (variationIndex % 3) + 2;\r\n            let echoArr = [];\r\n            for(let i=0; i<reps; i++) { echoArr.push(baseWord); }\r\n            result = echoArr.join('  ');\r\n        } else if (mode === 'Offset') {\r\n            const leftBrackets = ['[', '\u27ea', '\u300e', '\u3010'];\r\n            const rightBrackets = [']', '\u27eb', '\u300f', '\u3011'];\r\n            const br = variationIndex % leftBrackets.length;\r\n            result = baseWord.split(' ').map(w => w ? `${leftBrackets[br]} ${w} ${rightBrackets[br]}` : '').join('  ');\r\n        }\r\n        return result;\r\n    };\r\n\r\n    \/* Build CSS class strings from current mode\/style *\/\r\n    const getModeClass = (mode) => `mode-${mode.toLowerCase()}`;\r\n    const getStyleClass = (style) => `style-${style.toLowerCase()}`;\r\n\r\n    const updateGlobalTheme = () => {\r\n        \/* Main card top border *\/\r\n        mainCard.className = 'pg-generator-card';\r\n        mainCard.classList.add(`card-mode-${currentMode.toLowerCase()}`);\r\n\r\n        \/* Load more button *\/\r\n        loadMoreBtn.className = 'pg-btn-load';\r\n        if (currentMode !== 'Layered') {\r\n            loadMoreBtn.classList.add(`btn-${currentMode.toLowerCase()}`);\r\n        }\r\n\r\n        \/* Toast *\/\r\n        toast.className = 'pg-toast';\r\n        toast.classList.add(`toast-${currentMode.toLowerCase()}`);\r\n    };\r\n\r\n    const render = () => {\r\n        updateGlobalTheme();\r\n        resultList.innerHTML = '';\r\n        let raw = inputEl.value || \"CYBERPUNK\";\r\n        const displayList = ALL_STYLES.slice(0, limit);\r\n        const mClass = getModeClass(currentMode);\r\n        const sClass = getStyleClass(currentStyle);\r\n\r\n        displayList.forEach((s, idx) => {\r\n            const out = transformLogic(raw, currentMode, currentStyle, idx);\r\n            const card = document.createElement('div');\r\n            card.className = `pg-result-card ${mClass} ${sClass}`;\r\n            card.innerHTML = `\r\n                <div class=\"pg-card-header\">\r\n                    <div class=\"pg-card-title\"><i class=\"fa-solid fa-${s.icon}\"><\/i> ${s.name}<span class=\"pg-style-dot\"><\/span><\/div>\r\n                    <button class=\"pg-card-copy-btn\" title=\"Copy Text\"><i class=\"fa-regular fa-copy\"><\/i><\/button>\r\n                <\/div>\r\n                <div class=\"pg-card-preview\">${out}<\/div>\r\n            `;\r\n            \r\n            const copyBtn = card.querySelector('.pg-card-copy-btn');\r\n            copyBtn.addEventListener('click', (e) => {\r\n                e.stopPropagation(); \r\n                navigator.clipboard.writeText(out);\r\n                copyBtn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i>';\r\n                \/* Use mode-specific color for confirmed state *\/\r\n                const modeColor = {Layered:'#00ffff', Extrude:'#ff003c', Echo:'#a855f7', Offset:'#f59e0b'}[currentMode];\r\n                copyBtn.style.background = modeColor;\r\n                copyBtn.style.borderColor = modeColor;\r\n                copyBtn.style.color = currentMode === 'Extrude' ? '#fff' : '#000';\r\n                toast.classList.add('show');\r\n                setTimeout(() => {\r\n                    copyBtn.innerHTML = '<i class=\"fa-regular fa-copy\"><\/i>';\r\n                    copyBtn.style.background = '';\r\n                    copyBtn.style.borderColor = '';\r\n                    copyBtn.style.color = '';\r\n                    toast.classList.remove('show');\r\n                }, 2000);\r\n            });\r\n            resultList.appendChild(card);\r\n        });\r\n\r\n        loadMoreBtn.style.display = limit >= ALL_STYLES.length ? 'none' : 'inline-flex';\r\n        const remaining = Math.max(0, ALL_STYLES.length - limit);\r\n        if (remaining > 0) loadMoreBtn.querySelector('span').innerText = `Render More Layers (${remaining})`;\r\n    };\r\n\r\n    inputEl.addEventListener('input', render);\r\n    \r\n    btnPaste.addEventListener('click', async () => {\r\n        try { const text = await navigator.clipboard.readText(); inputEl.value = text; render(); } \r\n        catch (err) { alert('Unable to paste. Please use Ctrl+V \/ Cmd+V.'); }\r\n    });\r\n    btnSelectAll.addEventListener('click', () => inputEl.select());\r\n    btnCopy.addEventListener('click', () => {\r\n        if(inputEl.value) {\r\n            navigator.clipboard.writeText(inputEl.value);\r\n            toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 2000);\r\n        }\r\n    });\r\n    \r\n    presetSelect.addEventListener('change', (e) => {\r\n        if(e.target.value) { inputEl.value = e.target.value; render(); e.target.selectedIndex = 0; }\r\n    });\r\n    \r\n    loadMoreBtn.onclick = () => { limit += LOAD_INCREMENT; render(); };\r\n\r\n    document.querySelectorAll('.mode-btn').forEach(btn => {\r\n        btn.onclick = () => {\r\n            document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active'); currentMode = btn.dataset.val; limit = 6; render();\r\n        };\r\n    });\r\n    document.querySelectorAll('.style-btn').forEach(btn => {\r\n        btn.onclick = () => {\r\n            document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active'); currentStyle = btn.dataset.val; limit = 6; render();\r\n        };\r\n    });\r\n\r\n    render();\r\n});\r\n<\/script>\r\n<!-- END OF FILE 3D Text Generator -->\r\n<!-- <content section is starting -->\r\n\r\n<div>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n    <!-- SECTION 1 -->\r\n\r\n\r\n<section class=\"pg-fcs-section pg-fcs-sec1\">\r\n        <div class=\"pg-fcs-inner\">\r\n\t\r\n<\/div>\r\n\t<\/section>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n    <section class=\"pg-fcs-section pg-fcs-sec1\">\r\n        <div class=\"pg-fcs-inner\">\r\n            <h2 class=\"pg-fcs-heading\">What Makes This <span class=\"pg-fcs-kw\">3D Text Generator<\/span> Different?<\/h2>\r\n            <p class=\"pg-fcs-sub\">Discover why thousands of creators love our 3D text generator to produce striking dimensional text that looks like it's floating off the screen \u2014 completely free.<\/p>\r\n            <div class=\"pg-fcs-grid\">\r\n                <div class=\"pg-fcs-card\">\r\n                    <div class=\"pg-fcs-icon\" style=\"background:rgba(0,176,255,0.12);color:#00b0ff;\"><i class=\"fa-solid fa-cube\"><\/i><\/div>\r\n                    <div class=\"pg-fcs-card-title\">Instant 3D Transformation<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Our 3D text generator converts normal text into bold Unicode 3D characters instantly \u2014 zero waiting, zero design tools needed for stunning depth effects.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <div class=\"pg-fcs-icon\" style=\"background:rgba(139,92,246,0.12);color:#8b5cf6;\"><i class=\"fa-solid fa-layer-group\"><\/i><\/div>\r\n                    <div class=\"pg-fcs-card-title\">Multiple Depth Styles<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Bold 3D, outlined 3D, shadow text, and dimensional letters \u2014 our 3D text generator covers every 3D Unicode format available in the standard.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <div class=\"pg-fcs-icon\" style=\"background:rgba(255,138,101,0.12);color:#ff8a65;\"><i class=\"fa-solid fa-copy\"><\/i><\/div>\r\n                    <div class=\"pg-fcs-card-title\">One-Click Copy and Paste<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Created your 3D text? Hit copy and paste it into bios, captions, comments, or any platform supporting Unicode.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <div class=\"pg-fcs-icon\" style=\"background:rgba(0,230,118,0.12);color:#00e676;\"><i class=\"fa-solid fa-shield-halved\"><\/i><\/div>\r\n                    <div class=\"pg-fcs-card-title\">100% Safe and Browser-Based<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Our 3D text generator runs entirely in your browser \u2014 no servers, no data collection. Your 3D text stays completely private.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <div class=\"pg-fcs-icon\" style=\"background:rgba(103,58,183,0.12);color:#673ab7;\"><i class=\"fa-solid fa-display\"><\/i><\/div>\r\n                    <div class=\"pg-fcs-card-title\">Renders on Every Device<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Phone, tablet, or desktop \u2014 our 3D text generator renders dimensional text perfectly on any screen and browser.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <div class=\"pg-fcs-icon\" style=\"background:rgba(38,198,218,0.12);color:#26c6da;\"><i class=\"fa-solid fa-infinity\"><\/i><\/div>\r\n                    <div class=\"pg-fcs-card-title\">Unlimited 3D Generation<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">No accounts, no limits, no fees. Generate as much 3D text as you want \u2014 free forever, no strings attached.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2 -->\r\n    <section class=\"pg-fcs-section pg-fcs-sec2\">\r\n        <div class=\"pg-fcs-inner\">\r\n            <h2 class=\"pg-fcs-heading\">How Does Our <span class=\"pg-fcs-kw\">3D Text Generator<\/span> Work?<\/h2>\r\n            <p class=\"pg-fcs-sub\">Creating 3D text is incredibly simple. No design skills needed \u2014 just follow these steps and get your dimensional text ready to paste in seconds.<\/p>\r\n            <div class=\"pg-fcs-grid\">\r\n                <div class=\"pg-fcs-card\">\r\n                    <span class=\"pg-fcs-emoji\">\ud83d\udd32<\/span>\r\n                    <div class=\"pg-fcs-card-title\">Step 1: Type Your Text<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Enter any word or sentence into the input box of our 3D text generator \u2014 any regular text instantly becomes dimensional.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <span class=\"pg-fcs-emoji\">\ud83e\uddca<\/span>\r\n                    <div class=\"pg-fcs-card-title\">Step 2: Pick 3D Style<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Choose from bold 3D, outlined 3D, shadow text, or double-struck 3D \u2014 each adds a different depth effect.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <span class=\"pg-fcs-emoji\">\ud83d\udc41\ufe0f<\/span>\r\n                    <div class=\"pg-fcs-card-title\">Step 3: See the Depth<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Your text instantly gains dimension using real Unicode mapping \u2014 preview exactly how the 3D text renders when pasted online.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <span class=\"pg-fcs-emoji\">\ud83d\udccb<\/span>\r\n                    <div class=\"pg-fcs-card-title\">Step 4: Copy 3D Output<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Happy with the 3D look? Click copy and your dimensional text goes straight to clipboard \u2014 pure Unicode, no formatting lost.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <span class=\"pg-fcs-emoji\">\ud83c\udf10<\/span>\r\n                    <div class=\"pg-fcs-card-title\">Step 5: Paste Anywhere<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Drop your 3D text into bios, captions, comments, or usernames \u2014 real Unicode renders depth everywhere.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <span class=\"pg-fcs-emoji\">\ud83e\uddca<\/span>\r\n                    <div class=\"pg-fcs-card-title\">Step 6: Mix 3D Effects<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Combine bold 3D with shadow text, or mix outlined with double-struck for extra dimensional impact.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3 -->\r\n    <section class=\"pg-fcs-section pg-fcs-sec3\">\r\n        <div class=\"pg-fcs-inner\">\r\n            <h2 class=\"pg-fcs-heading\">Where Can You Use <span class=\"pg-fcs-kw\">3D Text Generator<\/span> Results?<\/h2>\r\n            <p class=\"pg-fcs-sub\">Our 3D text generator creates real Unicode that renders on virtually every platform. Here are the most popular places creators use dimensional text for extra depth.<\/p>\r\n            <div class=\"pg-fcs-grid\">\r\n                <div class=\"pg-fcs-card\">\r\n                    <div class=\"pg-fcs-icon\" style=\"background:rgba(225,48,108,0.12);color:#e1306c;\"><i class=\"fa-brands fa-instagram\"><\/i><\/div>\r\n                    <div class=\"pg-fcs-card-title\">Instagram Bio and Captions<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">3D text in Instagram bios adds striking depth to your profile \u2014 the bold dimensional letters make you stand out from flat text profiles.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <div class=\"pg-fcs-icon\" style=\"background:rgba(255,0,80,0.10);color:#ff0050;\"><i class=\"fa-brands fa-tiktok\"><\/i><\/div>\r\n                    <div class=\"pg-fcs-card-title\">TikTok Captions and Comments<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">3D text in TikTok captions adds an extra dimension to your content \u2014 bold letters grab attention and boost engagement.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <div class=\"pg-fcs-icon\" style=\"background:rgba(88,101,242,0.12);color:#5865f2;\"><i class=\"fa-brands fa-discord\"><\/i><\/div>\r\n                    <div class=\"pg-fcs-card-title\">Discord Names and Servers<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Set a 3D Discord username \u2014 dimensional text is instantly recognizable and gets reactions in every server.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <div class=\"pg-fcs-icon\" style=\"background:rgba(131,56,236,0.12);color:#8338ec;\"><i class=\"fa-brands fa-twitch\"><\/i><\/div>\r\n                    <div class=\"pg-fcs-card-title\">Twitch Channel and Chat<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Give your Twitch channel a 3D upgrade with dimensional usernames and chat messages \u2014 ideal for standing out.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <div class=\"pg-fcs-icon\" style=\"background:rgba(244,67,54,0.12);color:#f44336;\"><i class=\"fa-brands fa-youtube\"><\/i><\/div>\r\n                    <div class=\"pg-fcs-card-title\">YouTube Titles and Descriptions<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Use 3D text in YouTube video titles to boost click-through rates \u2014 dimensional bold text draws the eye instantly.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <div class=\"pg-fcs-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-pen-nib\"><\/i><\/div>\r\n                    <div class=\"pg-fcs-card-title\">Design and Branding<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Use 3D text in logos, headers, posters, and branding \u2014 dimensional text adds a premium feel to any design project.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <style>\r\n        *, *::before, *::after {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        :root {\r\n            --accent-blue: #00b0ff;\r\n            --text-dark: #000000;\r\n            --text-body: #1a1a1a;\r\n            --grad-3d: linear-gradient(135deg, #00b0ff, #8b5cf6, #ff8a65);\r\n            --theme-bg-alt: rgba(245,247,252,0.7);\r\n            --shadow-card-hover: 0 12px 30px rgba(0,176,255,0.16);\r\n            --tr: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --ff: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n\r\n        .pg-fcs-section {\r\n            width: 100%;\r\n            padding: clamp(48px, 8vw, 96px) 20px;\r\n            position: relative;\r\n            font-family: var(--ff);\r\n            color: var(--text-dark);\r\n            line-height: 1.6;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        .pg-fcs-inner {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .pg-fcs-heading {\r\n            font-family: var(--ff);\r\n            font-size: clamp(1.5rem, 4vw, 2.25rem);\r\n            font-weight: 800;\r\n            text-align: center;\r\n            color: var(--text-dark);\r\n            margin-bottom: clamp(8px, 1.5vw, 14px);\r\n            line-height: 1.2;\r\n            letter-spacing: -0.03em;\r\n        }\r\n\r\n        .pg-fcs-kw {\r\n            color: #000000;\r\n            position: relative;\r\n        }\r\n\r\n        .pg-fcs-kw::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -2px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: var(--grad-3d);\r\n            border-radius: 3px;\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        }\r\n\r\n        .pg-fcs-section:hover .pg-fcs-kw::after {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-fcs-sub {\r\n            font-family: var(--ff);\r\n            font-size: clamp(0.88rem, 1.8vw, 1.02rem);\r\n            font-weight: 400;\r\n            text-align: center;\r\n            color: #1a1a1a;\r\n            max-width: 660px;\r\n            margin: 0 auto clamp(28px, 4vw, 48px);\r\n            line-height: 1.7;\r\n        }\r\n\r\n        .pg-fcs-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: clamp(14px, 2.2vw, 22px);\r\n            align-items: stretch;\r\n        }\r\n\r\n        \/* ========== SMALL COMPACT CARD ========== *\/\r\n        .pg-fcs-card {\r\n            border-radius: 14px;\r\n            padding: clamp(16px, 2.2vw, 24px);\r\n            position: relative;\r\n            cursor: pointer;\r\n            -webkit-tap-highlight-color: transparent;\r\n            user-select: none;\r\n            transition: var(--tr);\r\n            border: 1.5px solid #e0e0e8;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .pg-fcs-card::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 0;\r\n            height: 0;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, rgba(0, 176, 255, 0.08) 0%, rgba(139, 92, 246, 0.03) 60%, transparent 100%);\r\n            transform: translate(-50%, -50%);\r\n            transition: width 0.55s ease-out, height 0.55s ease-out, opacity 0.55s ease-out;\r\n            opacity: 0;\r\n            z-index: 0;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .pg-fcs-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -1px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: var(--grad-3d);\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            z-index: 4;\r\n            border-radius: 14px 14px 0 0;\r\n        }\r\n\r\n        .pg-fcs-card:hover::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-fcs-card.pg-fcs-pressed {\r\n            transform: translateY(-1px) scale(0.985) !important;\r\n        }\r\n\r\n        .pg-fcs-card.pg-fcs-pressed::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-fcs-card.pg-fcs-ripple::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 1;\r\n        }\r\n\r\n        .pg-fcs-card.pg-fcs-ripple-out::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 0;\r\n        }\r\n\r\n        \/* ICON \u2014 SMALLER *\/\r\n        .pg-fcs-icon {\r\n            width: clamp(38px, 4.5vw, 48px);\r\n            height: clamp(38px, 4.5vw, 48px);\r\n            min-width: 38px;\r\n            min-height: 38px;\r\n            border-radius: 12px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: clamp(15px, 2.2vw, 20px);\r\n            margin-bottom: clamp(10px, 1.6vw, 14px);\r\n            transition: var(--tr);\r\n            position: relative;\r\n            z-index: 3;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-fcs-card:hover .pg-fcs-icon {\r\n            transform: scale(1.12) rotate(-4deg);\r\n        }\r\n\r\n        .pg-fcs-card.pg-fcs-pressed .pg-fcs-icon {\r\n            transform: scale(1.04) rotate(0deg);\r\n        }\r\n\r\n        .pg-fcs-emoji {\r\n            font-size: clamp(22px, 3vw, 28px);\r\n            margin-bottom: clamp(8px, 1.5vw, 12px);\r\n            display: inline-block;\r\n            transition: var(--tr);\r\n            position: relative;\r\n            z-index: 3;\r\n            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-fcs-card:hover .pg-fcs-emoji {\r\n            transform: scale(1.22) rotate(-6deg);\r\n        }\r\n\r\n        .pg-fcs-card.pg-fcs-pressed .pg-fcs-emoji {\r\n            transform: scale(1.08) rotate(0deg);\r\n        }\r\n\r\n        \/* TITLE \u2014 SMALLER *\/\r\n        .pg-fcs-card-title {\r\n            font-family: var(--ff);\r\n            font-size: clamp(0.88rem, 1.8vw, 1rem);\r\n            font-weight: 700;\r\n            color: #000000;\r\n            margin-bottom: clamp(4px, 0.8vw, 8px);\r\n            line-height: 1.3;\r\n            position: relative;\r\n            z-index: 3;\r\n        }\r\n\r\n        \/* DESC \u2014 SMALLER *\/\r\n        .pg-fcs-card-desc {\r\n            font-family: var(--ff);\r\n            font-size: clamp(0.75rem, 1.4vw, 0.85rem);\r\n            font-weight: 400;\r\n            color: #1a1a1a;\r\n            line-height: 1.55;\r\n            position: relative;\r\n            z-index: 3;\r\n            margin-top: auto;\r\n        }\r\n\r\n        \/* SEC 1 *\/\r\n        .pg-fcs-sec1 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-fcs-sec1 .pg-fcs-card {\r\n            background: #ffffff;\r\n            border-color: #dcdce5;\r\n            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03);\r\n        }\r\n\r\n        .pg-fcs-sec1 .pg-fcs-card:hover {\r\n            border-color: var(--accent-blue);\r\n            box-shadow: var(--shadow-card-hover);\r\n            transform: translateY(-4px);\r\n        }\r\n\r\n        \/* SEC 2 *\/\r\n        .pg-fcs-sec2 {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        }\r\n\r\n        .pg-fcs-sec2 .pg-fcs-heading {\r\n            color: #000000;\r\n        }\r\n\r\n        .pg-fcs-sec2 .pg-fcs-kw {\r\n            color: #000000;\r\n        }\r\n\r\n        .pg-fcs-sec2 .pg-fcs-sub {\r\n            color: #000000;\r\n        }\r\n\r\n        .pg-fcs-sec2 .pg-fcs-card-title {\r\n            color: #000000;\r\n        }\r\n\r\n        .pg-fcs-sec2 .pg-fcs-card-desc {\r\n            color: #1a1a1a;\r\n        }\r\n\r\n        .pg-fcs-2 .pg-fcs-kw::after {\r\n            background: linear-gradient(90deg, #667eea, #764ba2, #ffd700);\r\n        }\r\n\r\n        .pg-fcs-sec2 .pg-fcs-card {\r\n            background: rgba(255, 255, 255, 0.95);\r\n            border-color: rgba(255, 255, 255, 0.55);\r\n            backdrop-filter: blur(12px);\r\n            -webkit-backdrop-filter: blur(12px);\r\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);\r\n        }\r\n\r\n        .pg-fcs-sec2 .pg-fcs-card::before {\r\n            background: linear-gradient(90deg, #667eea, #764ba2, #ffd700);\r\n            border-radius: 14px 14px 0 0;\r\n        }\r\n\r\n        .pg-fcs-sec2 .pg-fcs-card:hover {\r\n            border-color: rgba(255, 255, 255, 0.85);\r\n            box-shadow: 0 12px 40px rgba(118, 75, 162, 0.3);\r\n            transform: translateY(-4px);\r\n        }\r\n\r\n        .pg-fcs-sec2 .pg-fcs-card::after {\r\n            background: radial-gradient(circle, rgba(118, 75, 162, 0.1) 0%, rgba(102, 126, 234, 0.05) 60%, transparent 100%);\r\n        }\r\n\r\n        \/* SEC 3 *\/\r\n        .pg-fcs-sec3 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-fcs-sec3 .pg-fcs-card {\r\n            background: var(--theme-bg-alt);\r\n            border-color: #d8dce4;\r\n            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.02);\r\n        }\r\n\r\n        .pg-fcs-sec3 .pg-fcs-card::before {\r\n            background: linear-gradient(90deg, #00b0ff, #8b5cf6, #ff8a65);\r\n            border-radius: 14px 14px 0 0;\r\n        }\r\n\r\n        .pg-fcs-sec3 .pg-fcs-card:hover {\r\n            border-color: var(--accent-blue);\r\n            box-shadow: var(--shadow-card-hover);\r\n            transform: translateY(-4px);\r\n        }\r\n\r\n        \/* RESPONSIVE *\/\r\n        @media (max-width: 820px) {\r\n            .pg-fcs-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 14px;\r\n            }\r\n            .pg-fcs-section {\r\n                padding: clamp(36px, 6vw, 64px) 16px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 540px) {\r\n            .pg-fcs-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 12px;\r\n            }\r\n            .pg-fcs-card {\r\n                padding: 16px;\r\n            }\r\n            .pg-fcs-sub {\r\n                margin-bottom: 24px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 360px) {\r\n            .pg-fcs-section {\r\n                padding: 28px 12px;\r\n            }\r\n            .pg-fcs-card {\r\n                padding: 14px;\r\n                border-radius: 12px;\r\n            }\r\n            .pg-fcs-card::before {\r\n                border-radius: 12px 12px 0 0;\r\n            }\r\n            .pg-fcs-icon {\r\n                width: 34px;\r\n                min-width: 34px;\r\n                height: 34px;\r\n                min-height: 34px;\r\n                border-radius: 10px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <script>\r\n    (function() {\r\n        var cards = document.querySelectorAll('.pg-fcs-card');\r\n        cards.forEach(function(card) {\r\n            function ripple(el) {\r\n                el.classList.remove('pg-fcs-ripple', 'pg-fcs-ripple-out');\r\n                void el.offsetWidth;\r\n                el.classList.add('pg-fcs-ripple');\r\n                setTimeout(function() {\r\n                    el.classList.add('pg-fcs-ripple-out');\r\n                }, 300);\r\n                setTimeout(function() {\r\n                    el.classList.remove('pg-fcs-ripple', 'pg-fcs-ripple-out');\r\n                }, 700);\r\n            }\r\n\r\n            card.addEventListener('mousedown', function() {\r\n                card.classList.add('pg-fcs-pressed');\r\n            });\r\n\r\n            card.addEventListener('mouseup', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-fcs-pressed');\r\n                }, 120);\r\n                ripple(card);\r\n            });\r\n\r\n            card.addEventListener('mouseleave', function() {\r\n                card.classList.remove('pg-fcs-pressed', 'pg-fcs-ripple', 'pg-fcs-ripple-out');\r\n            });\r\n\r\n            card.addEventListener('touchstart', function() {\r\n                card.classList.add('pg-fcs-pressed');\r\n                ripple(card);\r\n            }, { passive: true });\r\n\r\n            card.addEventListener('touchend', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-fcs-merged', 'pg-fcs-pressed');\r\n                }, 150);\r\n            });\r\n\r\n            card.addEventListener('touchcancel', function() {\r\n                card.classList.remove('pg-fcs-pressed', 'pg-fcs-ripple', 'pg-fcs-serial-ripple-out');\r\n            });\r\n        })();\r\n    <\/script>\r\n<\/div>[\/et_pb_fullwidth_code][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<!-- START OF FILE 3D Text Generator -->\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n<style>\r\n    .pg-tool-wrapper {\r\n        --primary-font: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n        --body-font: \"Consolas\", \"Monaco\", \"Courier New\", monospace;\r\n        \r\n        --theme-panel: rgba(10, 15, 25, 0.96);\r\n        --theme-border: rgba(0, 255, 255, 0.3); \r\n        \r\n        --cyan-3d: #00ffff;\r\n        --red-3d: #ff003c;\r\n        --silver-3d: #e2e8f0;\r\n        --void-dark: #050810;\r\n        --text-muted: #94a3b8;\r\n        \r\n        --grad-master: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        --grad-anaglyph: linear-gradient(135deg, #00ffff 0%, #ff003c 100%);\r\n        --grad-shimmer: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.4), transparent);\r\n        --grad-dark: linear-gradient(180deg, rgba(10,15,25,0.8) 0%, rgba(5,8,16,0.98) 100%);\r\n        \r\n        --glow-cyan: 0 0 20px rgba(0, 255, 255, 0.5);\r\n        --glow-red: 0 0 20px rgba(255, 0, 60, 0.5);\r\n        --shadow-ui: 0 20px 50px rgba(0, 0, 0, 0.9);\r\n        --shadow-3d-text: 3px 3px 0 rgba(255,0,60,0.8), -3px -3px 0 rgba(0,255,255,0.8);\r\n        \r\n        --transition-ui: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        --transition-fast: all 0.2s ease;\r\n        \r\n        font-family: var(--primary-font);\r\n        color: var(--silver-3d);\r\n        line-height: 1.5;\r\n        width: 100%;\r\n        overflow-x: hidden;\r\n        text-align: center; \r\n        \r\n        background: var(--grad-master);\r\n        background-attachment: fixed;\r\n    }\r\n\r\n    .pg-tool-wrapper * { box-sizing: border-box; }\r\n\r\n    .pg-container {\r\n        max-width: 1200px !important;\r\n        width: 100% !important;\r\n        margin: 0 auto !important;\r\n        padding: 40px 20px !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n    }\r\n\r\n    .pg-hero-content-wrapper {\r\n        z-index: 2;\r\n        padding-top: 20px;\r\n        width: 100%;\r\n    }\r\n\r\n    .pg-main-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 3.2rem;\r\n        font-weight: 900; \r\n        line-height: 1.1;\r\n        margin: 0 auto 15px auto;\r\n        text-transform: uppercase;\r\n        letter-spacing: 3px;\r\n        color: #fff;\r\n        text-shadow: var(--shadow-3d-text);\r\n        max-width: 900px;\r\n        position: relative;\r\n        display: inline-block;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .pg-main-title:hover {\r\n        text-shadow: 5px 5px 0 rgba(255,0,60,0.9), -5px -5px 0 rgba(0,255,255,0.9);\r\n        transform: scale(1.02);\r\n    }\r\n    \r\n    .pg-main-title::after {\r\n        content: '';\r\n        display: block;\r\n        width: 120px;\r\n        height: 5px;\r\n        background: var(--grad-anaglyph);\r\n        margin: 25px auto 0;\r\n        box-shadow: var(--glow-cyan);\r\n        border-radius: 5px;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .pg-main-title:hover::after { width: 300px; }\r\n    \r\n    .pg-subtitle {\r\n        font-size: 1.1rem;\r\n        color: rgba(226, 232, 240, 0.9);\r\n        max-width: 750px;\r\n        margin: 0 auto 35px auto;\r\n        padding: 0 10px;\r\n        font-weight: 600;\r\n        letter-spacing: 0.5px;\r\n        text-shadow: 0 3px 6px rgba(0,0,0,0.8);\r\n    }\r\n\r\n    .pg-generator-card {\r\n        background: var(--theme-panel);\r\n        border: 1px solid var(--theme-border); \r\n        border-top-width: 4px;\r\n        border-top-color: var(--cyan-3d);\r\n        width: 100%;\r\n        box-shadow: var(--shadow-ui), inset 0 0 40px rgba(0,0,0,0.6); \r\n        border-radius: 12px;\r\n        position: relative;\r\n        transform: translateY(0);\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .pg-generator-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 100%; height: 2px;\r\n        background: var(--grad-shimmer);\r\n        opacity: 0.4;\r\n        transition: opacity 0.3s ease;\r\n    }\r\n    .pg-generator-card:hover::before { opacity: 1; }\r\n\r\n    .pg-controls-wrapper {\r\n        padding: 35px;\r\n        background: var(--grad-dark);\r\n        border-bottom: 2px solid #000;\r\n        display: grid;\r\n        grid-template-columns: 1.2fr 1fr;\r\n        grid-template-rows: auto auto;\r\n        gap: 25px;\r\n        align-items: stretch;\r\n    }\r\n\r\n    .pg-input-section {\r\n        grid-column: 1 \/ 2;\r\n        grid-row: 1 \/ 3;\r\n        display: flex;\r\n        flex-direction: column;\r\n        height: 100%;\r\n    }\r\n    \r\n    .pg-enhanced-input-wrapper {\r\n        background: rgba(5, 8, 16, 0.8);\r\n        border: 2px solid rgba(0, 255, 255, 0.2);\r\n        border-radius: 8px;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        flex-grow: 1;\r\n        transition: var(--transition-ui);\r\n        box-shadow: inset 0 0 20px rgba(0,0,0,1);\r\n        position: relative;\r\n    }\r\n\r\n    .pg-enhanced-input-wrapper:focus-within {\r\n        border-color: var(--cyan-3d);\r\n        box-shadow: inset 0 0 30px rgba(0, 255, 255, 0.15), 0 0 15px rgba(0, 255, 255, 0.3);\r\n    }\r\n    \r\n    .pg-text-input {\r\n        width: 100% !important;\r\n        flex-grow: 1 !important;\r\n        min-height: 150px !important;\r\n        padding: 25px !important;\r\n        background: transparent !important;\r\n        border: none !important;\r\n        color: #fff !important;\r\n        font-family: var(--body-font) !important;\r\n        font-weight: bold !important;\r\n        font-size: 1.8rem !important;\r\n        outline: none !important;\r\n        text-align: left !important;\r\n        text-shadow: 2px 2px 0px #000;\r\n        white-space: pre-wrap !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: break-word !important;\r\n        resize: none;\r\n    }\r\n    \r\n    .pg-text-input::placeholder {\r\n        color: rgba(0, 255, 255, 0.3);\r\n        font-style: italic;\r\n    }\r\n\r\n    .pg-input-toolbar {\r\n        display: flex;\r\n        justify-content: flex-start;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n        background: rgba(10, 15, 25, 0.95);\r\n        padding: 12px 15px;\r\n        border-top: 1px solid rgba(0, 255, 255, 0.2);\r\n    }\r\n\r\n    .pg-toolbar-btn {\r\n        background: rgba(255, 255, 255, 0.05);\r\n        color: var(--text-muted);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        padding: 8px 12px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.75rem;\r\n        font-weight: 700;\r\n        border-radius: 4px;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n    }\r\n\r\n    .pg-toolbar-btn i { transition: transform 0.2s ease; }\r\n\r\n    .pg-toolbar-btn:hover {\r\n        background: rgba(0, 255, 255, 0.1);\r\n        color: var(--cyan-3d);\r\n        border-color: rgba(0, 255, 255, 0.4);\r\n        box-shadow: var(--glow-cyan);\r\n    }\r\n    .pg-toolbar-btn:hover i { transform: translateY(-2px); }\r\n    .pg-toolbar-btn:active { transform: scale(0.95); }\r\n    \r\n    .pg-preset-select {\r\n        background: rgba(255, 0, 60, 0.1);\r\n        color: var(--red-3d);\r\n        border: 1px solid rgba(255, 0, 60, 0.3);\r\n        padding: 8px 12px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.75rem;\r\n        font-weight: 800;\r\n        border-radius: 4px;\r\n        cursor: pointer;\r\n        outline: none;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        appearance: none;\r\n        flex-grow: 1;\r\n    }\r\n    \r\n    .pg-preset-select:hover, .pg-preset-select:focus {\r\n        background: var(--red-3d);\r\n        color: #fff;\r\n        border-color: var(--red-3d);\r\n        box-shadow: var(--glow-red);\r\n    }\r\n    \r\n    .pg-preset-select option {\r\n        background: var(--void-dark);\r\n        color: #fff;\r\n    }\r\n\r\n    .pg-panel-label {\r\n        display: flex;\r\n        align-items: center;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.85rem;\r\n        font-weight: 800;\r\n        color: var(--silver-3d);\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        margin-bottom: 12px;\r\n        text-shadow: 2px 2px 4px #000;\r\n    }\r\n    \r\n    .pg-panel-label i {\r\n        color: var(--cyan-3d);\r\n        margin-right: 8px;\r\n        font-size: 1.1rem;\r\n    }\r\n\r\n    .pg-grid-options {\r\n        display: grid;\r\n        gap: 12px;\r\n        grid-template-columns: repeat(2, 1fr);\r\n    }\r\n\r\n    .pg-option-btn {\r\n        background: rgba(15, 20, 35, 0.6);\r\n        border: 1px solid rgba(255, 255, 255, 0.05);\r\n        padding: 14px 8px;\r\n        color: var(--text-muted);\r\n        font-family: var(--primary-font);\r\n        font-size: 0.75rem;\r\n        font-weight: 700;\r\n        cursor: pointer;\r\n        border-radius: 6px;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 6px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .pg-option-btn i { font-size: 1.3rem; transition: var(--transition-ui); }\r\n\r\n    .pg-option-btn::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: -100%; width: 100%; height: 100%;\r\n        background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.2), transparent);\r\n        transition: left 0.4s ease;\r\n        z-index: 0;\r\n    }\r\n    .pg-option-btn > * { position: relative; z-index: 1; }\r\n\r\n    .pg-option-btn:hover {\r\n        border-color: rgba(0, 255, 255, 0.4);\r\n        color: #fff;\r\n        transform: translateY(-2px);\r\n    }\r\n    .pg-option-btn:hover::before { left: 100%; }\r\n    .pg-option-btn:hover i { transform: scale(1.1) translateY(-2px); color: var(--cyan-3d); }\r\n\r\n    .pg-option-btn.active { \r\n        background: var(--void-dark);\r\n        color: #fff; \r\n        border-color: var(--cyan-3d);\r\n        box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 15px rgba(0, 255, 255, 0.2);\r\n    }\r\n    .pg-option-btn.active i { color: var(--cyan-3d); text-shadow: var(--glow-cyan); }\r\n\r\n    \/* ============================================\r\n       MODE-ACTIVE BUTTON ACCENT COLORS\r\n       ============================================ *\/\r\n    .pg-option-btn.mode-btn[data-val=\"Layered\"].active { border-color: #00ffff; box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 15px rgba(0,255,255,0.3); }\r\n    .pg-option-btn.mode-btn[data-val=\"Layered\"].active i { color: #00ffff; }\r\n    \r\n    .pg-option-btn.mode-btn[data-val=\"Extrude\"].active { border-color: #ff003c; box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 15px rgba(255,0,60,0.3); }\r\n    .pg-option-btn.mode-btn[data-val=\"Extrude\"].active i { color: #ff003c; text-shadow: 0 0 20px rgba(255,0,60,0.5); }\r\n    \r\n    .pg-option-btn.mode-btn[data-val=\"Echo\"].active { border-color: #a855f7; box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 15px rgba(168,85,247,0.3); }\r\n    .pg-option-btn.mode-btn[data-val=\"Echo\"].active i { color: #a855f7; text-shadow: 0 0 20px rgba(168,85,247,0.5); }\r\n    \r\n    .pg-option-btn.mode-btn[data-val=\"Offset\"].active { border-color: #f59e0b; box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 0 15px rgba(245,158,11,0.3); }\r\n    .pg-option-btn.mode-btn[data-val=\"Offset\"].active i { color: #f59e0b; text-shadow: 0 0 20px rgba(245,158,11,0.5); }\r\n\r\n    \/* ============================================\r\n       RESULT CARD BASE\r\n       ============================================ *\/\r\n    .pg-results-area { \r\n        padding: 40px 30px; \r\n        position: relative; \r\n    }\r\n    \r\n    .pg-result-list {\r\n        display: grid;\r\n        grid-template-columns: 1fr;\r\n        gap: 20px;\r\n        position: relative; \r\n        z-index: 2;\r\n    }\r\n\r\n    .pg-result-card {\r\n        background: #080a10;\r\n        border: 1px solid rgba(0, 255, 255, 0.15);\r\n        padding: 25px 35px;\r\n        transition: var(--transition-ui);\r\n        position: relative;\r\n        overflow: hidden;\r\n        border-radius: 10px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        min-height: 120px; \r\n        box-sizing: border-box;\r\n        cursor: pointer;\r\n    }\r\n    \r\n    .pg-result-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 4px; height: 100%;\r\n        background: var(--grad-anaglyph);\r\n        transition: width 0.2s ease, opacity 0.2s ease;\r\n        opacity: 0.5;\r\n    }\r\n    \r\n    .pg-result-card::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; right: 0; bottom: 0;\r\n        opacity: 0;\r\n        transition: opacity 0.3s ease;\r\n        pointer-events: none;\r\n        z-index: 0;\r\n    }\r\n    \r\n    .pg-result-card > * { position: relative; z-index: 1; }\r\n    \r\n    .pg-result-card:hover {\r\n        transform: perspective(1000px) rotateX(2deg) rotateY(-1deg) translateZ(10px);\r\n        box-shadow: -10px 15px 35px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 255, 255, 0.15);\r\n        border-color: rgba(0, 255, 255, 0.4);\r\n        background: #0a0d17;\r\n        z-index: 10;\r\n    }\r\n    .pg-result-card:hover::before { width: 6px; opacity: 1; }\r\n    .pg-result-card:hover::after { opacity: 1; }\r\n\r\n    .pg-card-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        width: 100%;\r\n        margin-bottom: 15px;\r\n        border-bottom: 1px solid rgba(255,255,255,0.05);\r\n        padding-bottom: 15px;\r\n    }\r\n    \r\n    .pg-card-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 0.85rem;\r\n        font-weight: 800;\r\n        color: var(--text-muted);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1.5px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        transition: var(--transition-fast);\r\n    }\r\n    .pg-card-title i { font-size: 1.1rem; transition: var(--transition-fast); }\r\n    .pg-result-card:hover .pg-card-title {\r\n        color: #fff;\r\n        letter-spacing: 3px;\r\n    }\r\n\r\n    .pg-card-copy-btn {\r\n        background: rgba(0, 255, 255, 0.1);\r\n        border: 1px solid rgba(0, 255, 255, 0.3);\r\n        color: var(--cyan-3d);\r\n        width: 40px;\r\n        height: 40px;\r\n        border-radius: 8px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        outline: none;\r\n        flex-shrink: 0;\r\n    }\r\n    .pg-card-copy-btn i { font-size: 1.2rem; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }\r\n    \r\n    .pg-card-copy-btn:hover {\r\n        background: var(--cyan-3d);\r\n        color: #000;\r\n        box-shadow: var(--glow-cyan);\r\n        transform: scale(1.05);\r\n    }\r\n    .pg-card-copy-btn:hover i { transform: scale(1.2) translateY(-2px); }\r\n    .pg-card-copy-btn:active { transform: scale(0.95); }\r\n\r\n    .pg-card-preview {\r\n        font-size: 1.6rem;\r\n        color: #fff;\r\n        width: 100%;\r\n        text-align: left;\r\n        font-family: var(--body-font);\r\n        position: relative;\r\n        z-index: 1;\r\n        padding: 10px 0; \r\n        text-shadow: 2px 2px 5px #000;\r\n        transition: var(--transition-fast);\r\n        white-space: pre-wrap !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: break-word !important;\r\n        box-sizing: border-box !important;\r\n    }\r\n    .pg-result-card:hover .pg-card-preview {\r\n        color: var(--silver-3d);\r\n        text-shadow: var(--shadow-3d-text);\r\n    }\r\n\r\n    \/* ============================================\r\n       MODE: LAYERED \u2014 CYAN \/ TEAL\r\n       ============================================ *\/\r\n    .pg-result-card.mode-layered {\r\n        background: linear-gradient(135deg, rgba(0,255,255,0.04) 0%, rgba(0,20,30,0.95) 100%);\r\n        border-color: rgba(0,255,255,0.2);\r\n    }\r\n    .pg-result-card.mode-layered::before {\r\n        background: linear-gradient(180deg, #00ffff, #0d9488);\r\n    }\r\n    .pg-result-card.mode-layered::after {\r\n        background: radial-gradient(ellipse at top left, rgba(0,255,255,0.06) 0%, transparent 60%);\r\n    }\r\n    .pg-result-card.mode-layered .pg-card-title i { color: #00ffff; }\r\n    .pg-result-card.mode-layered .pg-card-copy-btn {\r\n        background: rgba(0,255,255,0.1);\r\n        border-color: rgba(0,255,255,0.3);\r\n        color: #00ffff;\r\n    }\r\n    .pg-result-card.mode-layered .pg-card-copy-btn:hover {\r\n        background: #00ffff; color: #000;\r\n        box-shadow: 0 0 20px rgba(0,255,255,0.5);\r\n    }\r\n    .pg-result-card.mode-layered .pg-card-header {\r\n        border-bottom-color: rgba(0,255,255,0.08);\r\n    }\r\n    .pg-result-card.mode-layered:hover {\r\n        border-color: rgba(0,255,255,0.5);\r\n        box-shadow: -10px 15px 35px rgba(0,0,0,0.9), 0 0 30px rgba(0,255,255,0.15);\r\n    }\r\n    .pg-result-card.mode-layered:hover .pg-card-title {\r\n        text-shadow: 0 0 12px rgba(0,255,255,0.6);\r\n    }\r\n    .pg-result-card.mode-layered:hover .pg-card-preview {\r\n        text-shadow: 3px 3px 0 rgba(0,255,255,0.7), -3px -3px 0 rgba(0,255,255,0.3);\r\n    }\r\n\r\n    \/* ============================================\r\n       MODE: EXTRUDE \u2014 RED \/ CRIMSON\r\n       ============================================ *\/\r\n    .pg-result-card.mode-extrude {\r\n        background: linear-gradient(135deg, rgba(255,0,60,0.05) 0%, rgba(20,5,10,0.95) 100%);\r\n        border-color: rgba(255,0,60,0.2);\r\n    }\r\n    .pg-result-card.mode-extrude::before {\r\n        background: linear-gradient(180deg, #ff003c, #be123c);\r\n    }\r\n    .pg-result-card.mode-extrude::after {\r\n        background: radial-gradient(ellipse at top left, rgba(255,0,60,0.06) 0%, transparent 60%);\r\n    }\r\n    .pg-result-card.mode-extrude .pg-card-title i { color: #ff003c; }\r\n    .pg-result-card.mode-extrude .pg-card-copy-btn {\r\n        background: rgba(255,0,60,0.1);\r\n        border-color: rgba(255,0,60,0.3);\r\n        color: #ff003c;\r\n    }\r\n    .pg-result-card.mode-extrude .pg-card-copy-btn:hover {\r\n        background: #ff003c; color: #fff;\r\n        box-shadow: 0 0 20px rgba(255,0,60,0.5);\r\n    }\r\n    .pg-result-card.mode-extrude .pg-card-header {\r\n        border-bottom-color: rgba(255,0,60,0.08);\r\n    }\r\n    .pg-result-card.mode-extrude:hover {\r\n        border-color: rgba(255,0,60,0.5);\r\n        box-shadow: -10px 15px 35px rgba(0,0,0,0.9), 0 0 30px rgba(255,0,60,0.15);\r\n        background: linear-gradient(135deg, rgba(255,0,60,0.08) 0%, rgba(25,5,10,0.95) 100%);\r\n    }\r\n    .pg-result-card.mode-extrude:hover .pg-card-title {\r\n        text-shadow: 0 0 12px rgba(255,0,60,0.6);\r\n    }\r\n    .pg-result-card.mode-extrude:hover .pg-card-preview {\r\n        text-shadow: 3px 3px 0 rgba(255,0,60,0.7), -3px -3px 0 rgba(255,0,60,0.3);\r\n    }\r\n\r\n    \/* ============================================\r\n       MODE: ECHO \u2014 PURPLE \/ VIOLET\r\n       ============================================ *\/\r\n    .pg-result-card.mode-echo {\r\n        background: linear-gradient(135deg, rgba(168,85,247,0.05) 0%, rgba(15,5,25,0.95) 100%);\r\n        border-color: rgba(168,85,247,0.2);\r\n    }\r\n    .pg-result-card.mode-echo::before {\r\n        background: linear-gradient(180deg, #a855f7, #7c3aed);\r\n    }\r\n    .pg-result-card.mode-echo::after {\r\n        background: radial-gradient(ellipse at top left, rgba(168,85,247,0.06) 0%, transparent 60%);\r\n    }\r\n    .pg-result-card.mode-echo .pg-card-title i { color: #a855f7; }\r\n    .pg-result-card.mode-echo .pg-card-copy-btn {\r\n        background: rgba(168,85,247,0.1);\r\n        border-color: rgba(168,85,247,0.3);\r\n        color: #a855f7;\r\n    }\r\n    .pg-result-card.mode-echo .pg-card-copy-btn:hover {\r\n        background: #a855f7; color: #fff;\r\n        box-shadow: 0 0 20px rgba(168,85,247,0.5);\r\n    }\r\n    .pg-result-card.mode-echo .pg-card-header {\r\n        border-bottom-color: rgba(168,85,247,0.08);\r\n    }\r\n    .pg-result-card.mode-echo:hover {\r\n        border-color: rgba(168,85,247,0.5);\r\n        box-shadow: -10px 15px 35px rgba(0,0,0,0.9), 0 0 30px rgba(168,85,247,0.15);\r\n        background: linear-gradient(135deg, rgba(168,85,247,0.08) 0%, rgba(20,5,30,0.95) 100%);\r\n    }\r\n    .pg-result-card.mode-echo:hover .pg-card-title {\r\n        text-shadow: 0 0 12px rgba(168,85,247,0.6);\r\n    }\r\n    .pg-result-card.mode-echo:hover .pg-card-preview {\r\n        text-shadow: 3px 3px 0 rgba(168,85,247,0.7), -3px -3px 0 rgba(168,85,247,0.3);\r\n    }\r\n\r\n    \/* ============================================\r\n       MODE: OFFSET \u2014 AMBER \/ GOLD\r\n       ============================================ *\/\r\n    .pg-result-card.mode-offset {\r\n        background: linear-gradient(135deg, rgba(245,158,11,0.05) 0%, rgba(20,15,5,0.95) 100%);\r\n        border-color: rgba(245,158,11,0.2);\r\n    }\r\n    .pg-result-card.mode-offset::before {\r\n        background: linear-gradient(180deg, #f59e0b, #d97706);\r\n    }\r\n    .pg-result-card.mode-offset::after {\r\n        background: radial-gradient(ellipse at top left, rgba(245,158,11,0.06) 0%, transparent 60%);\r\n    }\r\n    .pg-result-card.mode-offset .pg-card-title i { color: #f59e0b; }\r\n    .pg-result-card.mode-offset .pg-card-copy-btn {\r\n        background: rgba(245,158,11,0.1);\r\n        border-color: rgba(245,158,11,0.3);\r\n        color: #f59e0b;\r\n    }\r\n    .pg-result-card.mode-offset .pg-card-copy-btn:hover {\r\n        background: #f59e0b; color: #000;\r\n        box-shadow: 0 0 20px rgba(245,158,11,0.5);\r\n    }\r\n    .pg-result-card.mode-offset .pg-card-header {\r\n        border-bottom-color: rgba(245,158,11,0.08);\r\n    }\r\n    .pg-result-card.mode-offset:hover {\r\n        border-color: rgba(245,158,11,0.5);\r\n        box-shadow: -10px 15px 35px rgba(0,0,0,0.9), 0 0 30px rgba(245,158,11,0.15);\r\n        background: linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(25,18,5,0.95) 100%);\r\n    }\r\n    .pg-result-card.mode-offset:hover .pg-card-title {\r\n        text-shadow: 0 0 12px rgba(245,158,11,0.6);\r\n    }\r\n    .pg-result-card.mode-offset:hover .pg-card-preview {\r\n        text-shadow: 3px 3px 0 rgba(245,158,11,0.7), -3px -3px 0 rgba(245,158,11,0.3);\r\n    }\r\n\r\n    \/* ============================================\r\n       STYLE SUBTINTS (overlay on top of mode)\r\n       ============================================ *\/\r\n    .pg-result-card.style-double .pg-card-preview { letter-spacing: 1px; }\r\n    \r\n    .pg-result-card.style-solid .pg-card-preview { \r\n        letter-spacing: 3px; \r\n        filter: brightness(1.05);\r\n    }\r\n    \r\n    .pg-result-card.style-wide .pg-card-preview { \r\n        letter-spacing: 2px; \r\n        filter: saturate(1.2);\r\n    }\r\n    \r\n    .pg-result-card.style-normal .pg-card-preview { \r\n        letter-spacing: 0px;\r\n        filter: contrast(1.1);\r\n    }\r\n\r\n    \/* Style indicator dot *\/\r\n    .pg-result-card .pg-style-dot {\r\n        width: 8px;\r\n        height: 8px;\r\n        border-radius: 50%;\r\n        display: inline-block;\r\n        margin-left: 6px;\r\n        flex-shrink: 0;\r\n    }\r\n    .pg-result-card.style-double .pg-style-dot { background: #00ffff; box-shadow: 0 0 6px rgba(0,255,255,0.5); }\r\n    .pg-result-card.style-solid .pg-style-dot { background: #ff003c; box-shadow: 0 0 6px rgba(255,0,60,0.5); }\r\n    .pg-result-card.style-wide .pg-style-dot { background: #a855f7; box-shadow: 0 0 6px rgba(168,85,247,0.5); }\r\n    .pg-result-card.style-normal .pg-style-dot { background: #94a3b8; box-shadow: 0 0 6px rgba(148,163,184,0.5); }\r\n\r\n    \/* ============================================\r\n       CARD TOP ACCENT BAR per mode\r\n       ============================================ *\/\r\n    .pg-result-card.mode-layered { border-top: 2px solid rgba(0,255,255,0.4); }\r\n    .pg-result-card.mode-extrude { border-top: 2px solid rgba(255,0,60,0.4); }\r\n    .pg-result-card.mode-echo { border-top: 2px solid rgba(168,85,247,0.4); }\r\n    .pg-result-card.mode-offset { border-top: 2px solid rgba(245,158,11,0.4); }\r\n\r\n    .pg-result-card.mode-layered:hover { border-top-color: #00ffff; }\r\n    .pg-result-card.mode-extrude:hover { border-top-color: #ff003c; }\r\n    .pg-result-card.mode-echo:hover { border-top-color: #a855f7; }\r\n    .pg-result-card.mode-offset:hover { border-top-color: #f59e0b; }\r\n\r\n    \/* ============================================\r\n       LOAD MORE BUTTON \u2014 follows mode color\r\n       ============================================ *\/\r\n    .pg-btn-load {\r\n        background: transparent;\r\n        color: #fff;\r\n        border: 2px solid var(--cyan-3d);\r\n        padding: 18px 45px;\r\n        font-family: var(--primary-font);\r\n        font-weight: 900;\r\n        font-size: 1rem;\r\n        cursor: pointer;\r\n        margin-top: 40px;\r\n        text-transform: uppercase;\r\n        border-radius: 6px;\r\n        transition: var(--transition-fast);\r\n        position: relative;\r\n        z-index: 2;\r\n        letter-spacing: 2px;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        box-shadow: 0 5px 15px rgba(0,0,0,0.8);\r\n    }\r\n    .pg-btn-load::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; right: 0; bottom: 0;\r\n        border-radius: 6px;\r\n        border: 2px solid var(--cyan-3d);\r\n        opacity: 0;\r\n        transition: all 0.4s ease;\r\n        z-index: -1;\r\n    }\r\n    .pg-btn-load i { transition: transform 0.3s ease; }\r\n    .pg-btn-load:hover { \r\n        background: rgba(0, 255, 255, 0.1); \r\n        box-shadow: var(--glow-cyan);\r\n        transform: translateY(-3px);\r\n        text-shadow: 0 0 8px var(--cyan-3d);\r\n    }\r\n    .pg-btn-load:hover::before {\r\n        transform: scale(1.05, 1.2);\r\n        opacity: 1;\r\n        border-color: transparent;\r\n    }\r\n    .pg-btn-load:hover i { transform: translateY(4px); }\r\n    .pg-btn-load:active { transform: translateY(0); }\r\n\r\n    \/* Load more \u2014 Extrude *\/\r\n    .pg-btn-load.btn-extrude { border-color: #ff003c; }\r\n    .pg-btn-load.btn-extrude::before { border-color: #ff003c; }\r\n    .pg-btn-load.btn-extrude:hover { background: rgba(255,0,60,0.1); box-shadow: 0 0 20px rgba(255,0,60,0.5); text-shadow: 0 0 8px #ff003c; }\r\n\r\n    \/* Load more \u2014 Echo *\/\r\n    .pg-btn-load.btn-echo { border-color: #a855f7; }\r\n    .pg-btn-load.btn-echo::before { border-color: #a855f7; }\r\n    .pg-btn-load.btn-echo:hover { background: rgba(168,85,247,0.1); box-shadow: 0 0 20px rgba(168,85,247,0.5); text-shadow: 0 0 8px #a855f7; }\r\n\r\n    \/* Load more \u2014 Offset *\/\r\n    .pg-btn-load.btn-offset { border-color: #f59e0b; }\r\n    .pg-btn-load.btn-offset::before { border-color: #f59e0b; }\r\n    .pg-btn-load.btn-offset:hover { background: rgba(245,158,11,0.1); box-shadow: 0 0 20px rgba(245,158,11,0.5); text-shadow: 0 0 8px #f59e0b; }\r\n\r\n    \/* ============================================\r\n       TOAST \u2014 follows mode color\r\n       ============================================ *\/\r\n    .pg-toast {\r\n        visibility: hidden;\r\n        background: #0a0a0a;\r\n        color: #fff;\r\n        padding: 15px 30px;\r\n        position: fixed;\r\n        left: 50%;\r\n        bottom: 40px;\r\n        transform: translateX(-50%) translateY(20px);\r\n        font-family: var(--primary-font);\r\n        font-weight: 800;\r\n        z-index: 10000;\r\n        border-radius: 8px;\r\n        border: 1px solid var(--red-3d);\r\n        border-left: 5px solid var(--red-3d);\r\n        text-transform: uppercase;\r\n        box-shadow: var(--shadow-ui), var(--glow-red);\r\n        letter-spacing: 1px;\r\n        opacity: 0;\r\n        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n    }\r\n    .pg-toast i { color: var(--cyan-3d); font-size: 1.2rem; }\r\n    .pg-toast.show { \r\n        visibility: visible; \r\n        opacity: 1;\r\n        transform: translateX(-50%) translateY(0);\r\n    }\r\n\r\n    .pg-toast.toast-layered { border-color: #00ffff; border-left-color: #00ffff; box-shadow: var(--shadow-ui), 0 0 20px rgba(0,255,255,0.5); }\r\n    .pg-toast.toast-layered i { color: #00ffff; }\r\n    \r\n    .pg-toast.toast-extrude { border-color: #ff003c; border-left-color: #ff003c; box-shadow: var(--shadow-ui), 0 0 20px rgba(255,0,60,0.5); }\r\n    .pg-toast.toast-extrude i { color: #ff003c; }\r\n    \r\n    .pg-toast.toast-echo { border-color: #a855f7; border-left-color: #a855f7; box-shadow: var(--shadow-ui), 0 0 20px rgba(168,85,247,0.5); }\r\n    .pg-toast.toast-echo i { color: #a855f7; }\r\n    \r\n    .pg-toast.toast-offset { border-color: #f59e0b; border-left-color: #f59e0b; box-shadow: var(--shadow-ui), 0 0 20px rgba(245,158,11,0.5); }\r\n    .pg-toast.toast-offset i { color: #f59e0b; }\r\n\r\n    \/* ============================================\r\n       GENERATOR CARD TOP BORDER \u2014 follows mode\r\n       ============================================ *\/\r\n    .pg-generator-card.card-mode-layered { border-top-color: #00ffff; }\r\n    .pg-generator-card.card-mode-extrude { border-top-color: #ff003c; }\r\n    .pg-generator-card.card-mode-echo { border-top-color: #a855f7; }\r\n    .pg-generator-card.card-mode-offset { border-top-color: #f59e0b; }\r\n\r\n    \/* RESPONSIVE *\/\r\n    @media (max-width: 900px) {\r\n        .pg-main-title { font-size: 2.2rem; } \r\n        .pg-controls-wrapper { grid-template-columns: 1fr; grid-template-rows: auto; }\r\n        .pg-input-section { grid-column: 1 \/ -1; grid-row: auto; }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        .pg-container { padding: 30px 15px !important; }\r\n        .pg-results-area { padding: 30px 15px; }\r\n        .pg-controls-wrapper { padding: 20px; gap: 20px; }\r\n        .pg-text-input { min-height: 100px !important; font-size: 1.4rem !important; }\r\n        .pg-input-toolbar { justify-content: center; }\r\n        .pg-preset-select { max-width: 100%; }\r\n        .pg-result-list { grid-template-columns: 1fr; gap: 15px; }\r\n        .pg-option-btn { padding: 12px 8px; font-size: 0.7rem; }\r\n        .pg-btn-load { padding: 15px 30px; font-size: 0.9rem; width: 100%; justify-content: center; }\r\n        .pg-main-title { font-size: 1.8rem; }\r\n        .pg-subtitle { font-size: 0.9rem; }\r\n        .pg-result-card { padding: 20px 20px; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"pg-tool-wrapper\">\r\n    <div class=\"pg-container pg-hero-content-wrapper\">\r\n        <h1 class=\"pg-main-title\">3D Text Generator \u2013 Create Instantly<\/h1>\r\n        <p class=\"pg-subtitle\">Create stacked, extruded, and layered Unicode text to simulate 3D depth and shadows. Perfect for generating copy-safe dimensional typography.<\/p>\r\n        \r\n        <div class=\"pg-generator-card\" id=\"pgMainCard\">\r\n            <div class=\"pg-controls-wrapper\">\r\n                \r\n                <div class=\"pg-input-section\">\r\n                    <div class=\"pg-panel-label\"><i class=\"fa-solid fa-cube\"><\/i> Dimension Input<\/div>\r\n                    <div class=\"pg-enhanced-input-wrapper\">\r\n                        <textarea class=\"pg-text-input\" id=\"pgInputText\" placeholder=\"Enter text to render 3D...\"><\/textarea>\r\n                        \r\n                        <div class=\"pg-input-toolbar\">\r\n                            <button class=\"pg-toolbar-btn\" id=\"pgBtnPaste\"><i class=\"fa-solid fa-paste\"><\/i> Paste<\/button>\r\n                            <button class=\"pg-toolbar-btn\" id=\"pgBtnSelectAll\"><i class=\"fa-solid fa-object-group\"><\/i> Select<\/button>\r\n                            <button class=\"pg-toolbar-btn\" id=\"pgBtnCopy\"><i class=\"fa-solid fa-copy\"><\/i> Copy<\/button>\r\n                            \r\n                            <select class=\"pg-preset-select\" id=\"pgPresetSelect\">\r\n                                <option value=\"\" disabled selected>\u2728 3D Presets<\/option>\r\n                                <option value=\"CYBERPUNK\">Cyberpunk Drop<\/option>\r\n                                <option value=\"V A P O R W A V E\">Vaporwave Spaced<\/option>\r\n                                <option value=\"Level Complete!\">Level Complete<\/option>\r\n                                <option value=\"Dimension Shift\">Dimension Shift<\/option>\r\n                                <option value=\"HELLO WORLD\">Hello World<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div>\r\n                    <div class=\"pg-panel-label\"><i class=\"fa-solid fa-layer-group\"><\/i> Projection Mode<\/div>\r\n                    <div class=\"pg-grid-options\">\r\n                        <button class=\"pg-option-btn mode-btn active\" data-val=\"Layered\">\r\n                            <i class=\"fa-solid fa-clone\"><\/i> Layered Depth\r\n                        <\/button>\r\n                        <button class=\"pg-option-btn mode-btn\" data-val=\"Extrude\">\r\n                            <i class=\"fa-solid fa-cubes\"><\/i> Shadow Extrude\r\n                        <\/button>\r\n                        <button class=\"pg-option-btn mode-btn\" data-val=\"Echo\">\r\n                            <i class=\"fa-solid fa-wave-square\"><\/i> Trail Echo\r\n                        <\/button>\r\n                        <button class=\"pg-option-btn mode-btn\" data-val=\"Offset\">\r\n                            <i class=\"fa-solid fa-object-ungroup\"><\/i> Bracket Offset\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div>\r\n                    <div class=\"pg-panel-label\"><i class=\"fa-solid fa-font\"><\/i> Base Typography<\/div>\r\n                    <div class=\"pg-grid-options\">\r\n                        <button class=\"pg-option-btn style-btn active\" data-val=\"Double\">\r\n                            <i class=\"fa-solid fa-bold\"><\/i> Double Struck\r\n                        <\/button>\r\n                        <button class=\"pg-option-btn style-btn\" data-val=\"Solid\">\r\n                            <i class=\"fa-solid fa-square\"><\/i> Negative Box\r\n                        <\/button>\r\n                        <button class=\"pg-option-btn style-btn\" data-val=\"Wide\">\r\n                            <i class=\"fa-solid fa-text-width\"><\/i> Wide Print\r\n                        <\/button>\r\n                        <button class=\"pg-option-btn style-btn\" data-val=\"Normal\">\r\n                            <i class=\"fa-solid fa-n\"><\/i> Standard\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"pg-results-area\">\r\n                <div class=\"pg-result-list\" id=\"pgResultList\"><\/div>\r\n                <button class=\"pg-btn-load\" id=\"pgLoadMoreBtn\"><span>Render More Layers<\/span> <i class=\"fa-solid fa-arrow-down\"><\/i><\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div id=\"pgToast\" class=\"pg-toast\"><i class=\"fa-solid fa-check-double\"><\/i> 3D Object Copied<\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    const inputEl = document.getElementById('pgInputText');\r\n    const resultList = document.getElementById('pgResultList');\r\n    const loadMoreBtn = document.getElementById('pgLoadMoreBtn');\r\n    const toast = document.getElementById('pgToast');\r\n    const btnPaste = document.getElementById('pgBtnPaste');\r\n    const btnSelectAll = document.getElementById('pgBtnSelectAll');\r\n    const btnCopy = document.getElementById('pgBtnCopy');\r\n    const presetSelect = document.getElementById('pgPresetSelect');\r\n    const mainCard = document.getElementById('pgMainCard');\r\n\r\n    let currentMode = 'Layered';\r\n    let currentStyle = 'Double';\r\n    let limit = 6; \r\n    const LOAD_INCREMENT = 6; \r\n\r\n    const baseChars = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ\";\r\n    const doubleStruckArr = \"\ud835\udd52\ud835\udd53\ud835\udd54\ud835\udd55\ud835\udd56\ud835\udd57\ud835\udd58\ud835\udd59\ud835\udd5a\ud835\udd5b\ud835\udd5c\ud835\udd5d\ud835\udd5e\ud835\udd5f\ud835\udd60\ud835\udd61\ud835\udd62\ud835\udd63\ud835\udd64\ud835\udd65\ud835\udd66\ud835\udd67\ud835\udd68\ud835\udd69\ud835\udd6a\ud835\udd6b\ud835\udd38\ud835\udd39\u2102\ud835\udd3b\ud835\udd3c\ud835\udd3d\ud835\udd3e\u210d\ud835\udd40\ud835\udd41\ud835\udd42\ud835\udd43\ud835\udd44\u2115\ud835\udd46\u2119\u211a\u211d\ud835\udd4a\ud835\udd4b\ud835\udd4c\ud835\udd4d\ud835\udd4e\ud835\udd4f\ud835\udd50\u2124\";\r\n    const solidBoxArr = \"\ud83c\udd70\ud83c\udd71\ud83c\udd72\ud83c\udd73\ud83c\udd74\ud83c\udd75\ud83c\udd76\ud83c\udd77\ud83c\udd78\ud83c\udd79\ud83c\udd7a\ud83c\udd7b\ud83c\udd7c\ud83c\udd7d\ud83c\udd7e\ud83c\udd7f\ud83c\udd80\ud83c\udd81\ud83c\udd82\ud83c\udd83\ud83c\udd84\ud83c\udd45\ud83c\udd86\ud83c\udd87\ud83c\udd88\ud83c\udd89\ud83c\udd70\ud83c\udd71\ud83c\udd72\ud83c\udd73\ud83c\udd74\ud83c\udd75\ud83c\udd76\ud83c\udd77\ud83c\udd78\ud83c\udd79\ud83c\udd7a\ud83c\udd7b\ud83c\udd7c\ud83c\udd7d\ud83c\udd7e\ud83c\udd7f\ud83c\udd80\ud83c\udd81\ud83c\udd82\ud83c\udd83\ud83c\udd84\ud83c\udd45\ud83c\udd86\ud83c\udd87\ud83c\udd88\ud83c\udd89\";\r\n    const wideTextArr = \"\uff41\uff42\uff43\uff44\uff45\uff46\uff47\uff48\uff49\uff4a\uff4b\uff4c\uff4d\uff4e\uff4f\uff50\uff51\uff52\uff53\uff54\uff55\uff56\uff57\uff58\uff59\uff5a\uff21\uff22\uff23\uff24\uff25\uff26\uff27\uff28\uff29\uff2a\uff2b\uff2c\uff2d\uff2e\uff2f\uff30\uff31\uff32\uff33\uff34\uff35\uff36\uff37\uff38\uff39\uff3a\";\r\n\r\n    const generateConfigs = () => {\r\n        const templates = [];\r\n        const names = ['Isometric Matrix', 'Perspective Drop', 'Extrusion Core', 'Z-Axis Lift', 'Shadow Block', 'Stacked Render', 'Dimensional Rift', 'Hologram Offset'];\r\n        let idCounter = 0;\r\n        for(let i=0; i<60; i++){\r\n            templates.push({\r\n                id: `3d-${idCounter++}`,\r\n                name: names[i % names.length] + ` Model-${Math.floor(Math.random()*99)}`,\r\n                icon: ['cube', 'cubes', 'layer-group', 'boxes-stacked', 'draw-polygon'][i % 5]\r\n            });\r\n        }\r\n        return templates;\r\n    };\r\n\r\n    const ALL_STYLES = generateConfigs();\r\n\r\n    const applyBaseStyle = (char, style) => {\r\n        const index = baseChars.indexOf(char);\r\n        if (index === -1) return char;\r\n        if (style === 'Double') return Array.from(doubleStruckArr)[index] || char;\r\n        if (style === 'Solid') return Array.from(solidBoxArr)[index] || char;\r\n        if (style === 'Wide') return Array.from(wideTextArr)[index] || char;\r\n        return char;\r\n    };\r\n\r\n    const transformLogic = (text, mode, style, variationIndex) => {\r\n        let styledChars = Array.from(text).map(c => applyBaseStyle(c, style));\r\n        let baseWord = styledChars.join('');\r\n        let result = '';\r\n\r\n        if (mode === 'Layered') {\r\n            if (variationIndex % 2 === 0) {\r\n                result = styledChars.map(c => c !== ' ' ? `${c} ${c}` : '  ').join(' ');\r\n            } else {\r\n                result = styledChars.map(c => c !== ' ' ? `${c}\\u0338` : ' ').join('');\r\n            }\r\n        } else if (mode === 'Extrude') {\r\n            const blocks = ['\u2593', '\u2592', '\u2591', '\u2588'];\r\n            const block = blocks[variationIndex % blocks.length];\r\n            result = styledChars.map(c => c !== ' ' ? `${c}${block}` : '  ').join('');\r\n        } else if (mode === 'Echo') {\r\n            let reps = (variationIndex % 3) + 2;\r\n            let echoArr = [];\r\n            for(let i=0; i<reps; i++) { echoArr.push(baseWord); }\r\n            result = echoArr.join('  ');\r\n        } else if (mode === 'Offset') {\r\n            const leftBrackets = ['[', '\u27ea', '\u300e', '\u3010'];\r\n            const rightBrackets = [']', '\u27eb', '\u300f', '\u3011'];\r\n            const br = variationIndex % leftBrackets.length;\r\n            result = baseWord.split(' ').map(w => w ? `${leftBrackets[br]} ${w} ${rightBrackets[br]}` : '').join('  ');\r\n        }\r\n        return result;\r\n    };\r\n\r\n    \/* Build CSS class strings from current mode\/style *\/\r\n    const getModeClass = (mode) => `mode-${mode.toLowerCase()}`;\r\n    const getStyleClass = (style) => `style-${style.toLowerCase()}`;\r\n\r\n    const updateGlobalTheme = () => {\r\n        \/* Main card top border *\/\r\n        mainCard.className = 'pg-generator-card';\r\n        mainCard.classList.add(`card-mode-${currentMode.toLowerCase()}`);\r\n\r\n        \/* Load more button *\/\r\n        loadMoreBtn.className = 'pg-btn-load';\r\n        if (currentMode !== 'Layered') {\r\n            loadMoreBtn.classList.add(`btn-${currentMode.toLowerCase()}`);\r\n        }\r\n\r\n        \/* Toast *\/\r\n        toast.className = 'pg-toast';\r\n        toast.classList.add(`toast-${currentMode.toLowerCase()}`);\r\n    };\r\n\r\n    const render = () => {\r\n        updateGlobalTheme();\r\n        resultList.innerHTML = '';\r\n        let raw = inputEl.value || \"CYBERPUNK\";\r\n        const displayList = ALL_STYLES.slice(0, limit);\r\n        const mClass = getModeClass(currentMode);\r\n        const sClass = getStyleClass(currentStyle);\r\n\r\n        displayList.forEach((s, idx) => {\r\n            const out = transformLogic(raw, currentMode, currentStyle, idx);\r\n            const card = document.createElement('div');\r\n            card.className = `pg-result-card ${mClass} ${sClass}`;\r\n            card.innerHTML = `\r\n                <div class=\"pg-card-header\">\r\n                    <div class=\"pg-card-title\"><i class=\"fa-solid fa-${s.icon}\"><\/i> ${s.name}<span class=\"pg-style-dot\"><\/span><\/div>\r\n                    <button class=\"pg-card-copy-btn\" title=\"Copy Text\"><i class=\"fa-regular fa-copy\"><\/i><\/button>\r\n                <\/div>\r\n                <div class=\"pg-card-preview\">${out}<\/div>\r\n            `;\r\n            \r\n            const copyBtn = card.querySelector('.pg-card-copy-btn');\r\n            copyBtn.addEventListener('click', (e) => {\r\n                e.stopPropagation(); \r\n                navigator.clipboard.writeText(out);\r\n                copyBtn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i>';\r\n                \/* Use mode-specific color for confirmed state *\/\r\n                const modeColor = {Layered:'#00ffff', Extrude:'#ff003c', Echo:'#a855f7', Offset:'#f59e0b'}[currentMode];\r\n                copyBtn.style.background = modeColor;\r\n                copyBtn.style.borderColor = modeColor;\r\n                copyBtn.style.color = currentMode === 'Extrude' ? '#fff' : '#000';\r\n                toast.classList.add('show');\r\n                setTimeout(() => {\r\n                    copyBtn.innerHTML = '<i class=\"fa-regular fa-copy\"><\/i>';\r\n                    copyBtn.style.background = '';\r\n                    copyBtn.style.borderColor = '';\r\n                    copyBtn.style.color = '';\r\n                    toast.classList.remove('show');\r\n                }, 2000);\r\n            });\r\n            resultList.appendChild(card);\r\n        });\r\n\r\n        loadMoreBtn.style.display = limit >= ALL_STYLES.length ? 'none' : 'inline-flex';\r\n        const remaining = Math.max(0, ALL_STYLES.length - limit);\r\n        if (remaining > 0) loadMoreBtn.querySelector('span').innerText = `Render More Layers (${remaining})`;\r\n    };\r\n\r\n    inputEl.addEventListener('input', render);\r\n    \r\n    btnPaste.addEventListener('click', async () => {\r\n        try { const text = await navigator.clipboard.readText(); inputEl.value = text; render(); } \r\n        catch (err) { alert('Unable to paste. Please use Ctrl+V \/ Cmd+V.'); }\r\n    });\r\n    btnSelectAll.addEventListener('click', () => inputEl.select());\r\n    btnCopy.addEventListener('click', () => {\r\n        if(inputEl.value) {\r\n            navigator.clipboard.writeText(inputEl.value);\r\n            toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 2000);\r\n        }\r\n    });\r\n    \r\n    presetSelect.addEventListener('change', (e) => {\r\n        if(e.target.value) { inputEl.value = e.target.value; render(); e.target.selectedIndex = 0; }\r\n    });\r\n    \r\n    loadMoreBtn.onclick = () => { limit += LOAD_INCREMENT; render(); };\r\n\r\n    document.querySelectorAll('.mode-btn').forEach(btn => {\r\n        btn.onclick = () => {\r\n            document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active'); currentMode = btn.dataset.val; limit = 6; render();\r\n        };\r\n    });\r\n    document.querySelectorAll('.style-btn').forEach(btn => {\r\n        btn.onclick = () => {\r\n            document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active'); currentStyle = btn.dataset.val; limit = 6; render();\r\n        };\r\n    });\r\n\r\n    render();\r\n});\r\n<\/script>\r\n<!-- END OF FILE 3D Text Generator -->\r\n<!-- <content section is starting -->\r\n\r\n<div>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n    <!-- SECTION 1 -->\r\n\r\n\r\n<section class=\"pg-fcs-section pg-fcs-sec1\">\r\n        <div class=\"pg-fcs-inner\">\r\n\t\r\n<\/div>\r\n\t<\/section>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n    <section class=\"pg-fcs-section pg-fcs-sec1\">\r\n        <div class=\"pg-fcs-inner\">\r\n            <h2 class=\"pg-fcs-heading\">What Makes This <span class=\"pg-fcs-kw\">3D Text Generator<\/span> Different?<\/h2>\r\n            <p class=\"pg-fcs-sub\">Discover why thousands of creators love our 3D text generator to produce striking dimensional text that looks like it's floating off the screen \u2014 completely free.<\/p>\r\n            <div class=\"pg-fcs-grid\">\r\n                <div class=\"pg-fcs-card\">\r\n                    <div class=\"pg-fcs-icon\" style=\"background:rgba(0,176,255,0.12);color:#00b0ff;\"><i class=\"fa-solid fa-cube\"><\/i><\/div>\r\n                    <div class=\"pg-fcs-card-title\">Instant 3D Transformation<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Our 3D text generator converts normal text into bold Unicode 3D characters instantly \u2014 zero waiting, zero design tools needed for stunning depth effects.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <div class=\"pg-fcs-icon\" style=\"background:rgba(139,92,246,0.12);color:#8b5cf6;\"><i class=\"fa-solid fa-layer-group\"><\/i><\/div>\r\n                    <div class=\"pg-fcs-card-title\">Multiple Depth Styles<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Bold 3D, outlined 3D, shadow text, and dimensional letters \u2014 our 3D text generator covers every 3D Unicode format available in the standard.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <div class=\"pg-fcs-icon\" style=\"background:rgba(255,138,101,0.12);color:#ff8a65;\"><i class=\"fa-solid fa-copy\"><\/i><\/div>\r\n                    <div class=\"pg-fcs-card-title\">One-Click Copy and Paste<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Created your 3D text? Hit copy and paste it into bios, captions, comments, or any platform supporting Unicode.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <div class=\"pg-fcs-icon\" style=\"background:rgba(0,230,118,0.12);color:#00e676;\"><i class=\"fa-solid fa-shield-halved\"><\/i><\/div>\r\n                    <div class=\"pg-fcs-card-title\">100% Safe and Browser-Based<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Our 3D text generator runs entirely in your browser \u2014 no servers, no data collection. Your 3D text stays completely private.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <div class=\"pg-fcs-icon\" style=\"background:rgba(103,58,183,0.12);color:#673ab7;\"><i class=\"fa-solid fa-display\"><\/i><\/div>\r\n                    <div class=\"pg-fcs-card-title\">Renders on Every Device<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Phone, tablet, or desktop \u2014 our 3D text generator renders dimensional text perfectly on any screen and browser.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <div class=\"pg-fcs-icon\" style=\"background:rgba(38,198,218,0.12);color:#26c6da;\"><i class=\"fa-solid fa-infinity\"><\/i><\/div>\r\n                    <div class=\"pg-fcs-card-title\">Unlimited 3D Generation<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">No accounts, no limits, no fees. Generate as much 3D text as you want \u2014 free forever, no strings attached.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2 -->\r\n    <section class=\"pg-fcs-section pg-fcs-sec2\">\r\n        <div class=\"pg-fcs-inner\">\r\n            <h2 class=\"pg-fcs-heading\">How Does Our <span class=\"pg-fcs-kw\">3D Text Generator<\/span> Work?<\/h2>\r\n            <p class=\"pg-fcs-sub\">Creating 3D text is incredibly simple. No design skills needed \u2014 just follow these steps and get your dimensional text ready to paste in seconds.<\/p>\r\n            <div class=\"pg-fcs-grid\">\r\n                <div class=\"pg-fcs-card\">\r\n                    <span class=\"pg-fcs-emoji\">\ud83d\udd32<\/span>\r\n                    <div class=\"pg-fcs-card-title\">Step 1: Type Your Text<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Enter any word or sentence into the input box of our 3D text generator \u2014 any regular text instantly becomes dimensional.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <span class=\"pg-fcs-emoji\">\ud83e\uddca<\/span>\r\n                    <div class=\"pg-fcs-card-title\">Step 2: Pick 3D Style<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Choose from bold 3D, outlined 3D, shadow text, or double-struck 3D \u2014 each adds a different depth effect.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <span class=\"pg-fcs-emoji\">\ud83d\udc41\ufe0f<\/span>\r\n                    <div class=\"pg-fcs-card-title\">Step 3: See the Depth<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Your text instantly gains dimension using real Unicode mapping \u2014 preview exactly how the 3D text renders when pasted online.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <span class=\"pg-fcs-emoji\">\ud83d\udccb<\/span>\r\n                    <div class=\"pg-fcs-card-title\">Step 4: Copy 3D Output<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Happy with the 3D look? Click copy and your dimensional text goes straight to clipboard \u2014 pure Unicode, no formatting lost.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <span class=\"pg-fcs-emoji\">\ud83c\udf10<\/span>\r\n                    <div class=\"pg-fcs-card-title\">Step 5: Paste Anywhere<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Drop your 3D text into bios, captions, comments, or usernames \u2014 real Unicode renders depth everywhere.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <span class=\"pg-fcs-emoji\">\ud83e\uddca<\/span>\r\n                    <div class=\"pg-fcs-card-title\">Step 6: Mix 3D Effects<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Combine bold 3D with shadow text, or mix outlined with double-struck for extra dimensional impact.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3 -->\r\n    <section class=\"pg-fcs-section pg-fcs-sec3\">\r\n        <div class=\"pg-fcs-inner\">\r\n            <h2 class=\"pg-fcs-heading\">Where Can You Use <span class=\"pg-fcs-kw\">3D Text Generator<\/span> Results?<\/h2>\r\n            <p class=\"pg-fcs-sub\">Our 3D text generator creates real Unicode that renders on virtually every platform. Here are the most popular places creators use dimensional text for extra depth.<\/p>\r\n            <div class=\"pg-fcs-grid\">\r\n                <div class=\"pg-fcs-card\">\r\n                    <div class=\"pg-fcs-icon\" style=\"background:rgba(225,48,108,0.12);color:#e1306c;\"><i class=\"fa-brands fa-instagram\"><\/i><\/div>\r\n                    <div class=\"pg-fcs-card-title\">Instagram Bio and Captions<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">3D text in Instagram bios adds striking depth to your profile \u2014 the bold dimensional letters make you stand out from flat text profiles.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <div class=\"pg-fcs-icon\" style=\"background:rgba(255,0,80,0.10);color:#ff0050;\"><i class=\"fa-brands fa-tiktok\"><\/i><\/div>\r\n                    <div class=\"pg-fcs-card-title\">TikTok Captions and Comments<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">3D text in TikTok captions adds an extra dimension to your content \u2014 bold letters grab attention and boost engagement.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <div class=\"pg-fcs-icon\" style=\"background:rgba(88,101,242,0.12);color:#5865f2;\"><i class=\"fa-brands fa-discord\"><\/i><\/div>\r\n                    <div class=\"pg-fcs-card-title\">Discord Names and Servers<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Set a 3D Discord username \u2014 dimensional text is instantly recognizable and gets reactions in every server.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <div class=\"pg-fcs-icon\" style=\"background:rgba(131,56,236,0.12);color:#8338ec;\"><i class=\"fa-brands fa-twitch\"><\/i><\/div>\r\n                    <div class=\"pg-fcs-card-title\">Twitch Channel and Chat<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Give your Twitch channel a 3D upgrade with dimensional usernames and chat messages \u2014 ideal for standing out.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <div class=\"pg-fcs-icon\" style=\"background:rgba(244,67,54,0.12);color:#f44336;\"><i class=\"fa-brands fa-youtube\"><\/i><\/div>\r\n                    <div class=\"pg-fcs-card-title\">YouTube Titles and Descriptions<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Use 3D text in YouTube video titles to boost click-through rates \u2014 dimensional bold text draws the eye instantly.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-fcs-card\">\r\n                    <div class=\"pg-fcs-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-pen-nib\"><\/i><\/div>\r\n                    <div class=\"pg-fcs-card-title\">Design and Branding<\/div>\r\n                    <p class=\"pg-fcs-card-desc\">Use 3D text in logos, headers, posters, and branding \u2014 dimensional text adds a premium feel to any design project.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <style>\r\n        *, *::before, *::after {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        :root {\r\n            --accent-blue: #00b0ff;\r\n            --text-dark: #000000;\r\n            --text-body: #1a1a1a;\r\n            --grad-3d: linear-gradient(135deg, #00b0ff, #8b5cf6, #ff8a65);\r\n            --theme-bg-alt: rgba(245,247,252,0.7);\r\n            --shadow-card-hover: 0 12px 30px rgba(0,176,255,0.16);\r\n            --tr: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --ff: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n\r\n        .pg-fcs-section {\r\n            width: 100%;\r\n            padding: clamp(48px, 8vw, 96px) 20px;\r\n            position: relative;\r\n            font-family: var(--ff);\r\n            color: var(--text-dark);\r\n            line-height: 1.6;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        .pg-fcs-inner {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .pg-fcs-heading {\r\n            font-family: var(--ff);\r\n            font-size: clamp(1.5rem, 4vw, 2.25rem);\r\n            font-weight: 800;\r\n            text-align: center;\r\n            color: var(--text-dark);\r\n            margin-bottom: clamp(8px, 1.5vw, 14px);\r\n            line-height: 1.2;\r\n            letter-spacing: -0.03em;\r\n        }\r\n\r\n        .pg-fcs-kw {\r\n            color: #000000;\r\n            position: relative;\r\n        }\r\n\r\n        .pg-fcs-kw::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -2px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: var(--grad-3d);\r\n            border-radius: 3px;\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        }\r\n\r\n        .pg-fcs-section:hover .pg-fcs-kw::after {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-fcs-sub {\r\n            font-family: var(--ff);\r\n            font-size: clamp(0.88rem, 1.8vw, 1.02rem);\r\n            font-weight: 400;\r\n            text-align: center;\r\n            color: #1a1a1a;\r\n            max-width: 660px;\r\n            margin: 0 auto clamp(28px, 4vw, 48px);\r\n            line-height: 1.7;\r\n        }\r\n\r\n        .pg-fcs-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: clamp(14px, 2.2vw, 22px);\r\n            align-items: stretch;\r\n        }\r\n\r\n        \/* ========== SMALL COMPACT CARD ========== *\/\r\n        .pg-fcs-card {\r\n            border-radius: 14px;\r\n            padding: clamp(16px, 2.2vw, 24px);\r\n            position: relative;\r\n            cursor: pointer;\r\n            -webkit-tap-highlight-color: transparent;\r\n            user-select: none;\r\n            transition: var(--tr);\r\n            border: 1.5px solid #e0e0e8;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .pg-fcs-card::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            width: 0;\r\n            height: 0;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, rgba(0, 176, 255, 0.08) 0%, rgba(139, 92, 246, 0.03) 60%, transparent 100%);\r\n            transform: translate(-50%, -50%);\r\n            transition: width 0.55s ease-out, height 0.55s ease-out, opacity 0.55s ease-out;\r\n            opacity: 0;\r\n            z-index: 0;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .pg-fcs-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: -1px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: var(--grad-3d);\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            z-index: 4;\r\n            border-radius: 14px 14px 0 0;\r\n        }\r\n\r\n        .pg-fcs-card:hover::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-fcs-card.pg-fcs-pressed {\r\n            transform: translateY(-1px) scale(0.985) !important;\r\n        }\r\n\r\n        .pg-fcs-card.pg-fcs-pressed::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-fcs-card.pg-fcs-ripple::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 1;\r\n        }\r\n\r\n        .pg-fcs-card.pg-fcs-ripple-out::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 0;\r\n        }\r\n\r\n        \/* ICON \u2014 SMALLER *\/\r\n        .pg-fcs-icon {\r\n            width: clamp(38px, 4.5vw, 48px);\r\n            height: clamp(38px, 4.5vw, 48px);\r\n            min-width: 38px;\r\n            min-height: 38px;\r\n            border-radius: 12px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: clamp(15px, 2.2vw, 20px);\r\n            margin-bottom: clamp(10px, 1.6vw, 14px);\r\n            transition: var(--tr);\r\n            position: relative;\r\n            z-index: 3;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-fcs-card:hover .pg-fcs-icon {\r\n            transform: scale(1.12) rotate(-4deg);\r\n        }\r\n\r\n        .pg-fcs-card.pg-fcs-pressed .pg-fcs-icon {\r\n            transform: scale(1.04) rotate(0deg);\r\n        }\r\n\r\n        .pg-fcs-emoji {\r\n            font-size: clamp(22px, 3vw, 28px);\r\n            margin-bottom: clamp(8px, 1.5vw, 12px);\r\n            display: inline-block;\r\n            transition: var(--tr);\r\n            position: relative;\r\n            z-index: 3;\r\n            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-fcs-card:hover .pg-fcs-emoji {\r\n            transform: scale(1.22) rotate(-6deg);\r\n        }\r\n\r\n        .pg-fcs-card.pg-fcs-pressed .pg-fcs-emoji {\r\n            transform: scale(1.08) rotate(0deg);\r\n        }\r\n\r\n        \/* TITLE \u2014 SMALLER *\/\r\n        .pg-fcs-card-title {\r\n            font-family: var(--ff);\r\n            font-size: clamp(0.88rem, 1.8vw, 1rem);\r\n            font-weight: 700;\r\n            color: #000000;\r\n            margin-bottom: clamp(4px, 0.8vw, 8px);\r\n            line-height: 1.3;\r\n            position: relative;\r\n            z-index: 3;\r\n        }\r\n\r\n        \/* DESC \u2014 SMALLER *\/\r\n        .pg-fcs-card-desc {\r\n            font-family: var(--ff);\r\n            font-size: clamp(0.75rem, 1.4vw, 0.85rem);\r\n            font-weight: 400;\r\n            color: #1a1a1a;\r\n            line-height: 1.55;\r\n            position: relative;\r\n            z-index: 3;\r\n            margin-top: auto;\r\n        }\r\n\r\n        \/* SEC 1 *\/\r\n        .pg-fcs-sec1 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-fcs-sec1 .pg-fcs-card {\r\n            background: #ffffff;\r\n            border-color: #dcdce5;\r\n            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03);\r\n        }\r\n\r\n        .pg-fcs-sec1 .pg-fcs-card:hover {\r\n            border-color: var(--accent-blue);\r\n            box-shadow: var(--shadow-card-hover);\r\n            transform: translateY(-4px);\r\n        }\r\n\r\n        \/* SEC 2 *\/\r\n        .pg-fcs-sec2 {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        }\r\n\r\n        .pg-fcs-sec2 .pg-fcs-heading {\r\n            color: #000000;\r\n        }\r\n\r\n        .pg-fcs-sec2 .pg-fcs-kw {\r\n            color: #000000;\r\n        }\r\n\r\n        .pg-fcs-sec2 .pg-fcs-sub {\r\n            color: #000000;\r\n        }\r\n\r\n        .pg-fcs-sec2 .pg-fcs-card-title {\r\n            color: #000000;\r\n        }\r\n\r\n        .pg-fcs-sec2 .pg-fcs-card-desc {\r\n            color: #1a1a1a;\r\n        }\r\n\r\n        .pg-fcs-2 .pg-fcs-kw::after {\r\n            background: linear-gradient(90deg, #667eea, #764ba2, #ffd700);\r\n        }\r\n\r\n        .pg-fcs-sec2 .pg-fcs-card {\r\n            background: rgba(255, 255, 255, 0.95);\r\n            border-color: rgba(255, 255, 255, 0.55);\r\n            backdrop-filter: blur(12px);\r\n            -webkit-backdrop-filter: blur(12px);\r\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);\r\n        }\r\n\r\n        .pg-fcs-sec2 .pg-fcs-card::before {\r\n            background: linear-gradient(90deg, #667eea, #764ba2, #ffd700);\r\n            border-radius: 14px 14px 0 0;\r\n        }\r\n\r\n        .pg-fcs-sec2 .pg-fcs-card:hover {\r\n            border-color: rgba(255, 255, 255, 0.85);\r\n            box-shadow: 0 12px 40px rgba(118, 75, 162, 0.3);\r\n            transform: translateY(-4px);\r\n        }\r\n\r\n        .pg-fcs-sec2 .pg-fcs-card::after {\r\n            background: radial-gradient(circle, rgba(118, 75, 162, 0.1) 0%, rgba(102, 126, 234, 0.05) 60%, transparent 100%);\r\n        }\r\n\r\n        \/* SEC 3 *\/\r\n        .pg-fcs-sec3 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-fcs-sec3 .pg-fcs-card {\r\n            background: var(--theme-bg-alt);\r\n            border-color: #d8dce4;\r\n            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.02);\r\n        }\r\n\r\n        .pg-fcs-sec3 .pg-fcs-card::before {\r\n            background: linear-gradient(90deg, #00b0ff, #8b5cf6, #ff8a65);\r\n            border-radius: 14px 14px 0 0;\r\n        }\r\n\r\n        .pg-fcs-sec3 .pg-fcs-card:hover {\r\n            border-color: var(--accent-blue);\r\n            box-shadow: var(--shadow-card-hover);\r\n            transform: translateY(-4px);\r\n        }\r\n\r\n        \/* RESPONSIVE *\/\r\n        @media (max-width: 820px) {\r\n            .pg-fcs-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 14px;\r\n            }\r\n            .pg-fcs-section {\r\n                padding: clamp(36px, 6vw, 64px) 16px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 540px) {\r\n            .pg-fcs-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 12px;\r\n            }\r\n            .pg-fcs-card {\r\n                padding: 16px;\r\n            }\r\n            .pg-fcs-sub {\r\n                margin-bottom: 24px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 360px) {\r\n            .pg-fcs-section {\r\n                padding: 28px 12px;\r\n            }\r\n            .pg-fcs-card {\r\n                padding: 14px;\r\n                border-radius: 12px;\r\n            }\r\n            .pg-fcs-card::before {\r\n                border-radius: 12px 12px 0 0;\r\n            }\r\n            .pg-fcs-icon {\r\n                width: 34px;\r\n                min-width: 34px;\r\n                height: 34px;\r\n                min-height: 34px;\r\n                border-radius: 10px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <script>\r\n    (function() {\r\n        var cards = document.querySelectorAll('.pg-fcs-card');\r\n        cards.forEach(function(card) {\r\n            function ripple(el) {\r\n                el.classList.remove('pg-fcs-ripple', 'pg-fcs-ripple-out');\r\n                void el.offsetWidth;\r\n                el.classList.add('pg-fcs-ripple');\r\n                setTimeout(function() {\r\n                    el.classList.add('pg-fcs-ripple-out');\r\n                }, 300);\r\n                setTimeout(function() {\r\n                    el.classList.remove('pg-fcs-ripple', 'pg-fcs-ripple-out');\r\n                }, 700);\r\n            }\r\n\r\n            card.addEventListener('mousedown', function() {\r\n                card.classList.add('pg-fcs-pressed');\r\n            });\r\n\r\n            card.addEventListener('mouseup', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-fcs-pressed');\r\n                }, 120);\r\n                ripple(card);\r\n            });\r\n\r\n            card.addEventListener('mouseleave', function() {\r\n                card.classList.remove('pg-fcs-pressed', 'pg-fcs-ripple', 'pg-fcs-ripple-out');\r\n            });\r\n\r\n            card.addEventListener('touchstart', function() {\r\n                card.classList.add('pg-fcs-pressed');\r\n                ripple(card);\r\n            }, { passive: true });\r\n\r\n            card.addEventListener('touchend', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-fcs-merged', 'pg-fcs-pressed');\r\n                }, 150);\r\n            });\r\n\r\n            card.addEventListener('touchcancel', function() {\r\n                card.classList.remove('pg-fcs-pressed', 'pg-fcs-ripple', 'pg-fcs-serial-ripple-out');\r\n            });\r\n        })();\r\n    <\/script>\r\n<\/div>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-486","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>G\u00e9n\u00e9rateur de texte 3D \u2013 Cr\u00e9ez instantan\u00e9ment \u2013 \u200b\u200b\u00c9diteur de texte en ligne<\/title>\n<meta name=\"description\" content=\"Cr\u00e9ez des textes 3D \u00e9poustouflants gr\u00e2ce \u00e0 notre g\u00e9n\u00e9rateur de texte 3D gratuit. Ajoutez des effets tridimensionnels saisissants \u00e0 n&#039;importe quel texte\u00a0: copiez-collez en quelques secondes.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/onlinetexteditor.io\/fr\/3d-text-generator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3D Text Generator \u2013 Create Instantly - Online Text Editor\" \/>\n<meta property=\"og:description\" content=\"Design stunning 3D text with our free 3D Text Generator. Add bold, three-dimensional effects to any text \u2014 copy &amp; paste in seconds.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/onlinetexteditor.io\/3d-text-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"Online Text Editor\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-06T06:04:59+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/3d-text-generator\\\/\",\"url\":\"https:\\\/\\\/onlinetexteditor.io\\\/3d-text-generator\\\/\",\"name\":\"3D Text Generator \u2013 Create Instantly - Online Text Editor\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/#website\"},\"datePublished\":\"2026-03-12T00:00:13+00:00\",\"dateModified\":\"2026-04-06T06:04:59+00:00\",\"description\":\"Design stunning 3D text with our free 3D Text Generator. Add bold, three-dimensional effects to any text \u2014 copy & paste in seconds.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/3d-text-generator\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/onlinetexteditor.io\\\/3d-text-generator\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/3d-text-generator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/onlinetexteditor.io\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"3D Text Generator \u2013 Create Instantly\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/#website\",\"url\":\"https:\\\/\\\/onlinetexteditor.io\\\/\",\"name\":\"Online Text Editor\",\"description\":\"Free &amp; Secure Rich Text Editing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/onlinetexteditor.io\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"G\u00e9n\u00e9rateur de texte 3D \u2013 Cr\u00e9ez instantan\u00e9ment \u2013 \u200b\u200b\u00c9diteur de texte en ligne","description":"Cr\u00e9ez des textes 3D \u00e9poustouflants gr\u00e2ce \u00e0 notre g\u00e9n\u00e9rateur de texte 3D gratuit. Ajoutez des effets tridimensionnels saisissants \u00e0 n&#39;importe quel texte\u00a0: copiez-collez en quelques secondes.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/onlinetexteditor.io\/fr\/3d-text-generator\/","og_locale":"en_US","og_type":"article","og_title":"3D Text Generator \u2013 Create Instantly - Online Text Editor","og_description":"Design stunning 3D text with our free 3D Text Generator. Add bold, three-dimensional effects to any text \u2014 copy & paste in seconds.","og_url":"https:\/\/onlinetexteditor.io\/3d-text-generator\/","og_site_name":"Online Text Editor","article_modified_time":"2026-04-06T06:04:59+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/onlinetexteditor.io\/3d-text-generator\/","url":"https:\/\/onlinetexteditor.io\/3d-text-generator\/","name":"3D Text Generator \u2013 Create Instantly - Online Text Editor","isPartOf":{"@id":"https:\/\/onlinetexteditor.io\/#website"},"datePublished":"2026-03-12T00:00:13+00:00","dateModified":"2026-04-06T06:04:59+00:00","description":"Design stunning 3D text with our free 3D Text Generator. Add bold, three-dimensional effects to any text \u2014 copy & paste in seconds.","breadcrumb":{"@id":"https:\/\/onlinetexteditor.io\/3d-text-generator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/onlinetexteditor.io\/3d-text-generator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/onlinetexteditor.io\/3d-text-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/onlinetexteditor.io\/"},{"@type":"ListItem","position":2,"name":"3D Text Generator \u2013 Create Instantly"}]},{"@type":"WebSite","@id":"https:\/\/onlinetexteditor.io\/#website","url":"https:\/\/onlinetexteditor.io\/","name":"Online Text Editor","description":"Free &amp; Secure Rich Text Editing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/onlinetexteditor.io\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/onlinetexteditor.io\/fr\/wp-json\/wp\/v2\/pages\/486","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onlinetexteditor.io\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/onlinetexteditor.io\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/onlinetexteditor.io\/fr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/onlinetexteditor.io\/fr\/wp-json\/wp\/v2\/comments?post=486"}],"version-history":[{"count":3,"href":"https:\/\/onlinetexteditor.io\/fr\/wp-json\/wp\/v2\/pages\/486\/revisions"}],"predecessor-version":[{"id":489,"href":"https:\/\/onlinetexteditor.io\/fr\/wp-json\/wp\/v2\/pages\/486\/revisions\/489"}],"wp:attachment":[{"href":"https:\/\/onlinetexteditor.io\/fr\/wp-json\/wp\/v2\/media?parent=486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}