{"id":563,"date":"2026-03-13T00:00:44","date_gmt":"2026-03-13T00:00:44","guid":{"rendered":"https:\/\/onlinetexteditor.io\/?page_id=563"},"modified":"2026-04-06T09:08:13","modified_gmt":"2026-04-06T09:08:13","slug":"mirror-text-generator","status":"publish","type":"page","link":"https:\/\/onlinetexteditor.io\/fr\/mirror-text-generator\/","title":{"rendered":"Mirror Text Generator \u2013 Reflect 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 Mirror 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-mirror-wrapper {\r\n        --primary-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        \r\n        --theme-panel: rgba(28, 14, 48, 0.92);\r\n        --theme-panel-hover: rgba(45, 22, 78, 0.96);\r\n        --theme-bg-alt: rgba(18, 10, 32, 0.85);\r\n        --theme-border: rgba(102, 126, 234, 0.25);\r\n        \r\n        --accent-purple: #8b5cf6;\r\n        --accent-violet: #a78bfa;\r\n        --accent-indigo: #6366f1;\r\n        --accent-cyan: #22d3ee;\r\n        --accent-pink: #e879f9;\r\n        --text-bright: #f1f0ff;\r\n        --text-muted: #a5b4fc;\r\n        \r\n        --grad-master: linear-gradient(135deg, #667eea 0%, #361656 100%);\r\n        --grad-mirror: linear-gradient(135deg, #8b5cf6 0%, #22d3ee 100%);\r\n        --grad-shimmer: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.4), transparent);\r\n        \r\n        --glow-purple: 0 0 25px rgba(139, 92, 246, 0.45);\r\n        --glow-cyan: 0 0 20px rgba(34, 211, 238, 0.35);\r\n        --shadow-ui: 0 12px 35px rgba(0, 0, 0, 0.65);\r\n        --shadow-card: 0 6px 16px rgba(18, 10, 32, 0.5);\r\n        \r\n        --transition-ui: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        --transition-fast: all 0.2s ease;\r\n        \r\n        font-family: var(--primary-font);\r\n        color: var(--text-bright);\r\n        line-height: 1.5;\r\n        width: 100%;\r\n        overflow-x: hidden;\r\n        text-align: center;\r\n        background: var(--grad-master);\r\n        background-attachment: fixed;\r\n    }\r\n\r\n    .pg-mirror-wrapper * { box-sizing: border-box; }\r\n\r\n    .pg-mirror-container {\r\n        max-width: 1100px !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-mirror-hero {\r\n        z-index: 2;\r\n        padding-top: 10px;\r\n        width: 100%;\r\n    }\r\n\r\n    .pg-mirror-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 3rem;\r\n        font-weight: 800;\r\n        line-height: 1.2;\r\n        margin: 0 auto 12px auto;\r\n        letter-spacing: -0.5px;\r\n        color: #fff;\r\n        text-shadow: 0 4px 15px rgba(0,0,0,0.6), var(--glow-purple);\r\n        max-width: 900px;\r\n        position: relative;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        flex-wrap: wrap;\r\n        gap: 15px;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .pg-mirror-title i {\r\n        color: var(--accent-cyan);\r\n        text-shadow: var(--glow-cyan);\r\n        background: rgba(18, 10, 32, 0.6);\r\n        border-radius: 12px;\r\n        padding: 10px;\r\n        font-size: 2.2rem;\r\n        box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);\r\n        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    }\r\n    \r\n    .pg-mirror-title:hover i {\r\n        transform: scaleX(-1) rotate(10deg) scale(1.15);\r\n    }\r\n\r\n    .pg-mirror-title::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -15px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        display: block;\r\n        width: 60px;\r\n        height: 4px;\r\n        background: var(--grad-mirror);\r\n        border-radius: 4px;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .pg-mirror-title:hover::after {\r\n        width: 180px;\r\n        box-shadow: var(--glow-purple);\r\n    }\r\n    \r\n    .pg-mirror-subtitle {\r\n        font-family: var(--primary-font);\r\n        font-size: 1.1rem;\r\n        color: rgba(241, 240, 255, 0.85);\r\n        max-width: 750px;\r\n        margin: 25px auto 35px auto;\r\n        padding: 0 10px;\r\n        font-weight: 500;\r\n        text-shadow: 0 2px 4px rgba(0,0,0,0.5);\r\n    }\r\n\r\n    .pg-mirror-card {\r\n        background: var(--theme-panel);\r\n        backdrop-filter: blur(16px);\r\n        -webkit-backdrop-filter: blur(16px);\r\n        border: 1px solid var(--theme-border);\r\n        width: 100%;\r\n        box-shadow: var(--shadow-ui);\r\n        border-radius: 16px;\r\n        position: relative;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    \r\n    .pg-mirror-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; right: 0; height: 3px;\r\n        background: var(--grad-mirror);\r\n        opacity: 0.8;\r\n        transform: scaleX(0);\r\n        transform-origin: left;\r\n        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n    }\r\n    \r\n    .pg-mirror-card:hover::before { transform: scaleX(1); }\r\n\r\n    .pg-mirror-header {\r\n        padding: 18px 24px;\r\n        border-bottom: 1px solid var(--theme-border);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 15px;\r\n        background: rgba(139, 92, 246, 0.08);\r\n    }\r\n\r\n    .pg-mirror-avatar {\r\n        width: 44px;\r\n        height: 44px;\r\n        border-radius: 14px;\r\n        background: var(--grad-mirror);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 1.3rem;\r\n        color: #fff;\r\n        box-shadow: var(--glow-purple);\r\n        transition: transform 0.3s ease;\r\n    }\r\n    \r\n    .pg-mirror-header:hover .pg-mirror-avatar { transform: rotateY(180deg); }\r\n\r\n    .pg-mirror-header-text {\r\n        font-weight: 700;\r\n        font-size: 1.15rem;\r\n        color: var(--text-bright);\r\n        letter-spacing: 0.5px;\r\n    }\r\n\r\n    .pg-mirror-input-area {\r\n        padding: 24px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 18px;\r\n        background: var(--theme-bg-alt);\r\n    }\r\n\r\n    .pg-mirror-textarea {\r\n        width: 100% !important;\r\n        min-height: 110px !important;\r\n        padding: 18px !important;\r\n        background: rgba(255,255,255,0.04) !important;\r\n        border: 1px solid var(--theme-border) !important;\r\n        color: #fff !important;\r\n        font-family: var(--primary-font) !important;\r\n        font-weight: 400 !important;\r\n        font-size: 1.4rem !important;\r\n        outline: none !important;\r\n        text-align: left !important;\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        border-radius: 12px;\r\n        transition: var(--transition-fast);\r\n    }\r\n    \r\n    .pg-mirror-textarea:focus {\r\n        border-color: var(--accent-purple) !important;\r\n        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);\r\n    }\r\n    \r\n    .pg-mirror-textarea::placeholder { color: var(--text-muted); }\r\n\r\n    .pg-mirror-toolbar {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n        gap: 12px;\r\n        padding: 12px 18px;\r\n        border: 1px solid var(--theme-border);\r\n        border-radius: 10px;\r\n        background: rgba(139, 92, 246, 0.06);\r\n    }\r\n\r\n    .pg-mirror-tool-group {\r\n        display: flex;\r\n        gap: 10px;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    .pg-mirror-btn {\r\n        background: transparent;\r\n        color: var(--text-muted);\r\n        border: 1px solid transparent;\r\n        padding: 9px 14px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.9rem;\r\n        font-weight: 600;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 7px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .pg-mirror-btn::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 50%; left: 50%; width: 0; height: 0;\r\n        background: rgba(139, 92, 246, 0.2);\r\n        border-radius: 50%;\r\n        transform: translate(-50%, -50%);\r\n        transition: width 0.4s ease, height 0.4s ease;\r\n    }\r\n\r\n    .pg-mirror-btn:hover {\r\n        background: rgba(139, 92, 246, 0.12);\r\n        color: var(--accent-violet);\r\n        border-color: rgba(139, 92, 246, 0.3);\r\n    }\r\n    \r\n    .pg-mirror-btn:hover::after {\r\n        width: 120px; height: 120px;\r\n    }\r\n\r\n    .pg-mirror-btn.primary-btn {\r\n        color: var(--accent-cyan);\r\n        background: rgba(34, 211, 238, 0.1);\r\n        border-color: rgba(34, 211, 238, 0.3);\r\n    }\r\n    \r\n    .pg-mirror-btn.primary-btn:hover {\r\n        background: rgba(34, 211, 238, 0.2);\r\n        box-shadow: var(--glow-cyan);\r\n    }\r\n\r\n    .pg-mirror-btn:active { transform: scale(0.95); }\r\n\r\n    .pg-mirror-preset {\r\n        background: rgba(18, 10, 32, 0.7);\r\n        color: var(--text-muted);\r\n        border: 1px solid var(--theme-border);\r\n        padding: 9px 14px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.9rem;\r\n        font-weight: 600;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        outline: none;\r\n        transition: var(--transition-fast);\r\n        appearance: none;\r\n        min-width: 160px;\r\n    }\r\n    \r\n    .pg-mirror-preset:hover, .pg-mirror-preset:focus {\r\n        background: rgba(139, 92, 246, 0.15);\r\n        color: var(--text-bright);\r\n        border-color: var(--accent-purple);\r\n    }\r\n    \r\n    .pg-mirror-preset option {\r\n        background: var(--theme-panel);\r\n        color: var(--text-bright);\r\n    }\r\n\r\n    .pg-mirror-settings {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n        gap: 22px;\r\n        padding: 28px 24px;\r\n        background: var(--theme-panel);\r\n        border-top: 1px solid var(--theme-border);\r\n    }\r\n\r\n    .pg-mirror-label {\r\n        display: flex;\r\n        align-items: center;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.9rem;\r\n        font-weight: 700;\r\n        color: var(--text-bright);\r\n        margin-bottom: 14px;\r\n        gap: 8px;\r\n    }\r\n    \r\n    .pg-mirror-label i {\r\n        color: var(--accent-pink);\r\n        font-size: 1.1rem;\r\n    }\r\n\r\n    .pg-mirror-options {\r\n        display: grid;\r\n        gap: 12px;\r\n        grid-template-columns: repeat(2, 1fr);\r\n    }\r\n\r\n    .pg-mirror-opt-btn {\r\n        background: rgba(255, 255, 255, 0.06);\r\n        border: 1px solid transparent;\r\n        padding: 14px 12px;\r\n        color: var(--text-bright);\r\n        font-family: var(--primary-font);\r\n        font-size: 0.85rem;\r\n        font-weight: 600;\r\n        cursor: pointer;\r\n        border-radius: 10px;\r\n        transition: var(--transition-fast);\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 8px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .pg-mirror-opt-btn i {\r\n        font-size: 1.3rem;\r\n        color: var(--text-muted);\r\n        transition: var(--transition-fast);\r\n    }\r\n    \r\n    .pg-mirror-opt-btn::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 100%; height: 100%;\r\n        background: var(--grad-shimmer);\r\n        transform: translateX(-100%);\r\n        transition: transform 0.6s ease;\r\n    }\r\n    \r\n    .pg-mirror-opt-btn:hover::before { transform: translateX(100%); }\r\n\r\n    .pg-mirror-opt-btn:hover {\r\n        background: rgba(139, 92, 246, 0.15);\r\n        transform: translateY(-3px);\r\n        box-shadow: var(--glow-purple);\r\n    }\r\n    \r\n    .pg-mirror-opt-btn:hover i {\r\n        color: var(--accent-cyan);\r\n        transform: scale(1.15) rotate(5deg);\r\n    }\r\n\r\n    .pg-mirror-opt-btn.active {\r\n        background: rgba(139, 92, 246, 0.25);\r\n        color: var(--accent-violet);\r\n        border-color: var(--accent-purple);\r\n        box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);\r\n    }\r\n    \r\n    .pg-mirror-opt-btn.active i {\r\n        color: var(--accent-cyan);\r\n    }\r\n\r\n    .pg-mirror-results {\r\n        padding: 40px 0;\r\n        width: 100%;\r\n        position: relative;\r\n    }\r\n    \r\n    .pg-mirror-result-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(2, 1fr);\r\n        gap: 22px;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n\r\n    .pg-mirror-res-card {\r\n        background: var(--theme-panel);\r\n        border: 1px solid var(--theme-border);\r\n        padding: 22px;\r\n        transition: var(--transition-ui);\r\n        position: relative;\r\n        overflow: hidden;\r\n        border-radius: 14px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        box-shadow: var(--shadow-card);\r\n        cursor: default;\r\n    }\r\n    \r\n    .pg-mirror-res-card::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: -50%; right: -50%;\r\n        width: 100%; height: 100%;\r\n        background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);\r\n        opacity: 0;\r\n        transition: opacity 0.4s ease;\r\n    }\r\n    \r\n    .pg-mirror-res-card:hover {\r\n        transform: translateY(-6px) scale(1.01);\r\n        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.75);\r\n        border-color: var(--accent-purple);\r\n    }\r\n    \r\n    .pg-mirror-res-card:hover::after { opacity: 1; }\r\n\r\n    .pg-mirror-res-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        width: 100%;\r\n        margin-bottom: 16px;\r\n    }\r\n    \r\n    .pg-mirror-res-profile {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n    }\r\n\r\n    .pg-mirror-res-avatar {\r\n        width: 40px;\r\n        height: 40px;\r\n        border-radius: 50%;\r\n        background: var(--grad-mirror);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: #fff;\r\n        font-size: 1.1rem;\r\n        box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);\r\n    }\r\n\r\n    .pg-mirror-res-meta {\r\n        display: flex;\r\n        flex-direction: column;\r\n        text-align: left;\r\n    }\r\n\r\n    .pg-mirror-res-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 0.95rem;\r\n        font-weight: 600;\r\n        color: var(--text-bright);\r\n    }\r\n\r\n    .pg-mirror-res-time {\r\n        font-size: 0.8rem;\r\n        color: var(--text-muted);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 5px;\r\n    }\r\n\r\n    .pg-mirror-copy-btn {\r\n        background: transparent;\r\n        border: 1px solid var(--theme-border);\r\n        color: var(--text-muted);\r\n        width: 38px;\r\n        height: 38px;\r\n        border-radius: 10px;\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        z-index: 2;\r\n    }\r\n    \r\n    .pg-mirror-copy-btn i {\r\n        font-size: 1.1rem;\r\n        transition: transform 0.2s ease;\r\n    }\r\n    \r\n    .pg-mirror-copy-btn:hover {\r\n        background: var(--accent-purple);\r\n        color: #fff;\r\n        border-color: var(--accent-purple);\r\n        box-shadow: var(--glow-purple);\r\n    }\r\n    \r\n    .pg-mirror-copy-btn:hover i { transform: scale(1.1); }\r\n    \r\n    .pg-mirror-copy-btn:active {\r\n        transform: scale(0.9);\r\n        background: var(--accent-cyan);\r\n        border-color: var(--accent-cyan);\r\n    }\r\n\r\n    .pg-mirror-res-preview {\r\n        font-size: 1.3rem;\r\n        color: var(--text-bright);\r\n        width: 100%;\r\n        text-align: left;\r\n        font-family: var(--primary-font);\r\n        font-weight: normal;\r\n        position: relative;\r\n        z-index: 1;\r\n        padding: 8px 0 16px 0;\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        line-height: 1.4 !important;\r\n    }\r\n\r\n    .pg-mirror-res-footer {\r\n        border-top: 1px solid var(--theme-border);\r\n        padding-top: 14px;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        color: var(--text-muted);\r\n        font-size: 0.85rem;\r\n        font-weight: 600;\r\n        gap: 8px;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    .pg-mirror-res-action {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        cursor: pointer;\r\n        transition: color 0.2s ease;\r\n    }\r\n    .pg-mirror-res-action:hover { color: var(--accent-cyan); }\r\n\r\n    .pg-mirror-load-btn {\r\n        background: var(--theme-panel);\r\n        color: var(--accent-purple);\r\n        border: 2px solid var(--accent-purple);\r\n        padding: 15px 45px;\r\n        font-family: var(--primary-font);\r\n        font-weight: 700;\r\n        font-size: 1rem;\r\n        cursor: pointer;\r\n        margin-top: 30px;\r\n        border-radius: 10px;\r\n        transition: var(--transition-fast);\r\n        position: relative;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        box-shadow: var(--shadow-card);\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .pg-mirror-load-btn::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: -100%; width: 100%; height: 100%;\r\n        background: var(--grad-mirror);\r\n        transition: left 0.5s ease;\r\n        z-index: 0;\r\n    }\r\n    \r\n    .pg-mirror-load-btn span, .pg-mirror-load-btn i { position: relative; z-index: 1; }\r\n    \r\n    .pg-mirror-load-btn i { transition: transform 0.4s ease; }\r\n    \r\n    .pg-mirror-load-btn:hover {\r\n        color: #fff;\r\n        border-color: transparent;\r\n        transform: translateY(-3px);\r\n        box-shadow: var(--glow-purple);\r\n    }\r\n    \r\n    .pg-mirror-load-btn:hover::before { left: 0; }\r\n    .pg-mirror-load-btn:hover i { transform: translateY(5px); }\r\n    .pg-mirror-load-btn:active { transform: translateY(0); }\r\n\r\n    .pg-mirror-toast {\r\n        visibility: hidden;\r\n        background: rgba(28, 14, 48, 0.98);\r\n        color: #fff;\r\n        padding: 18px 28px;\r\n        position: fixed;\r\n        left: 50%;\r\n        bottom: 45px;\r\n        transform: translateX(-50%) translateY(25px);\r\n        font-family: var(--primary-font);\r\n        font-weight: 600;\r\n        z-index: 10000;\r\n        border-radius: 10px;\r\n        box-shadow: 0 12px 35px rgba(0,0,0,0.8);\r\n        opacity: 0;\r\n        transition: all 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 14px;\r\n        border: 1px solid var(--accent-purple);\r\n    }\r\n    \r\n    .pg-mirror-toast i {\r\n        color: #fff;\r\n        background: var(--accent-cyan);\r\n        border-radius: 50%;\r\n        padding: 5px;\r\n        font-size: 1rem;\r\n    }\r\n    \r\n    .pg-mirror-toast.show {\r\n        visibility: visible;\r\n        opacity: 1;\r\n        transform: translateX(-50%) translateY(0);\r\n    }\r\n\r\n    @media (max-width: 900px) {\r\n        .pg-mirror-title { font-size: 2.4rem; }\r\n        .pg-mirror-settings { grid-template-columns: 1fr; }\r\n        .pg-mirror-result-grid { grid-template-columns: 1fr; }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        .pg-mirror-container { padding: 30px 15px !important; }\r\n        .pg-mirror-results { padding: 20px 0; }\r\n        .pg-mirror-settings { padding: 15px; gap: 20px; }\r\n        .pg-mirror-textarea { min-height: 90px !important; font-size: 1.2rem !important; }\r\n        \r\n        .pg-mirror-toolbar { flex-direction: column; align-items: stretch; }\r\n        .pg-mirror-tool-group { justify-content: space-between; }\r\n        .pg-mirror-preset { width: 100%; text-align: center; }\r\n        \r\n        .pg-mirror-res-card { padding: 16px; }\r\n        .pg-mirror-res-preview { font-size: 1.1rem; }\r\n        \r\n        .pg-mirror-opt-btn { padding: 12px 8px; font-size: 0.8rem; }\r\n        .pg-mirror-load-btn { padding: 13px 30px; font-size: 0.9rem; width: 100%; justify-content: center; }\r\n        .pg-mirror-title { font-size: 1.8rem; }\r\n        .pg-mirror-subtitle { font-size: 0.95rem; }\r\n        .pg-mirror-result-grid { grid-template-columns: 1fr; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"pg-mirror-wrapper\" id=\"pg-mirror-tool\">\r\n    <div class=\"pg-mirror-container pg-mirror-hero\">\r\n        <h1 class=\"pg-mirror-title\"><i class=\"fa-solid fa-rotate\"><\/i> Mirror Text Generator - Reflect Instantly<\/h1>\r\n        <p class=\"pg-mirror-subtitle\">Flip your text upside down, transform it into retro vaporwave aesthetics, or apply elegant Gothic bubble styles that remain perfectly copy-safe across all platforms.<\/p>\r\n        \r\n        <div class=\"pg-mirror-card\">\r\n            <div class=\"pg-mirror-header\">\r\n                <div class=\"pg-mirror-avatar\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i><\/div>\r\n                <div class=\"pg-mirror-header-text\">\u2728 Transform Your Text<\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"pg-mirror-input-area\">\r\n                <textarea class=\"pg-mirror-textarea\" id=\"pgMirrorInput\" placeholder=\"Type something magical here...\"><\/textarea>\r\n                \r\n                <div class=\"pg-mirror-toolbar\">\r\n                    <div class=\"pg-mirror-tool-group\">\r\n                        <button class=\"pg-mirror-btn\" id=\"pgMirrorPaste\" title=\"Paste\"><i class=\"fa-solid fa-clipboard\"><\/i> Paste<\/button>\r\n                        <button class=\"pg-mirror-btn\" id=\"pgMirrorSelect\" title=\"Select All\"><i class=\"fa-solid fa-object-group\"><\/i> Select<\/button>\r\n                        <button class=\"pg-mirror-btn primary-btn\" id=\"pgMirrorCopyBase\" title=\"Copy Original\"><i class=\"fa-regular fa-copy\"><\/i> Copy Original<\/button>\r\n                    <\/div>\r\n                    \r\n                    <select class=\"pg-mirror-preset\" id=\"pgMirrorPreset\">\r\n                        <option value=\"\" disabled selected>\ud83c\udfa8 Style Presets<\/option>\r\n                        <option value=\"Hello World!\">\ud83c\udf0d Classic Greeting<\/option>\r\n                        <option value=\"MIRROR VIBES \u2728\">\ud83e\ude9e Mirror Aesthetic<\/option>\r\n                        <option value=\"VAPORWAVE DREAMS\">\ud83c\udf38 Vaporwave Dream<\/option>\r\n                        <option value=\"GOthic mYsTeRy\">\ud83e\udd87 Dark Gothic<\/option>\r\n                        <option value=\"BUBBLE POP TIME \ud83e\udee7\">\ud83e\udee7 Bubble Fun<\/option>\r\n                        <option value=\"FULLWIDTH RETRO\">\ud83d\udc7e Retro Digital<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"pg-mirror-settings\">\r\n                <div>\r\n                    <div class=\"pg-mirror-label\"><i class=\"fa-solid fa-text-height\"><\/i> Mirror Styles<\/div>\r\n                    <div class=\"pg-mirror-options\">\r\n                        <button class=\"pg-mirror-opt-btn style-btn active\" data-mode=\"FullFlip\">\r\n                            <i class=\"fa-solid fa-arrows-up-down-left-right\"><\/i> Full Flip\r\n                        <\/button>\r\n                        <button class=\"pg-mirror-opt-btn style-btn\" data-mode=\"HalfMirror\">\r\n                            <i class=\"fa-solid fa-left-right\"><\/i> Half Mirror\r\n                        <\/button>\r\n                        <button class=\"pg-mirror-opt-btn style-btn\" data-mode=\"Gothic\">\r\n                            <i class=\"fa-solid fa-castle\"><\/i> Gothic\r\n                        <\/button>\r\n                        <button class=\"pg-mirror-opt-btn style-btn\" data-mode=\"Fullwidth\">\r\n                            <i class=\"fa-solid fa-expand\"><\/i> Fullwidth\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div>\r\n                    <div class=\"pg-mirror-label\"><i class=\"fa-solid fa-palette\"><\/i> Embellishments<\/div>\r\n                    <div class=\"pg-mirror-options\">\r\n                        <button class=\"pg-mirror-opt-btn deco-btn active\" data-deco=\"Clean\">\r\n                            <i class=\"fa-solid fa-ban\"><\/i> Clean\r\n                        <\/button>\r\n                        <button class=\"pg-mirror-opt-btn deco-btn\" data-deco=\"Bubble\">\r\n                            <i class=\"fa-solid fa-bubbles\"><\/i> Bubble\r\n                        <\/button>\r\n                        <button class=\"pg-mirror-opt-btn deco-btn\" data-deco=\"Stars\">\r\n                            <i class=\"fa-solid fa-star\"><\/i> Stars\r\n                        <\/button>\r\n                        <button class=\"pg-mirror-opt-btn deco-btn\" data-deco=\"Retro\">\r\n                            <i class=\"fa-solid fa-ghost\"><\/i> Retro Mix\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"pg-mirror-results\">\r\n            <div class=\"pg-mirror-result-grid\" id=\"pgMirrorGrid\"><\/div>\r\n            <button class=\"pg-mirror-load-btn\" id=\"pgMirrorLoadBtn\"><span>Load More Styles<\/span> <i class=\"fa-solid fa-chevron-down\"><\/i><\/button>\r\n        <\/div>\r\n    <\/div>\r\n    <div id=\"pgMirrorToast\" class=\"pg-mirror-toast\"><i class=\"fa-solid fa-check\"><\/i> <span>Copied to Clipboard<\/span><\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    const wrapper = document.getElementById('pg-mirror-tool');\r\n    const inputEl = wrapper.querySelector('#pgMirrorInput');\r\n    const grid = wrapper.querySelector('#pgMirrorGrid');\r\n    const loadBtn = wrapper.querySelector('#pgMirrorLoadBtn');\r\n    const toast = wrapper.querySelector('#pgMirrorToast');\r\n    const pasteBtn = wrapper.querySelector('#pgMirrorPaste');\r\n    const selectBtn = wrapper.querySelector('#pgMirrorSelect');\r\n    const copyBaseBtn = wrapper.querySelector('#pgMirrorCopyBase');\r\n    const presetSel = wrapper.querySelector('#pgMirrorPreset');\r\n\r\n    let currentMode = 'FullFlip';\r\n    let currentDeco = 'Clean';\r\n    let limit = 6;\r\n    const INCREMENT = 6;\r\n    const TOTAL = 108;\r\n\r\n    \/\/ Character Maps\r\n    const baseChars = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789\";\r\n    const baseArr = Array.from(baseChars);\r\n    \r\n    const flipMap = \"\u0250q\u0254p\u01dd\u025f\u0183\u0265\u1d09\u027e\u029el\u026fuodb\u0279s\u0287n\u028c\u028dx\u028ez\u2200q\u0186p\u018e\u2132\u05e4HI\u017f\u029e\u02e5WNO\u0500Q\u0279S\u2534\u2229\u039bMX\u2144Z0\u0196\u1105\u0190\u3123\u03db9\u312586\";\r\n    const flipArr = Array.from(flipMap);\r\n    \r\n    const halfMap = \"\u0250q\u0254p\u01dd\u025f\u0183\u0265\u1d09\u027e\u029el\u026fuodb\u0279s\u0287u\u028c\u028dx\u028ez\u2200q\u0186p\u018e\u2132\u05e4HI\u017f\u029e\u02e5WNO\u0500Q\u0279S\u2534\u2229\u039bMX\u2144Z\ud835\udfce\ud835\udfcf\ud835\udfd0\ud835\udfd1\ud835\udfd2\ud835\udfd3\ud835\udfd4\ud835\udfd5\ud835\udfd6\ud835\udfd7\";\r\n    const halfArr = Array.from(halfMap);\r\n    \r\n    const gothicMap = \"\ud835\udd1e\ud835\udd1f\ud835\udd20\ud835\udd21\ud835\udd22\ud835\udd23\ud835\udd24\ud835\udd25\ud835\udd26\ud835\udd27\ud835\udd28\ud835\udd29\ud835\udd2a\ud835\udd2b\ud835\udd2c\ud835\udd2d\ud835\udd2e\ud835\udd2f\ud835\udd30\ud835\udd31\ud835\udd32\ud835\udd33\ud835\udd34\ud835\udd35\ud835\udd36\ud835\udd37\ud835\udd04\ud835\udd05\u212d\ud835\udd07\ud835\udd08\ud835\udd09\ud835\udd0a\u210c\u2111\ud835\udd0d\ud835\udd0e\ud835\udd0f\ud835\udd10\ud835\udd11\ud835\udd12\ud835\udd13\ud835\udd14\u211c\ud835\udd16\ud835\udd17\ud835\udd18\ud835\udd19\ud835\udd1a\ud835\udd1b\ud835\udd1c\u2128\ud835\udfce\ud835\udfcf\ud835\udfd0\ud835\udfd1\ud835\udfd2\ud835\udfd3\ud835\udfd4\ud835\udfd5\ud835\udfd6\ud835\udfd7\";\r\n    const gothicArr = Array.from(gothicMap);\r\n    \r\n    const fwMap = \"\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\uff10\uff11\uff12\uff13\uff14\uff15\uff16\uff17\uff18\uff19\";\r\n    const fwArr = Array.from(fwMap);\r\n    \r\n    const circledMap = \"\u24d0\u24d1\u24d2\u24d3\u24d4\u24d5\u24d6\u24d7\u24d8\u24d9\u24da\u24db\u24dc\u24dd\u24de\u24df\u24e0\u24e1\u24e2\u24e3\u24e4\u24e5\u24e6\u24e7\u24e8\u24e9\u24b6\u24b7\u24b8\u24b9\u24ba\u24bb\u24bc\u24bd\u24be\u24bf\u24c0\u24c1\u24c2\u24c3\u24c4\u24c5\u24c6\u24c7\u24c8\u24c9\u24ca\u24cb\u24cc\u24cd\u24ce\u24cf\u24ea\u2460\u2461\u2462\u2463\u2464\u2465\u2466\u2467\u2468\";\r\n    const circledArr = Array.from(circledMap);\r\n    \r\n    const serifMap = \"\ud835\udc4e\ud835\udc4f\ud835\udc50\ud835\udc51\ud835\udc52\ud835\udc53\ud835\udc54\u210e\ud835\udc56\ud835\udc57\ud835\udc58\ud835\udc59\ud835\udc5a\ud835\udc5b\ud835\udc5c\ud835\udc5d\ud835\udc5e\ud835\udc5f\ud835\udc60\ud835\udc61\ud835\udc62\ud835\udc63\ud835\udc64\ud835\udc65\ud835\udc66\ud835\udc67\ud835\udc34\ud835\udc35\ud835\udc36\ud835\udc37\ud835\udc38\ud835\udc39\ud835\udc3a\ud835\udc3b\ud835\udc3c\ud835\udc3d\ud835\udc3e\ud835\udc3f\ud835\udc40\ud835\udc41\ud835\udc42\ud835\udc43\ud835\udc44\ud835\udc45\ud835\udc46\ud835\udc47\ud835\udc48\ud835\udc49\ud835\udc4a\ud835\udc4b\ud835\udc4c\ud835\udc4d0123456789\";\r\n    const serifArr = Array.from(serifMap);\r\n\r\n    const charMap = {\r\n        'FullFlip': flipArr,\r\n        'HalfMirror': halfArr,\r\n        'Gothic': gothicArr,\r\n        'Fullwidth': fwArr,\r\n        'Bubble': circledArr,\r\n        'Retro': serifArr\r\n    };\r\n\r\n    const copyText = (txt, btn) => {\r\n        const ta = document.createElement(\"textarea\");\r\n        ta.value = txt;\r\n        ta.style.cssText = \"position:fixed;top:0;left:0;opacity:0;pointer-events:none;\";\r\n        document.body.appendChild(ta);\r\n        ta.select();\r\n        try { document.execCommand('copy'); } catch(e) {\r\n            navigator.clipboard.writeText(txt);\r\n        }\r\n        document.body.removeChild(ta);\r\n        showToast(btn);\r\n    };\r\n\r\n    const showToast = (btn) => {\r\n        if(btn) {\r\n            btn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i>';\r\n            btn.style.color = 'var(--accent-cyan)';\r\n            btn.style.borderColor = 'var(--accent-cyan)';\r\n            setTimeout(() => {\r\n                btn.innerHTML = '<i class=\"fa-regular fa-copy\"><\/i>';\r\n                btn.style.color = '';\r\n                btn.style.borderColor = '';\r\n            }, 1800);\r\n        }\r\n        toast.classList.add('show');\r\n        setTimeout(() => toast.classList.remove('show'), 1800);\r\n    };\r\n\r\n    const transformText = (txt, mode, deco, idx) => {\r\n        if(!txt) return \"\";\r\n        const map = charMap[mode] || flipArr;\r\n        let out;\r\n        \r\n        if(mode === 'FullFlip') {\r\n            out = Array.from(txt).reverse().map(c => {\r\n                const i = baseArr.indexOf(c);\r\n                return i !== -1 ? map[i] : c;\r\n            }).join('');\r\n        } else {\r\n            out = Array.from(txt).map(c => {\r\n                const i = baseArr.indexOf(c);\r\n                return i !== -1 ? map[i] : c;\r\n            }).join('');\r\n        }\r\n\r\n        if(deco === 'Bubble') {\r\n            const icons = ['\ud83e\udee7', '\u26aa', '\ud83d\udd35', '\ud83d\udfe3', '\ud83d\udcab'];\r\n            const ic = icons[idx % icons.length];\r\n            out = `${ic} ${out} ${ic}`;\r\n        } else if(deco === 'Stars') {\r\n            const stars = ['\u2728', '\u2b50', '\ud83c\udf1f', '\ud83d\udc9c', '\ud83e\udd8b'];\r\n            const s = stars[idx % stars.length];\r\n            out = `${s} ${out} ${s}`;\r\n        } else if(deco === 'Retro') {\r\n            const syms = ['\u27e1', '\u22c6', '\u25cc', '\u221e', '\u2301'];\r\n            const s = syms[idx % syms.length];\r\n            const sp = ['  ', ' \u00b7 ', ' \uff5e ', ' \u2027 ', ' \u2e0e '];\r\n            const sep = sp[idx % sp.length];\r\n            out = `${s}${sep}${out}${sep}${s}`;\r\n        }\r\n\r\n        return out;\r\n    };\r\n\r\n    const genMeta = () => {\r\n        const list = [];\r\n        const names = [\r\n            'Upside Down', 'Mirror Flip', 'Vaporwave', 'Gothic Dark',\r\n            'Fullwidth', 'Bubble Pop', 'Retro Mix', 'Soft Flip',\r\n            'Neon Mirror', 'Crystal Text', 'Shadow Flip', 'Dreamy Gothic',\r\n            'Pixel Mirror', 'Cyber Flip', 'Aura Text', 'Void Mirror',\r\n            'Luna Gothic', 'Solar Flip', 'Echo Text', 'Mist Mirror',\r\n            'Prism Gothic', 'Flame Flip', 'Frost Text', 'Ember Mirror',\r\n            'Twilight Gothic', 'Dawn Flip', 'Dusk Text', 'Starlight Mirror'\r\n        ];\r\n        const icons = ['fa-rotate', 'fa-arrows-left-right', 'fa-wind', 'fa-chess', 'fa-expand', 'fa-bubbles', 'fa-ghost', 'fa-cloud', 'fa-bolt', 'fa-gem', 'fa-mask', 'fa-hat-wizard', 'fa-gamepad', 'fa-microchip', 'fa-ring', 'fa-meteor', 'fa-moon', 'fa-sun', 'fa-feather', 'fa-smog', 'fa-diamond', 'fa-fire', 'fa-snowflake', 'fa-heart', 'fa-star', 'fa-seedling', 'fa-masks-theater', 'fa-wand-sparkles'];\r\n        \r\n        for(let i=0; i<TOTAL; i++) {\r\n            const times = ['Just now', '2m ago', '5m ago', '1h ago', '3h ago', 'Yesterday', '2d ago', '1w ago'];\r\n            list.push({\r\n                id: `mirror-${i}`,\r\n                name: `${names[i % names.length]} #${Math.floor(i\/names.length)+1}`,\r\n                time: times[i % times.length],\r\n                icon: icons[i % icons.length]\r\n            });\r\n        }\r\n        return list;\r\n    };\r\n\r\n    const allMeta = genMeta();\r\n\r\n    const render = () => {\r\n        grid.innerHTML = '';\r\n        const raw = inputEl.value || \"Hello Mirror!\";\r\n        const show = allMeta.slice(0, limit);\r\n        \r\n        show.forEach((meta, idx) => {\r\n            const out = transformText(raw, currentMode, currentDeco, idx);\r\n            \r\n            const card = document.createElement('div');\r\n            card.className = 'pg-mirror-res-card';\r\n            card.innerHTML = `\r\n                <div class=\"pg-mirror-res-header\">\r\n                    <div class=\"pg-mirror-res-profile\">\r\n                        <div class=\"pg-mirror-res-avatar\"><i class=\"fa-solid ${meta.icon}\"><\/i><\/div>\r\n                        <div class=\"pg-mirror-res-meta\">\r\n                            <div class=\"pg-mirror-res-title\">${meta.name}<\/div>\r\n                            <div class=\"pg-mirror-res-time\"><i class=\"fa-regular fa-clock\"><\/i> ${meta.time}<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <button class=\"pg-mirror-copy-btn\" title=\"Copy\"><i class=\"fa-regular fa-copy\"><\/i><\/button>\r\n                <\/div>\r\n                <div class=\"pg-mirror-res-preview\">${out}<\/div>\r\n                <div class=\"pg-mirror-res-footer\">\r\n                    <div class=\"pg-mirror-res-action\"><i class=\"fa-regular fa-heart\"><\/i> Favorite<\/div>\r\n                    <div class=\"pg-mirror-res-action\"><i class=\"fa-regular fa-bookmark\"><\/i> Save<\/div>\r\n                    <div class=\"pg-mirror-res-action\"><i class=\"fa-solid fa-share-nodes\"><\/i> Share<\/div>\r\n                <\/div>\r\n            `;\r\n            \r\n            card.querySelector('.pg-mirror-copy-btn').addEventListener('click', (e) => {\r\n                e.preventDefault();\r\n                copyText(out, e.currentTarget);\r\n            });\r\n            \r\n            grid.appendChild(card);\r\n        });\r\n        \r\n        const remaining = Math.max(0, TOTAL - limit);\r\n        if(remaining > 0) {\r\n            loadBtn.style.display = 'inline-flex';\r\n            loadBtn.querySelector('span').textContent = `Load More Styles (${remaining})`;\r\n        } else {\r\n            loadBtn.style.display = 'none';\r\n        }\r\n    };\r\n\r\n    inputEl.addEventListener('input', render);\r\n    \r\n    pasteBtn.addEventListener('click', async (e) => {\r\n        e.preventDefault();\r\n        try {\r\n            const t = await navigator.clipboard.readText();\r\n            inputEl.value = t;\r\n            render();\r\n        } catch {\r\n            inputEl.focus();\r\n        }\r\n    });\r\n\r\n    selectBtn.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        inputEl.select();\r\n    });\r\n\r\n    copyBaseBtn.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        if(inputEl.value) copyText(inputEl.value, null);\r\n    });\r\n\r\n    presetSel.addEventListener('change', (e) => {\r\n        if(e.target.value) {\r\n            inputEl.value = e.target.value;\r\n            render();\r\n            e.target.selectedIndex = 0;\r\n        }\r\n    });\r\n\r\n    loadBtn.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        limit += INCREMENT;\r\n        render();\r\n    });\r\n\r\n    wrapper.querySelectorAll('.style-btn').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            wrapper.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active');\r\n            currentMode = btn.dataset.mode;\r\n            limit = 6;\r\n            render();\r\n        });\r\n    });\r\n\r\n    wrapper.querySelectorAll('.deco-btn').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            wrapper.querySelectorAll('.deco-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active');\r\n            currentDeco = btn.dataset.deco;\r\n            limit = 6;\r\n            render();\r\n        });\r\n    });\r\n\r\n    render();\r\n});\r\n<\/script>\r\n<!-- END OF FILE Mirror Text Generator -->\r\n\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.5.1\/css\/all.min.css\">\r\n\r\n    <!-- SECTION 1 -->\r\n\r\n\r\n\r\n\r\n<section class=\"pg-mtg-section pg-mtg-sec1\">\r\n        <div class=\"pg-mtg-wrap\">\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\r\n\r\n\r\n\r\n    <section class=\"pg-mtg-section pg-mtg-sec1\">\r\n        <div class=\"pg-mtg-wrap\">\r\n            <h2 class=\"pg-mtg-heading\">What Makes This <span class=\"pg-mtg-kw\">Mirror Text Generator<\/span> Different?<\/h2>\r\n            <p class=\"pg-mtg-sub\">Most text flippers use basic CSS tricks that break when copied. Our mirror text generator uses precise Unicode mappings and algorithmic character reversal to create mathematically perfect mirrored text that retains its shape when pasted anywhere.<\/p>\r\n            <div class=\"pg-mtg-grid\">\r\n                <div class=\"pg-mtg-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(0,188,212,0.12);color:#00bcd4;\"><i class=\"fa-solid fa-arrows-rotate\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">True Unicode Character Flipping<\/div>\r\n                    <p class=\"pg-mtg-desc\">Our mirror text generator replaces standard characters with their actual Unicode mirrored equivalents \u2014 like turning \"b\" into \"d\" or \"p\" into \"q\" \u2014 so the text looks genuinely reflected, not just reversed.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(0,131,143,0.12);color:#00838f;\"><i class=\"fa-solid fa-right-left\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Word and Sentence Reversal<\/div>\r\n                    <p class=\"pg-mtg-desc\">Choose between flipping individual characters or reversing entire word order \u2014 our mirror text generator gives you both \"txet yrraM\" and \"Text Mirror\" options for completely different visual effects.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(144,164,174,0.12);color:#90a4ae;\"><i class=\"fa-solid fa-shuffle\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Upside Down and Backwards Combo<\/div>\r\n                    <p class=\"pg-mtg-desc\">Combine vertical flip with horizontal mirror for text that's fully inverted \u2014 our mirror text generator calculates the exact Unicode substitutions needed to make your text readable from a literal glass reflection.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-clipboard-check\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Preserves Emojis and Spaces<\/div>\r\n                    <p class=\"pg-mtg-desc\">Other flippers scramble your emojis or delete your formatting \u2014 our mirror text generator intelligently preserves spacing, punctuation, and emoji placements so your mirrored text stays clean and usable.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(255,152,0,0.12);color:#ff9800;\"><i class=\"fa-solid fa-spell-check\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Handles Complex Typography<\/div>\r\n                    <p class=\"pg-mtg-desc\">Our mirror text generator correctly processes accents, special characters, and mathematical symbols \u2014 it doesn't just break apart ligatures, it maps them to their true spatial inversions.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(63,81,181,0.12);color:#3f51b5;\"><i class=\"fa-solid fa-bolt\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Instant Local Processing<\/div>\r\n                    <p class=\"pg-mtg-desc\">No server calls, no loading spinners, no data collection \u2014 our mirror text generator processes your string locally in the browser using optimized JavaScript, returning your flipped text in milliseconds.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2 -->\r\n    <section class=\"pg-mtg-section pg-mtg-sec2\">\r\n        <div class=\"pg-mtg-wrap\">\r\n            <h2 class=\"pg-mtg-heading pg-mtg-sec2-heading\">How to Use Our <span class=\"pg-mtg-kw pg-mtg-sec2-kw\">Mirror Text Generator<\/span> Step by Step?<\/h2>\r\n            <p class=\"pg-mtg-sub pg-mtg-sec2-sub\">Flipping your text takes exactly seconds. No coding or technical skills needed \u2014 just follow these steps and generate perfectly mirrored text ready to copy and paste anywhere.<\/p>\r\n            <div class=\"pg-mtg-grid\">\r\n                <div class=\"pg-mtg-card pg-mtg-sec2-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(102,126,234,0.12);color:#667eea;\"><i class=\"fa-solid fa-keyboard\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Step 1: Type or Paste Your Text<\/div>\r\n                    <p class=\"pg-mtg-desc\">Enter any word, sentence, or paragraph into the input box \u2014 our mirror text generator accepts standard text, numbers, and emojis as the base for your symmetrical transformation.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card pg-mtg-sec2-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(0,188,212,0.12);color:#00bcd4;\"><i class=\"fa-solid fa-swatchbook\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Step 2: Choose a Flip Mode<\/div>\r\n                    <p class=\"pg-mtg-desc\">Select from horizontal mirror, vertical upside-down, or full 180-degree inversion \u2014 our mirror text generator applies the exact Unicode mapping required for each specific flip direction.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card pg-mtg-sec2-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(0,131,143,0.12);color:#00838f;\"><i class=\"fa-solid fa-sliders\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Step 3: Toggle Advanced Options<\/div>\r\n                    <p class=\"pg-mtg-desc\">Enable word-level reversal, keep original punctuation placement, or force full-width character output \u2014 our mirror text generator gives you granular control over the flipping algorithm.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card pg-mtg-sec2-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(144,164,174,0.12);color:#90a4ae;\"><i class=\"fa-solid fa-eye\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Step 4: Preview the Reflection<\/div>\r\n                    <p class=\"pg-mtg-desc\">See exactly how your mirrored text looks in the output panel \u2014 our mirror text generator shows a real-time preview so you can verify the symmetry before copying.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card pg-mtg-sec2-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(255,82,82,0.12);color:#ff5252;\"><i class=\"fa-solid fa-clipboard\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Step 5: Copy the Flipped Text<\/div>\r\n                    <p class=\"pg-mtg-desc\">Hit the copy button to transfer your mirrored text to the clipboard \u2014 our mirror text generator ensures every inverted character and preserved space copies cleanly with zero encoding errors.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card pg-mtg-sec2-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-paste\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Step 6: Paste Anywhere<\/div>\r\n                    <p class=\"pg-mtg-desc\">Drop your mirrored text into social media, code editors, or messaging apps \u2014 our mirror text generator output is pure Unicode that renders correctly across all modern platforms.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3 -->\r\n    <section class=\"pg-mtg-section pg-mtg-sec3\">\r\n        <div class=\"pg-mtg-wrap\">\r\n            <h2 class=\"pg-mtg-heading\">Best Places to Use <span class=\"pg-mtg-kw\">Mirror Text Generator<\/span> Results?<\/h2>\r\n            <p class=\"pg-mtg-sub\">Mirrored text isn't just a visual gimmick \u2014 it's a practical tool for developers, designers, and content creators. Here are the smartest use cases where our mirror text generator output delivers real value.<\/p>\r\n            <div class=\"pg-mtg-grid\">\r\n                <div class=\"pg-mtg-card pg-mtg-sec3-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(88,101,242,0.12);color:#5865f2;\"><i class=\"fa-brands fa-discord\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Unique Discord Usernames<\/div>\r\n                    <p class=\"pg-mtg-desc\">Stand out in massive Discord servers with a flipped display name \u2014 our mirror text generator creates instantly recognizable, symmetrical usernames that grab attention in crowded member lists.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card pg-mtg-sec3-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(0,150,136,0.12);color:#009688;\"><i class=\"fa-solid fa-code\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">RTL Layout Testing<\/div>\r\n                    <p class=\"pg-mtg-desc\">Web developers use our mirror text generator to simulate Right-to-Left language rendering \u2014 it's the fastest way to test how your CSS flexbox and grid layouts handle reversed text flows.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card pg-mtg-sec3-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(63,81,181,0.12);color:#3f51b5;\"><i class=\"fa-solid fa-user-secret\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Hidden Easter Eggs<\/div>\r\n                    <p class=\"pg-mtg-desc\">Hide backward messages in website footers, app loading screens, or video descriptions \u2014 our mirror text generator creates text that looks like gibberish until the user holds it up to a mirror.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card pg-mtg-sec3-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(255,0,80,0.10);color:#ff0050;\"><i class=\"fa-brands fa-tiktok\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">TikTok Aesthetic Captions<\/div>\r\n                    <p class=\"pg-mtg-desc\">Flipped text in TikTok captions stops scrollers in their tracks because the brain pauses to decode it \u2014 our mirror text generator creates the exact visual disruption that boosts watch time.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card pg-mtg-sec3-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(255,152,0,0.12);color:#ff9800;\"><i class=\"fa-solid fa-vector-square\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Logo and Brand Symmetry<\/div>\r\n                    <p class=\"pg-mtg-desc\">Graphic designers use our mirror text generator to quickly preview how a brand name looks when reflected \u2014 essential for creating ambigram logos and symmetrical badge designs.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card pg-mtg-sec3-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(37,211,102,0.12);color:#25d366;\"><i class=\"fa-brands fa-whatsapp\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Fun Messaging Pranks<\/div>\r\n                    <p class=\"pg-mtg-desc\">Send perfectly mirrored WhatsApp messages to friends \u2014 our mirror text generator creates text that forces the recipient to turn their phone upside down or screenshot and flip it to read it.<\/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            --mtg-teal: #00bcd4;\r\n            --mtg-grad: linear-gradient(135deg, #00bcd4, #00838f, #b0bec5);\r\n            --mtg-shadow: 0 12px 30px rgba(0, 188, 212, 0.16);\r\n            --mtg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --mtg-speed: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --mtg-ff: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n\r\n        .pg-mtg-section {\r\n            width: 100%;\r\n            padding: clamp(48px, 8vw, 96px) 20px;\r\n            position: relative;\r\n            font-family: var(--mtg-ff);\r\n            color: #0a0a0a;\r\n            line-height: 1.6;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        .pg-mtg-wrap {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .pg-mtg-heading {\r\n            font-family: var(--mtg-ff);\r\n            font-size: clamp(1.5rem, 4vw, 2.25rem);\r\n            font-weight: 800;\r\n            text-align: center;\r\n            color: #000000;\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-mtg-kw {\r\n            color: #000000;\r\n            position: relative;\r\n        }\r\n\r\n        .pg-mtg-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(--mtg-grad);\r\n            border-radius: 3px;\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--mtg-ease);\r\n        }\r\n\r\n        .pg-mtg-section:hover .pg-mtg-kw::after {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-mtg-sub {\r\n            font-family: var(--mtg-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(32px, 5vw, 56px);\r\n            line-height: 1.7;\r\n        }\r\n\r\n        .pg-mtg-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: clamp(16px, 2.5vw, 26px);\r\n            align-items: stretch;\r\n        }\r\n\r\n        \/* === CARD BASE === *\/\r\n        .pg-mtg-card {\r\n            border-radius: 16px;\r\n            padding: clamp(22px, 3vw, 32px);\r\n            position: relative;\r\n            cursor: pointer;\r\n            -webkit-tap-highlight-color: transparent;\r\n            user-select: none;\r\n            transition: var(--mtg-speed);\r\n            border: 1.5px solid #e0e0e8;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .pg-mtg-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(--mtg-grad);\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--mtg-ease);\r\n            z-index: 4;\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-mtg-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,188,212,0.10) 0%, rgba(0,131,143,0.04) 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-mtg-card:hover::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-mtg-card.pg-mtg-down {\r\n            transform: translateY(-1px) scale(0.985) !important;\r\n        }\r\n\r\n        .pg-mtg-card.pg-mtg-down::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-mtg-card.pg-mtg-glow::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 1;\r\n        }\r\n\r\n        .pg-mtg-card.pg-mtg-glow-out::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 0;\r\n        }\r\n\r\n        \/* === ICON === *\/\r\n        .pg-mtg-icon {\r\n            width: clamp(46px, 5vw, 58px);\r\n            height: clamp(46px, 5vw, 58px);\r\n            min-width: 46px;\r\n            min-height: 46px;\r\n            border-radius: 14px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: clamp(18px, 2.5vw, 24px);\r\n            margin-bottom: clamp(14px, 2vw, 20px);\r\n            transition: var(--mtg-speed);\r\n            position: relative;\r\n            z-index: 3;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-mtg-card:hover .pg-mtg-icon {\r\n            transform: scale(1.12) rotate(-4deg);\r\n        }\r\n\r\n        .pg-mtg-card.pg-mtg-down .pg-mtg-icon {\r\n            transform: scale(1.04) rotate(0deg);\r\n        }\r\n\r\n        \/* === TITLE === *\/\r\n        .pg-mtg-title {\r\n            font-family: var(--mtg-ff);\r\n            font-size: clamp(0.95rem, 2vw, 1.1rem);\r\n            font-weight: 700;\r\n            color: #000000;\r\n            margin-bottom: clamp(6px, 1vw, 10px);\r\n            line-height: 1.35;\r\n            position: relative;\r\n            z-index: 3;\r\n        }\r\n\r\n        \/* === DESC === *\/\r\n        .pg-mtg-desc {\r\n            font-family: var(--mtg-ff);\r\n            font-size: clamp(0.8rem, 1.5vw, 0.9rem);\r\n            font-weight: 400;\r\n            color: #1a1a1a;\r\n            line-height: 1.65;\r\n            position: relative;\r\n            z-index: 3;\r\n            margin-top: auto;\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 1 \u2014 #fff bg \/ #fff cards\r\n           ============================== *\/\r\n        .pg-mtg-sec1 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-mtg-sec1 .pg-mtg-card {\r\n            background: #ffffff;\r\n            border-color: #dcdce5;\r\n            box-shadow: 0 2px 8px rgba(0,0,0,0.04);\r\n        }\r\n\r\n        .pg-mtg-sec1 .pg-mtg-card:hover {\r\n            border-color: var(--mtg-teal);\r\n            box-shadow: var(--mtg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 2 \u2014 purple gradient \/ white cards\r\n           ============================== *\/\r\n        .pg-mtg-sec2 {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        }\r\n\r\n        .pg-mtg-sec2 .pg-mtg-heading.pg-mtg-sec2-heading {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-mtg-sec2 .pg-mtg-kw.pg-mtg-sec2-kw {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-mtg-sec2 .pg-mtg-kw.pg-mtg-sec2-kw::after {\r\n            background: linear-gradient(90deg, #00bcd4, #00838f, #ffffff);\r\n        }\r\n\r\n        .pg-mtg-sec2 .pg-mtg-sub.pg-mtg-sec2-sub {\r\n            color: rgba(255,255,255,0.9);\r\n        }\r\n\r\n        .pg-mtg-sec2 .pg-mtg-card.pg-mtg-sec2-card {\r\n            background: #ffffff;\r\n            border-color: rgba(255,255,255,0.25);\r\n            box-shadow: 0 4px 20px rgba(0,0,0,0.12);\r\n        }\r\n\r\n        .pg-mtg-sec2 .pg-mtg-card.pg-mtg-sec2-card::before {\r\n            background: linear-gradient(90deg, #00bcd4, #764ba2, #00838f);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-mtg-sec2 .pg-mtg-card.pg-mtg-sec2-card::after {\r\n            background: radial-gradient(circle, rgba(0,188,212,0.08) 0%, rgba(118,75,162,0.04) 60%, transparent 100%);\r\n        }\r\n\r\n        .pg-mtg-sec2 .pg-mtg-card.pg-mtg-sec2-card:hover {\r\n            border-color: rgba(0,188,212,0.5);\r\n            box-shadow: 0 14px 40px rgba(118,75,162,0.25);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 3 \u2014 icy alice blue bg \/ white cards\r\n           ============================== *\/\r\n        .pg-mtg-sec3 {\r\n            background: #f0f8ff;\r\n        }\r\n\r\n        .pg-mtg-sec3 .pg-mtg-card.pg-mtg-sec3-card {\r\n            background: #ffffff;\r\n            border-color: #dce9f0;\r\n            box-shadow: 0 2px 8px rgba(0,188,212,0.04);\r\n        }\r\n\r\n        .pg-mtg-sec3 .pg-mtg-card.pg-mtg-sec3-card::before {\r\n            background: linear-gradient(90deg, #00bcd4, #00838f, #b0bec5);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-mtg-sec3 .pg-mtg-card.pg-mtg-sec3-card:hover {\r\n            border-color: var(--mtg-teal);\r\n            box-shadow: var(--mtg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           RESPONSIVE\r\n           ============================== *\/\r\n        @media (max-width: 820px) {\r\n            .pg-mtg-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 16px;\r\n            }\r\n            .pg-mtg-section {\r\n                padding: clamp(36px, 6vw, 64px) 16px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 540px) {\r\n            .pg-mtg-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 14px;\r\n            }\r\n            .pg-mtg-card {\r\n                padding: 22px;\r\n            }\r\n            .pg-mtg-sub {\r\n                margin-bottom: 28px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 360px) {\r\n            .pg-mtg-section {\r\n                padding: 32px 12px;\r\n            }\r\n            .pg-mtg-card {\r\n                padding: 18px;\r\n                border-radius: 12px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <script>\r\n    (function() {\r\n        var cards = document.querySelectorAll('.pg-mtg-card');\r\n        cards.forEach(function(card) {\r\n            function glow(el) {\r\n                el.classList.remove('pg-mtg-glow', 'pg-mtg-glow-out');\r\n                void el.offsetWidth;\r\n                el.classList.add('pg-mtg-glow');\r\n                setTimeout(function() {\r\n                    el.classList.add('pg-mtg-glow-out');\r\n                }, 300);\r\n                setTimeout(function() {\r\n                    el.classList.remove('pg-mtg-glow', 'pg-mtg-glow-out');\r\n                }, 700);\r\n            }\r\n            card.addEventListener('mousedown', function() {\r\n                card.classList.add('pg-mtg-down');\r\n            });\r\n            card.addEventListener('mouseup', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-mtg-down');\r\n                }, 120);\r\n                glow(card);\r\n            });\r\n            card.addEventListener('mouseleave', function() {\r\n                card.classList.remove('pg-mtg-down', 'pg-mtg-glow', 'pg-mtg-glow-out');\r\n            });\r\n            card.addEventListener('touchstart', function() {\r\n                card.classList.add('pg-mtg-down');\r\n                glow(card);\r\n            }, { passive: true });\r\n            card.addEventListener('touchend', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-mtg-down');\r\n                }, 150);\r\n            });\r\n            card.addEventListener('touchcancel', function() {\r\n                card.classList.remove('pg-mtg-down', 'pg-mtg-glow', 'pg-mtg-glow-out');\r\n            });\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 Mirror 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-mirror-wrapper {\r\n        --primary-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        \r\n        --theme-panel: rgba(28, 14, 48, 0.92);\r\n        --theme-panel-hover: rgba(45, 22, 78, 0.96);\r\n        --theme-bg-alt: rgba(18, 10, 32, 0.85);\r\n        --theme-border: rgba(102, 126, 234, 0.25);\r\n        \r\n        --accent-purple: #8b5cf6;\r\n        --accent-violet: #a78bfa;\r\n        --accent-indigo: #6366f1;\r\n        --accent-cyan: #22d3ee;\r\n        --accent-pink: #e879f9;\r\n        --text-bright: #f1f0ff;\r\n        --text-muted: #a5b4fc;\r\n        \r\n        --grad-master: linear-gradient(135deg, #667eea 0%, #361656 100%);\r\n        --grad-mirror: linear-gradient(135deg, #8b5cf6 0%, #22d3ee 100%);\r\n        --grad-shimmer: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.4), transparent);\r\n        \r\n        --glow-purple: 0 0 25px rgba(139, 92, 246, 0.45);\r\n        --glow-cyan: 0 0 20px rgba(34, 211, 238, 0.35);\r\n        --shadow-ui: 0 12px 35px rgba(0, 0, 0, 0.65);\r\n        --shadow-card: 0 6px 16px rgba(18, 10, 32, 0.5);\r\n        \r\n        --transition-ui: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        --transition-fast: all 0.2s ease;\r\n        \r\n        font-family: var(--primary-font);\r\n        color: var(--text-bright);\r\n        line-height: 1.5;\r\n        width: 100%;\r\n        overflow-x: hidden;\r\n        text-align: center;\r\n        background: var(--grad-master);\r\n        background-attachment: fixed;\r\n    }\r\n\r\n    .pg-mirror-wrapper * { box-sizing: border-box; }\r\n\r\n    .pg-mirror-container {\r\n        max-width: 1100px !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-mirror-hero {\r\n        z-index: 2;\r\n        padding-top: 10px;\r\n        width: 100%;\r\n    }\r\n\r\n    .pg-mirror-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 3rem;\r\n        font-weight: 800;\r\n        line-height: 1.2;\r\n        margin: 0 auto 12px auto;\r\n        letter-spacing: -0.5px;\r\n        color: #fff;\r\n        text-shadow: 0 4px 15px rgba(0,0,0,0.6), var(--glow-purple);\r\n        max-width: 900px;\r\n        position: relative;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        flex-wrap: wrap;\r\n        gap: 15px;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .pg-mirror-title i {\r\n        color: var(--accent-cyan);\r\n        text-shadow: var(--glow-cyan);\r\n        background: rgba(18, 10, 32, 0.6);\r\n        border-radius: 12px;\r\n        padding: 10px;\r\n        font-size: 2.2rem;\r\n        box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);\r\n        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n    }\r\n    \r\n    .pg-mirror-title:hover i {\r\n        transform: scaleX(-1) rotate(10deg) scale(1.15);\r\n    }\r\n\r\n    .pg-mirror-title::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -15px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        display: block;\r\n        width: 60px;\r\n        height: 4px;\r\n        background: var(--grad-mirror);\r\n        border-radius: 4px;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .pg-mirror-title:hover::after {\r\n        width: 180px;\r\n        box-shadow: var(--glow-purple);\r\n    }\r\n    \r\n    .pg-mirror-subtitle {\r\n        font-family: var(--primary-font);\r\n        font-size: 1.1rem;\r\n        color: rgba(241, 240, 255, 0.85);\r\n        max-width: 750px;\r\n        margin: 25px auto 35px auto;\r\n        padding: 0 10px;\r\n        font-weight: 500;\r\n        text-shadow: 0 2px 4px rgba(0,0,0,0.5);\r\n    }\r\n\r\n    .pg-mirror-card {\r\n        background: var(--theme-panel);\r\n        backdrop-filter: blur(16px);\r\n        -webkit-backdrop-filter: blur(16px);\r\n        border: 1px solid var(--theme-border);\r\n        width: 100%;\r\n        box-shadow: var(--shadow-ui);\r\n        border-radius: 16px;\r\n        position: relative;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    \r\n    .pg-mirror-card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; right: 0; height: 3px;\r\n        background: var(--grad-mirror);\r\n        opacity: 0.8;\r\n        transform: scaleX(0);\r\n        transform-origin: left;\r\n        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n    }\r\n    \r\n    .pg-mirror-card:hover::before { transform: scaleX(1); }\r\n\r\n    .pg-mirror-header {\r\n        padding: 18px 24px;\r\n        border-bottom: 1px solid var(--theme-border);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 15px;\r\n        background: rgba(139, 92, 246, 0.08);\r\n    }\r\n\r\n    .pg-mirror-avatar {\r\n        width: 44px;\r\n        height: 44px;\r\n        border-radius: 14px;\r\n        background: var(--grad-mirror);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-size: 1.3rem;\r\n        color: #fff;\r\n        box-shadow: var(--glow-purple);\r\n        transition: transform 0.3s ease;\r\n    }\r\n    \r\n    .pg-mirror-header:hover .pg-mirror-avatar { transform: rotateY(180deg); }\r\n\r\n    .pg-mirror-header-text {\r\n        font-weight: 700;\r\n        font-size: 1.15rem;\r\n        color: var(--text-bright);\r\n        letter-spacing: 0.5px;\r\n    }\r\n\r\n    .pg-mirror-input-area {\r\n        padding: 24px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 18px;\r\n        background: var(--theme-bg-alt);\r\n    }\r\n\r\n    .pg-mirror-textarea {\r\n        width: 100% !important;\r\n        min-height: 110px !important;\r\n        padding: 18px !important;\r\n        background: rgba(255,255,255,0.04) !important;\r\n        border: 1px solid var(--theme-border) !important;\r\n        color: #fff !important;\r\n        font-family: var(--primary-font) !important;\r\n        font-weight: 400 !important;\r\n        font-size: 1.4rem !important;\r\n        outline: none !important;\r\n        text-align: left !important;\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        border-radius: 12px;\r\n        transition: var(--transition-fast);\r\n    }\r\n    \r\n    .pg-mirror-textarea:focus {\r\n        border-color: var(--accent-purple) !important;\r\n        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);\r\n    }\r\n    \r\n    .pg-mirror-textarea::placeholder { color: var(--text-muted); }\r\n\r\n    .pg-mirror-toolbar {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n        gap: 12px;\r\n        padding: 12px 18px;\r\n        border: 1px solid var(--theme-border);\r\n        border-radius: 10px;\r\n        background: rgba(139, 92, 246, 0.06);\r\n    }\r\n\r\n    .pg-mirror-tool-group {\r\n        display: flex;\r\n        gap: 10px;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    .pg-mirror-btn {\r\n        background: transparent;\r\n        color: var(--text-muted);\r\n        border: 1px solid transparent;\r\n        padding: 9px 14px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.9rem;\r\n        font-weight: 600;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 7px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .pg-mirror-btn::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 50%; left: 50%; width: 0; height: 0;\r\n        background: rgba(139, 92, 246, 0.2);\r\n        border-radius: 50%;\r\n        transform: translate(-50%, -50%);\r\n        transition: width 0.4s ease, height 0.4s ease;\r\n    }\r\n\r\n    .pg-mirror-btn:hover {\r\n        background: rgba(139, 92, 246, 0.12);\r\n        color: var(--accent-violet);\r\n        border-color: rgba(139, 92, 246, 0.3);\r\n    }\r\n    \r\n    .pg-mirror-btn:hover::after {\r\n        width: 120px; height: 120px;\r\n    }\r\n\r\n    .pg-mirror-btn.primary-btn {\r\n        color: var(--accent-cyan);\r\n        background: rgba(34, 211, 238, 0.1);\r\n        border-color: rgba(34, 211, 238, 0.3);\r\n    }\r\n    \r\n    .pg-mirror-btn.primary-btn:hover {\r\n        background: rgba(34, 211, 238, 0.2);\r\n        box-shadow: var(--glow-cyan);\r\n    }\r\n\r\n    .pg-mirror-btn:active { transform: scale(0.95); }\r\n\r\n    .pg-mirror-preset {\r\n        background: rgba(18, 10, 32, 0.7);\r\n        color: var(--text-muted);\r\n        border: 1px solid var(--theme-border);\r\n        padding: 9px 14px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.9rem;\r\n        font-weight: 600;\r\n        border-radius: 8px;\r\n        cursor: pointer;\r\n        outline: none;\r\n        transition: var(--transition-fast);\r\n        appearance: none;\r\n        min-width: 160px;\r\n    }\r\n    \r\n    .pg-mirror-preset:hover, .pg-mirror-preset:focus {\r\n        background: rgba(139, 92, 246, 0.15);\r\n        color: var(--text-bright);\r\n        border-color: var(--accent-purple);\r\n    }\r\n    \r\n    .pg-mirror-preset option {\r\n        background: var(--theme-panel);\r\n        color: var(--text-bright);\r\n    }\r\n\r\n    .pg-mirror-settings {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n        gap: 22px;\r\n        padding: 28px 24px;\r\n        background: var(--theme-panel);\r\n        border-top: 1px solid var(--theme-border);\r\n    }\r\n\r\n    .pg-mirror-label {\r\n        display: flex;\r\n        align-items: center;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.9rem;\r\n        font-weight: 700;\r\n        color: var(--text-bright);\r\n        margin-bottom: 14px;\r\n        gap: 8px;\r\n    }\r\n    \r\n    .pg-mirror-label i {\r\n        color: var(--accent-pink);\r\n        font-size: 1.1rem;\r\n    }\r\n\r\n    .pg-mirror-options {\r\n        display: grid;\r\n        gap: 12px;\r\n        grid-template-columns: repeat(2, 1fr);\r\n    }\r\n\r\n    .pg-mirror-opt-btn {\r\n        background: rgba(255, 255, 255, 0.06);\r\n        border: 1px solid transparent;\r\n        padding: 14px 12px;\r\n        color: var(--text-bright);\r\n        font-family: var(--primary-font);\r\n        font-size: 0.85rem;\r\n        font-weight: 600;\r\n        cursor: pointer;\r\n        border-radius: 10px;\r\n        transition: var(--transition-fast);\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 8px;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .pg-mirror-opt-btn i {\r\n        font-size: 1.3rem;\r\n        color: var(--text-muted);\r\n        transition: var(--transition-fast);\r\n    }\r\n    \r\n    .pg-mirror-opt-btn::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 100%; height: 100%;\r\n        background: var(--grad-shimmer);\r\n        transform: translateX(-100%);\r\n        transition: transform 0.6s ease;\r\n    }\r\n    \r\n    .pg-mirror-opt-btn:hover::before { transform: translateX(100%); }\r\n\r\n    .pg-mirror-opt-btn:hover {\r\n        background: rgba(139, 92, 246, 0.15);\r\n        transform: translateY(-3px);\r\n        box-shadow: var(--glow-purple);\r\n    }\r\n    \r\n    .pg-mirror-opt-btn:hover i {\r\n        color: var(--accent-cyan);\r\n        transform: scale(1.15) rotate(5deg);\r\n    }\r\n\r\n    .pg-mirror-opt-btn.active {\r\n        background: rgba(139, 92, 246, 0.25);\r\n        color: var(--accent-violet);\r\n        border-color: var(--accent-purple);\r\n        box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);\r\n    }\r\n    \r\n    .pg-mirror-opt-btn.active i {\r\n        color: var(--accent-cyan);\r\n    }\r\n\r\n    .pg-mirror-results {\r\n        padding: 40px 0;\r\n        width: 100%;\r\n        position: relative;\r\n    }\r\n    \r\n    .pg-mirror-result-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(2, 1fr);\r\n        gap: 22px;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n\r\n    .pg-mirror-res-card {\r\n        background: var(--theme-panel);\r\n        border: 1px solid var(--theme-border);\r\n        padding: 22px;\r\n        transition: var(--transition-ui);\r\n        position: relative;\r\n        overflow: hidden;\r\n        border-radius: 14px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        box-shadow: var(--shadow-card);\r\n        cursor: default;\r\n    }\r\n    \r\n    .pg-mirror-res-card::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: -50%; right: -50%;\r\n        width: 100%; height: 100%;\r\n        background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);\r\n        opacity: 0;\r\n        transition: opacity 0.4s ease;\r\n    }\r\n    \r\n    .pg-mirror-res-card:hover {\r\n        transform: translateY(-6px) scale(1.01);\r\n        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.75);\r\n        border-color: var(--accent-purple);\r\n    }\r\n    \r\n    .pg-mirror-res-card:hover::after { opacity: 1; }\r\n\r\n    .pg-mirror-res-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        width: 100%;\r\n        margin-bottom: 16px;\r\n    }\r\n    \r\n    .pg-mirror-res-profile {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n    }\r\n\r\n    .pg-mirror-res-avatar {\r\n        width: 40px;\r\n        height: 40px;\r\n        border-radius: 50%;\r\n        background: var(--grad-mirror);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: #fff;\r\n        font-size: 1.1rem;\r\n        box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);\r\n    }\r\n\r\n    .pg-mirror-res-meta {\r\n        display: flex;\r\n        flex-direction: column;\r\n        text-align: left;\r\n    }\r\n\r\n    .pg-mirror-res-title {\r\n        font-family: var(--primary-font);\r\n        font-size: 0.95rem;\r\n        font-weight: 600;\r\n        color: var(--text-bright);\r\n    }\r\n\r\n    .pg-mirror-res-time {\r\n        font-size: 0.8rem;\r\n        color: var(--text-muted);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 5px;\r\n    }\r\n\r\n    .pg-mirror-copy-btn {\r\n        background: transparent;\r\n        border: 1px solid var(--theme-border);\r\n        color: var(--text-muted);\r\n        width: 38px;\r\n        height: 38px;\r\n        border-radius: 10px;\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        z-index: 2;\r\n    }\r\n    \r\n    .pg-mirror-copy-btn i {\r\n        font-size: 1.1rem;\r\n        transition: transform 0.2s ease;\r\n    }\r\n    \r\n    .pg-mirror-copy-btn:hover {\r\n        background: var(--accent-purple);\r\n        color: #fff;\r\n        border-color: var(--accent-purple);\r\n        box-shadow: var(--glow-purple);\r\n    }\r\n    \r\n    .pg-mirror-copy-btn:hover i { transform: scale(1.1); }\r\n    \r\n    .pg-mirror-copy-btn:active {\r\n        transform: scale(0.9);\r\n        background: var(--accent-cyan);\r\n        border-color: var(--accent-cyan);\r\n    }\r\n\r\n    .pg-mirror-res-preview {\r\n        font-size: 1.3rem;\r\n        color: var(--text-bright);\r\n        width: 100%;\r\n        text-align: left;\r\n        font-family: var(--primary-font);\r\n        font-weight: normal;\r\n        position: relative;\r\n        z-index: 1;\r\n        padding: 8px 0 16px 0;\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        line-height: 1.4 !important;\r\n    }\r\n\r\n    .pg-mirror-res-footer {\r\n        border-top: 1px solid var(--theme-border);\r\n        padding-top: 14px;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        color: var(--text-muted);\r\n        font-size: 0.85rem;\r\n        font-weight: 600;\r\n        gap: 8px;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    .pg-mirror-res-action {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        cursor: pointer;\r\n        transition: color 0.2s ease;\r\n    }\r\n    .pg-mirror-res-action:hover { color: var(--accent-cyan); }\r\n\r\n    .pg-mirror-load-btn {\r\n        background: var(--theme-panel);\r\n        color: var(--accent-purple);\r\n        border: 2px solid var(--accent-purple);\r\n        padding: 15px 45px;\r\n        font-family: var(--primary-font);\r\n        font-weight: 700;\r\n        font-size: 1rem;\r\n        cursor: pointer;\r\n        margin-top: 30px;\r\n        border-radius: 10px;\r\n        transition: var(--transition-fast);\r\n        position: relative;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        box-shadow: var(--shadow-card);\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .pg-mirror-load-btn::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: -100%; width: 100%; height: 100%;\r\n        background: var(--grad-mirror);\r\n        transition: left 0.5s ease;\r\n        z-index: 0;\r\n    }\r\n    \r\n    .pg-mirror-load-btn span, .pg-mirror-load-btn i { position: relative; z-index: 1; }\r\n    \r\n    .pg-mirror-load-btn i { transition: transform 0.4s ease; }\r\n    \r\n    .pg-mirror-load-btn:hover {\r\n        color: #fff;\r\n        border-color: transparent;\r\n        transform: translateY(-3px);\r\n        box-shadow: var(--glow-purple);\r\n    }\r\n    \r\n    .pg-mirror-load-btn:hover::before { left: 0; }\r\n    .pg-mirror-load-btn:hover i { transform: translateY(5px); }\r\n    .pg-mirror-load-btn:active { transform: translateY(0); }\r\n\r\n    .pg-mirror-toast {\r\n        visibility: hidden;\r\n        background: rgba(28, 14, 48, 0.98);\r\n        color: #fff;\r\n        padding: 18px 28px;\r\n        position: fixed;\r\n        left: 50%;\r\n        bottom: 45px;\r\n        transform: translateX(-50%) translateY(25px);\r\n        font-family: var(--primary-font);\r\n        font-weight: 600;\r\n        z-index: 10000;\r\n        border-radius: 10px;\r\n        box-shadow: 0 12px 35px rgba(0,0,0,0.8);\r\n        opacity: 0;\r\n        transition: all 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 14px;\r\n        border: 1px solid var(--accent-purple);\r\n    }\r\n    \r\n    .pg-mirror-toast i {\r\n        color: #fff;\r\n        background: var(--accent-cyan);\r\n        border-radius: 50%;\r\n        padding: 5px;\r\n        font-size: 1rem;\r\n    }\r\n    \r\n    .pg-mirror-toast.show {\r\n        visibility: visible;\r\n        opacity: 1;\r\n        transform: translateX(-50%) translateY(0);\r\n    }\r\n\r\n    @media (max-width: 900px) {\r\n        .pg-mirror-title { font-size: 2.4rem; }\r\n        .pg-mirror-settings { grid-template-columns: 1fr; }\r\n        .pg-mirror-result-grid { grid-template-columns: 1fr; }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        .pg-mirror-container { padding: 30px 15px !important; }\r\n        .pg-mirror-results { padding: 20px 0; }\r\n        .pg-mirror-settings { padding: 15px; gap: 20px; }\r\n        .pg-mirror-textarea { min-height: 90px !important; font-size: 1.2rem !important; }\r\n        \r\n        .pg-mirror-toolbar { flex-direction: column; align-items: stretch; }\r\n        .pg-mirror-tool-group { justify-content: space-between; }\r\n        .pg-mirror-preset { width: 100%; text-align: center; }\r\n        \r\n        .pg-mirror-res-card { padding: 16px; }\r\n        .pg-mirror-res-preview { font-size: 1.1rem; }\r\n        \r\n        .pg-mirror-opt-btn { padding: 12px 8px; font-size: 0.8rem; }\r\n        .pg-mirror-load-btn { padding: 13px 30px; font-size: 0.9rem; width: 100%; justify-content: center; }\r\n        .pg-mirror-title { font-size: 1.8rem; }\r\n        .pg-mirror-subtitle { font-size: 0.95rem; }\r\n        .pg-mirror-result-grid { grid-template-columns: 1fr; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"pg-mirror-wrapper\" id=\"pg-mirror-tool\">\r\n    <div class=\"pg-mirror-container pg-mirror-hero\">\r\n        <h1 class=\"pg-mirror-title\"><i class=\"fa-solid fa-rotate\"><\/i> Mirror Text Generator - Reflect Instantly<\/h1>\r\n        <p class=\"pg-mirror-subtitle\">Flip your text upside down, transform it into retro vaporwave aesthetics, or apply elegant Gothic bubble styles that remain perfectly copy-safe across all platforms.<\/p>\r\n        \r\n        <div class=\"pg-mirror-card\">\r\n            <div class=\"pg-mirror-header\">\r\n                <div class=\"pg-mirror-avatar\"><i class=\"fa-solid fa-wand-magic-sparkles\"><\/i><\/div>\r\n                <div class=\"pg-mirror-header-text\">\u2728 Transform Your Text<\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"pg-mirror-input-area\">\r\n                <textarea class=\"pg-mirror-textarea\" id=\"pgMirrorInput\" placeholder=\"Type something magical here...\"><\/textarea>\r\n                \r\n                <div class=\"pg-mirror-toolbar\">\r\n                    <div class=\"pg-mirror-tool-group\">\r\n                        <button class=\"pg-mirror-btn\" id=\"pgMirrorPaste\" title=\"Paste\"><i class=\"fa-solid fa-clipboard\"><\/i> Paste<\/button>\r\n                        <button class=\"pg-mirror-btn\" id=\"pgMirrorSelect\" title=\"Select All\"><i class=\"fa-solid fa-object-group\"><\/i> Select<\/button>\r\n                        <button class=\"pg-mirror-btn primary-btn\" id=\"pgMirrorCopyBase\" title=\"Copy Original\"><i class=\"fa-regular fa-copy\"><\/i> Copy Original<\/button>\r\n                    <\/div>\r\n                    \r\n                    <select class=\"pg-mirror-preset\" id=\"pgMirrorPreset\">\r\n                        <option value=\"\" disabled selected>\ud83c\udfa8 Style Presets<\/option>\r\n                        <option value=\"Hello World!\">\ud83c\udf0d Classic Greeting<\/option>\r\n                        <option value=\"MIRROR VIBES \u2728\">\ud83e\ude9e Mirror Aesthetic<\/option>\r\n                        <option value=\"VAPORWAVE DREAMS\">\ud83c\udf38 Vaporwave Dream<\/option>\r\n                        <option value=\"GOthic mYsTeRy\">\ud83e\udd87 Dark Gothic<\/option>\r\n                        <option value=\"BUBBLE POP TIME \ud83e\udee7\">\ud83e\udee7 Bubble Fun<\/option>\r\n                        <option value=\"FULLWIDTH RETRO\">\ud83d\udc7e Retro Digital<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"pg-mirror-settings\">\r\n                <div>\r\n                    <div class=\"pg-mirror-label\"><i class=\"fa-solid fa-text-height\"><\/i> Mirror Styles<\/div>\r\n                    <div class=\"pg-mirror-options\">\r\n                        <button class=\"pg-mirror-opt-btn style-btn active\" data-mode=\"FullFlip\">\r\n                            <i class=\"fa-solid fa-arrows-up-down-left-right\"><\/i> Full Flip\r\n                        <\/button>\r\n                        <button class=\"pg-mirror-opt-btn style-btn\" data-mode=\"HalfMirror\">\r\n                            <i class=\"fa-solid fa-left-right\"><\/i> Half Mirror\r\n                        <\/button>\r\n                        <button class=\"pg-mirror-opt-btn style-btn\" data-mode=\"Gothic\">\r\n                            <i class=\"fa-solid fa-castle\"><\/i> Gothic\r\n                        <\/button>\r\n                        <button class=\"pg-mirror-opt-btn style-btn\" data-mode=\"Fullwidth\">\r\n                            <i class=\"fa-solid fa-expand\"><\/i> Fullwidth\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div>\r\n                    <div class=\"pg-mirror-label\"><i class=\"fa-solid fa-palette\"><\/i> Embellishments<\/div>\r\n                    <div class=\"pg-mirror-options\">\r\n                        <button class=\"pg-mirror-opt-btn deco-btn active\" data-deco=\"Clean\">\r\n                            <i class=\"fa-solid fa-ban\"><\/i> Clean\r\n                        <\/button>\r\n                        <button class=\"pg-mirror-opt-btn deco-btn\" data-deco=\"Bubble\">\r\n                            <i class=\"fa-solid fa-bubbles\"><\/i> Bubble\r\n                        <\/button>\r\n                        <button class=\"pg-mirror-opt-btn deco-btn\" data-deco=\"Stars\">\r\n                            <i class=\"fa-solid fa-star\"><\/i> Stars\r\n                        <\/button>\r\n                        <button class=\"pg-mirror-opt-btn deco-btn\" data-deco=\"Retro\">\r\n                            <i class=\"fa-solid fa-ghost\"><\/i> Retro Mix\r\n                        <\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"pg-mirror-results\">\r\n            <div class=\"pg-mirror-result-grid\" id=\"pgMirrorGrid\"><\/div>\r\n            <button class=\"pg-mirror-load-btn\" id=\"pgMirrorLoadBtn\"><span>Load More Styles<\/span> <i class=\"fa-solid fa-chevron-down\"><\/i><\/button>\r\n        <\/div>\r\n    <\/div>\r\n    <div id=\"pgMirrorToast\" class=\"pg-mirror-toast\"><i class=\"fa-solid fa-check\"><\/i> <span>Copied to Clipboard<\/span><\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    const wrapper = document.getElementById('pg-mirror-tool');\r\n    const inputEl = wrapper.querySelector('#pgMirrorInput');\r\n    const grid = wrapper.querySelector('#pgMirrorGrid');\r\n    const loadBtn = wrapper.querySelector('#pgMirrorLoadBtn');\r\n    const toast = wrapper.querySelector('#pgMirrorToast');\r\n    const pasteBtn = wrapper.querySelector('#pgMirrorPaste');\r\n    const selectBtn = wrapper.querySelector('#pgMirrorSelect');\r\n    const copyBaseBtn = wrapper.querySelector('#pgMirrorCopyBase');\r\n    const presetSel = wrapper.querySelector('#pgMirrorPreset');\r\n\r\n    let currentMode = 'FullFlip';\r\n    let currentDeco = 'Clean';\r\n    let limit = 6;\r\n    const INCREMENT = 6;\r\n    const TOTAL = 108;\r\n\r\n    \/\/ Character Maps\r\n    const baseChars = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789\";\r\n    const baseArr = Array.from(baseChars);\r\n    \r\n    const flipMap = \"\u0250q\u0254p\u01dd\u025f\u0183\u0265\u1d09\u027e\u029el\u026fuodb\u0279s\u0287n\u028c\u028dx\u028ez\u2200q\u0186p\u018e\u2132\u05e4HI\u017f\u029e\u02e5WNO\u0500Q\u0279S\u2534\u2229\u039bMX\u2144Z0\u0196\u1105\u0190\u3123\u03db9\u312586\";\r\n    const flipArr = Array.from(flipMap);\r\n    \r\n    const halfMap = \"\u0250q\u0254p\u01dd\u025f\u0183\u0265\u1d09\u027e\u029el\u026fuodb\u0279s\u0287u\u028c\u028dx\u028ez\u2200q\u0186p\u018e\u2132\u05e4HI\u017f\u029e\u02e5WNO\u0500Q\u0279S\u2534\u2229\u039bMX\u2144Z\ud835\udfce\ud835\udfcf\ud835\udfd0\ud835\udfd1\ud835\udfd2\ud835\udfd3\ud835\udfd4\ud835\udfd5\ud835\udfd6\ud835\udfd7\";\r\n    const halfArr = Array.from(halfMap);\r\n    \r\n    const gothicMap = \"\ud835\udd1e\ud835\udd1f\ud835\udd20\ud835\udd21\ud835\udd22\ud835\udd23\ud835\udd24\ud835\udd25\ud835\udd26\ud835\udd27\ud835\udd28\ud835\udd29\ud835\udd2a\ud835\udd2b\ud835\udd2c\ud835\udd2d\ud835\udd2e\ud835\udd2f\ud835\udd30\ud835\udd31\ud835\udd32\ud835\udd33\ud835\udd34\ud835\udd35\ud835\udd36\ud835\udd37\ud835\udd04\ud835\udd05\u212d\ud835\udd07\ud835\udd08\ud835\udd09\ud835\udd0a\u210c\u2111\ud835\udd0d\ud835\udd0e\ud835\udd0f\ud835\udd10\ud835\udd11\ud835\udd12\ud835\udd13\ud835\udd14\u211c\ud835\udd16\ud835\udd17\ud835\udd18\ud835\udd19\ud835\udd1a\ud835\udd1b\ud835\udd1c\u2128\ud835\udfce\ud835\udfcf\ud835\udfd0\ud835\udfd1\ud835\udfd2\ud835\udfd3\ud835\udfd4\ud835\udfd5\ud835\udfd6\ud835\udfd7\";\r\n    const gothicArr = Array.from(gothicMap);\r\n    \r\n    const fwMap = \"\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\uff10\uff11\uff12\uff13\uff14\uff15\uff16\uff17\uff18\uff19\";\r\n    const fwArr = Array.from(fwMap);\r\n    \r\n    const circledMap = \"\u24d0\u24d1\u24d2\u24d3\u24d4\u24d5\u24d6\u24d7\u24d8\u24d9\u24da\u24db\u24dc\u24dd\u24de\u24df\u24e0\u24e1\u24e2\u24e3\u24e4\u24e5\u24e6\u24e7\u24e8\u24e9\u24b6\u24b7\u24b8\u24b9\u24ba\u24bb\u24bc\u24bd\u24be\u24bf\u24c0\u24c1\u24c2\u24c3\u24c4\u24c5\u24c6\u24c7\u24c8\u24c9\u24ca\u24cb\u24cc\u24cd\u24ce\u24cf\u24ea\u2460\u2461\u2462\u2463\u2464\u2465\u2466\u2467\u2468\";\r\n    const circledArr = Array.from(circledMap);\r\n    \r\n    const serifMap = \"\ud835\udc4e\ud835\udc4f\ud835\udc50\ud835\udc51\ud835\udc52\ud835\udc53\ud835\udc54\u210e\ud835\udc56\ud835\udc57\ud835\udc58\ud835\udc59\ud835\udc5a\ud835\udc5b\ud835\udc5c\ud835\udc5d\ud835\udc5e\ud835\udc5f\ud835\udc60\ud835\udc61\ud835\udc62\ud835\udc63\ud835\udc64\ud835\udc65\ud835\udc66\ud835\udc67\ud835\udc34\ud835\udc35\ud835\udc36\ud835\udc37\ud835\udc38\ud835\udc39\ud835\udc3a\ud835\udc3b\ud835\udc3c\ud835\udc3d\ud835\udc3e\ud835\udc3f\ud835\udc40\ud835\udc41\ud835\udc42\ud835\udc43\ud835\udc44\ud835\udc45\ud835\udc46\ud835\udc47\ud835\udc48\ud835\udc49\ud835\udc4a\ud835\udc4b\ud835\udc4c\ud835\udc4d0123456789\";\r\n    const serifArr = Array.from(serifMap);\r\n\r\n    const charMap = {\r\n        'FullFlip': flipArr,\r\n        'HalfMirror': halfArr,\r\n        'Gothic': gothicArr,\r\n        'Fullwidth': fwArr,\r\n        'Bubble': circledArr,\r\n        'Retro': serifArr\r\n    };\r\n\r\n    const copyText = (txt, btn) => {\r\n        const ta = document.createElement(\"textarea\");\r\n        ta.value = txt;\r\n        ta.style.cssText = \"position:fixed;top:0;left:0;opacity:0;pointer-events:none;\";\r\n        document.body.appendChild(ta);\r\n        ta.select();\r\n        try { document.execCommand('copy'); } catch(e) {\r\n            navigator.clipboard.writeText(txt);\r\n        }\r\n        document.body.removeChild(ta);\r\n        showToast(btn);\r\n    };\r\n\r\n    const showToast = (btn) => {\r\n        if(btn) {\r\n            btn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i>';\r\n            btn.style.color = 'var(--accent-cyan)';\r\n            btn.style.borderColor = 'var(--accent-cyan)';\r\n            setTimeout(() => {\r\n                btn.innerHTML = '<i class=\"fa-regular fa-copy\"><\/i>';\r\n                btn.style.color = '';\r\n                btn.style.borderColor = '';\r\n            }, 1800);\r\n        }\r\n        toast.classList.add('show');\r\n        setTimeout(() => toast.classList.remove('show'), 1800);\r\n    };\r\n\r\n    const transformText = (txt, mode, deco, idx) => {\r\n        if(!txt) return \"\";\r\n        const map = charMap[mode] || flipArr;\r\n        let out;\r\n        \r\n        if(mode === 'FullFlip') {\r\n            out = Array.from(txt).reverse().map(c => {\r\n                const i = baseArr.indexOf(c);\r\n                return i !== -1 ? map[i] : c;\r\n            }).join('');\r\n        } else {\r\n            out = Array.from(txt).map(c => {\r\n                const i = baseArr.indexOf(c);\r\n                return i !== -1 ? map[i] : c;\r\n            }).join('');\r\n        }\r\n\r\n        if(deco === 'Bubble') {\r\n            const icons = ['\ud83e\udee7', '\u26aa', '\ud83d\udd35', '\ud83d\udfe3', '\ud83d\udcab'];\r\n            const ic = icons[idx % icons.length];\r\n            out = `${ic} ${out} ${ic}`;\r\n        } else if(deco === 'Stars') {\r\n            const stars = ['\u2728', '\u2b50', '\ud83c\udf1f', '\ud83d\udc9c', '\ud83e\udd8b'];\r\n            const s = stars[idx % stars.length];\r\n            out = `${s} ${out} ${s}`;\r\n        } else if(deco === 'Retro') {\r\n            const syms = ['\u27e1', '\u22c6', '\u25cc', '\u221e', '\u2301'];\r\n            const s = syms[idx % syms.length];\r\n            const sp = ['  ', ' \u00b7 ', ' \uff5e ', ' \u2027 ', ' \u2e0e '];\r\n            const sep = sp[idx % sp.length];\r\n            out = `${s}${sep}${out}${sep}${s}`;\r\n        }\r\n\r\n        return out;\r\n    };\r\n\r\n    const genMeta = () => {\r\n        const list = [];\r\n        const names = [\r\n            'Upside Down', 'Mirror Flip', 'Vaporwave', 'Gothic Dark',\r\n            'Fullwidth', 'Bubble Pop', 'Retro Mix', 'Soft Flip',\r\n            'Neon Mirror', 'Crystal Text', 'Shadow Flip', 'Dreamy Gothic',\r\n            'Pixel Mirror', 'Cyber Flip', 'Aura Text', 'Void Mirror',\r\n            'Luna Gothic', 'Solar Flip', 'Echo Text', 'Mist Mirror',\r\n            'Prism Gothic', 'Flame Flip', 'Frost Text', 'Ember Mirror',\r\n            'Twilight Gothic', 'Dawn Flip', 'Dusk Text', 'Starlight Mirror'\r\n        ];\r\n        const icons = ['fa-rotate', 'fa-arrows-left-right', 'fa-wind', 'fa-chess', 'fa-expand', 'fa-bubbles', 'fa-ghost', 'fa-cloud', 'fa-bolt', 'fa-gem', 'fa-mask', 'fa-hat-wizard', 'fa-gamepad', 'fa-microchip', 'fa-ring', 'fa-meteor', 'fa-moon', 'fa-sun', 'fa-feather', 'fa-smog', 'fa-diamond', 'fa-fire', 'fa-snowflake', 'fa-heart', 'fa-star', 'fa-seedling', 'fa-masks-theater', 'fa-wand-sparkles'];\r\n        \r\n        for(let i=0; i<TOTAL; i++) {\r\n            const times = ['Just now', '2m ago', '5m ago', '1h ago', '3h ago', 'Yesterday', '2d ago', '1w ago'];\r\n            list.push({\r\n                id: `mirror-${i}`,\r\n                name: `${names[i % names.length]} #${Math.floor(i\/names.length)+1}`,\r\n                time: times[i % times.length],\r\n                icon: icons[i % icons.length]\r\n            });\r\n        }\r\n        return list;\r\n    };\r\n\r\n    const allMeta = genMeta();\r\n\r\n    const render = () => {\r\n        grid.innerHTML = '';\r\n        const raw = inputEl.value || \"Hello Mirror!\";\r\n        const show = allMeta.slice(0, limit);\r\n        \r\n        show.forEach((meta, idx) => {\r\n            const out = transformText(raw, currentMode, currentDeco, idx);\r\n            \r\n            const card = document.createElement('div');\r\n            card.className = 'pg-mirror-res-card';\r\n            card.innerHTML = `\r\n                <div class=\"pg-mirror-res-header\">\r\n                    <div class=\"pg-mirror-res-profile\">\r\n                        <div class=\"pg-mirror-res-avatar\"><i class=\"fa-solid ${meta.icon}\"><\/i><\/div>\r\n                        <div class=\"pg-mirror-res-meta\">\r\n                            <div class=\"pg-mirror-res-title\">${meta.name}<\/div>\r\n                            <div class=\"pg-mirror-res-time\"><i class=\"fa-regular fa-clock\"><\/i> ${meta.time}<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <button class=\"pg-mirror-copy-btn\" title=\"Copy\"><i class=\"fa-regular fa-copy\"><\/i><\/button>\r\n                <\/div>\r\n                <div class=\"pg-mirror-res-preview\">${out}<\/div>\r\n                <div class=\"pg-mirror-res-footer\">\r\n                    <div class=\"pg-mirror-res-action\"><i class=\"fa-regular fa-heart\"><\/i> Favorite<\/div>\r\n                    <div class=\"pg-mirror-res-action\"><i class=\"fa-regular fa-bookmark\"><\/i> Save<\/div>\r\n                    <div class=\"pg-mirror-res-action\"><i class=\"fa-solid fa-share-nodes\"><\/i> Share<\/div>\r\n                <\/div>\r\n            `;\r\n            \r\n            card.querySelector('.pg-mirror-copy-btn').addEventListener('click', (e) => {\r\n                e.preventDefault();\r\n                copyText(out, e.currentTarget);\r\n            });\r\n            \r\n            grid.appendChild(card);\r\n        });\r\n        \r\n        const remaining = Math.max(0, TOTAL - limit);\r\n        if(remaining > 0) {\r\n            loadBtn.style.display = 'inline-flex';\r\n            loadBtn.querySelector('span').textContent = `Load More Styles (${remaining})`;\r\n        } else {\r\n            loadBtn.style.display = 'none';\r\n        }\r\n    };\r\n\r\n    inputEl.addEventListener('input', render);\r\n    \r\n    pasteBtn.addEventListener('click', async (e) => {\r\n        e.preventDefault();\r\n        try {\r\n            const t = await navigator.clipboard.readText();\r\n            inputEl.value = t;\r\n            render();\r\n        } catch {\r\n            inputEl.focus();\r\n        }\r\n    });\r\n\r\n    selectBtn.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        inputEl.select();\r\n    });\r\n\r\n    copyBaseBtn.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        if(inputEl.value) copyText(inputEl.value, null);\r\n    });\r\n\r\n    presetSel.addEventListener('change', (e) => {\r\n        if(e.target.value) {\r\n            inputEl.value = e.target.value;\r\n            render();\r\n            e.target.selectedIndex = 0;\r\n        }\r\n    });\r\n\r\n    loadBtn.addEventListener('click', (e) => {\r\n        e.preventDefault();\r\n        limit += INCREMENT;\r\n        render();\r\n    });\r\n\r\n    wrapper.querySelectorAll('.style-btn').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            wrapper.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active');\r\n            currentMode = btn.dataset.mode;\r\n            limit = 6;\r\n            render();\r\n        });\r\n    });\r\n\r\n    wrapper.querySelectorAll('.deco-btn').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            wrapper.querySelectorAll('.deco-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active');\r\n            currentDeco = btn.dataset.deco;\r\n            limit = 6;\r\n            render();\r\n        });\r\n    });\r\n\r\n    render();\r\n});\r\n<\/script>\r\n<!-- END OF FILE Mirror Text Generator -->\r\n\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.5.1\/css\/all.min.css\">\r\n\r\n    <!-- SECTION 1 -->\r\n\r\n\r\n\r\n\r\n<section class=\"pg-mtg-section pg-mtg-sec1\">\r\n        <div class=\"pg-mtg-wrap\">\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\r\n\r\n\r\n\r\n    <section class=\"pg-mtg-section pg-mtg-sec1\">\r\n        <div class=\"pg-mtg-wrap\">\r\n            <h2 class=\"pg-mtg-heading\">What Makes This <span class=\"pg-mtg-kw\">Mirror Text Generator<\/span> Different?<\/h2>\r\n            <p class=\"pg-mtg-sub\">Most text flippers use basic CSS tricks that break when copied. Our mirror text generator uses precise Unicode mappings and algorithmic character reversal to create mathematically perfect mirrored text that retains its shape when pasted anywhere.<\/p>\r\n            <div class=\"pg-mtg-grid\">\r\n                <div class=\"pg-mtg-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(0,188,212,0.12);color:#00bcd4;\"><i class=\"fa-solid fa-arrows-rotate\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">True Unicode Character Flipping<\/div>\r\n                    <p class=\"pg-mtg-desc\">Our mirror text generator replaces standard characters with their actual Unicode mirrored equivalents \u2014 like turning \"b\" into \"d\" or \"p\" into \"q\" \u2014 so the text looks genuinely reflected, not just reversed.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(0,131,143,0.12);color:#00838f;\"><i class=\"fa-solid fa-right-left\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Word and Sentence Reversal<\/div>\r\n                    <p class=\"pg-mtg-desc\">Choose between flipping individual characters or reversing entire word order \u2014 our mirror text generator gives you both \"txet yrraM\" and \"Text Mirror\" options for completely different visual effects.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(144,164,174,0.12);color:#90a4ae;\"><i class=\"fa-solid fa-shuffle\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Upside Down and Backwards Combo<\/div>\r\n                    <p class=\"pg-mtg-desc\">Combine vertical flip with horizontal mirror for text that's fully inverted \u2014 our mirror text generator calculates the exact Unicode substitutions needed to make your text readable from a literal glass reflection.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-clipboard-check\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Preserves Emojis and Spaces<\/div>\r\n                    <p class=\"pg-mtg-desc\">Other flippers scramble your emojis or delete your formatting \u2014 our mirror text generator intelligently preserves spacing, punctuation, and emoji placements so your mirrored text stays clean and usable.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(255,152,0,0.12);color:#ff9800;\"><i class=\"fa-solid fa-spell-check\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Handles Complex Typography<\/div>\r\n                    <p class=\"pg-mtg-desc\">Our mirror text generator correctly processes accents, special characters, and mathematical symbols \u2014 it doesn't just break apart ligatures, it maps them to their true spatial inversions.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(63,81,181,0.12);color:#3f51b5;\"><i class=\"fa-solid fa-bolt\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Instant Local Processing<\/div>\r\n                    <p class=\"pg-mtg-desc\">No server calls, no loading spinners, no data collection \u2014 our mirror text generator processes your string locally in the browser using optimized JavaScript, returning your flipped text in milliseconds.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2 -->\r\n    <section class=\"pg-mtg-section pg-mtg-sec2\">\r\n        <div class=\"pg-mtg-wrap\">\r\n            <h2 class=\"pg-mtg-heading pg-mtg-sec2-heading\">How to Use Our <span class=\"pg-mtg-kw pg-mtg-sec2-kw\">Mirror Text Generator<\/span> Step by Step?<\/h2>\r\n            <p class=\"pg-mtg-sub pg-mtg-sec2-sub\">Flipping your text takes exactly seconds. No coding or technical skills needed \u2014 just follow these steps and generate perfectly mirrored text ready to copy and paste anywhere.<\/p>\r\n            <div class=\"pg-mtg-grid\">\r\n                <div class=\"pg-mtg-card pg-mtg-sec2-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(102,126,234,0.12);color:#667eea;\"><i class=\"fa-solid fa-keyboard\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Step 1: Type or Paste Your Text<\/div>\r\n                    <p class=\"pg-mtg-desc\">Enter any word, sentence, or paragraph into the input box \u2014 our mirror text generator accepts standard text, numbers, and emojis as the base for your symmetrical transformation.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card pg-mtg-sec2-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(0,188,212,0.12);color:#00bcd4;\"><i class=\"fa-solid fa-swatchbook\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Step 2: Choose a Flip Mode<\/div>\r\n                    <p class=\"pg-mtg-desc\">Select from horizontal mirror, vertical upside-down, or full 180-degree inversion \u2014 our mirror text generator applies the exact Unicode mapping required for each specific flip direction.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card pg-mtg-sec2-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(0,131,143,0.12);color:#00838f;\"><i class=\"fa-solid fa-sliders\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Step 3: Toggle Advanced Options<\/div>\r\n                    <p class=\"pg-mtg-desc\">Enable word-level reversal, keep original punctuation placement, or force full-width character output \u2014 our mirror text generator gives you granular control over the flipping algorithm.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card pg-mtg-sec2-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(144,164,174,0.12);color:#90a4ae;\"><i class=\"fa-solid fa-eye\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Step 4: Preview the Reflection<\/div>\r\n                    <p class=\"pg-mtg-desc\">See exactly how your mirrored text looks in the output panel \u2014 our mirror text generator shows a real-time preview so you can verify the symmetry before copying.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card pg-mtg-sec2-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(255,82,82,0.12);color:#ff5252;\"><i class=\"fa-solid fa-clipboard\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Step 5: Copy the Flipped Text<\/div>\r\n                    <p class=\"pg-mtg-desc\">Hit the copy button to transfer your mirrored text to the clipboard \u2014 our mirror text generator ensures every inverted character and preserved space copies cleanly with zero encoding errors.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card pg-mtg-sec2-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(76,175,80,0.12);color:#4caf50;\"><i class=\"fa-solid fa-paste\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Step 6: Paste Anywhere<\/div>\r\n                    <p class=\"pg-mtg-desc\">Drop your mirrored text into social media, code editors, or messaging apps \u2014 our mirror text generator output is pure Unicode that renders correctly across all modern platforms.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3 -->\r\n    <section class=\"pg-mtg-section pg-mtg-sec3\">\r\n        <div class=\"pg-mtg-wrap\">\r\n            <h2 class=\"pg-mtg-heading\">Best Places to Use <span class=\"pg-mtg-kw\">Mirror Text Generator<\/span> Results?<\/h2>\r\n            <p class=\"pg-mtg-sub\">Mirrored text isn't just a visual gimmick \u2014 it's a practical tool for developers, designers, and content creators. Here are the smartest use cases where our mirror text generator output delivers real value.<\/p>\r\n            <div class=\"pg-mtg-grid\">\r\n                <div class=\"pg-mtg-card pg-mtg-sec3-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(88,101,242,0.12);color:#5865f2;\"><i class=\"fa-brands fa-discord\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Unique Discord Usernames<\/div>\r\n                    <p class=\"pg-mtg-desc\">Stand out in massive Discord servers with a flipped display name \u2014 our mirror text generator creates instantly recognizable, symmetrical usernames that grab attention in crowded member lists.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card pg-mtg-sec3-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(0,150,136,0.12);color:#009688;\"><i class=\"fa-solid fa-code\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">RTL Layout Testing<\/div>\r\n                    <p class=\"pg-mtg-desc\">Web developers use our mirror text generator to simulate Right-to-Left language rendering \u2014 it's the fastest way to test how your CSS flexbox and grid layouts handle reversed text flows.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card pg-mtg-sec3-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(63,81,181,0.12);color:#3f51b5;\"><i class=\"fa-solid fa-user-secret\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Hidden Easter Eggs<\/div>\r\n                    <p class=\"pg-mtg-desc\">Hide backward messages in website footers, app loading screens, or video descriptions \u2014 our mirror text generator creates text that looks like gibberish until the user holds it up to a mirror.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card pg-mtg-sec3-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(255,0,80,0.10);color:#ff0050;\"><i class=\"fa-brands fa-tiktok\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">TikTok Aesthetic Captions<\/div>\r\n                    <p class=\"pg-mtg-desc\">Flipped text in TikTok captions stops scrollers in their tracks because the brain pauses to decode it \u2014 our mirror text generator creates the exact visual disruption that boosts watch time.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card pg-mtg-sec3-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(255,152,0,0.12);color:#ff9800;\"><i class=\"fa-solid fa-vector-square\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Logo and Brand Symmetry<\/div>\r\n                    <p class=\"pg-mtg-desc\">Graphic designers use our mirror text generator to quickly preview how a brand name looks when reflected \u2014 essential for creating ambigram logos and symmetrical badge designs.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-mtg-card pg-mtg-sec3-card\">\r\n                    <div class=\"pg-mtg-icon\" style=\"background:rgba(37,211,102,0.12);color:#25d366;\"><i class=\"fa-brands fa-whatsapp\"><\/i><\/div>\r\n                    <div class=\"pg-mtg-title\">Fun Messaging Pranks<\/div>\r\n                    <p class=\"pg-mtg-desc\">Send perfectly mirrored WhatsApp messages to friends \u2014 our mirror text generator creates text that forces the recipient to turn their phone upside down or screenshot and flip it to read it.<\/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            --mtg-teal: #00bcd4;\r\n            --mtg-grad: linear-gradient(135deg, #00bcd4, #00838f, #b0bec5);\r\n            --mtg-shadow: 0 12px 30px rgba(0, 188, 212, 0.16);\r\n            --mtg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --mtg-speed: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --mtg-ff: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n\r\n        .pg-mtg-section {\r\n            width: 100%;\r\n            padding: clamp(48px, 8vw, 96px) 20px;\r\n            position: relative;\r\n            font-family: var(--mtg-ff);\r\n            color: #0a0a0a;\r\n            line-height: 1.6;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        .pg-mtg-wrap {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .pg-mtg-heading {\r\n            font-family: var(--mtg-ff);\r\n            font-size: clamp(1.5rem, 4vw, 2.25rem);\r\n            font-weight: 800;\r\n            text-align: center;\r\n            color: #000000;\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-mtg-kw {\r\n            color: #000000;\r\n            position: relative;\r\n        }\r\n\r\n        .pg-mtg-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(--mtg-grad);\r\n            border-radius: 3px;\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--mtg-ease);\r\n        }\r\n\r\n        .pg-mtg-section:hover .pg-mtg-kw::after {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-mtg-sub {\r\n            font-family: var(--mtg-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(32px, 5vw, 56px);\r\n            line-height: 1.7;\r\n        }\r\n\r\n        .pg-mtg-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 1fr);\r\n            gap: clamp(16px, 2.5vw, 26px);\r\n            align-items: stretch;\r\n        }\r\n\r\n        \/* === CARD BASE === *\/\r\n        .pg-mtg-card {\r\n            border-radius: 16px;\r\n            padding: clamp(22px, 3vw, 32px);\r\n            position: relative;\r\n            cursor: pointer;\r\n            -webkit-tap-highlight-color: transparent;\r\n            user-select: none;\r\n            transition: var(--mtg-speed);\r\n            border: 1.5px solid #e0e0e8;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .pg-mtg-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(--mtg-grad);\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--mtg-ease);\r\n            z-index: 4;\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-mtg-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,188,212,0.10) 0%, rgba(0,131,143,0.04) 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-mtg-card:hover::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-mtg-card.pg-mtg-down {\r\n            transform: translateY(-1px) scale(0.985) !important;\r\n        }\r\n\r\n        .pg-mtg-card.pg-mtg-down::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-mtg-card.pg-mtg-glow::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 1;\r\n        }\r\n\r\n        .pg-mtg-card.pg-mtg-glow-out::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 0;\r\n        }\r\n\r\n        \/* === ICON === *\/\r\n        .pg-mtg-icon {\r\n            width: clamp(46px, 5vw, 58px);\r\n            height: clamp(46px, 5vw, 58px);\r\n            min-width: 46px;\r\n            min-height: 46px;\r\n            border-radius: 14px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: clamp(18px, 2.5vw, 24px);\r\n            margin-bottom: clamp(14px, 2vw, 20px);\r\n            transition: var(--mtg-speed);\r\n            position: relative;\r\n            z-index: 3;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-mtg-card:hover .pg-mtg-icon {\r\n            transform: scale(1.12) rotate(-4deg);\r\n        }\r\n\r\n        .pg-mtg-card.pg-mtg-down .pg-mtg-icon {\r\n            transform: scale(1.04) rotate(0deg);\r\n        }\r\n\r\n        \/* === TITLE === *\/\r\n        .pg-mtg-title {\r\n            font-family: var(--mtg-ff);\r\n            font-size: clamp(0.95rem, 2vw, 1.1rem);\r\n            font-weight: 700;\r\n            color: #000000;\r\n            margin-bottom: clamp(6px, 1vw, 10px);\r\n            line-height: 1.35;\r\n            position: relative;\r\n            z-index: 3;\r\n        }\r\n\r\n        \/* === DESC === *\/\r\n        .pg-mtg-desc {\r\n            font-family: var(--mtg-ff);\r\n            font-size: clamp(0.8rem, 1.5vw, 0.9rem);\r\n            font-weight: 400;\r\n            color: #1a1a1a;\r\n            line-height: 1.65;\r\n            position: relative;\r\n            z-index: 3;\r\n            margin-top: auto;\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 1 \u2014 #fff bg \/ #fff cards\r\n           ============================== *\/\r\n        .pg-mtg-sec1 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-mtg-sec1 .pg-mtg-card {\r\n            background: #ffffff;\r\n            border-color: #dcdce5;\r\n            box-shadow: 0 2px 8px rgba(0,0,0,0.04);\r\n        }\r\n\r\n        .pg-mtg-sec1 .pg-mtg-card:hover {\r\n            border-color: var(--mtg-teal);\r\n            box-shadow: var(--mtg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 2 \u2014 purple gradient \/ white cards\r\n           ============================== *\/\r\n        .pg-mtg-sec2 {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        }\r\n\r\n        .pg-mtg-sec2 .pg-mtg-heading.pg-mtg-sec2-heading {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-mtg-sec2 .pg-mtg-kw.pg-mtg-sec2-kw {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-mtg-sec2 .pg-mtg-kw.pg-mtg-sec2-kw::after {\r\n            background: linear-gradient(90deg, #00bcd4, #00838f, #ffffff);\r\n        }\r\n\r\n        .pg-mtg-sec2 .pg-mtg-sub.pg-mtg-sec2-sub {\r\n            color: rgba(255,255,255,0.9);\r\n        }\r\n\r\n        .pg-mtg-sec2 .pg-mtg-card.pg-mtg-sec2-card {\r\n            background: #ffffff;\r\n            border-color: rgba(255,255,255,0.25);\r\n            box-shadow: 0 4px 20px rgba(0,0,0,0.12);\r\n        }\r\n\r\n        .pg-mtg-sec2 .pg-mtg-card.pg-mtg-sec2-card::before {\r\n            background: linear-gradient(90deg, #00bcd4, #764ba2, #00838f);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-mtg-sec2 .pg-mtg-card.pg-mtg-sec2-card::after {\r\n            background: radial-gradient(circle, rgba(0,188,212,0.08) 0%, rgba(118,75,162,0.04) 60%, transparent 100%);\r\n        }\r\n\r\n        .pg-mtg-sec2 .pg-mtg-card.pg-mtg-sec2-card:hover {\r\n            border-color: rgba(0,188,212,0.5);\r\n            box-shadow: 0 14px 40px rgba(118,75,162,0.25);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 3 \u2014 icy alice blue bg \/ white cards\r\n           ============================== *\/\r\n        .pg-mtg-sec3 {\r\n            background: #f0f8ff;\r\n        }\r\n\r\n        .pg-mtg-sec3 .pg-mtg-card.pg-mtg-sec3-card {\r\n            background: #ffffff;\r\n            border-color: #dce9f0;\r\n            box-shadow: 0 2px 8px rgba(0,188,212,0.04);\r\n        }\r\n\r\n        .pg-mtg-sec3 .pg-mtg-card.pg-mtg-sec3-card::before {\r\n            background: linear-gradient(90deg, #00bcd4, #00838f, #b0bec5);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-mtg-sec3 .pg-mtg-card.pg-mtg-sec3-card:hover {\r\n            border-color: var(--mtg-teal);\r\n            box-shadow: var(--mtg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           RESPONSIVE\r\n           ============================== *\/\r\n        @media (max-width: 820px) {\r\n            .pg-mtg-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 16px;\r\n            }\r\n            .pg-mtg-section {\r\n                padding: clamp(36px, 6vw, 64px) 16px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 540px) {\r\n            .pg-mtg-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 14px;\r\n            }\r\n            .pg-mtg-card {\r\n                padding: 22px;\r\n            }\r\n            .pg-mtg-sub {\r\n                margin-bottom: 28px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 360px) {\r\n            .pg-mtg-section {\r\n                padding: 32px 12px;\r\n            }\r\n            .pg-mtg-card {\r\n                padding: 18px;\r\n                border-radius: 12px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <script>\r\n    (function() {\r\n        var cards = document.querySelectorAll('.pg-mtg-card');\r\n        cards.forEach(function(card) {\r\n            function glow(el) {\r\n                el.classList.remove('pg-mtg-glow', 'pg-mtg-glow-out');\r\n                void el.offsetWidth;\r\n                el.classList.add('pg-mtg-glow');\r\n                setTimeout(function() {\r\n                    el.classList.add('pg-mtg-glow-out');\r\n                }, 300);\r\n                setTimeout(function() {\r\n                    el.classList.remove('pg-mtg-glow', 'pg-mtg-glow-out');\r\n                }, 700);\r\n            }\r\n            card.addEventListener('mousedown', function() {\r\n                card.classList.add('pg-mtg-down');\r\n            });\r\n            card.addEventListener('mouseup', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-mtg-down');\r\n                }, 120);\r\n                glow(card);\r\n            });\r\n            card.addEventListener('mouseleave', function() {\r\n                card.classList.remove('pg-mtg-down', 'pg-mtg-glow', 'pg-mtg-glow-out');\r\n            });\r\n            card.addEventListener('touchstart', function() {\r\n                card.classList.add('pg-mtg-down');\r\n                glow(card);\r\n            }, { passive: true });\r\n            card.addEventListener('touchend', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-mtg-down');\r\n                }, 150);\r\n            });\r\n            card.addEventListener('touchcancel', function() {\r\n                card.classList.remove('pg-mtg-down', 'pg-mtg-glow', 'pg-mtg-glow-out');\r\n            });\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-563","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>G\u00e9n\u00e9rateur de texte miroir \u2013 R\u00e9fl\u00e9chissez instantan\u00e9ment<\/title>\n<meta name=\"description\" content=\"Transformez n&#039;importe quel texte en effet miroir gr\u00e2ce \u00e0 notre g\u00e9n\u00e9rateur de texte miroir gratuit. Id\u00e9al pour les bios, les l\u00e9gendes et les messages amusants\u00a0: copiez et 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\/mirror-text-generator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mirror Text Generator \u2013 Reflect Instantly\" \/>\n<meta property=\"og:description\" content=\"Flip any text into mirror style with our free Mirror Text Generator. Perfect for bios, captions, and fun messages \u2014 copy &amp; paste in seconds.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/onlinetexteditor.io\/mirror-text-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"Online Text Editor\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-06T09:08:13+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\\\/mirror-text-generator\\\/\",\"url\":\"https:\\\/\\\/onlinetexteditor.io\\\/mirror-text-generator\\\/\",\"name\":\"Mirror Text Generator \u2013 Reflect Instantly\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/#website\"},\"datePublished\":\"2026-03-13T00:00:44+00:00\",\"dateModified\":\"2026-04-06T09:08:13+00:00\",\"description\":\"Flip any text into mirror style with our free Mirror Text Generator. Perfect for bios, captions, and fun messages \u2014 copy & paste in seconds.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/mirror-text-generator\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/onlinetexteditor.io\\\/mirror-text-generator\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/mirror-text-generator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/onlinetexteditor.io\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mirror Text Generator \u2013 Reflect 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 miroir \u2013 R\u00e9fl\u00e9chissez instantan\u00e9ment","description":"Transformez n&#39;importe quel texte en effet miroir gr\u00e2ce \u00e0 notre g\u00e9n\u00e9rateur de texte miroir gratuit. Id\u00e9al pour les bios, les l\u00e9gendes et les messages amusants\u00a0: copiez et 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\/mirror-text-generator\/","og_locale":"en_US","og_type":"article","og_title":"Mirror Text Generator \u2013 Reflect Instantly","og_description":"Flip any text into mirror style with our free Mirror Text Generator. Perfect for bios, captions, and fun messages \u2014 copy & paste in seconds.","og_url":"https:\/\/onlinetexteditor.io\/mirror-text-generator\/","og_site_name":"Online Text Editor","article_modified_time":"2026-04-06T09:08:13+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/onlinetexteditor.io\/mirror-text-generator\/","url":"https:\/\/onlinetexteditor.io\/mirror-text-generator\/","name":"Mirror Text Generator \u2013 Reflect Instantly","isPartOf":{"@id":"https:\/\/onlinetexteditor.io\/#website"},"datePublished":"2026-03-13T00:00:44+00:00","dateModified":"2026-04-06T09:08:13+00:00","description":"Flip any text into mirror style with our free Mirror Text Generator. Perfect for bios, captions, and fun messages \u2014 copy & paste in seconds.","breadcrumb":{"@id":"https:\/\/onlinetexteditor.io\/mirror-text-generator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/onlinetexteditor.io\/mirror-text-generator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/onlinetexteditor.io\/mirror-text-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/onlinetexteditor.io\/"},{"@type":"ListItem","position":2,"name":"Mirror Text Generator \u2013 Reflect 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\/563","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=563"}],"version-history":[{"count":3,"href":"https:\/\/onlinetexteditor.io\/fr\/wp-json\/wp\/v2\/pages\/563\/revisions"}],"predecessor-version":[{"id":566,"href":"https:\/\/onlinetexteditor.io\/fr\/wp-json\/wp\/v2\/pages\/563\/revisions\/566"}],"wp:attachment":[{"href":"https:\/\/onlinetexteditor.io\/fr\/wp-json\/wp\/v2\/media?parent=563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}