{"id":546,"date":"2026-03-28T00:00:12","date_gmt":"2026-03-28T00:00:12","guid":{"rendered":"https:\/\/onlinetexteditor.io\/?page_id=546"},"modified":"2026-04-06T08:51:31","modified_gmt":"2026-04-06T08:51:31","slug":"custom-text-generator","status":"publish","type":"page","link":"https:\/\/onlinetexteditor.io\/it\/custom-text-generator\/","title":{"rendered":"Custom Text Generator \u2013 Design 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 Custom 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    .ct-tool-wrapper {\r\n        \/* TYPOGRAPHY *\/\r\n        --primary-font: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n        --body-font: \"Consolas\", \"Monaco\", \"Courier New\", monospace;\r\n        \r\n        \/* CUSTOM THEME PALETTE - BLUEPRINT & TECH (CYAN\/BLUE\/SILVER) *\/\r\n        --theme-panel: rgba(13, 15, 20, 0.90); \/* Deep Slate\/Steel *\/\r\n        --theme-border: #00d2ff; \/* Tech Cyan *\/\r\n        \r\n        \/* ACCENTS *\/\r\n        --ct-cyan: #00d2ff;\r\n        --ct-blue: #3a7bd5;\r\n        --ct-amber: #ffb700; \/* Premium Custom feel *\/\r\n        --ct-steel: #4a5568;\r\n        \r\n        --text-bright: #ffffff;\r\n        --text-muted: #a0aab5;\r\n        \r\n        \/* GRADIENTS *\/\r\n        \/* MASTER BACKGROUND AS REQUESTED *\/\r\n        --grad-master: linear-gradient(135deg, #667eea 0%, #361656 100%);\r\n        --grad-custom: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%); \/* Cyan to Blue *\/\r\n        --grad-amber: linear-gradient(135deg, #ffb700 0%, #ff8c00 100%);\r\n        --grad-dark: linear-gradient(180deg, rgba(13,15,20,0.9) 0%, rgba(5,7,10,0.98) 100%);\r\n        \r\n        \/* SHADOWS & GLOWS *\/\r\n        --glow-cyan: 0 0 15px rgba(0, 210, 255, 0.4);\r\n        --glow-blue: 0 0 20px rgba(58, 123, 213, 0.4);\r\n        --shadow-ui: 0 20px 50px rgba(0, 0, 0, 0.85);\r\n        --glass-blur: blur(16px);\r\n        \r\n        --transition-ui: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        --transition-fast: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\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% !important;\r\n        overflow-x: hidden;\r\n        text-align: center;\r\n        \r\n        background: var(--grad-master);\r\n        background-attachment: fixed;\r\n    }\r\n\r\n    .ct-tool-wrapper * { box-sizing: border-box; }\r\n\r\n    .ct-container {\r\n        max-width: 1150px !important;\r\n        width: 100% !important;\r\n        margin: 0 auto !important;\r\n        padding: 45px 20px !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n    }\r\n\r\n    .ct-hero-content-wrapper {\r\n        z-index: 2;\r\n        padding-top: 10px;\r\n        width: 100%;\r\n    }\r\n\r\n    .ct-main-title {\r\n        font-family: var(--body-font);\r\n        font-size: 3.2rem;\r\n        font-weight: 900; \r\n        margin: 0 auto 10px auto;\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        color: #fff;\r\n        text-shadow: 0 0 15px rgba(0, 210, 255, 0.5);\r\n        max-width: 900px;\r\n        position: relative;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .ct-main-title i {\r\n        color: var(--ct-cyan);\r\n        text-shadow: var(--glow-cyan);\r\n        transition: transform 0.5s ease;\r\n    }\r\n    \r\n    .ct-main-title:hover i {\r\n        transform: scale(1.2) rotate(360deg); \/* Spin like a gear *\/\r\n        color: var(--ct-amber);\r\n        text-shadow: 0 0 15px var(--ct-amber);\r\n    }\r\n    \r\n    .ct-main-title::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -12px; left: 50%; transform: translateX(-50%);\r\n        width: 80px; height: 3px;\r\n        background: var(--grad-custom);\r\n        box-shadow: var(--glow-cyan);\r\n        border-radius: 2px;\r\n        transition: width 0.5s ease;\r\n    }\r\n    \r\n    .ct-main-title:hover::after { width: 70%; }\r\n\r\n    .ct-subtitle {\r\n        font-family: var(--primary-font);\r\n        font-size: 1.1rem;\r\n        color: rgba(255,255,255,0.8);\r\n        max-width: 700px;\r\n        margin: 25px auto 35px auto;\r\n        padding: 0 10px;\r\n        text-shadow: 0 2px 4px rgba(0,0,0,0.5);\r\n    }\r\n\r\n    \/* MAIN GENERATOR CARD - BLUEPRINT STYLE *\/\r\n    .ct-generator-card {\r\n        background: var(--theme-panel);\r\n        backdrop-filter: var(--glass-blur);\r\n        -webkit-backdrop-filter: var(--glass-blur);\r\n        border: 1px solid var(--ct-blue); \r\n        border-top: 3px solid var(--ct-cyan);\r\n        width: 100%;\r\n        box-shadow: var(--shadow-ui); \r\n        border-radius: 20px;\r\n        position: relative;\r\n        overflow: visible;\r\n    }\r\n\r\n    .ct-controls-wrapper {\r\n        padding: 25px;\r\n        background: var(--grad-dark);\r\n        border-bottom: 1px solid rgba(0, 210, 255, 0.15);\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 20px;\r\n        width: 100% !important;\r\n        border-radius: 20px 20px 0 0;\r\n    }\r\n\r\n    .ct-input-section {\r\n        width: 100% !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    \r\n    \/* INPUT BOX - CLEAR BLUEPRINT GLASS *\/\r\n    .ct-enhanced-input-wrapper {\r\n        background: rgba(0, 10, 30, 0.4);\r\n        border: 2px solid rgba(0, 210, 255, 0.3);\r\n        border-radius: 14px;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        transition: var(--transition-ui);\r\n        box-shadow: inset 0 0 15px rgba(0,0,0,0.5);\r\n        width: 100% !important;\r\n        position: relative;\r\n    }\r\n\r\n    .ct-enhanced-input-wrapper::before {\r\n        \/* Subtle grid pattern for blueprint feel *\/\r\n        content: '';\r\n        position: absolute;\r\n        inset: 0;\r\n        background-image: linear-gradient(rgba(0, 210, 255, 0.05) 1px, transparent 1px),\r\n                          linear-gradient(90deg, rgba(0, 210, 255, 0.05) 1px, transparent 1px);\r\n        background-size: 20px 20px;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .ct-enhanced-input-wrapper:focus-within {\r\n        border-color: var(--ct-cyan);\r\n        box-shadow: inset 0 0 20px rgba(0, 210, 255, 0.1), 0 0 12px rgba(0, 210, 255, 0.3);\r\n    }\r\n    \r\n    .ct-text-input {\r\n        width: 100% !important;\r\n        min-height: 130px !important;\r\n        padding: 22px !important;\r\n        background: transparent !important;\r\n        border: none !important;\r\n        color: #fff !important;\r\n        font-family: var(--body-font) !important;\r\n        font-size: 1.5rem !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        line-height: 1.5;\r\n        box-sizing: border-box !important;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n    \r\n    .ct-text-input::placeholder { color: rgba(0, 210, 255, 0.4); font-style: italic; }\r\n\r\n    .ct-input-toolbar {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n        background: rgba(0, 15, 40, 0.8);\r\n        padding: 12px 16px;\r\n        border-top: 1px solid rgba(0, 210, 255, 0.2);\r\n        width: 100% !important;\r\n        box-sizing: border-box !important;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n\r\n    .ct-toolbar-btn {\r\n        background: rgba(0, 210, 255, 0.08);\r\n        color: var(--ct-cyan);\r\n        border: 1px solid rgba(0, 210, 255, 0.3);\r\n        padding: 8px 12px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.7rem;\r\n        font-weight: 700;\r\n        border-radius: 10px;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 5px;\r\n    }\r\n\r\n    .ct-toolbar-btn:hover {\r\n        background: rgba(0, 210, 255, 0.2);\r\n        color: #fff;\r\n        border-color: var(--ct-cyan);\r\n        transform: translateY(-1px);\r\n        box-shadow: 0 0 10px rgba(0, 210, 255, 0.3);\r\n    }\r\n    \r\n    .ct-preset-select {\r\n        background: rgba(255, 183, 0, 0.1);\r\n        color: var(--ct-amber);\r\n        border: 1px solid rgba(255, 183, 0, 0.3);\r\n        padding: 8px 14px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.7rem;\r\n        font-weight: 800;\r\n        border-radius: 10px;\r\n        cursor: pointer;\r\n        outline: none;\r\n        transition: var(--transition-fast);\r\n        appearance: none;\r\n        max-width: 200px;\r\n        width: 100%;\r\n        box-sizing: border-box !important;\r\n        background-image: url(\"image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='10' height='10' fill='%23ffb700' viewBox='0 0 16 16'%3E%3Cpath d='M8 12L3 6h10z'\/%3E%3C\/svg%3E\");\r\n        background-repeat: no-repeat;\r\n        background-position: right 10px center;\r\n    }\r\n    \r\n    .ct-preset-select:hover, .ct-preset-select:focus {\r\n        background-color: rgba(255, 183, 0, 0.2);\r\n        border-color: var(--ct-amber);\r\n        box-shadow: 0 0 8px rgba(255, 183, 0, 0.3);\r\n    }\r\n    \r\n    .ct-preset-select option { background: #0d1117; color: #fff; }\r\n\r\n    .ct-settings-section {\r\n        display: flex;\r\n        flex-direction: row;\r\n        gap: 16px;\r\n        width: 100% !important;\r\n    }\r\n\r\n    \/* SETTINGS BOXES - MODULE STYLES *\/\r\n    .ct-settings-section > div {\r\n        background: rgba(0, 10, 25, 0.5);\r\n        border: 1px solid rgba(58, 123, 213, 0.3);\r\n        border-left: 3px solid var(--ct-blue);\r\n        border-radius: 10px;\r\n        padding: 16px;\r\n        transition: var(--transition-ui);\r\n        flex: 1;\r\n    }\r\n    \r\n    .ct-settings-section > div:hover { \r\n        border-color: var(--ct-cyan); \r\n        border-left-color: var(--ct-cyan);\r\n        background: rgba(0, 210, 255, 0.05);\r\n    }\r\n\r\n    .ct-panel-label {\r\n        font-size: 0.75rem;\r\n        font-weight: 800;\r\n        color: var(--text-muted);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1.5px;\r\n        margin-bottom: 10px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n    }\r\n    \r\n    .ct-panel-label i { color: var(--ct-amber); font-size: 0.9rem; }\r\n\r\n    .ct-grid-options {\r\n        display: grid;\r\n        gap: 8px;\r\n        grid-template-columns: repeat(4, 1fr);\r\n    }\r\n\r\n    .ct-option-btn {\r\n        background: rgba(255, 255, 255, 0.03);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        padding: 12px 4px;\r\n        color: var(--text-muted);\r\n        font-family: var(--primary-font);\r\n        font-size: 0.65rem;\r\n        font-weight: 700;\r\n        cursor: pointer;\r\n        border-radius: 8px;\r\n        transition: var(--transition-fast);\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 6px;\r\n    }\r\n    \r\n    .ct-option-btn i { font-size: 1.1rem; transition: var(--transition-ui); }\r\n    .ct-option-btn span { display: block; margin-top: 2px; }\r\n\r\n    .ct-option-btn:hover {\r\n        background: rgba(0, 210, 255, 0.15);\r\n        border-color: var(--ct-cyan);\r\n        color: #fff;\r\n        transform: translateY(-2px);\r\n        box-shadow: 0 0 10px rgba(0, 210, 255, 0.15);\r\n    }\r\n    \r\n    .ct-option-btn:hover i { transform: scale(1.2); color: var(--ct-cyan); }\r\n\r\n    .ct-option-btn.active { \r\n        background: rgba(255, 183, 0, 0.15);\r\n        color: var(--ct-amber); \r\n        border-color: var(--ct-amber);\r\n        box-shadow: 0 0 10px rgba(255, 183, 0, 0.2);\r\n    }\r\n    \r\n    .ct-option-btn.active i { color: var(--ct-amber); }\r\n\r\n    .ct-results-area { \r\n        padding: 30px 20px; \r\n        width: 100% !important;\r\n        box-sizing: border-box !important;\r\n    }\r\n    \r\n    .ct-result-list {\r\n        display: grid;\r\n        grid-template-columns: repeat(2, 1fr);\r\n        gap: 16px;\r\n        position: relative; \r\n        z-index: 2;\r\n        width: 100% !important;\r\n    }\r\n\r\n    .ct-result-card {\r\n        background: rgba(10, 12, 18, 0.9);\r\n        border: 1px solid rgba(0, 210, 255, 0.2);\r\n        border-top: 2px solid var(--ct-blue);\r\n        border-radius: 12px;\r\n        padding: 18px 22px;\r\n        transition: var(--transition-ui);\r\n        position: relative;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        min-height: 120px; \r\n        box-sizing: border-box;\r\n        width: 100% !important;\r\n    }\r\n    \r\n    .ct-result-card:hover {\r\n        transform: translateY(-4px);\r\n        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 210, 255, 0.15);\r\n        border-color: var(--ct-cyan);\r\n        background: rgba(15, 18, 28, 0.95);\r\n    }\r\n    \r\n    .ct-result-card::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 3px; height: 100%;\r\n        background: var(--grad-amber);\r\n        opacity: 0;\r\n        transition: opacity 0.3s ease;\r\n    }\r\n    \r\n    .ct-result-card:hover::after { opacity: 1; }\r\n\r\n    .ct-card-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        margin-bottom: 8px;\r\n        padding-bottom: 8px;\r\n        border-bottom: 1px dashed rgba(255, 255, 255, 0.1);\r\n    }\r\n    \r\n    .ct-card-title {\r\n        font-size: 0.75rem;\r\n        font-weight: 800;\r\n        color: var(--text-muted);\r\n        text-transform: uppercase;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        transition: var(--transition-fast);\r\n    }\r\n    \r\n    .ct-card-title i { color: var(--ct-cyan); font-size: 0.9rem; transition: transform 0.3s ease; }\r\n    .ct-result-card:hover .ct-card-title { color: #fff; }\r\n    .ct-result-card:hover .ct-card-title i { transform: rotate(90deg); color: var(--ct-amber); }\r\n\r\n    .ct-card-copy-btn {\r\n        background: rgba(255, 255, 255, 0.05);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        color: var(--text-muted);\r\n        width: 32px; height: 32px;\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        justify-content: center;\r\n    }\r\n    \r\n    .ct-card-copy-btn:hover {\r\n        background: var(--ct-amber);\r\n        color: #000;\r\n        border-color: var(--ct-amber);\r\n        transform: scale(1.1);\r\n        box-shadow: 0 0 10px rgba(255, 183, 0, 0.4);\r\n    }\r\n    \r\n    .ct-card-preview {\r\n        font-size: 1.4rem;\r\n        color: #fff;\r\n        width: 100%;\r\n        text-align: left;\r\n        font-family: var(--body-font);\r\n        position: relative;\r\n        z-index: 2;\r\n        flex-grow: 1;\r\n        white-space: pre-wrap !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: anywhere !important;\r\n        box-sizing: border-box !important;\r\n        line-height: 1.5;\r\n        max-height: 140px;\r\n        overflow-y: auto;\r\n    }\r\n    \r\n    .ct-result-card:hover .ct-card-preview { color: #e0f7fa; text-shadow: 0 0 5px rgba(0, 210, 255, 0.3); }\r\n\r\n    .ct-btn-load {\r\n        background: transparent;\r\n        color: var(--text-bright);\r\n        border: 2px solid var(--ct-cyan);\r\n        padding: 14px 35px;\r\n        font-family: var(--primary-font);\r\n        font-weight: 800;\r\n        font-size: 0.9rem;\r\n        cursor: pointer;\r\n        margin-top: 30px;\r\n        text-transform: uppercase;\r\n        border-radius: 10px;\r\n        transition: var(--transition-ui);\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        box-shadow: 0 5px 15px rgba(0,0,0,0.5);\r\n    }\r\n    \r\n    .ct-btn-load:hover { \r\n        background: rgba(0, 210, 255, 0.15); \r\n        border-color: var(--ct-amber);\r\n        color: var(--ct-amber);\r\n        transform: translateY(-3px);\r\n        box-shadow: 0 0 15px rgba(255, 183, 0, 0.2);\r\n    }\r\n    \r\n    .ct-toast {\r\n        visibility: hidden;\r\n        background: rgba(0, 10, 30, 0.95);\r\n        color: #fff;\r\n        padding: 12px 24px;\r\n        position: fixed;\r\n        left: 50%; bottom: 30px;\r\n        transform: translateX(-50%) translateY(10px);\r\n        font-family: var(--primary-font);\r\n        font-weight: 800;\r\n        z-index: 10000;\r\n        border-radius: 8px;\r\n        border: 1px solid var(--ct-cyan);\r\n        border-left: 4px solid var(--ct-amber);\r\n        opacity: 0;\r\n        transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);\r\n    }\r\n    .ct-toast.show { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); }\r\n\r\n    @media (max-width: 800px) {\r\n        .ct-settings-section { flex-direction: column; }\r\n        .ct-grid-options { grid-template-columns: repeat(2, 1fr); }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        .ct-container { padding: 25px 12px !important; }\r\n        .ct-results-area { padding: 20px 12px; }\r\n        .ct-controls-wrapper { padding: 16px; }\r\n        .ct-text-input { min-height: 90px !important; font-size: 1.2rem !important; }\r\n        .ct-input-toolbar { flex-direction: column; }\r\n        .ct-preset-select { max-width: 100%; }\r\n        .ct-result-list { grid-template-columns: 1fr; }\r\n        .ct-main-title { font-size: 2rem; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"ct-tool-wrapper\" id=\"ct-custom-text-tool\">\r\n    <div class=\"ct-container ct-hero-content-wrapper\">\r\n        <h1 class=\"ct-main-title\"><i class=\"fa-solid fa-wrench\"><\/i> Custom Text Generator - Design Instantly<\/h1>\r\n        <p class=\"ct-subtitle\">Design your perfect text with modular transformations. Combine bold, gothic, glitch, and symbols to build unique styles that stay perfectly copy-safe.<\/p>\r\n        \r\n        <div class=\"ct-generator-card\">\r\n            <div class=\"ct-controls-wrapper\">\r\n                \r\n                <div class=\"ct-input-section\">\r\n                    <div class=\"ct-enhanced-input-wrapper\">\r\n                        <textarea class=\"ct-text-input\" id=\"ctInputText\" placeholder=\"Build your custom text...\"><\/textarea>\r\n                        <div class=\"ct-input-toolbar\">\r\n                            <div style=\"display:flex; gap:8px; flex-wrap:wrap;\">\r\n                                <button class=\"ct-toolbar-btn\" id=\"ctBtnPaste\"><i class=\"fa-solid fa-paste\"><\/i> Paste<\/button>\r\n                                <button class=\"ct-toolbar-btn\" id=\"ctBtnSelectAll\"><i class=\"fa-solid fa-object-group\"><\/i> Select All<\/button>\r\n                                <button class=\"ct-toolbar-btn\" id=\"ctBtnCopy\"><i class=\"fa-solid fa-copy\"><\/i> Copy Base<\/button>\r\n                            <\/div>\r\n                            <select class=\"ct-preset-select\" id=\"ctPresetSelect\">\r\n                                <option value=\"\" disabled selected>\u2728 Custom Presets<\/option>\r\n                                <option value=\"\u2605 SYSTEM ONLINE \u2605\">System Status<\/option>\r\n                                <option value=\">>> LOADING... >>>\">Loading<\/option>\r\n                                <option value=\"D R E A M S\">Dreams<\/option>\r\n                                <option value=\"[ S E C U R E ]\">Secure<\/option>\r\n                                <option value=\"\u2601  C L O U D \u2601\">Cloud<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"ct-settings-section\">\r\n                    <div>\r\n                        <div class=\"ct-panel-label\"><i class=\"fa-solid fa-layer-group\"><\/i> Base Style<\/div>\r\n                        <div class=\"ct-grid-options\">\r\n                            <button class=\"ct-option-btn mode-btn active\" data-val=\"Normal\">\r\n                                <i class=\"fa-solid fa-font\"><\/i><span>Normal<\/span>\r\n                            <\/button>\r\n                            <button class=\"ct-option-btn mode-btn\" data-val=\"Bold\">\r\n                                <i class=\"fa-solid fa-bold\"><\/i><span>Bold<\/span>\r\n                            <\/button>\r\n                            <button class=\"ct-option-btn mode-btn\" data-val=\"Gothic\">\r\n                                <i class=\"fa-solid fa-church\"><\/i><span>Gothic<\/span>\r\n                            <\/button>\r\n                            <button class=\"ct-option-btn mode-btn\" data-val=\"Italic\">\r\n                                <i class=\"fa-solid fa-italic\"><\/i><span>Italic<\/span>\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div>\r\n                        <div class=\"ct-panel-label\"><i class=\"fa-solid fa-sliders\"><\/i> Effect<\/div>\r\n                        <div class=\"ct-grid-options\">\r\n                            <button class=\"ct-option-btn style-btn active\" data-val=\"Clean\">\r\n                                <i class=\"fa-solid fa-check\"><\/i><span>Clean<\/span>\r\n                            <\/button>\r\n                            <button class=\"ct-option-btn style-btn\" data-val=\"Glitch\">\r\n                                <i class=\"fa-solid fa-bug\"><\/i><span>Glitch<\/span>\r\n                            <\/button>\r\n                            <button class=\"ct-option-btn style-btn\" data-val=\"Symbols\">\r\n                                <i class=\"fa-solid fa-icons\"><\/i><span>Symbols<\/span>\r\n                            <\/button>\r\n                            <button class=\"ct-option-btn style-btn\" data-val=\"Space\">\r\n                                <i class=\"fa-solid fa-text-width\"><\/i><span>Spaced<\/span>\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"ct-results-area\">\r\n                <div class=\"ct-result-list\" id=\"ctResultList\"><\/div>\r\n                <button class=\"ct-btn-load\" id=\"ctLoadMoreBtn\"><span>Generate More Styles<\/span> <i class=\"fa-solid fa-arrow-down\"><\/i><\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div id=\"ctToast\" class=\"ct-toast\"><i class=\"fa-solid fa-check\"><\/i> Custom Text Copied<\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    const wrapper = document.getElementById('ct-custom-text-tool');\r\n    const inputEl = wrapper.querySelector('#ctInputText');\r\n    const resultList = wrapper.querySelector('#ctResultList');\r\n    const loadMoreBtn = wrapper.querySelector('#ctLoadMoreBtn');\r\n    const toast = wrapper.querySelector('#ctToast');\r\n    \r\n    const btnPaste = wrapper.querySelector('#ctBtnPaste');\r\n    const btnSelectAll = wrapper.querySelector('#ctBtnSelectAll');\r\n    const btnCopy = wrapper.querySelector('#ctBtnCopy');\r\n    const presetSelect = wrapper.querySelector('#ctPresetSelect');\r\n\r\n    let currentMode = 'Normal';\r\n    let currentStyle = 'Clean';\r\n    let limit = 6;\r\n    const LOAD_INCREMENT = 6;\r\n\r\n    const base = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ\";\r\n    const bold = \"\ud835\udc1a\ud835\udc1b\ud835\udc1c\ud835\udc1d\ud835\udc1e\ud835\udc1f\ud835\udc20\ud835\udc21\ud835\udc22\ud835\udc23\ud835\udc24\ud835\udc25\ud835\udc26\ud835\udc27\ud835\udc28\ud835\udc29\ud835\udc2a\ud835\udc2b\ud835\udc2c\ud835\udc2d\ud835\udc2e\ud835\udc2f\ud835\udc30\ud835\udc31\ud835\udc32\ud835\udc33\ud835\udc00\ud835\udc01\ud835\udc02\ud835\udc03\ud835\udc04\ud835\udc05\ud835\udc06\ud835\udc07\ud835\udc08\ud835\udc09\ud835\udc0a\ud835\udc0b\ud835\udc0c\ud835\udc0d\ud835\udc0e\ud835\udc0f\ud835\udc10\ud835\udc11\ud835\udc12\ud835\udc13\ud835\udc14\ud835\udc15\ud835\udc16\ud835\udc17\ud835\udc18\ud835\udc19\";\r\n    const gothic = \"\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\";\r\n    const italic = \"\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\udc4d\";\r\n\r\n    const symbols = ['\u2605', '\u2606', '\u2726', '\u2727', '\u25c6', '\u25c7', '\u25cf', '\u25cb'];\r\n    const zalgoU = ['\\u030d', '\\u030e', '\\u0304', '\\u0305', '\\u0311'];\r\n    const zalgoD = ['\\u0316', '\\u0317', '\\u0318', '\\u0319', '\\u031c'];\r\n    \r\n    const rand = (max) => Math.floor(Math.random() * max);\r\n    const mapSet = { Bold: bold, Gothic: gothic, Italic: italic };\r\n\r\n    const copyToClipboard = (text, btnElement) => {\r\n        const textArea = document.createElement(\"textarea\");\r\n        textArea.value = text;\r\n        textArea.style.top = \"0\"; textArea.style.left = \"0\";\r\n        textArea.style.position = \"fixed\"; textArea.style.opacity = \"0\";\r\n        document.body.appendChild(textArea); textArea.focus(); textArea.select();\r\n        try {\r\n            document.execCommand('copy'); showToast(btnElement);\r\n        } catch(err) { if (navigator.clipboard) navigator.clipboard.writeText(text).then(() => showToast(btnElement)); }\r\n        document.body.removeChild(textArea);\r\n    };\r\n\r\n    const showToast = (btn) => {\r\n        if(btn) {\r\n            const original = btn.innerHTML;\r\n            btn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i>'; btn.style.background = 'var(--ct-amber)';\r\n            setTimeout(() => { btn.innerHTML = original; btn.style.background = ''; }, 1500);\r\n        }\r\n        toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 1500);\r\n    };\r\n\r\n    const generateConfigs = () => {\r\n        const templates = [];\r\n        const names = [\r\n            'Standard', 'Bold Mix', 'Gothic Vibe', 'Soft Italic',\r\n            'Retro Wide', 'Cyber Glitch', 'Symbol Flow', 'Wide Space',\r\n            'Bold Gothic', 'Italic Bold', 'Gothic Italic', 'Glitch Bold',\r\n            'Symbol Italic', 'Space Gothic', 'Bold Space', 'Mix Glitch'\r\n        ];\r\n        for(let i=0; i<120; i++){\r\n            templates.push({\r\n                id: `custom-${i}`,\r\n                name: names[i % names.length] + ` #${i+1}`,\r\n                icon: ['font', 'bold', 'church', 'italic', 'expand', 'bug', 'icons', 'text-width'][i % 8]\r\n            });\r\n        }\r\n        return templates.sort(() => Math.random() - 0.5);\r\n    };\r\n\r\n    const ALL_STYLES = generateConfigs();\r\n\r\n    const transformLogic = (text, mode, style, variationIndex) => {\r\n        if (!text) return \"\";\r\n        let chars = Array.from(text);\r\n        let res = chars;\r\n        \r\n        let map = base;\r\n        if (mode === 'Bold') map = bold;\r\n        else if (mode === 'Gothic') map = gothic;\r\n        else if (mode === 'Italic') map = italic;\r\n\r\n        if (mode !== 'Normal') {\r\n            res = res.map(c => {\r\n                const idx = base.indexOf(c);\r\n                return idx !== -1 ? map[idx] : c;\r\n            });\r\n        }\r\n\r\n        if (style === 'Glitch') {\r\n            res = res.map(c => (c !== ' ' && rand(4) > 1) ? c + zalgoU[rand(zalgoU.length)] + zalgoD[rand(zalgoD.length)] : c);\r\n        } else if (style === 'Symbols') {\r\n            res = res.map(c => c !== ' ' ? symbols[rand(symbols.length)] + c : c);\r\n        } else if (style === 'Space') {\r\n            return Array.from(res.join('')).join(' ');\r\n        }\r\n\r\n        return res.join('');\r\n    };\r\n\r\n    const render = () => {\r\n        resultList.innerHTML = '';\r\n        let raw = inputEl.value || \"Build your custom text...\";\r\n        const displayList = ALL_STYLES.slice(0, limit);\r\n\r\n        displayList.forEach((s, idx) => {\r\n            const out = transformLogic(raw, currentMode, currentStyle, idx);\r\n            const card = document.createElement('div');\r\n            card.className = 'ct-result-card';\r\n            card.innerHTML = `\r\n                <div class=\"ct-card-header\">\r\n                    <div class=\"ct-card-title\"><i class=\"fa-solid fa-${s.icon}\"><\/i> ${s.name}<\/div>\r\n                    <button class=\"ct-card-copy-btn\" title=\"Copy\"><i class=\"fa-regular fa-copy\"><\/i><\/button>\r\n                <\/div>\r\n                <div class=\"ct-card-preview\">${out}<\/div>\r\n            `;\r\n            const copyBtn = card.querySelector('.ct-card-copy-btn');\r\n            copyBtn.addEventListener('click', (e) => { e.preventDefault(); copyToClipboard(out, copyBtn); });\r\n            resultList.appendChild(card);\r\n        });\r\n\r\n        loadMoreBtn.style.display = limit >= ALL_STYLES.length ? 'none' : 'inline-flex';\r\n        loadMoreBtn.querySelector('span').innerText = `Generate More Styles (${Math.max(0, ALL_STYLES.length - limit)})`;\r\n    };\r\n\r\n    inputEl.addEventListener('input', render);\r\n    btnPaste.addEventListener('click', (e) => { e.preventDefault(); navigator.clipboard.readText().then(t => { inputEl.value = t; render(); }).catch(()=>inputEl.focus()); });\r\n    btnSelectAll.addEventListener('click', (e) => { e.preventDefault(); inputEl.select(); });\r\n    btnCopy.addEventListener('click', (e) => { e.preventDefault(); if(inputEl.value) copyToClipboard(inputEl.value, null); });\r\n    presetSelect.addEventListener('change', (e) => { if(e.target.value) { inputEl.value = e.target.value; render(); e.target.selectedIndex = 0; } });\r\n    loadMoreBtn.addEventListener('click', (e) => { e.preventDefault(); limit += LOAD_INCREMENT; render(); });\r\n\r\n    wrapper.querySelectorAll('.mode-btn').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            wrapper.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active'); currentMode = btn.dataset.val; limit = 6; render();\r\n        });\r\n    });\r\n\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'); currentStyle = btn.dataset.val; limit = 6; render();\r\n        });\r\n    });\r\n\r\n    render();\r\n});\r\n<\/script>\r\n<!-- END OF FILE Custom 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.4.0\/css\/all.min.css\">\r\n\r\n    <!-- SECTION 1 -->\r\n\r\n\r\n\r\n\r\n<section class=\"pg-ctg-section pg-ctg-sec1\">\r\n        <div class=\"pg-ctg-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    <section class=\"pg-ctg-section pg-ctg-sec1\">\r\n        <div class=\"pg-ctg-wrap\">\r\n            <h2 class=\"pg-ctg-heading\">What Makes This <span class=\"pg-ctg-kw\">Custom Text Generator<\/span> Different?<\/h2>\r\n            <p class=\"pg-ctg-sub\">Don't settle for boring default fonts. Our custom text generator gives you access to a massive library of unique Unicode styles, letting you personalize your digital presence without installing any external apps.<\/p>\r\n            <div class=\"pg-ctg-grid\">\r\n                <div class=\"pg-ctg-card\">\r\n                    <div class=\"pg-ctg-icon\" style=\"background:rgba(233,30,99,0.12);color:#e91e63;\"><i class=\"fa-solid fa-swatchbook\"><\/i><\/div>\r\n                    <div class=\"pg-ctg-title\">Massive Style Library<\/div>\r\n                    <p class=\"pg-ctg-desc\">From elegant cursive and bold gothic to quirky bubble letters and chaotic glitch text, our custom text generator offers dozens of distinct typographic aesthetics in one place.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card\">\r\n                    <div class=\"pg-ctg-icon\" style=\"background:rgba(156,39,176,0.12);color:#9c27b0;\"><i class=\"fa-solid fa-sliders\"><\/i><\/div>\r\n                    <div class=\"pg-ctg-title\">Total Personalization<\/div>\r\n                    <p class=\"pg-ctg-desc\">Mix and match different fonts to create a completely unique look. Combine bold keywords with italicized surrounding text to build visual hierarchy exactly how you want it.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card\">\r\n                    <div class=\"pg-ctg-icon\" style=\"background:rgba(0,212,255,0.12);color:#00d4ff;\"><i class=\"fa-solid fa-bolt\"><\/i><\/div>\r\n                    <div class=\"pg-ctg-title\">Instant Live Conversion<\/div>\r\n                    <p class=\"pg-ctg-desc\">Type your phrase and watch it transform into dozens of custom styles simultaneously. Everything is generated instantly in your browser with zero loading delays.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card\">\r\n                    <div class=\"pg-ctg-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-ctg-title\">Seamless Copy & Paste<\/div>\r\n                    <p class=\"pg-ctg-desc\">Found your perfect aesthetic? Just click to copy the raw Unicode text to your clipboard. It carries over perfectly with zero broken boxes or missing character errors.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card\">\r\n                    <div class=\"pg-ctg-icon\" style=\"background:rgba(255,152,0,0.12);color:#ff9800;\"><i class=\"fa-solid fa-globe\"><\/i><\/div>\r\n                    <div class=\"pg-ctg-title\">Universal Compatibility<\/div>\r\n                    <p class=\"pg-ctg-desc\">Because we use standard Unicode characters rather than proprietary fonts, your custom text will render flawlessly on iOS, Android, Windows, and macOS devices.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card\">\r\n                    <div class=\"pg-ctg-icon\" style=\"background:rgba(244,67,54,0.12);color:#f44336;\"><i class=\"fa-solid fa-infinity\"><\/i><\/div>\r\n                    <div class=\"pg-ctg-title\">Unlimited & 100% Free<\/div>\r\n                    <p class=\"pg-ctg-desc\">No hidden fees, no subscription tiers, and no sign-ups required. Generate as much custom text as you want for all your creative projects, completely free forever.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2 -->\r\n    <section class=\"pg-ctg-section pg-ctg-sec2\">\r\n        <div class=\"pg-ctg-wrap\">\r\n            <h2 class=\"pg-ctg-heading pg-ctg-sec2-heading\">How to Use Our <span class=\"pg-ctg-kw pg-ctg-sec2-kw\">Custom Text Generator<\/span>?<\/h2>\r\n            <p class=\"pg-ctg-sub pg-ctg-sec2-sub\">Transforming your words from plain to spectacular takes only a few seconds. No coding or design experience needed\u2014just follow these simple steps.<\/p>\r\n            <div class=\"pg-ctg-grid\">\r\n                <div class=\"pg-ctg-card pg-ctg-sec2-card\">\r\n                    <span class=\"pg-ctg-emoji\">\u2328\ufe0f<\/span>\r\n                    <div class=\"pg-ctg-title\">Step 1: Input Your Text<\/div>\r\n                    <p class=\"pg-ctg-desc\">Type or paste your standard text into the generator\u2019s input box. It instantly reads your letters, numbers, and punctuation to prepare for conversion.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card pg-ctg-sec2-card\">\r\n                    <span class=\"pg-ctg-emoji\">\ud83c\udfa8<\/span>\r\n                    <div class=\"pg-ctg-title\">Step 2: Browse the Styles<\/div>\r\n                    <p class=\"pg-ctg-desc\">Scroll through the massive list of generated outputs. You'll see your exact words translated into cursive, bold, upside-down, medieval, and futuristic aesthetics.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card pg-ctg-sec2-card\">\r\n                    <span class=\"pg-ctg-emoji\">\ud83d\udd0d<\/span>\r\n                    <div class=\"pg-ctg-title\">Step 3: Preview the Vibe<\/div>\r\n                    <p class=\"pg-ctg-desc\">Check the live preview to ensure the custom font matches the tone of your project. What you see on screen is exactly how it will look when pasted elsewhere.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card pg-ctg-sec2-card\">\r\n                    <span class=\"pg-ctg-emoji\">\ud83d\udccb<\/span>\r\n                    <div class=\"pg-ctg-title\">Step 4: Copy to Clipboard<\/div>\r\n                    <p class=\"pg-ctg-desc\">Simply hit the copy button next to your favorite custom design. The specialized Unicode symbols are safely stored on your device's clipboard.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card pg-ctg-sec2-card\">\r\n                    <span class=\"pg-ctg-emoji\">\ud83d\udcf2<\/span>\r\n                    <div class=\"pg-ctg-title\">Step 5: Paste Anywhere<\/div>\r\n                    <p class=\"pg-ctg-desc\">Navigate to your social media app, gaming profile, or document and hit paste. The custom text drops in seamlessly, bypassing standard font restrictions.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card pg-ctg-sec2-card\">\r\n                    <span class=\"pg-ctg-emoji\">\u2728<\/span>\r\n                    <div class=\"pg-ctg-title\">Step 6: Stand Out<\/div>\r\n                    <p class=\"pg-ctg-desc\">Hit publish and enjoy the attention! Custom text acts as a pattern interrupt, naturally drawing the viewer's eye and increasing your overall engagement.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3 -->\r\n    <section class=\"pg-ctg-section pg-ctg-sec3\">\r\n        <div class=\"pg-ctg-wrap\">\r\n            <h2 class=\"pg-ctg-heading\">Best Places to Use <span class=\"pg-ctg-kw\">Custom Text Generator<\/span> Results?<\/h2>\r\n            <p class=\"pg-ctg-sub\">Custom fonts are the ultimate digital flex. Whether you're a creator, gamer, or business owner, here\u2019s where our generated text makes the biggest impact.<\/p>\r\n            <div class=\"pg-ctg-grid\">\r\n                <div class=\"pg-ctg-card pg-ctg-sec3-card\">\r\n                    <div class=\"pg-ctg-icon\" style=\"background:rgba(225,48,108,0.12);color:#e1306c;\"><i class=\"fa-brands fa-instagram\"><\/i><\/div>\r\n                    <div class=\"pg-ctg-title\">Social Media Bios<\/div>\r\n                    <p class=\"pg-ctg-desc\">Instagram, TikTok, and Twitter only give you one default font. Use our custom text generator to add cursive, bold, or aesthetic lettering to your bio to express your unique personality.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card pg-ctg-sec3-card\">\r\n                    <div class=\"pg-ctg-icon\" style=\"background:rgba(88,101,242,0.12);color:#5865f2;\"><i class=\"fa-solid fa-gamepad\"><\/i><\/div>\r\n                    <div class=\"pg-ctg-title\">Gaming Usernames<\/div>\r\n                    <p class=\"pg-ctg-desc\">Create an unforgettable gamer tag. Combine special characters and unique letter weights to make your username stand out on leaderboards in games like Valorant, Roblox, or PUBG.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card pg-ctg-sec3-card\">\r\n                    <div class=\"pg-ctg-icon\" style=\"background:rgba(37,211,102,0.12);color:#25d366;\"><i class=\"fa-solid fa-comment-sms\"><\/i><\/div>\r\n                    <div class=\"pg-ctg-title\">Chat & Messaging Apps<\/div>\r\n                    <p class=\"pg-ctg-desc\">Surprise your friends in WhatsApp, Discord, or iMessage group chats. Dropping a message in upside-down text or spooky glitch fonts is a guaranteed conversation starter.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card pg-ctg-sec3-card\">\r\n                    <div class=\"pg-ctg-icon\" style=\"background:rgba(255,0,0,0.12);color:#ff0000;\"><i class=\"fa-solid fa-video\"><\/i><\/div>\r\n                    <div class=\"pg-ctg-title\">Content Titles & Descriptions<\/div>\r\n                    <p class=\"pg-ctg-desc\">YouTube algorithms love high click-through rates. Customizing a key word in your video title or description helps your content pop visually against a sea of standard text.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card pg-ctg-sec3-card\">\r\n                    <div class=\"pg-ctg-icon\" style=\"background:rgba(0,184,212,0.12);color:#00b8d4;\"><i class=\"fa-solid fa-palette\"><\/i><\/div>\r\n                    <div class=\"pg-ctg-title\">Digital Art & Aesthetics<\/div>\r\n                    <p class=\"pg-ctg-desc\">Creating mood boards, vaporwave edits, or digital journals? Our generator provides the perfect \"aesthetic\" fonts (like full-width characters) to match your specific artistic vibe.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card pg-ctg-sec3-card\">\r\n                    <div class=\"pg-ctg-icon\" style=\"background:rgba(255,193,7,0.12);color:#ffc107;\"><i class=\"fa-solid fa-store\"><\/i><\/div>\r\n                    <div class=\"pg-ctg-title\">E-Commerce & Marketing<\/div>\r\n                    <p class=\"pg-ctg-desc\">Highlight coupon codes, flash sales, or new arrivals in your promotional posts. Custom formatting ensures your most important marketing messages are never overlooked.<\/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            --ctg-primary: #e91e63;\r\n            --ctg-grad: linear-gradient(135deg, #ff007f, #7000ff, #00d4ff);\r\n            --ctg-shadow: 0 12px 30px rgba(233, 30, 99, 0.18);\r\n            --ctg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --ctg-speed: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --ctg-ff: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n\r\n        .pg-ctg-section {\r\n            width: 100%;\r\n            padding: clamp(48px, 8vw, 96px) 20px;\r\n            position: relative;\r\n            font-family: var(--ctg-ff);\r\n            color: #0a0a0a;\r\n            line-height: 1.6;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        .pg-ctg-wrap {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .pg-ctg-heading {\r\n            font-family: var(--ctg-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-ctg-kw {\r\n            color: #000000;\r\n            position: relative;\r\n        }\r\n\r\n        .pg-ctg-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(--ctg-grad);\r\n            border-radius: 3px;\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--ctg-ease);\r\n        }\r\n\r\n        .pg-ctg-section:hover .pg-ctg-kw::after {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-ctg-sub {\r\n            font-family: var(--ctg-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-ctg-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-ctg-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(--ctg-speed);\r\n            border: 1.5px solid #e0e0e8;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .pg-ctg-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(--ctg-grad);\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--ctg-ease);\r\n            z-index: 4;\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-ctg-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(233,30,99,0.10) 0%, rgba(112,0,255,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-ctg-card:hover::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-ctg-card.pg-ctg-down {\r\n            transform: translateY(-1px) scale(0.985) !important;\r\n        }\r\n\r\n        .pg-ctg-card.pg-ctg-down::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-ctg-card.pg-ctg-glow::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 1;\r\n        }\r\n\r\n        .pg-ctg-card.pg-ctg-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-ctg-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(--ctg-speed);\r\n            position: relative;\r\n            z-index: 3;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-ctg-card:hover .pg-ctg-icon {\r\n            transform: scale(1.12) rotate(-4deg);\r\n        }\r\n\r\n        .pg-ctg-card.pg-ctg-down .pg-ctg-icon {\r\n            transform: scale(1.04) rotate(0deg);\r\n        }\r\n\r\n        \/* === EMOJI === *\/\r\n        .pg-ctg-emoji {\r\n            font-size: clamp(28px, 3.5vw, 36px);\r\n            margin-bottom: clamp(12px, 1.8vw, 16px);\r\n            display: inline-block;\r\n            transition: var(--ctg-speed);\r\n            position: relative;\r\n            z-index: 3;\r\n            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-ctg-card:hover .pg-ctg-emoji {\r\n            transform: scale(1.22) rotate(-6deg);\r\n        }\r\n\r\n        .pg-ctg-card.pg-ctg-down .pg-ctg-emoji {\r\n            transform: scale(1.08) rotate(0deg);\r\n        }\r\n\r\n        \/* === TITLE === *\/\r\n        .pg-ctg-title {\r\n            font-family: var(--ctg-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-ctg-desc {\r\n            font-family: var(--ctg-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-ctg-sec1 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-ctg-sec1 .pg-ctg-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-ctg-sec1 .pg-ctg-card:hover {\r\n            border-color: var(--ctg-primary);\r\n            box-shadow: var(--ctg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 2 \u2014 requested purple gradient bg \/ white cards\r\n           ============================== *\/\r\n        .pg-ctg-sec2 {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        }\r\n\r\n        .pg-ctg-sec2 .pg-ctg-heading.pg-ctg-sec2-heading {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-ctg-sec2 .pg-ctg-kw.pg-ctg-sec2-kw {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-ctg-sec2 .pg-ctg-kw.pg-ctg-sec2-kw::after {\r\n            background: linear-gradient(90deg, #ff007f, #00d4ff, #ffffff);\r\n        }\r\n\r\n        .pg-ctg-sec2 .pg-ctg-sub.pg-ctg-sec2-sub {\r\n            color: rgba(255,255,255,0.9);\r\n        }\r\n\r\n        .pg-ctg-sec2 .pg-ctg-card.pg-ctg-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-ctg-sec2 .pg-ctg-card.pg-ctg-sec2-card::before {\r\n            background: linear-gradient(90deg, #667eea, #764ba2, #ff007f);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-ctg-sec2 .pg-ctg-card.pg-ctg-sec2-card::after {\r\n            background: radial-gradient(circle, rgba(102,126,234,0.08) 0%, rgba(118,75,162,0.04) 60%, transparent 100%);\r\n        }\r\n\r\n        .pg-ctg-sec2 .pg-ctg-card.pg-ctg-sec2-card:hover {\r\n            border-color: rgba(102,126,234,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        .pg-ctg-sec2 .pg-ctg-emoji {\r\n            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 3 \u2014 #fff bg \/ soft gray cards\r\n           ============================== *\/\r\n        .pg-ctg-sec3 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-ctg-sec3 .pg-ctg-card.pg-ctg-sec3-card {\r\n            background: #f5f6f9;\r\n            border-color: #d8dce4;\r\n            box-shadow: 0 2px 8px rgba(0,0,0,0.03);\r\n        }\r\n\r\n        .pg-ctg-sec3 .pg-ctg-card.pg-ctg-sec3-card::before {\r\n            background: var(--ctg-grad);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-ctg-sec3 .pg-ctg-card.pg-ctg-sec3-card:hover {\r\n            border-color: var(--ctg-primary);\r\n            box-shadow: var(--ctg-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-ctg-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 16px;\r\n            }\r\n            .pg-ctg-section {\r\n                padding: clamp(36px, 6vw, 64px) 16px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 540px) {\r\n            .pg-ctg-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 14px;\r\n            }\r\n            .pg-ctg-card {\r\n                padding: 22px;\r\n            }\r\n            .pg-ctg-sub {\r\n                margin-bottom: 28px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 360px) {\r\n            .pg-ctg-section {\r\n                padding: 32px 12px;\r\n            }\r\n            .pg-ctg-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-ctg-card');\r\n        cards.forEach(function(card) {\r\n            function glow(el) {\r\n                el.classList.remove('pg-ctg-glow', 'pg-ctg-glow-out');\r\n                void el.offsetWidth;\r\n                el.classList.add('pg-ctg-glow');\r\n                setTimeout(function() {\r\n                    el.classList.add('pg-ctg-glow-out');\r\n                }, 300);\r\n                setTimeout(function() {\r\n                    el.classList.remove('pg-ctg-glow', 'pg-ctg-glow-out');\r\n                }, 700);\r\n            }\r\n            card.addEventListener('mousedown', function() {\r\n                card.classList.add('pg-ctg-down');\r\n            });\r\n            card.addEventListener('mouseup', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-ctg-down');\r\n                }, 120);\r\n                glow(card);\r\n            });\r\n            card.addEventListener('mouseleave', function() {\r\n                card.classList.remove('pg-ctg-down', 'pg-ctg-glow', 'pg-ctg-glow-out');\r\n            });\r\n            card.addEventListener('touchstart', function() {\r\n                card.classList.add('pg-ctg-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-ctg-down');\r\n                }, 150);\r\n            });\r\n            card.addEventListener('touchcancel', function() {\r\n                card.classList.remove('pg-ctg-down', 'pg-ctg-glow', 'pg-ctg-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 Custom 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    .ct-tool-wrapper {\r\n        \/* TYPOGRAPHY *\/\r\n        --primary-font: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n        --body-font: \"Consolas\", \"Monaco\", \"Courier New\", monospace;\r\n        \r\n        \/* CUSTOM THEME PALETTE - BLUEPRINT & TECH (CYAN\/BLUE\/SILVER) *\/\r\n        --theme-panel: rgba(13, 15, 20, 0.90); \/* Deep Slate\/Steel *\/\r\n        --theme-border: #00d2ff; \/* Tech Cyan *\/\r\n        \r\n        \/* ACCENTS *\/\r\n        --ct-cyan: #00d2ff;\r\n        --ct-blue: #3a7bd5;\r\n        --ct-amber: #ffb700; \/* Premium Custom feel *\/\r\n        --ct-steel: #4a5568;\r\n        \r\n        --text-bright: #ffffff;\r\n        --text-muted: #a0aab5;\r\n        \r\n        \/* GRADIENTS *\/\r\n        \/* MASTER BACKGROUND AS REQUESTED *\/\r\n        --grad-master: linear-gradient(135deg, #667eea 0%, #361656 100%);\r\n        --grad-custom: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%); \/* Cyan to Blue *\/\r\n        --grad-amber: linear-gradient(135deg, #ffb700 0%, #ff8c00 100%);\r\n        --grad-dark: linear-gradient(180deg, rgba(13,15,20,0.9) 0%, rgba(5,7,10,0.98) 100%);\r\n        \r\n        \/* SHADOWS & GLOWS *\/\r\n        --glow-cyan: 0 0 15px rgba(0, 210, 255, 0.4);\r\n        --glow-blue: 0 0 20px rgba(58, 123, 213, 0.4);\r\n        --shadow-ui: 0 20px 50px rgba(0, 0, 0, 0.85);\r\n        --glass-blur: blur(16px);\r\n        \r\n        --transition-ui: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n        --transition-fast: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\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% !important;\r\n        overflow-x: hidden;\r\n        text-align: center;\r\n        \r\n        background: var(--grad-master);\r\n        background-attachment: fixed;\r\n    }\r\n\r\n    .ct-tool-wrapper * { box-sizing: border-box; }\r\n\r\n    .ct-container {\r\n        max-width: 1150px !important;\r\n        width: 100% !important;\r\n        margin: 0 auto !important;\r\n        padding: 45px 20px !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n    }\r\n\r\n    .ct-hero-content-wrapper {\r\n        z-index: 2;\r\n        padding-top: 10px;\r\n        width: 100%;\r\n    }\r\n\r\n    .ct-main-title {\r\n        font-family: var(--body-font);\r\n        font-size: 3.2rem;\r\n        font-weight: 900; \r\n        margin: 0 auto 10px auto;\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        color: #fff;\r\n        text-shadow: 0 0 15px rgba(0, 210, 255, 0.5);\r\n        max-width: 900px;\r\n        position: relative;\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n        transition: var(--transition-ui);\r\n    }\r\n    \r\n    .ct-main-title i {\r\n        color: var(--ct-cyan);\r\n        text-shadow: var(--glow-cyan);\r\n        transition: transform 0.5s ease;\r\n    }\r\n    \r\n    .ct-main-title:hover i {\r\n        transform: scale(1.2) rotate(360deg); \/* Spin like a gear *\/\r\n        color: var(--ct-amber);\r\n        text-shadow: 0 0 15px var(--ct-amber);\r\n    }\r\n    \r\n    .ct-main-title::after {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: -12px; left: 50%; transform: translateX(-50%);\r\n        width: 80px; height: 3px;\r\n        background: var(--grad-custom);\r\n        box-shadow: var(--glow-cyan);\r\n        border-radius: 2px;\r\n        transition: width 0.5s ease;\r\n    }\r\n    \r\n    .ct-main-title:hover::after { width: 70%; }\r\n\r\n    .ct-subtitle {\r\n        font-family: var(--primary-font);\r\n        font-size: 1.1rem;\r\n        color: rgba(255,255,255,0.8);\r\n        max-width: 700px;\r\n        margin: 25px auto 35px auto;\r\n        padding: 0 10px;\r\n        text-shadow: 0 2px 4px rgba(0,0,0,0.5);\r\n    }\r\n\r\n    \/* MAIN GENERATOR CARD - BLUEPRINT STYLE *\/\r\n    .ct-generator-card {\r\n        background: var(--theme-panel);\r\n        backdrop-filter: var(--glass-blur);\r\n        -webkit-backdrop-filter: var(--glass-blur);\r\n        border: 1px solid var(--ct-blue); \r\n        border-top: 3px solid var(--ct-cyan);\r\n        width: 100%;\r\n        box-shadow: var(--shadow-ui); \r\n        border-radius: 20px;\r\n        position: relative;\r\n        overflow: visible;\r\n    }\r\n\r\n    .ct-controls-wrapper {\r\n        padding: 25px;\r\n        background: var(--grad-dark);\r\n        border-bottom: 1px solid rgba(0, 210, 255, 0.15);\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 20px;\r\n        width: 100% !important;\r\n        border-radius: 20px 20px 0 0;\r\n    }\r\n\r\n    .ct-input-section {\r\n        width: 100% !important;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    \r\n    \/* INPUT BOX - CLEAR BLUEPRINT GLASS *\/\r\n    .ct-enhanced-input-wrapper {\r\n        background: rgba(0, 10, 30, 0.4);\r\n        border: 2px solid rgba(0, 210, 255, 0.3);\r\n        border-radius: 14px;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        transition: var(--transition-ui);\r\n        box-shadow: inset 0 0 15px rgba(0,0,0,0.5);\r\n        width: 100% !important;\r\n        position: relative;\r\n    }\r\n\r\n    .ct-enhanced-input-wrapper::before {\r\n        \/* Subtle grid pattern for blueprint feel *\/\r\n        content: '';\r\n        position: absolute;\r\n        inset: 0;\r\n        background-image: linear-gradient(rgba(0, 210, 255, 0.05) 1px, transparent 1px),\r\n                          linear-gradient(90deg, rgba(0, 210, 255, 0.05) 1px, transparent 1px);\r\n        background-size: 20px 20px;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .ct-enhanced-input-wrapper:focus-within {\r\n        border-color: var(--ct-cyan);\r\n        box-shadow: inset 0 0 20px rgba(0, 210, 255, 0.1), 0 0 12px rgba(0, 210, 255, 0.3);\r\n    }\r\n    \r\n    .ct-text-input {\r\n        width: 100% !important;\r\n        min-height: 130px !important;\r\n        padding: 22px !important;\r\n        background: transparent !important;\r\n        border: none !important;\r\n        color: #fff !important;\r\n        font-family: var(--body-font) !important;\r\n        font-size: 1.5rem !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        line-height: 1.5;\r\n        box-sizing: border-box !important;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n    \r\n    .ct-text-input::placeholder { color: rgba(0, 210, 255, 0.4); font-style: italic; }\r\n\r\n    .ct-input-toolbar {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n        background: rgba(0, 15, 40, 0.8);\r\n        padding: 12px 16px;\r\n        border-top: 1px solid rgba(0, 210, 255, 0.2);\r\n        width: 100% !important;\r\n        box-sizing: border-box !important;\r\n        position: relative;\r\n        z-index: 2;\r\n    }\r\n\r\n    .ct-toolbar-btn {\r\n        background: rgba(0, 210, 255, 0.08);\r\n        color: var(--ct-cyan);\r\n        border: 1px solid rgba(0, 210, 255, 0.3);\r\n        padding: 8px 12px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.7rem;\r\n        font-weight: 700;\r\n        border-radius: 10px;\r\n        cursor: pointer;\r\n        transition: var(--transition-fast);\r\n        text-transform: uppercase;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 5px;\r\n    }\r\n\r\n    .ct-toolbar-btn:hover {\r\n        background: rgba(0, 210, 255, 0.2);\r\n        color: #fff;\r\n        border-color: var(--ct-cyan);\r\n        transform: translateY(-1px);\r\n        box-shadow: 0 0 10px rgba(0, 210, 255, 0.3);\r\n    }\r\n    \r\n    .ct-preset-select {\r\n        background: rgba(255, 183, 0, 0.1);\r\n        color: var(--ct-amber);\r\n        border: 1px solid rgba(255, 183, 0, 0.3);\r\n        padding: 8px 14px;\r\n        font-family: var(--primary-font);\r\n        font-size: 0.7rem;\r\n        font-weight: 800;\r\n        border-radius: 10px;\r\n        cursor: pointer;\r\n        outline: none;\r\n        transition: var(--transition-fast);\r\n        appearance: none;\r\n        max-width: 200px;\r\n        width: 100%;\r\n        box-sizing: border-box !important;\r\n        background-image: url(\"image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='10' height='10' fill='%23ffb700' viewBox='0 0 16 16'%3E%3Cpath d='M8 12L3 6h10z'\/%3E%3C\/svg%3E\");\r\n        background-repeat: no-repeat;\r\n        background-position: right 10px center;\r\n    }\r\n    \r\n    .ct-preset-select:hover, .ct-preset-select:focus {\r\n        background-color: rgba(255, 183, 0, 0.2);\r\n        border-color: var(--ct-amber);\r\n        box-shadow: 0 0 8px rgba(255, 183, 0, 0.3);\r\n    }\r\n    \r\n    .ct-preset-select option { background: #0d1117; color: #fff; }\r\n\r\n    .ct-settings-section {\r\n        display: flex;\r\n        flex-direction: row;\r\n        gap: 16px;\r\n        width: 100% !important;\r\n    }\r\n\r\n    \/* SETTINGS BOXES - MODULE STYLES *\/\r\n    .ct-settings-section > div {\r\n        background: rgba(0, 10, 25, 0.5);\r\n        border: 1px solid rgba(58, 123, 213, 0.3);\r\n        border-left: 3px solid var(--ct-blue);\r\n        border-radius: 10px;\r\n        padding: 16px;\r\n        transition: var(--transition-ui);\r\n        flex: 1;\r\n    }\r\n    \r\n    .ct-settings-section > div:hover { \r\n        border-color: var(--ct-cyan); \r\n        border-left-color: var(--ct-cyan);\r\n        background: rgba(0, 210, 255, 0.05);\r\n    }\r\n\r\n    .ct-panel-label {\r\n        font-size: 0.75rem;\r\n        font-weight: 800;\r\n        color: var(--text-muted);\r\n        text-transform: uppercase;\r\n        letter-spacing: 1.5px;\r\n        margin-bottom: 10px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n    }\r\n    \r\n    .ct-panel-label i { color: var(--ct-amber); font-size: 0.9rem; }\r\n\r\n    .ct-grid-options {\r\n        display: grid;\r\n        gap: 8px;\r\n        grid-template-columns: repeat(4, 1fr);\r\n    }\r\n\r\n    .ct-option-btn {\r\n        background: rgba(255, 255, 255, 0.03);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        padding: 12px 4px;\r\n        color: var(--text-muted);\r\n        font-family: var(--primary-font);\r\n        font-size: 0.65rem;\r\n        font-weight: 700;\r\n        cursor: pointer;\r\n        border-radius: 8px;\r\n        transition: var(--transition-fast);\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 6px;\r\n    }\r\n    \r\n    .ct-option-btn i { font-size: 1.1rem; transition: var(--transition-ui); }\r\n    .ct-option-btn span { display: block; margin-top: 2px; }\r\n\r\n    .ct-option-btn:hover {\r\n        background: rgba(0, 210, 255, 0.15);\r\n        border-color: var(--ct-cyan);\r\n        color: #fff;\r\n        transform: translateY(-2px);\r\n        box-shadow: 0 0 10px rgba(0, 210, 255, 0.15);\r\n    }\r\n    \r\n    .ct-option-btn:hover i { transform: scale(1.2); color: var(--ct-cyan); }\r\n\r\n    .ct-option-btn.active { \r\n        background: rgba(255, 183, 0, 0.15);\r\n        color: var(--ct-amber); \r\n        border-color: var(--ct-amber);\r\n        box-shadow: 0 0 10px rgba(255, 183, 0, 0.2);\r\n    }\r\n    \r\n    .ct-option-btn.active i { color: var(--ct-amber); }\r\n\r\n    .ct-results-area { \r\n        padding: 30px 20px; \r\n        width: 100% !important;\r\n        box-sizing: border-box !important;\r\n    }\r\n    \r\n    .ct-result-list {\r\n        display: grid;\r\n        grid-template-columns: repeat(2, 1fr);\r\n        gap: 16px;\r\n        position: relative; \r\n        z-index: 2;\r\n        width: 100% !important;\r\n    }\r\n\r\n    .ct-result-card {\r\n        background: rgba(10, 12, 18, 0.9);\r\n        border: 1px solid rgba(0, 210, 255, 0.2);\r\n        border-top: 2px solid var(--ct-blue);\r\n        border-radius: 12px;\r\n        padding: 18px 22px;\r\n        transition: var(--transition-ui);\r\n        position: relative;\r\n        overflow: hidden;\r\n        display: flex;\r\n        flex-direction: column;\r\n        min-height: 120px; \r\n        box-sizing: border-box;\r\n        width: 100% !important;\r\n    }\r\n    \r\n    .ct-result-card:hover {\r\n        transform: translateY(-4px);\r\n        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 210, 255, 0.15);\r\n        border-color: var(--ct-cyan);\r\n        background: rgba(15, 18, 28, 0.95);\r\n    }\r\n    \r\n    .ct-result-card::after {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; width: 3px; height: 100%;\r\n        background: var(--grad-amber);\r\n        opacity: 0;\r\n        transition: opacity 0.3s ease;\r\n    }\r\n    \r\n    .ct-result-card:hover::after { opacity: 1; }\r\n\r\n    .ct-card-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        margin-bottom: 8px;\r\n        padding-bottom: 8px;\r\n        border-bottom: 1px dashed rgba(255, 255, 255, 0.1);\r\n    }\r\n    \r\n    .ct-card-title {\r\n        font-size: 0.75rem;\r\n        font-weight: 800;\r\n        color: var(--text-muted);\r\n        text-transform: uppercase;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n        transition: var(--transition-fast);\r\n    }\r\n    \r\n    .ct-card-title i { color: var(--ct-cyan); font-size: 0.9rem; transition: transform 0.3s ease; }\r\n    .ct-result-card:hover .ct-card-title { color: #fff; }\r\n    .ct-result-card:hover .ct-card-title i { transform: rotate(90deg); color: var(--ct-amber); }\r\n\r\n    .ct-card-copy-btn {\r\n        background: rgba(255, 255, 255, 0.05);\r\n        border: 1px solid rgba(255, 255, 255, 0.1);\r\n        color: var(--text-muted);\r\n        width: 32px; height: 32px;\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        justify-content: center;\r\n    }\r\n    \r\n    .ct-card-copy-btn:hover {\r\n        background: var(--ct-amber);\r\n        color: #000;\r\n        border-color: var(--ct-amber);\r\n        transform: scale(1.1);\r\n        box-shadow: 0 0 10px rgba(255, 183, 0, 0.4);\r\n    }\r\n    \r\n    .ct-card-preview {\r\n        font-size: 1.4rem;\r\n        color: #fff;\r\n        width: 100%;\r\n        text-align: left;\r\n        font-family: var(--body-font);\r\n        position: relative;\r\n        z-index: 2;\r\n        flex-grow: 1;\r\n        white-space: pre-wrap !important;\r\n        word-break: break-word !important;\r\n        overflow-wrap: anywhere !important;\r\n        box-sizing: border-box !important;\r\n        line-height: 1.5;\r\n        max-height: 140px;\r\n        overflow-y: auto;\r\n    }\r\n    \r\n    .ct-result-card:hover .ct-card-preview { color: #e0f7fa; text-shadow: 0 0 5px rgba(0, 210, 255, 0.3); }\r\n\r\n    .ct-btn-load {\r\n        background: transparent;\r\n        color: var(--text-bright);\r\n        border: 2px solid var(--ct-cyan);\r\n        padding: 14px 35px;\r\n        font-family: var(--primary-font);\r\n        font-weight: 800;\r\n        font-size: 0.9rem;\r\n        cursor: pointer;\r\n        margin-top: 30px;\r\n        text-transform: uppercase;\r\n        border-radius: 10px;\r\n        transition: var(--transition-ui);\r\n        display: inline-flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        box-shadow: 0 5px 15px rgba(0,0,0,0.5);\r\n    }\r\n    \r\n    .ct-btn-load:hover { \r\n        background: rgba(0, 210, 255, 0.15); \r\n        border-color: var(--ct-amber);\r\n        color: var(--ct-amber);\r\n        transform: translateY(-3px);\r\n        box-shadow: 0 0 15px rgba(255, 183, 0, 0.2);\r\n    }\r\n    \r\n    .ct-toast {\r\n        visibility: hidden;\r\n        background: rgba(0, 10, 30, 0.95);\r\n        color: #fff;\r\n        padding: 12px 24px;\r\n        position: fixed;\r\n        left: 50%; bottom: 30px;\r\n        transform: translateX(-50%) translateY(10px);\r\n        font-family: var(--primary-font);\r\n        font-weight: 800;\r\n        z-index: 10000;\r\n        border-radius: 8px;\r\n        border: 1px solid var(--ct-cyan);\r\n        border-left: 4px solid var(--ct-amber);\r\n        opacity: 0;\r\n        transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 8px;\r\n        box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);\r\n    }\r\n    .ct-toast.show { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); }\r\n\r\n    @media (max-width: 800px) {\r\n        .ct-settings-section { flex-direction: column; }\r\n        .ct-grid-options { grid-template-columns: repeat(2, 1fr); }\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n        .ct-container { padding: 25px 12px !important; }\r\n        .ct-results-area { padding: 20px 12px; }\r\n        .ct-controls-wrapper { padding: 16px; }\r\n        .ct-text-input { min-height: 90px !important; font-size: 1.2rem !important; }\r\n        .ct-input-toolbar { flex-direction: column; }\r\n        .ct-preset-select { max-width: 100%; }\r\n        .ct-result-list { grid-template-columns: 1fr; }\r\n        .ct-main-title { font-size: 2rem; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"ct-tool-wrapper\" id=\"ct-custom-text-tool\">\r\n    <div class=\"ct-container ct-hero-content-wrapper\">\r\n        <h1 class=\"ct-main-title\"><i class=\"fa-solid fa-wrench\"><\/i> Custom Text Generator - Design Instantly<\/h1>\r\n        <p class=\"ct-subtitle\">Design your perfect text with modular transformations. Combine bold, gothic, glitch, and symbols to build unique styles that stay perfectly copy-safe.<\/p>\r\n        \r\n        <div class=\"ct-generator-card\">\r\n            <div class=\"ct-controls-wrapper\">\r\n                \r\n                <div class=\"ct-input-section\">\r\n                    <div class=\"ct-enhanced-input-wrapper\">\r\n                        <textarea class=\"ct-text-input\" id=\"ctInputText\" placeholder=\"Build your custom text...\"><\/textarea>\r\n                        <div class=\"ct-input-toolbar\">\r\n                            <div style=\"display:flex; gap:8px; flex-wrap:wrap;\">\r\n                                <button class=\"ct-toolbar-btn\" id=\"ctBtnPaste\"><i class=\"fa-solid fa-paste\"><\/i> Paste<\/button>\r\n                                <button class=\"ct-toolbar-btn\" id=\"ctBtnSelectAll\"><i class=\"fa-solid fa-object-group\"><\/i> Select All<\/button>\r\n                                <button class=\"ct-toolbar-btn\" id=\"ctBtnCopy\"><i class=\"fa-solid fa-copy\"><\/i> Copy Base<\/button>\r\n                            <\/div>\r\n                            <select class=\"ct-preset-select\" id=\"ctPresetSelect\">\r\n                                <option value=\"\" disabled selected>\u2728 Custom Presets<\/option>\r\n                                <option value=\"\u2605 SYSTEM ONLINE \u2605\">System Status<\/option>\r\n                                <option value=\">>> LOADING... >>>\">Loading<\/option>\r\n                                <option value=\"D R E A M S\">Dreams<\/option>\r\n                                <option value=\"[ S E C U R E ]\">Secure<\/option>\r\n                                <option value=\"\u2601  C L O U D \u2601\">Cloud<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"ct-settings-section\">\r\n                    <div>\r\n                        <div class=\"ct-panel-label\"><i class=\"fa-solid fa-layer-group\"><\/i> Base Style<\/div>\r\n                        <div class=\"ct-grid-options\">\r\n                            <button class=\"ct-option-btn mode-btn active\" data-val=\"Normal\">\r\n                                <i class=\"fa-solid fa-font\"><\/i><span>Normal<\/span>\r\n                            <\/button>\r\n                            <button class=\"ct-option-btn mode-btn\" data-val=\"Bold\">\r\n                                <i class=\"fa-solid fa-bold\"><\/i><span>Bold<\/span>\r\n                            <\/button>\r\n                            <button class=\"ct-option-btn mode-btn\" data-val=\"Gothic\">\r\n                                <i class=\"fa-solid fa-church\"><\/i><span>Gothic<\/span>\r\n                            <\/button>\r\n                            <button class=\"ct-option-btn mode-btn\" data-val=\"Italic\">\r\n                                <i class=\"fa-solid fa-italic\"><\/i><span>Italic<\/span>\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div>\r\n                        <div class=\"ct-panel-label\"><i class=\"fa-solid fa-sliders\"><\/i> Effect<\/div>\r\n                        <div class=\"ct-grid-options\">\r\n                            <button class=\"ct-option-btn style-btn active\" data-val=\"Clean\">\r\n                                <i class=\"fa-solid fa-check\"><\/i><span>Clean<\/span>\r\n                            <\/button>\r\n                            <button class=\"ct-option-btn style-btn\" data-val=\"Glitch\">\r\n                                <i class=\"fa-solid fa-bug\"><\/i><span>Glitch<\/span>\r\n                            <\/button>\r\n                            <button class=\"ct-option-btn style-btn\" data-val=\"Symbols\">\r\n                                <i class=\"fa-solid fa-icons\"><\/i><span>Symbols<\/span>\r\n                            <\/button>\r\n                            <button class=\"ct-option-btn style-btn\" data-val=\"Space\">\r\n                                <i class=\"fa-solid fa-text-width\"><\/i><span>Spaced<\/span>\r\n                            <\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n\r\n            <div class=\"ct-results-area\">\r\n                <div class=\"ct-result-list\" id=\"ctResultList\"><\/div>\r\n                <button class=\"ct-btn-load\" id=\"ctLoadMoreBtn\"><span>Generate More Styles<\/span> <i class=\"fa-solid fa-arrow-down\"><\/i><\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div id=\"ctToast\" class=\"ct-toast\"><i class=\"fa-solid fa-check\"><\/i> Custom Text Copied<\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    const wrapper = document.getElementById('ct-custom-text-tool');\r\n    const inputEl = wrapper.querySelector('#ctInputText');\r\n    const resultList = wrapper.querySelector('#ctResultList');\r\n    const loadMoreBtn = wrapper.querySelector('#ctLoadMoreBtn');\r\n    const toast = wrapper.querySelector('#ctToast');\r\n    \r\n    const btnPaste = wrapper.querySelector('#ctBtnPaste');\r\n    const btnSelectAll = wrapper.querySelector('#ctBtnSelectAll');\r\n    const btnCopy = wrapper.querySelector('#ctBtnCopy');\r\n    const presetSelect = wrapper.querySelector('#ctPresetSelect');\r\n\r\n    let currentMode = 'Normal';\r\n    let currentStyle = 'Clean';\r\n    let limit = 6;\r\n    const LOAD_INCREMENT = 6;\r\n\r\n    const base = \"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ\";\r\n    const bold = \"\ud835\udc1a\ud835\udc1b\ud835\udc1c\ud835\udc1d\ud835\udc1e\ud835\udc1f\ud835\udc20\ud835\udc21\ud835\udc22\ud835\udc23\ud835\udc24\ud835\udc25\ud835\udc26\ud835\udc27\ud835\udc28\ud835\udc29\ud835\udc2a\ud835\udc2b\ud835\udc2c\ud835\udc2d\ud835\udc2e\ud835\udc2f\ud835\udc30\ud835\udc31\ud835\udc32\ud835\udc33\ud835\udc00\ud835\udc01\ud835\udc02\ud835\udc03\ud835\udc04\ud835\udc05\ud835\udc06\ud835\udc07\ud835\udc08\ud835\udc09\ud835\udc0a\ud835\udc0b\ud835\udc0c\ud835\udc0d\ud835\udc0e\ud835\udc0f\ud835\udc10\ud835\udc11\ud835\udc12\ud835\udc13\ud835\udc14\ud835\udc15\ud835\udc16\ud835\udc17\ud835\udc18\ud835\udc19\";\r\n    const gothic = \"\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\";\r\n    const italic = \"\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\udc4d\";\r\n\r\n    const symbols = ['\u2605', '\u2606', '\u2726', '\u2727', '\u25c6', '\u25c7', '\u25cf', '\u25cb'];\r\n    const zalgoU = ['\\u030d', '\\u030e', '\\u0304', '\\u0305', '\\u0311'];\r\n    const zalgoD = ['\\u0316', '\\u0317', '\\u0318', '\\u0319', '\\u031c'];\r\n    \r\n    const rand = (max) => Math.floor(Math.random() * max);\r\n    const mapSet = { Bold: bold, Gothic: gothic, Italic: italic };\r\n\r\n    const copyToClipboard = (text, btnElement) => {\r\n        const textArea = document.createElement(\"textarea\");\r\n        textArea.value = text;\r\n        textArea.style.top = \"0\"; textArea.style.left = \"0\";\r\n        textArea.style.position = \"fixed\"; textArea.style.opacity = \"0\";\r\n        document.body.appendChild(textArea); textArea.focus(); textArea.select();\r\n        try {\r\n            document.execCommand('copy'); showToast(btnElement);\r\n        } catch(err) { if (navigator.clipboard) navigator.clipboard.writeText(text).then(() => showToast(btnElement)); }\r\n        document.body.removeChild(textArea);\r\n    };\r\n\r\n    const showToast = (btn) => {\r\n        if(btn) {\r\n            const original = btn.innerHTML;\r\n            btn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i>'; btn.style.background = 'var(--ct-amber)';\r\n            setTimeout(() => { btn.innerHTML = original; btn.style.background = ''; }, 1500);\r\n        }\r\n        toast.classList.add('show'); setTimeout(() => toast.classList.remove('show'), 1500);\r\n    };\r\n\r\n    const generateConfigs = () => {\r\n        const templates = [];\r\n        const names = [\r\n            'Standard', 'Bold Mix', 'Gothic Vibe', 'Soft Italic',\r\n            'Retro Wide', 'Cyber Glitch', 'Symbol Flow', 'Wide Space',\r\n            'Bold Gothic', 'Italic Bold', 'Gothic Italic', 'Glitch Bold',\r\n            'Symbol Italic', 'Space Gothic', 'Bold Space', 'Mix Glitch'\r\n        ];\r\n        for(let i=0; i<120; i++){\r\n            templates.push({\r\n                id: `custom-${i}`,\r\n                name: names[i % names.length] + ` #${i+1}`,\r\n                icon: ['font', 'bold', 'church', 'italic', 'expand', 'bug', 'icons', 'text-width'][i % 8]\r\n            });\r\n        }\r\n        return templates.sort(() => Math.random() - 0.5);\r\n    };\r\n\r\n    const ALL_STYLES = generateConfigs();\r\n\r\n    const transformLogic = (text, mode, style, variationIndex) => {\r\n        if (!text) return \"\";\r\n        let chars = Array.from(text);\r\n        let res = chars;\r\n        \r\n        let map = base;\r\n        if (mode === 'Bold') map = bold;\r\n        else if (mode === 'Gothic') map = gothic;\r\n        else if (mode === 'Italic') map = italic;\r\n\r\n        if (mode !== 'Normal') {\r\n            res = res.map(c => {\r\n                const idx = base.indexOf(c);\r\n                return idx !== -1 ? map[idx] : c;\r\n            });\r\n        }\r\n\r\n        if (style === 'Glitch') {\r\n            res = res.map(c => (c !== ' ' && rand(4) > 1) ? c + zalgoU[rand(zalgoU.length)] + zalgoD[rand(zalgoD.length)] : c);\r\n        } else if (style === 'Symbols') {\r\n            res = res.map(c => c !== ' ' ? symbols[rand(symbols.length)] + c : c);\r\n        } else if (style === 'Space') {\r\n            return Array.from(res.join('')).join(' ');\r\n        }\r\n\r\n        return res.join('');\r\n    };\r\n\r\n    const render = () => {\r\n        resultList.innerHTML = '';\r\n        let raw = inputEl.value || \"Build your custom text...\";\r\n        const displayList = ALL_STYLES.slice(0, limit);\r\n\r\n        displayList.forEach((s, idx) => {\r\n            const out = transformLogic(raw, currentMode, currentStyle, idx);\r\n            const card = document.createElement('div');\r\n            card.className = 'ct-result-card';\r\n            card.innerHTML = `\r\n                <div class=\"ct-card-header\">\r\n                    <div class=\"ct-card-title\"><i class=\"fa-solid fa-${s.icon}\"><\/i> ${s.name}<\/div>\r\n                    <button class=\"ct-card-copy-btn\" title=\"Copy\"><i class=\"fa-regular fa-copy\"><\/i><\/button>\r\n                <\/div>\r\n                <div class=\"ct-card-preview\">${out}<\/div>\r\n            `;\r\n            const copyBtn = card.querySelector('.ct-card-copy-btn');\r\n            copyBtn.addEventListener('click', (e) => { e.preventDefault(); copyToClipboard(out, copyBtn); });\r\n            resultList.appendChild(card);\r\n        });\r\n\r\n        loadMoreBtn.style.display = limit >= ALL_STYLES.length ? 'none' : 'inline-flex';\r\n        loadMoreBtn.querySelector('span').innerText = `Generate More Styles (${Math.max(0, ALL_STYLES.length - limit)})`;\r\n    };\r\n\r\n    inputEl.addEventListener('input', render);\r\n    btnPaste.addEventListener('click', (e) => { e.preventDefault(); navigator.clipboard.readText().then(t => { inputEl.value = t; render(); }).catch(()=>inputEl.focus()); });\r\n    btnSelectAll.addEventListener('click', (e) => { e.preventDefault(); inputEl.select(); });\r\n    btnCopy.addEventListener('click', (e) => { e.preventDefault(); if(inputEl.value) copyToClipboard(inputEl.value, null); });\r\n    presetSelect.addEventListener('change', (e) => { if(e.target.value) { inputEl.value = e.target.value; render(); e.target.selectedIndex = 0; } });\r\n    loadMoreBtn.addEventListener('click', (e) => { e.preventDefault(); limit += LOAD_INCREMENT; render(); });\r\n\r\n    wrapper.querySelectorAll('.mode-btn').forEach(btn => {\r\n        btn.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            wrapper.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));\r\n            btn.classList.add('active'); currentMode = btn.dataset.val; limit = 6; render();\r\n        });\r\n    });\r\n\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'); currentStyle = btn.dataset.val; limit = 6; render();\r\n        });\r\n    });\r\n\r\n    render();\r\n});\r\n<\/script>\r\n<!-- END OF FILE Custom 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.4.0\/css\/all.min.css\">\r\n\r\n    <!-- SECTION 1 -->\r\n\r\n\r\n\r\n\r\n<section class=\"pg-ctg-section pg-ctg-sec1\">\r\n        <div class=\"pg-ctg-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    <section class=\"pg-ctg-section pg-ctg-sec1\">\r\n        <div class=\"pg-ctg-wrap\">\r\n            <h2 class=\"pg-ctg-heading\">What Makes This <span class=\"pg-ctg-kw\">Custom Text Generator<\/span> Different?<\/h2>\r\n            <p class=\"pg-ctg-sub\">Don't settle for boring default fonts. Our custom text generator gives you access to a massive library of unique Unicode styles, letting you personalize your digital presence without installing any external apps.<\/p>\r\n            <div class=\"pg-ctg-grid\">\r\n                <div class=\"pg-ctg-card\">\r\n                    <div class=\"pg-ctg-icon\" style=\"background:rgba(233,30,99,0.12);color:#e91e63;\"><i class=\"fa-solid fa-swatchbook\"><\/i><\/div>\r\n                    <div class=\"pg-ctg-title\">Massive Style Library<\/div>\r\n                    <p class=\"pg-ctg-desc\">From elegant cursive and bold gothic to quirky bubble letters and chaotic glitch text, our custom text generator offers dozens of distinct typographic aesthetics in one place.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card\">\r\n                    <div class=\"pg-ctg-icon\" style=\"background:rgba(156,39,176,0.12);color:#9c27b0;\"><i class=\"fa-solid fa-sliders\"><\/i><\/div>\r\n                    <div class=\"pg-ctg-title\">Total Personalization<\/div>\r\n                    <p class=\"pg-ctg-desc\">Mix and match different fonts to create a completely unique look. Combine bold keywords with italicized surrounding text to build visual hierarchy exactly how you want it.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card\">\r\n                    <div class=\"pg-ctg-icon\" style=\"background:rgba(0,212,255,0.12);color:#00d4ff;\"><i class=\"fa-solid fa-bolt\"><\/i><\/div>\r\n                    <div class=\"pg-ctg-title\">Instant Live Conversion<\/div>\r\n                    <p class=\"pg-ctg-desc\">Type your phrase and watch it transform into dozens of custom styles simultaneously. Everything is generated instantly in your browser with zero loading delays.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card\">\r\n                    <div class=\"pg-ctg-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-ctg-title\">Seamless Copy & Paste<\/div>\r\n                    <p class=\"pg-ctg-desc\">Found your perfect aesthetic? Just click to copy the raw Unicode text to your clipboard. It carries over perfectly with zero broken boxes or missing character errors.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card\">\r\n                    <div class=\"pg-ctg-icon\" style=\"background:rgba(255,152,0,0.12);color:#ff9800;\"><i class=\"fa-solid fa-globe\"><\/i><\/div>\r\n                    <div class=\"pg-ctg-title\">Universal Compatibility<\/div>\r\n                    <p class=\"pg-ctg-desc\">Because we use standard Unicode characters rather than proprietary fonts, your custom text will render flawlessly on iOS, Android, Windows, and macOS devices.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card\">\r\n                    <div class=\"pg-ctg-icon\" style=\"background:rgba(244,67,54,0.12);color:#f44336;\"><i class=\"fa-solid fa-infinity\"><\/i><\/div>\r\n                    <div class=\"pg-ctg-title\">Unlimited & 100% Free<\/div>\r\n                    <p class=\"pg-ctg-desc\">No hidden fees, no subscription tiers, and no sign-ups required. Generate as much custom text as you want for all your creative projects, completely free forever.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2 -->\r\n    <section class=\"pg-ctg-section pg-ctg-sec2\">\r\n        <div class=\"pg-ctg-wrap\">\r\n            <h2 class=\"pg-ctg-heading pg-ctg-sec2-heading\">How to Use Our <span class=\"pg-ctg-kw pg-ctg-sec2-kw\">Custom Text Generator<\/span>?<\/h2>\r\n            <p class=\"pg-ctg-sub pg-ctg-sec2-sub\">Transforming your words from plain to spectacular takes only a few seconds. No coding or design experience needed\u2014just follow these simple steps.<\/p>\r\n            <div class=\"pg-ctg-grid\">\r\n                <div class=\"pg-ctg-card pg-ctg-sec2-card\">\r\n                    <span class=\"pg-ctg-emoji\">\u2328\ufe0f<\/span>\r\n                    <div class=\"pg-ctg-title\">Step 1: Input Your Text<\/div>\r\n                    <p class=\"pg-ctg-desc\">Type or paste your standard text into the generator\u2019s input box. It instantly reads your letters, numbers, and punctuation to prepare for conversion.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card pg-ctg-sec2-card\">\r\n                    <span class=\"pg-ctg-emoji\">\ud83c\udfa8<\/span>\r\n                    <div class=\"pg-ctg-title\">Step 2: Browse the Styles<\/div>\r\n                    <p class=\"pg-ctg-desc\">Scroll through the massive list of generated outputs. You'll see your exact words translated into cursive, bold, upside-down, medieval, and futuristic aesthetics.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card pg-ctg-sec2-card\">\r\n                    <span class=\"pg-ctg-emoji\">\ud83d\udd0d<\/span>\r\n                    <div class=\"pg-ctg-title\">Step 3: Preview the Vibe<\/div>\r\n                    <p class=\"pg-ctg-desc\">Check the live preview to ensure the custom font matches the tone of your project. What you see on screen is exactly how it will look when pasted elsewhere.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card pg-ctg-sec2-card\">\r\n                    <span class=\"pg-ctg-emoji\">\ud83d\udccb<\/span>\r\n                    <div class=\"pg-ctg-title\">Step 4: Copy to Clipboard<\/div>\r\n                    <p class=\"pg-ctg-desc\">Simply hit the copy button next to your favorite custom design. The specialized Unicode symbols are safely stored on your device's clipboard.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card pg-ctg-sec2-card\">\r\n                    <span class=\"pg-ctg-emoji\">\ud83d\udcf2<\/span>\r\n                    <div class=\"pg-ctg-title\">Step 5: Paste Anywhere<\/div>\r\n                    <p class=\"pg-ctg-desc\">Navigate to your social media app, gaming profile, or document and hit paste. The custom text drops in seamlessly, bypassing standard font restrictions.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card pg-ctg-sec2-card\">\r\n                    <span class=\"pg-ctg-emoji\">\u2728<\/span>\r\n                    <div class=\"pg-ctg-title\">Step 6: Stand Out<\/div>\r\n                    <p class=\"pg-ctg-desc\">Hit publish and enjoy the attention! Custom text acts as a pattern interrupt, naturally drawing the viewer's eye and increasing your overall engagement.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 3 -->\r\n    <section class=\"pg-ctg-section pg-ctg-sec3\">\r\n        <div class=\"pg-ctg-wrap\">\r\n            <h2 class=\"pg-ctg-heading\">Best Places to Use <span class=\"pg-ctg-kw\">Custom Text Generator<\/span> Results?<\/h2>\r\n            <p class=\"pg-ctg-sub\">Custom fonts are the ultimate digital flex. Whether you're a creator, gamer, or business owner, here\u2019s where our generated text makes the biggest impact.<\/p>\r\n            <div class=\"pg-ctg-grid\">\r\n                <div class=\"pg-ctg-card pg-ctg-sec3-card\">\r\n                    <div class=\"pg-ctg-icon\" style=\"background:rgba(225,48,108,0.12);color:#e1306c;\"><i class=\"fa-brands fa-instagram\"><\/i><\/div>\r\n                    <div class=\"pg-ctg-title\">Social Media Bios<\/div>\r\n                    <p class=\"pg-ctg-desc\">Instagram, TikTok, and Twitter only give you one default font. Use our custom text generator to add cursive, bold, or aesthetic lettering to your bio to express your unique personality.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card pg-ctg-sec3-card\">\r\n                    <div class=\"pg-ctg-icon\" style=\"background:rgba(88,101,242,0.12);color:#5865f2;\"><i class=\"fa-solid fa-gamepad\"><\/i><\/div>\r\n                    <div class=\"pg-ctg-title\">Gaming Usernames<\/div>\r\n                    <p class=\"pg-ctg-desc\">Create an unforgettable gamer tag. Combine special characters and unique letter weights to make your username stand out on leaderboards in games like Valorant, Roblox, or PUBG.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card pg-ctg-sec3-card\">\r\n                    <div class=\"pg-ctg-icon\" style=\"background:rgba(37,211,102,0.12);color:#25d366;\"><i class=\"fa-solid fa-comment-sms\"><\/i><\/div>\r\n                    <div class=\"pg-ctg-title\">Chat & Messaging Apps<\/div>\r\n                    <p class=\"pg-ctg-desc\">Surprise your friends in WhatsApp, Discord, or iMessage group chats. Dropping a message in upside-down text or spooky glitch fonts is a guaranteed conversation starter.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card pg-ctg-sec3-card\">\r\n                    <div class=\"pg-ctg-icon\" style=\"background:rgba(255,0,0,0.12);color:#ff0000;\"><i class=\"fa-solid fa-video\"><\/i><\/div>\r\n                    <div class=\"pg-ctg-title\">Content Titles & Descriptions<\/div>\r\n                    <p class=\"pg-ctg-desc\">YouTube algorithms love high click-through rates. Customizing a key word in your video title or description helps your content pop visually against a sea of standard text.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card pg-ctg-sec3-card\">\r\n                    <div class=\"pg-ctg-icon\" style=\"background:rgba(0,184,212,0.12);color:#00b8d4;\"><i class=\"fa-solid fa-palette\"><\/i><\/div>\r\n                    <div class=\"pg-ctg-title\">Digital Art & Aesthetics<\/div>\r\n                    <p class=\"pg-ctg-desc\">Creating mood boards, vaporwave edits, or digital journals? Our generator provides the perfect \"aesthetic\" fonts (like full-width characters) to match your specific artistic vibe.<\/p>\r\n                <\/div>\r\n                <div class=\"pg-ctg-card pg-ctg-sec3-card\">\r\n                    <div class=\"pg-ctg-icon\" style=\"background:rgba(255,193,7,0.12);color:#ffc107;\"><i class=\"fa-solid fa-store\"><\/i><\/div>\r\n                    <div class=\"pg-ctg-title\">E-Commerce & Marketing<\/div>\r\n                    <p class=\"pg-ctg-desc\">Highlight coupon codes, flash sales, or new arrivals in your promotional posts. Custom formatting ensures your most important marketing messages are never overlooked.<\/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            --ctg-primary: #e91e63;\r\n            --ctg-grad: linear-gradient(135deg, #ff007f, #7000ff, #00d4ff);\r\n            --ctg-shadow: 0 12px 30px rgba(233, 30, 99, 0.18);\r\n            --ctg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --ctg-speed: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            --ctg-ff: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n        }\r\n\r\n        .pg-ctg-section {\r\n            width: 100%;\r\n            padding: clamp(48px, 8vw, 96px) 20px;\r\n            position: relative;\r\n            font-family: var(--ctg-ff);\r\n            color: #0a0a0a;\r\n            line-height: 1.6;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        .pg-ctg-wrap {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n        }\r\n\r\n        .pg-ctg-heading {\r\n            font-family: var(--ctg-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-ctg-kw {\r\n            color: #000000;\r\n            position: relative;\r\n        }\r\n\r\n        .pg-ctg-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(--ctg-grad);\r\n            border-radius: 3px;\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--ctg-ease);\r\n        }\r\n\r\n        .pg-ctg-section:hover .pg-ctg-kw::after {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-ctg-sub {\r\n            font-family: var(--ctg-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-ctg-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-ctg-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(--ctg-speed);\r\n            border: 1.5px solid #e0e0e8;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .pg-ctg-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(--ctg-grad);\r\n            transform: scaleX(0);\r\n            transform-origin: left;\r\n            transition: transform 0.4s var(--ctg-ease);\r\n            z-index: 4;\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-ctg-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(233,30,99,0.10) 0%, rgba(112,0,255,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-ctg-card:hover::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-ctg-card.pg-ctg-down {\r\n            transform: translateY(-1px) scale(0.985) !important;\r\n        }\r\n\r\n        .pg-ctg-card.pg-ctg-down::before {\r\n            transform: scaleX(1);\r\n        }\r\n\r\n        .pg-ctg-card.pg-ctg-glow::after {\r\n            width: 320px;\r\n            height: 320px;\r\n            opacity: 1;\r\n        }\r\n\r\n        .pg-ctg-card.pg-ctg-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-ctg-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(--ctg-speed);\r\n            position: relative;\r\n            z-index: 3;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-ctg-card:hover .pg-ctg-icon {\r\n            transform: scale(1.12) rotate(-4deg);\r\n        }\r\n\r\n        .pg-ctg-card.pg-ctg-down .pg-ctg-icon {\r\n            transform: scale(1.04) rotate(0deg);\r\n        }\r\n\r\n        \/* === EMOJI === *\/\r\n        .pg-ctg-emoji {\r\n            font-size: clamp(28px, 3.5vw, 36px);\r\n            margin-bottom: clamp(12px, 1.8vw, 16px);\r\n            display: inline-block;\r\n            transition: var(--ctg-speed);\r\n            position: relative;\r\n            z-index: 3;\r\n            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .pg-ctg-card:hover .pg-ctg-emoji {\r\n            transform: scale(1.22) rotate(-6deg);\r\n        }\r\n\r\n        .pg-ctg-card.pg-ctg-down .pg-ctg-emoji {\r\n            transform: scale(1.08) rotate(0deg);\r\n        }\r\n\r\n        \/* === TITLE === *\/\r\n        .pg-ctg-title {\r\n            font-family: var(--ctg-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-ctg-desc {\r\n            font-family: var(--ctg-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-ctg-sec1 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-ctg-sec1 .pg-ctg-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-ctg-sec1 .pg-ctg-card:hover {\r\n            border-color: var(--ctg-primary);\r\n            box-shadow: var(--ctg-shadow);\r\n            transform: translateY(-5px);\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 2 \u2014 requested purple gradient bg \/ white cards\r\n           ============================== *\/\r\n        .pg-ctg-sec2 {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n        }\r\n\r\n        .pg-ctg-sec2 .pg-ctg-heading.pg-ctg-sec2-heading {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-ctg-sec2 .pg-ctg-kw.pg-ctg-sec2-kw {\r\n            color: #ffffff;\r\n        }\r\n\r\n        .pg-ctg-sec2 .pg-ctg-kw.pg-ctg-sec2-kw::after {\r\n            background: linear-gradient(90deg, #ff007f, #00d4ff, #ffffff);\r\n        }\r\n\r\n        .pg-ctg-sec2 .pg-ctg-sub.pg-ctg-sec2-sub {\r\n            color: rgba(255,255,255,0.9);\r\n        }\r\n\r\n        .pg-ctg-sec2 .pg-ctg-card.pg-ctg-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-ctg-sec2 .pg-ctg-card.pg-ctg-sec2-card::before {\r\n            background: linear-gradient(90deg, #667eea, #764ba2, #ff007f);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-ctg-sec2 .pg-ctg-card.pg-ctg-sec2-card::after {\r\n            background: radial-gradient(circle, rgba(102,126,234,0.08) 0%, rgba(118,75,162,0.04) 60%, transparent 100%);\r\n        }\r\n\r\n        .pg-ctg-sec2 .pg-ctg-card.pg-ctg-sec2-card:hover {\r\n            border-color: rgba(102,126,234,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        .pg-ctg-sec2 .pg-ctg-emoji {\r\n            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));\r\n        }\r\n\r\n        \/* ==============================\r\n           SECTION 3 \u2014 #fff bg \/ soft gray cards\r\n           ============================== *\/\r\n        .pg-ctg-sec3 {\r\n            background: #ffffff;\r\n        }\r\n\r\n        .pg-ctg-sec3 .pg-ctg-card.pg-ctg-sec3-card {\r\n            background: #f5f6f9;\r\n            border-color: #d8dce4;\r\n            box-shadow: 0 2px 8px rgba(0,0,0,0.03);\r\n        }\r\n\r\n        .pg-ctg-sec3 .pg-ctg-card.pg-ctg-sec3-card::before {\r\n            background: var(--ctg-grad);\r\n            border-radius: 16px 16px 0 0;\r\n        }\r\n\r\n        .pg-ctg-sec3 .pg-ctg-card.pg-ctg-sec3-card:hover {\r\n            border-color: var(--ctg-primary);\r\n            box-shadow: var(--ctg-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-ctg-grid {\r\n                grid-template-columns: repeat(2, 1fr);\r\n                gap: 16px;\r\n            }\r\n            .pg-ctg-section {\r\n                padding: clamp(36px, 6vw, 64px) 16px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 540px) {\r\n            .pg-ctg-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 14px;\r\n            }\r\n            .pg-ctg-card {\r\n                padding: 22px;\r\n            }\r\n            .pg-ctg-sub {\r\n                margin-bottom: 28px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 360px) {\r\n            .pg-ctg-section {\r\n                padding: 32px 12px;\r\n            }\r\n            .pg-ctg-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-ctg-card');\r\n        cards.forEach(function(card) {\r\n            function glow(el) {\r\n                el.classList.remove('pg-ctg-glow', 'pg-ctg-glow-out');\r\n                void el.offsetWidth;\r\n                el.classList.add('pg-ctg-glow');\r\n                setTimeout(function() {\r\n                    el.classList.add('pg-ctg-glow-out');\r\n                }, 300);\r\n                setTimeout(function() {\r\n                    el.classList.remove('pg-ctg-glow', 'pg-ctg-glow-out');\r\n                }, 700);\r\n            }\r\n            card.addEventListener('mousedown', function() {\r\n                card.classList.add('pg-ctg-down');\r\n            });\r\n            card.addEventListener('mouseup', function() {\r\n                setTimeout(function() {\r\n                    card.classList.remove('pg-ctg-down');\r\n                }, 120);\r\n                glow(card);\r\n            });\r\n            card.addEventListener('mouseleave', function() {\r\n                card.classList.remove('pg-ctg-down', 'pg-ctg-glow', 'pg-ctg-glow-out');\r\n            });\r\n            card.addEventListener('touchstart', function() {\r\n                card.classList.add('pg-ctg-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-ctg-down');\r\n                }, 150);\r\n            });\r\n            card.addEventListener('touchcancel', function() {\r\n                card.classList.remove('pg-ctg-down', 'pg-ctg-glow', 'pg-ctg-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-546","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>Generatore di testo personalizzato \u2013 Progetta all&#039;istante<\/title>\n<meta name=\"description\" content=\"Crea testi personalizzati unici con il nostro generatore di testo personalizzato gratuito. Personalizza qualsiasi testo con caratteri e stili accattivanti: copia e incolla in pochi secondi.\" \/>\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\/it\/custom-text-generator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Custom Text Generator \u2013 Design Instantly\" \/>\n<meta property=\"og:description\" content=\"Create unique custom text with our free Custom Text Generator. Personalize any text with cool fonts and styles \u2014 copy &amp; paste in seconds.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/onlinetexteditor.io\/custom-text-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"Online Text Editor\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-06T08:51:31+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\\\/custom-text-generator\\\/\",\"url\":\"https:\\\/\\\/onlinetexteditor.io\\\/custom-text-generator\\\/\",\"name\":\"Custom Text Generator \u2013 Design Instantly\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/#website\"},\"datePublished\":\"2026-03-28T00:00:12+00:00\",\"dateModified\":\"2026-04-06T08:51:31+00:00\",\"description\":\"Create unique custom text with our free Custom Text Generator. Personalize any text with cool fonts and styles \u2014 copy & paste in seconds.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/custom-text-generator\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/onlinetexteditor.io\\\/custom-text-generator\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/onlinetexteditor.io\\\/custom-text-generator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/onlinetexteditor.io\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Custom Text Generator \u2013 Design 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":"Generatore di testo personalizzato \u2013 Progetta all&#39;istante","description":"Crea testi personalizzati unici con il nostro generatore di testo personalizzato gratuito. Personalizza qualsiasi testo con caratteri e stili accattivanti: copia e incolla in pochi secondi.","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\/it\/custom-text-generator\/","og_locale":"en_US","og_type":"article","og_title":"Custom Text Generator \u2013 Design Instantly","og_description":"Create unique custom text with our free Custom Text Generator. Personalize any text with cool fonts and styles \u2014 copy & paste in seconds.","og_url":"https:\/\/onlinetexteditor.io\/custom-text-generator\/","og_site_name":"Online Text Editor","article_modified_time":"2026-04-06T08:51:31+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/onlinetexteditor.io\/custom-text-generator\/","url":"https:\/\/onlinetexteditor.io\/custom-text-generator\/","name":"Custom Text Generator \u2013 Design Instantly","isPartOf":{"@id":"https:\/\/onlinetexteditor.io\/#website"},"datePublished":"2026-03-28T00:00:12+00:00","dateModified":"2026-04-06T08:51:31+00:00","description":"Create unique custom text with our free Custom Text Generator. Personalize any text with cool fonts and styles \u2014 copy & paste in seconds.","breadcrumb":{"@id":"https:\/\/onlinetexteditor.io\/custom-text-generator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/onlinetexteditor.io\/custom-text-generator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/onlinetexteditor.io\/custom-text-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/onlinetexteditor.io\/"},{"@type":"ListItem","position":2,"name":"Custom Text Generator \u2013 Design 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\/it\/wp-json\/wp\/v2\/pages\/546","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/comments?post=546"}],"version-history":[{"count":3,"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/pages\/546\/revisions"}],"predecessor-version":[{"id":549,"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/pages\/546\/revisions\/549"}],"wp:attachment":[{"href":"https:\/\/onlinetexteditor.io\/it\/wp-json\/wp\/v2\/media?parent=546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}